/*
 Theme Name:   eBase
 Theme URI:    https://github.com/Angkul/ehowme-ebase
 Description:  Hello Elementor child theme with sticky header, mega menu, off-canvas mobile menu, and multi-language support. Built by eHowMe.
 Author:       eHowMe
 Author URI:   https://www.ehowme.com/
 Template:     hello-elementor
 Version:      1.2.0
 License:      GNU General Public License v3 or later
 License URI:  http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  ehowme-ebase
 Tags:         custom-header, multilanguage, polylang, wpml
 GitHub Theme URI: Angkul/ehowme-ebase
*/

/* Stops the browser's native elastic "rubber-band" bounce when a user
   scrolls up past the very top (common on trackpads/mobile). That bounce
   briefly reveals the raw white canvas behind the document, which is the
   white flash reported when scrolling back up to the top. */
html {
	overscroll-behavior-y: none;
}

/* =============================================
   CUSTOM HEADER STYLES
   ============================================= */

.site-header-custom {
	/* Sticky is opt-in via .is-sticky (Theme Options → Sticky Header).
	   Base is relative — it still works as a positioning context for
	   the dropdown/off-canvas menus, but scrolls away with the page
	   when the option is off. (Was unconditionally sticky here, which
	   made the Sticky Header toggle a no-op.) */
	position: relative;
	top: 0;
	z-index: 9999;
	/* height + border-box: the 1px border-bottom is drawn INSIDE this
	   height instead of adding to it, so the header's true rendered
	   height always exactly equals --header-height — the same value
	   #content's negative margin uses below. Without this, the header
	   was 1px taller than --header-height, leaving a 1px sliver of the
	   page background showing as a white line under the header. */
	height: var(--header-height, 70px);
	box-sizing: border-box;
	background-color: var(--header-bg-color, #ffffff);
	border-bottom: 1px solid var(--header-border-color, #e5e5e5);
	transition: background-color 0.3s ease, border-bottom-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header-custom.is-sticky {
	position: sticky;
}

.site-header-custom.scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* WP admin bar is position:fixed at top:0, completely independent of
   our sticky header (which is also top:0). When logged in, once the
   header sticks, it lands right under/behind the admin bar and gets
   clipped. Offset sticky "top" by the admin bar's height so the header
   sticks just below it instead. Only applies when logged in — normal
   visitors (no admin bar) are unaffected. */
body.admin-bar .site-header-custom.is-sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* On mobile, WP core switches #wpadminbar to `position: absolute`
   (it scrolls away with the page instead of staying fixed), so the
   header doesn't need to reserve space for it — undo the desktop
   offset above and stick back to top:0. */
@media screen and (max-width: 782px) {
	body.admin-bar .site-header-custom.is-sticky {
		top: 0;
	}
}

/* Transparent header — only while at the top of the page.
   .scrolled is toggled by assets/js/header.js once the user scrolls.
   Header STAYS position:sticky (same as the normal header — proven,
   reflow-free). Instead of yanking the header out of flow on scroll
   (which we tried first, via a spacer div that resized dynamically —
   that caused a real, visible reflow/jump of the whole page every
   time the scroll threshold was crossed), we pull the page's main
   content up under the header ONCE, with a static negative margin
   (see body.hec-transparent-header #content below). Nothing about
   layout changes while scrolling — only background-color/text-color
   fade, so there's nothing left to jerk or reflow. */
.site-header-custom.is-transparent {
	background-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* Pulls the page's main content up underneath the transparent header
   (one-time, static — not scroll-linked) so the header overlays
   whatever's at the top of the page (e.g. a hero image) instead of
   sitting in front of blank space. Body class is added by
   hec_body_lang_class() in functions.php.

   Targets "whatever comes right after the header" via the adjacent-
   sibling combinator instead of a hardcoded #content — #content only
   exists on the handful of templates that go through the theme's own
   files under template-parts/ (template-parts/single.php etc.). Any page
   rendered by Elementor itself outputs its own wrapper instead
   (e.g. <div class="elementor elementor-23">) with no #content in
   sight, so a hardcoded #content selector silently never matches
   there and the "transparent" header just sits on blank white space
   instead of overlapping the hero.

   BUT the header's literal next sibling isn't always the real content
   either: when the mobile menu style isn't "dropdown",
   template-parts/custom-header.php also emits #hec-drawer-overlay
   (+ #hec-offcanvas, if the assigned menu actually has items) right
   after </header> — both fixed-position elements, not the page
   content. The three rules below cover every combination header.php
   can actually produce: no overlay markup at all, overlay with no
   off-canvas panel (empty/unset mobile menu), and overlay + panel
   together — in each case landing on the real first content element. */
body.hec-transparent-header .site-header-custom + *:not(#hec-drawer-overlay),
body.hec-transparent-header .site-header-custom + #hec-drawer-overlay + *:not(#hec-offcanvas),
body.hec-transparent-header .site-header-custom + #hec-drawer-overlay + #hec-offcanvas + * {
	margin-top: calc(-1 * var(--header-height, 70px));
}

.site-header-custom.is-transparent .site-title-text,
.site-header-custom.is-transparent .nav-link {
	color: var(--header-transparent-nav-color, #ffffff);
}

.site-header-custom.is-transparent .mobile-menu-toggle span {
	background-color: var(--header-transparent-nav-color, #ffffff);
}

.site-header-custom.is-transparent.scrolled {
	background-color: var(--header-bg-color, #ffffff);
	border-bottom-color: var(--header-border-color, #e5e5e5);
}

.site-header-custom.is-transparent.scrolled .site-title-text,
.site-header-custom.is-transparent.scrolled .nav-link {
	color: var(--header-nav-color, #333333);
}

.site-header-custom.is-transparent.scrolled .mobile-menu-toggle span {
	background-color: var(--header-nav-color, #333333);
}

/* CSS Grid instead of flex. Two iterations before this one:
   1) equal flex:1 on all three zones forced Center into exactly 1/3 of
      the row regardless of the menu's real width, so anything wider
      overflowed straight out of its box into its neighbours.
   2) equal minmax(0,1fr) left/right columns fixed the overflow, but
      Left/Right columns were centered as EQUAL-WIDTH boxes, not by
      their actual visible content — since the logo is much narrower
      than the button+lang cluster on the right, the menu ended up
      visually closer to the buttons than to the logo (looked crowded
      even though nothing overlapped).
   Now: Left/Right are "auto" — sized to exactly fit the logo and the
   button/lang cluster, nothing more (this is the "logo = fit content"
   behavior). Center is the one flexible minmax(0,1fr) track and gets
   ALL the leftover space between those two fixed-size groups; with
   .header-zone--center{justify-content:center} it's centered WITHIN
   that leftover space, which is the same as being centered between the
   logo and the buttons, not between the header's outer edges. */
.header-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	max-width: var(--header-max-width, 1200px);
	margin: 0 auto;
	padding: 0 20px;
	height: 100%; /* fills whatever height .site-header-custom has — single source of truth */
	/* Containing block for .mega-panel (position:absolute) — see the
	   comment where .nav-item--mega used to have "position: relative"
	   for why this moved here (mega panel overflowing off the left
	   edge of the viewport on "squeezed desktop" widths). */
	position: relative;
}

/* Header Layout zones (Left / Center / Right) — Theme Options → Header
   Layout controls which element (logo, menu, lang switcher, buttons, and
   now the Mobile Menu Toggle itself, since it's a draggable zone element
   too — see inc/header-layout.php) goes in which zone and in what order.
   Each zone is exactly one of the 3 grid columns above. */
.header-zone {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0; /* let long menus/labels shrink instead of overflowing the row */
}
.header-zone--left    { justify-content: flex-start; }
/* Centered WITHIN its own column, and that column is now exactly the
   leftover space between the (fit-content) Left and Right columns —
   see .header-inner comment above — so this reads as "centered between
   logo and buttons," not "centered on the whole header." No extra
   asymmetric padding needed anymore; .header-inner's 28px grid gap
   already gives equal breathing room on both sides. */
.header-zone--center  { justify-content: center; min-width: 0; }
.header-zone--right   { justify-content: flex-end; }

/* Holds elements that Desktop's layout doesn't use but Tablet/Mobile's does
   (see hec_render_header_zones_responsive() in inc/header-layout.php) —
   assets/js/header.js moves their contents into the real zones for the
   current breakpoint on load/resize. Stays hidden as a safe fallback if
   JS is ever disabled, instead of dumping raw unstyled items on screen. */
.hec-zone-pool { display: none; }

/* Logo */
.header-logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.header-logo img {
	max-height: var(--header-logo-height, 50px);
	width: auto;
}

.header-logo .site-title-text {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--header-logo-color, #333333);
	text-decoration: none;
}

/* Navigation */
.header-nav {
	display: flex;
	align-items: center;
}

/* Only the TOP-level <ul> (wp_nav_menu's own root list, a direct
   child of <nav class="header-nav">) should lay out horizontally.
   This used to be the broad "`.header-nav ul`" descendant selector,
   which also matched every nested dropdown <ul class="nav-dropdown">
   (including a 2nd-level nested one) — dropdown submenus were
   rendering as a horizontal row instead of a vertical list because of
   this. Scope the flex row to `>` (direct child) only; nested lists
   reset below stay block-level (vertical) by default. */
.header-nav > ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.header-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-nav ul li {
	position: relative;
}

/* :not(.mega-elementor-wrap a) — when a mega menu item is built with
   an Elementor template (see HEC_Nav_Walker::start_el() /
   .mega-elementor-wrap in header-functions.php), Elementor's own
   widgets frequently render their own <ul><li><a> markup (icon
   lists, nav menus, ...) INSIDE that wrapper, which lives inside
   .header-nav. Being a plain descendant selector, this rule used to
   match those too and leak padding/color/font-size onto them even
   when the Elementor container itself was set to 0 padding — the
   exclusion keeps this rule scoped to our own nav markup
   (.nav-link, .nav-dropdown-link, .mega-link, ...) and leaves
   Elementor-authored content alone. */
.header-nav ul li a:not(.mega-elementor-wrap a) {
	display: block;
	padding: 10px 18px;
	color: var(--header-nav-color, #333333);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.header-nav ul li a:not(.mega-elementor-wrap a):hover,
.header-nav ul li.current-menu-item > a:not(.mega-elementor-wrap a) {
	color: var(--header-nav-active-color, #2254c5);
}

/* Dedicated top-level nav hover color (separate from the active/current-page
   accent color above, and from dropdown/mega link hovers which still use the
   accent color). Higher specificity than the generic rule above so it wins
   for .nav-link (top-level items) without touching .nav-dropdown-link/.mega-link.
   The second selector is needed because .is-transparent.scrolled .nav-link
   (further down, 4 classes) is otherwise MORE specific than a plain
   ".site-header-custom .nav-link:hover" (3 classes) and would silence hover
   once the transparent header goes solid on scroll. */
.site-header-custom .nav-link:hover,
.site-header-custom.is-transparent.scrolled .nav-link:hover {
	color: var(--header-nav-hover-color, #e67e22);
}

/* Separate hover color while the header is actually floating
   transparent over the hero (not yet scrolled). Specificity (0,4,0)
   beats the general hover rule above (0,3,0) so it wins while
   .is-transparent is present, but loses to the .scrolled-specific
   rule above (0,5,0) once .scrolled is added — same "more specific
   override restores the normal look" pattern already used for the
   base text color a few rules up (.is-transparent vs
   .is-transparent.scrolled), so no :not(.scrolled) needed. */
.site-header-custom.is-transparent .nav-link:hover {
	color: var(--header-transparent-nav-hover-color, #ffffff);
}

/* Nav chevron */
.nav-chevron {
	margin-left: 3px;
	opacity: 0.4;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Scoped to `> .nav-link >` (direct child chain), not a bare
   descendant selector — otherwise hovering the top-level .nav-item
   (which stays :hover the whole time its dropdown is open) would also
   match and flip any nested 2nd-level chevron inside the open
   dropdown, via higher specificity beating the more specific
   .nav-dropdown-link rule below. */
.nav-item:hover > .nav-link > .nav-chevron,
.nav-item:focus-within > .nav-link > .nav-chevron {
	transform: rotate(180deg);
	opacity: 0.8;
}

/* ── Standard Dropdown ───────────────────── */
/* Rounded "app menu" card look (star/duplicate/rename-style reference):
   larger radius, soft shadow, roomier row padding/radius, neutral gray
   hover instead of an accent-color text change. */
/* Scoped as ".header-nav .nav-dropdown" (0,2,0) — plain ".nav-dropdown"
   (0,1,0) was losing its "padding" (and margin/list-style) to the
   generic ".header-nav ul { padding: 0 }" reset added earlier (0,1,1:
   1 class + 1 type — ties on class count, wins on the extra type
   selector). The padding value here (14px) was silently being
   overridden back to 0 this whole time. NOT scoped under #site-header
   (an ID) on purpose — that would outrank the .nav-item:hover/
   :focus-within reveal rules below (0,2,0), which rely on matching
   this same (0,2,0) specificity + coming later in the file to win the
   opacity/visibility/transform tug-of-war on hover; an ID here would
   have made the box permanently hidden (base "opacity:0" always
   winning). .header-nav .nav-dropdown ties the reveal rules'
   specificity instead of beating it, which is enough to beat the
   ul reset while still letting source order settle hover correctly. */
.header-nav .nav-dropdown {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	/* Shrink-to-fit around the widest row's actual content (icon + gap
	   + label + gap + chevron) instead of a fixed min-width. A fixed
	   240px was too narrow for icon+long-label+chevron combos (text
	   wrapped inside the row) and too wide for short labels (chevron
	   ended up stranded far from the text via justify-content:
	   space-between below) — width:max-content + a plain `gap` (no
	   space-between) on .nav-dropdown-link makes every row hug its own
	   content consistently, and the box itself hugs the widest row.
	   min/max-width are just sane floor/ceiling, not the sizing driver. */
	width: max-content;
	min-width: 160px;
	max-width: 320px;
	background: #fff;
	border: 1px solid var(--header-border-color, #e8e8e6);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	padding: 6px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 200;
}

.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Scoped under #site-header (1,1,0) instead of a bare .nav-dropdown-link
   (0,1,0) — otherwise "display: flex" here LOSES the cascade to the
   earlier, more specific ".header-nav ul li a:not(.mega-elementor-wrap a)"
   rule (0,2,4 — 2 classes incl. the :not() argument's, 4 type selectors),
   which sets "display: block". When that happened, the <a> fell back to
   block, so it no longer established a flex row for its children — the
   inner .nav-dropdown-main span (itself display:flex, i.e. block-level)
   then forced its OWN block box onto its own line, pushing the trailing
   .nav-chevron <svg> (plain inline content, sibling after a block box)
   down onto the next line — exactly the "chevron drops below the label"
   symptom. An ID always outranks any number of classes/types (same
   #site-header-scoping trick already used for .lang-btn/.mobile-menu-toggle
   above, to beat Elementor's kit CSS the same way). */
#site-header .nav-dropdown-link {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	/* justify-content:space-between pushes .nav-chevron flush to the
	   right edge of the box — the earlier "imbalanced box" bug wasn't
	   caused by space-between itself, it was caused by combining it
	   with a FIXED min-width:240px that didn't match the actual content
	   (short text → huge stretched gap; icon+long text+chevron together
	   → wrapped instead of growing the box). Now that .nav-dropdown sizes
	   itself to the widest row's real content (width:max-content, see
	   above), space-between just puts the chevron at that real edge — a
	   row's own .nav-dropdown-main + .nav-chevron distance still floors
	   at `gap` below when the box happens to be exactly this row's
	   width, and stretches to fill any leftover width when a DIFFERENT
	   (chevron-less) row in the same dropdown is the widest one — which
	   is exactly the "chevron flush right" look being asked for here. */
	justify-content: space-between;
	gap: 14px;
	padding: 11px 12px;
	border-radius: 9px;
	font-size: 0.92rem;
	color: var(--header-nav-color, #333);
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Icon + label grouped together on the left, tight against the
   trailing chevron via the row's own `gap` above (no space-between
   pushing them apart anymore). */
.nav-dropdown-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.nav-dropdown-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Safety net only — with .nav-dropdown's max-width:320px cap, an
	   extreme-length menu title truncates with an ellipsis instead of
	   forcing the box past 320px. Normal short/medium labels never hit
	   this; the box sizes to their natural width via max-content above. */
	max-width: 220px;
}

/* Optional per-item icon (Appearance → Menus → item → "Icon"). Absent
   for items with no icon set — .nav-dropdown-main's gap only applies
   between existing children, so the label doesn't leave a gap where
   an icon would've been. Sized/colored to match the label text
   rather than the muted top-level nav-chevron. */
.nav-dropdown-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--header-nav-color, #333);
}
.nav-dropdown-icon svg {
	width: 19px;
	height: 19px;
}

/* Custom-uploaded icon image (Appearance → Menus → item → "Menu Icon"
   → Upload Custom Icon) — same box size as the SVG preset icons above
   so the row layout doesn't jump depending on which icon type an item
   uses. object-fit:cover crops instead of squashing non-square source
   images; the 40x40 'hec_menu_icon' registered size (functions.php)
   already hard-crops server-side, this is just a client-side safety
   net for images that predate the size registration. */
.nav-dropdown-icon-img {
	display: block;
	width: 19px;
	height: 19px;
	object-fit: cover;
	border-radius: 4px;
}

/* Chevron on a dropdown link that itself has a submenu (2nd level).
   Points right (flyout direction) instead of down. */
.nav-dropdown-link .nav-chevron {
	margin-left: 0;
	transform: rotate(-90deg);
	flex-shrink: 0;
}
.nav-dropdown li:hover > .nav-dropdown-link .nav-chevron,
.nav-dropdown li:focus-within > .nav-dropdown-link .nav-chevron {
	opacity: 0.8;
}

/* ── Nested (2nd-level) Dropdown ────────────
   A .nav-dropdown nested inside another .nav-dropdown's <li> — flies
   out to the RIGHT of its parent item instead of stacking below it
   (which would visually collide with the next sibling in a vertical
   list). Supports exactly one extra level (top-level nav → 1st
   dropdown → 2nd nested dropdown = 2 levels of submenu), matching
   wp_nav_menu's 'depth' => 3 in hec_header_navigation(). */
.nav-dropdown .nav-dropdown {
	top: -6px;
	left: 100%;
	/* left:100% is relative to the containing <li>, not the outer
	   .nav-dropdown box's true edge — the li's own right edge sits
	   INSIDE the box by exactly the box's padding (now 14px, up from
	   8px). margin-left has to clear that padding AND add real breathing
	   room past the outer box's true border, or the two boxes visually
	   overlap near the shared edge (was 6px, only just clearing the old
	   8px padding with ~2px overlap). 22px = 14px padding + 8px gap. */
	margin-left: 22px;
}

.nav-dropdown li:hover > .nav-dropdown,
.nav-dropdown li:focus-within > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Plain hover: neutral gray highlight only, text color unchanged
   (matches the reference — rows brighten on hover, they don't switch
   to an accent color). The current-page indicator keeps the accent
   color as its own separate rule, on top of the same gray background. */
.nav-dropdown-link:hover {
	background: #f4f4f5;
}
.nav-dropdown-link[aria-current="page"] {
	background: #f4f4f5;
	color: var(--header-nav-active-color, #2254c5);
}

/* ── Mega Menu ───────────────────────────── */

/* nav และ ul ต้องไม่ clip */
.header-nav,
.header-nav > ul { overflow: visible !important; }

/* .nav-item--mega no longer sets position:relative — .mega-panel's
   containing block moved up to .header-inner instead (see its "position:
   relative" comment above). This was the actual overflow bug: centering
   the panel under the individual TRIGGER item (left:50%/translateX(-50%)
   relative to a nav-item that could sit anywhere across the header's
   width) pushed it off the left edge of the viewport whenever the
   trigger was closer to the left than half the panel's own width — the
   "squeezed desktop" widths (~992–1400px) are exactly where that
   happens, since the header itself has less room and its items sit
   further left. Centering within .header-inner instead (which is
   itself always ≤ the viewport, via max-width + its own padding) means
   the panel is always centered in a container that already fits, no
   matter which item triggered it. */
.nav-item--mega { position: static; }

.mega-panel {
	position: absolute;
	/* Configurable via Theme Options → Menus (--mega-panel-top-offset,
	   default 0px = flush against the trigger). Was a hardcoded
	   "calc(100% + 1px)" — that 1px gap was enough for the cursor to
	   land in a dead zone while moving from the link down into the
	   panel, dropping the :hover state and slamming the panel shut
	   (pointer-events:none kicks in the instant :hover stops
	   matching, so it also became unclickable mid-transition). If
	   this offset is set to a non-zero value again, the .mega-open
	   JS hover-intent below (see assets/js/header.js) is what
	   actually protects against that — it doesn't care how big the
	   gap is, only whether the mouse comes back within 250ms.
	   top:100% is now relative to .header-inner (the containing
	   block), i.e. flush against the header's own bottom edge —
	   effectively the same spot as before (nav items are vertically
	   centered within the same header height) but exact instead of
	   approximate. */
	top: calc(100% + var(--mega-panel-top-offset, 0px));
	left: 50%;
	width: var(--mega-panel-width, 760px);
	max-width: 96vw;
	background: #fff;
	border: 1px solid var(--header-border-color, #e8e8e6);
	box-shadow: 0 20px 56px rgba(0, 0, 0, 0.12);
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 9998;
	pointer-events: none;
}

.nav-item--mega:hover > .mega-panel,
.nav-item--mega:focus-within > .mega-panel,
.nav-item--mega.mega-open > .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* Elementor template inside mega panel */
.mega-elementor-wrap {
	padding: 8px 0;
}

.mega-elementor-wrap .elementor {
	width: 100%;
}

/* รีเซ็ต Elementor section padding ให้พอดี panel */
.mega-elementor-wrap .elementor-section-boxed > .elementor-container {
	max-width: 100%;
}

/* Header bar: "SOLUTIONS — โซลูชันทั้งหมด" */
.mega-hdr-bar {
	padding: 12px 32px;
	border-bottom: 1px solid #f0f0f0;
	max-width: var(--header-max-width, 1200px);
	margin: 0 auto;
}

.mega-hdr-bar span {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #999;
	text-transform: uppercase;
}

/* 3-column grid */
.mega-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	max-width: var(--header-max-width, 1200px);
	margin: 0 auto;
	padding: 24px 20px 28px;
}

.mega-col {
	padding: 16px 20px;
	border-radius: 8px;
	transition: background 0.15s ease;
}

.mega-col:hover { background: #f7f7f5; }

.mega-col-hdr {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ebebeb;
}

.mega-col-title {
	display: block;
	font-size: 0.73rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--header-nav-active-color, #2254c5);
	transition: opacity 0.15s;
	line-height: 1.4;
}

.mega-col-title:hover { opacity: 0.75; }

.mega-col-sub {
	display: block;
	font-size: 0.72rem;
	color: #aaa;
	margin-top: 3px;
	font-weight: 400;
}

.mega-col-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-col-links li { display: block; }

.mega-link {
	display: block;
	padding: 4px 0;
	font-size: 0.85rem;
	color: #444;
	line-height: 1.6;
	transition: color 0.15s ease;
}

.mega-link:hover {
	color: var(--header-nav-active-color, #2254c5);
}

/* Language Switcher */
.lang-switch { position: relative; margin-left: 8px; list-style: none; }
.lang-menu, .lang-menu a { list-style: none; }
.lang-btn img, .lang-menu a img { width: 18px; height: auto; vertical-align: middle; border-radius: 2px; }

/* Scoped under #site-header (an id, so specificity (1,1,0)) instead of
   a bare .lang-btn (0,1,0) — Elementor's global kit CSS resets buttons
   via compound selectors like ".elementor-kit-4 button" (0,1,1), which
   otherwise wins on shared properties (font-size, border-radius,
   padding, ...) since it has more classes/types than a single class
   selector. An id beats any number of classes/types without needing
   !important, and #site-header is already a stable id on the header
   markup (see template-parts/custom-header.php), not a hack added
   just for this. */
#site-header .lang-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--lang-btn-border-color, #E8E8E6);
	border-radius: var(--lang-btn-radius, 100px);
	background: var(--lang-btn-bg-color, #ffffff);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--header-nav-color, #0F0F0F);
	transition: .2s;
}

#site-header .lang-btn:hover,
#site-header .lang-btn:focus {
	border-color: var(--lang-btn-hover-border-color, #E8E8E6);
	color: var(--lang-btn-hover-color, #0F0F0F);
	background: var(--lang-btn-hover-bg-color, #f7f7f5);
	outline: none;
}

.lang-btn .caret { transition: transform .2s; }
.lang-switch:hover .lang-btn .caret { transform: rotate(180deg); }

.lang-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 150px;
	background: #fff;
	border: 1px solid var(--header-border-color, #E8E8E6);
	border-radius: var(--lang-menu-radius, 12px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: .2s;
	z-index: 200;
}

.lang-switch:hover .lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--lang-menu-radius, 8px);
	font-size: 13px;
	color: var(--header-nav-color, #0F0F0F);
	text-decoration: none;
	transition: background .15s;
}

/* .site-header-custom prefix boosts specificity above Elementor's global
   kit CSS (".elementor-kit-224 a:hover"), which has the exact same
   specificity as a plain ".lang-menu a:hover" and was winning the tie
   by loading later in the cascade, silencing this color entirely. */
.site-header-custom .lang-menu a:hover {
	background: #F7F7F5;
	color: var(--lang-btn-hover-color, #0F0F0F);
}

.lang-menu a.lang-current {
	font-weight: 600;
	color: var(--lang-btn-hover-color, #0F0F0F);
}

@media (max-width: 1024px) {
	.lang-btn { height: 42px; border-radius: var(--lang-btn-radius, 9px); }
}

/* CTA Button — ความสูงเท่า lang-btn (36px desktop) */
.header-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 20px;
	background: var(--header-cta-bg, #222222);
	color: var(--header-cta-color, #ffffff) !important;
	border-radius: var(--header-cta-radius, 30px);
	text-decoration: none !important;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.header-cta-btn { border-radius: var(--header-cta-radius, 9px); }
}

.header-cta-btn:hover {
	background: var(--header-cta-hover-bg, #e67e22);
	transform: translateX(2px);
}

/* Icon wrapper — keeps the SVG vertically centered inside the button's
   flex row regardless of whether it's placed before or after the label
   (see hec_get_cta_icon_markup() / Theme Options → CTA Button → Icon
   Position). Sits on either side of the label text purely via DOM
   order + the button's own `gap`, no extra positioning needed. */
.header-cta-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* CTA Button 2 — secondary (outline style, ปิดโดย default) */
.header-cta-btn--secondary {
	background: var(--header-cta-bg-2, #ffffff);
	color: var(--header-cta-color-2, #222222) !important;
	border: 1px solid var(--header-cta-border-2, #222222);
	border-radius: var(--header-cta-radius-2, 30px);
}

.header-cta-btn--secondary:hover {
	background: var(--header-cta-hover-bg-2, #f5f5f5);
	transform: translateX(2px);
}

@media (max-width: 1024px) {
	.header-cta-btn--secondary { border-radius: var(--header-cta-radius-2, 9px); }
}

/* Mobile Menu Toggle — scoped under #site-header for the same reason
   as .lang-btn above (beats Elementor's ".elementor-kit-4 button"
   reset on padding/border without !important). */
#site-header .mobile-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 4px;
	background: none;
	border: none;
}

.mobile-menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--header-nav-color, #333333);
	transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =============================================
   RESPONSIVE — SQUEEZED DESKTOP (removed, kept as a note)
   ============================================= */

/* There used to be a rule here that auto-hid CTA Button 2 in a
   "squeezed desktop" width range (992px up to Container Max Width +
   ~300px), to stop it from overflowing/overlapping the last menu item
   when both CTA buttons + a full menu + language switcher were all on
   at once. Removed on purpose — auto-hiding a button the admin
   explicitly turned on was surprising behavior. If Button 2 overlaps
   the menu on a real site, that's now a manual decision for the
   admin instead of silent CSS:
     - Theme Options → CTA Buttons → "Show Button 2" (off by default)
       — turn it off site-wide, or
     - Theme Options → Header Layout — drag CTA Button 2 out of the
       Desktop board's zones (per-device, so Tablet/Mobile can still
       keep it) if only the in-between desktop width is a problem.
   Button 1 (primary) still tightens padding/font/height below 1024px
   via #site-header .header-cta-btn — that part is unaffected. */

/* =============================================
   RESPONSIVE — BASE
   ============================================= */

@media (max-width: 991px) {
	.header-nav { display: none !important; }
	/* Center zone only ever holds the main menu, which is already hidden
	   above — but the zone DIV itself is still an empty flex/grid track
	   that keeps claiming its share of .header-inner's width, leaving a
	   dead gap that crowds the right-zone buttons against the hamburger.
	   Hiding the zone AND dropping its grid column (grid-template-columns
	   still reserves a 1fr track for a hidden item otherwise) frees that
	   space up entirely — left / right / toggle end up as 3 plain columns. */
	.header-zone--center { display: none; }
	.header-inner {
		/* Only Left and Right left once Center is hidden and the toggle
		   button lives inside Right as a regular zone item (not its own
		   grid column anymore — see inc/header-layout.php). Both columns
		   are plain "auto" (fit-content: Left is just the logo's own
		   width, Right is exactly as wide as whatever's dragged into it)
		   — justify-content:space-between pins them to the two edges
		   using the leftover space as a gap between them, instead of
		   needing a flexible track that would stretch a column wider
		   than its content (verified: that's what made the toggle's old
		   dedicated column balloon to ~190px with the icon left-aligned
		   inside all that empty space). */
		grid-template-columns: auto auto;
		justify-content: space-between;
		gap: 10px;
	}
	.header-zone { gap: 8px; }
	/* Must match #site-header .mobile-menu-toggle's specificity (1,1,0) —
	   the base rule now scopes under #site-header (see above), and a
	   bare .mobile-menu-toggle here would lose to it and stay
	   display:none on mobile. */
	#site-header .mobile-menu-toggle { display: flex; }
	/* Sticky-vs-relative on mobile now follows the same .is-sticky
	   opt-in as desktop (see base rules at the top) — no override
	   needed here. An old `position: relative` rule at this spot used
	   to force the header non-sticky on every mobile screen; don't
	   reintroduce it. */
	/* เดิมมี .header-cta-btn{padding:8px 14px; font-size:0.82rem;} ตรงนี้ —
	   บีบปุ่มให้เล็กลงกว่าฐาน (padding 0 20px, font 0.9rem) ทั้งที่ความสูงยัง
	   42px (จาก @media max-width:1024px ด้านบน) ผลคือปุ่มดูอึดอัด/ถูกบีบ
	   (กล่องสูงแต่แคบ ตัวหนังสือเล็ก) ตอนนี้พื้นที่บน tablet/mobile ไม่ได้แน่น
	   เหมือนก่อนแล้ว (เมนูซ่อนเป็น hamburger, ปุ่มโชว์เมื่อผู้ใช้เลือกเอง) เลย
	   ปล่อยให้ปุ่มใช้ padding/font ฐานเต็มที่ ให้ตัวสูง 42px ดูสมส่วนกับความกว้าง */
	/* Mega panel ปิดทั้งหมดบน mobile */
	.mega-panel { display: none !important; }
}

/* =============================================
   MOBILE STYLE A — DROPDOWN
   ============================================= */

@media (max-width: 991px) {
	.mobile-menu-dropdown .header-nav {
		display: none !important;
	}
	.mobile-menu-dropdown .header-nav.mobile-open {
		display: flex !important;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
		padding: 8px 0 16px;
		z-index: 9990;
		max-height: calc(100vh - var(--header-height, 70px));
		overflow-y: auto;
	}
	.mobile-menu-dropdown .header-nav.mobile-open ul {
		flex-direction: column;
		width: 100%;
	}
	.mobile-menu-dropdown .header-nav.mobile-open ul li a {
		padding: 13px 20px;
		border-bottom: 1px solid #f5f5f5;
		font-size: 0.95rem;
	}
}

/* =============================================
   MOBILE STYLE B — OFF-CANVAS SLIDE-STEP
   ============================================= */

/* Overlay */
#hec-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9988;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}
#hec-drawer-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* Off-canvas container — full width, above header */
.hec-offcanvas {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	background: #fff;
	z-index: 10000; /* above header (9999) */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.hec-offcanvas--right {
	right: 0;
	transform: translateX(100%);
}
.hec-offcanvas--left {
	left: 0;
	transform: translateX(-100%);
}
.hec-offcanvas.is-open {
	transform: translateX(0);
}

/* Admin bar offset — desktop only. On mobile WP core switches
   #wpadminbar to `position: absolute` (scrolls away with the page),
   so the off-canvas menu doesn't need to reserve space for it. */
.admin-bar .hec-offcanvas { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .hec-offcanvas { top: 0; }
}

/* Mobile sidebar: lang ยังแสดงชิด hamburger */
@media (max-width: 991px) {
	/* เดิมมี .mobile-menu-sidebar-*  #site-header .header-cta-btn{display:none}
	   ตรงนี้ — บังคับซ่อนปุ่ม CTA ในแถบ header เสมอตอน sidebar mode (ไปโผล่แค่ใน
	   off-canvas footer แทน) เขียนไว้ตั้งแต่ก่อนมี per-device Header Layout
	   Builder ตอนนั้นปุ่มใน header แถบ tablet/mobile ยังไม่มีทางเลือก เลยซ่อนไว้
	   เป็น default กันซ้ำกับปุ่มใน off-canvas เสมอ — ตอนนี้ผู้ใช้เลือกเองได้ผ่าน
	   Header Layout Builder ว่าจะให้ Tablet/Mobile โซนไหนมีปุ่มไหนบ้าง (ปกติ
	   default คือไม่มี ปุ่มเลยไปโผล่แค่ใน off-canvas เหมือนเดิม) กฎ display:none
	   เดิมเลยไปลบล้างสิ่งที่ผู้ใช้ตั้งค่าไว้ใน builder ทิ้งอย่างเงียบๆ — เอาออก */

	/* หมายเหตุ: เดิมมี .header-logo{flex:1} ตรงนี้เพื่อดัน lang+hamburger
	   ไปชิดขวาตอนที่ header-nav ถูกซ่อน — ตอนนี้ .header-zone ทุกโซนเป็น
	   flex:1 อยู่แล้วโดย default (ดูด้านบน) จึงทำหน้าที่เดียวกันให้เองแล้ว
	   ไม่ต้อง override ซ้ำ */

	/* หมายเหตุ: เดิมมี .mobile-menu-sidebar-* .header-zone--right{gap:0}
	   ตรงนี้ เพื่อให้ lang+hamburger ชิดกัน (ตอนนั้น hamburger ยังไม่ได้อยู่ใน
	   โซนเดียวกัน มีระยะห่างของตัวเองแยกจาก .header-zone gap) — ตอนนี้
	   Mobile Menu Toggle ลากเข้าโซนได้เหมือน element อื่นแล้ว มันเลยใช้
	   .header-zone{gap:8px} ด้านบนร่วมกับตัวอื่นในโซนไปเลย ไม่ต้อง override
	   เป็นกรณีพิเศษอีกต่อไป */

	/* Lang dropdown เปิดไปทางซ้าย ไม่ overflow viewport */
	.mobile-menu-sidebar-right .lang-menu,
	.mobile-menu-sidebar-left .lang-menu {
		right: 0;
		left: auto;
	}
}

/* Off-canvas footer (CTA + lang) */
.ofc-footer {
	padding: 16px 20px 32px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}
.ofc-footer .header-cta-btn {
	display: flex;
	justify-content: center;
	border-radius: var(--header-cta-radius, 12px);
	padding: 14px 20px;
	font-size: 0.95rem;
	width: 100%;
	box-sizing: border-box;
}
.ofc-footer .lang-switch {
	position: static;
}
.ofc-footer .lang-btn {
	width: 100%;
	border-radius: var(--lang-btn-radius, 10px);
	justify-content: center;
	height: 44px;
}
.ofc-footer .lang-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 1px solid #f0f0f0;
	border-radius: 10px;
	display: none;
}
.ofc-footer .lang-switch.open .lang-menu { display: block; }

/* Panels wrapper — clips slide animation */
.ofc-wrap {
	position: relative;
	flex: 1;
	overflow: hidden;
}

/* Individual panel */
.ofc-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.hec-offcanvas--left .ofc-panel { transform: translateX(-100%); }

.ofc-panel--active {
	transform: translateX(0) !important;
}
/* Panel being replaced slides slightly left (right-drawer) or right (left-drawer) */
.ofc-panel--prev {
	transform: translateX(-28%) !important;
}
.hec-offcanvas--left .ofc-panel--prev {
	transform: translateX(28%) !important;
}

/* Panel header */
.ofc-hdr {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px 0 4px;
	height: 56px;
	border-bottom: 1px solid #f0f0f0;
	flex-shrink: 0;
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 1;
}
.ofc-hdr-title {
	flex: 1;
	font-size: 0.9rem;
	font-weight: 700;
	color: #111;
	text-decoration: none;
	padding: 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
a.ofc-hdr-title:hover {
	color: var(--header-nav-active-color, #2254c5);
}
/* Scoped under #hec-offcanvas (an id) for the same reason as
   #site-header .lang-btn above — beats Elementor's global button
   reset on border/border-radius without !important. The :hover rules
   need the same scoping, otherwise they'd be LESS specific than the
   scoped base rule above and the hover state would never show. */
#hec-offcanvas .ofc-back,
#hec-offcanvas .ofc-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
	color: #555;
	border-radius: 10px;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}
#hec-offcanvas .ofc-back:hover,
#hec-offcanvas .ofc-close:hover {
	background: #f5f5f5;
	color: #111;
}

/* Fix: the back/close icon SVGs were rendering at 0px width (invisible)
   inside these buttons. Root cause: .ofc-back/.ofc-close are
   `display:flex; justify-content:center` with the <svg> as their ONLY
   child and no `gap`/padding-driven content width — with no CSS width
   on the <svg> itself (only its HTML width/height attributes, which
   flexbox's `flex-basis:auto` does not reliably resolve to for a bare
   SVG), the flex algorithm computed its basis as ~0 and let it shrink
   to nothing. Confirmed live via getComputedStyle() on stg2.angkul.com
   (0px, sometimes a few px depending on sibling layout). Giving the
   SVG an explicit CSS size + flex-shrink:0 makes sizing deterministic
   regardless of flex-basis ambiguity. */
#hec-offcanvas .ofc-back svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
#hec-offcanvas .ofc-close svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* List */
.ofc-list {
	list-style: none;
	margin: 0;
	padding: 6px 0 24px;
}
.ofc-item {
	display: block;
	border-bottom: 1px solid #f5f5f5;
}
.ofc-item:last-child { border-bottom: none; }

/* Item row (when has children — link + chevron button) */
.ofc-item-row {
	display: flex;
	align-items: stretch;
}
.ofc-item-row > .ofc-link {
	flex: 1;
}

/* Link */
.ofc-link {
	/* flex (was block) so the optional .nav-dropdown-icon (Appearance →
	   Menus → item → "Menu Icon" — same icon system as the desktop
	   dropdown, rendered here by hec_render_ofc_panel()) sits inline
	   with the label, vertically centered, instead of stacking above/
	   below it. Not inside .header-nav (this panel is a separate
	   subtree appended after </header>), so unlike .nav-dropdown-link
	   there's no specificity fight with the broad
	   ".header-nav ul li a:not(...)" rule here — plain "display: flex"
	   is enough. */
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--header-nav-color, #222);
	text-decoration: none;
	transition: color 0.15s, background 0.15s;
	line-height: 1.4;
}
.ofc-link .nav-dropdown-icon {
	flex-shrink: 0;
}
.ofc-link-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ofc-link:hover { color: var(--header-nav-active-color, #2254c5); background: #fef9f5; }

.ofc-item--current > .ofc-link,
.ofc-item--current > .ofc-item-row > .ofc-link {
	color: var(--header-nav-active-color, #2254c5);
	font-weight: 600;
}

/* Chevron trigger button — scoped under #hec-offcanvas, same reason
   as .ofc-back/.ofc-close above. */
#hec-offcanvas .ofc-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	flex-shrink: 0;
	border: none;
	border-left: 1px solid #f0f0f0;
	background: none;
	cursor: pointer;
	color: #bbb;
	transition: color 0.15s, background 0.15s;
}
#hec-offcanvas .ofc-trigger:hover {
	background: #fef9f5;
	color: var(--header-nav-active-color, #2254c5);
}

/* Same 0-width SVG issue as .ofc-back/.ofc-close above — see comment there. */
#hec-offcanvas .ofc-trigger svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}