/* ══════════════════════════════════════════════════════════════
	   1. NAV SHELL — always-on glassmorphism, contrast-adaptive
	   Light glass by default. JS adds body.sf-nav-on-dark when the
	   nav is scrolled over a dark section, switching to dark glass.
	   This block runs at priority 19999 — last CSS on the page.
	   ══════════════════════════════════════════════════════════════ */

	/* ── DEFAULT: solid white ── */
	.elementor-24227 .elementor-element.elementor-element-57f862c,
	.menu-header-shell {
		height:                  64px !important;
		min-height:              64px !important;
		max-height:              64px !important;
		background:              #ffffff !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter:         none !important;
		border-bottom:           1px solid rgba(0, 0, 0, 0.06) !important;
		box-shadow:              none !important;
	}

	/* ── DARK VARIANT disabled — nav is always solid white ── */
	body.sf-nav-on-dark .elementor-24227 .elementor-element.elementor-element-57f862c,
	body.sf-nav-on-dark .menu-header-shell {
		background:              #ffffff !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter:         none !important;
		border-bottom:           1px solid rgba(0, 0, 0, 0.06) !important;
		box-shadow:              none !important;
	}

	.elementor-element-57f862c {
		--min-height:     64px !important;
		--padding-top:    0px !important;
		--padding-bottom: 0px !important;
		--padding-left:   0px !important;
		--padding-right:  0px !important;
	}

	.elementor-element-57f862c > .e-con-inner,
	.menu-header-shell > .e-con-inner {
		height: 64px !important; min-height: 64px !important; max-height: 64px !important;
		display: flex !important; flex-direction: row !important;
		align-items: center !important; justify-content: center !important;
		padding: 0 !important; width: 100% !important; max-width: 100% !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   2. NAV INNER CONTAINER — 64px row
	   ══════════════════════════════════════════════════════════════ */

	.menu-header-inner,
	.elementor-element-21228c0,
	.menu-header-inner > .e-con-inner,
	.elementor-element-21228c0 > .e-con-inner {
		height: 64px !important; min-height: 64px !important; max-height: 64px !important;
		display: flex !important; flex-direction: row !important;
		align-items: center !important; justify-content: center !important;
		padding: 0 !important; gap: 0 !important;
		width: 100% !important; max-width: 100% !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   3. MEGA-MENU WIDGET
	   ══════════════════════════════════════════════════════════════ */

	.elementor-24227 .elementor-element-872b5c7,
	.elementor-24227 .elementor-element-872b5c7.elementor-widget__width-full,
	.elementor-24227 .elementor-element-872b5c7 .elementor-widget-container {
		width: auto !important; max-width: none !important;
		flex: 0 0 auto !important; padding: 0 !important; align-self: center !important;
	}

	.elementor-24227 .elementor-element-872b5c7 .e-n-menu,
	.elementor-24227 .elementor-element-872b5c7 .e-n-menu-wrapper,
	.elementor-24227 .elementor-element-872b5c7 .e-n-menu-heading {
		display: flex !important; flex-direction: row !important;
		flex-wrap: nowrap !important; align-items: center !important;
		justify-content: center !important;
		height: 64px !important; min-height: 64px !important;
		padding: 0 !important; gap: 0 !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   4. MENU TYPOGRAPHY — 14.5px / 500 / 0.01em / #1d1d1f
	   ══════════════════════════════════════════════════════════════ */

	.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title,
	.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title > span,
	.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title .e-n-menu-title-container {
		font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
		font-size:      14.5px !important;
		font-weight:    500 !important;
		letter-spacing: 0.01em !important;
		line-height:    64px !important;
		color:          #1d1d1f !important;
		white-space:    nowrap !important;
		padding-top:    0 !important;
		padding-bottom: 0 !important;
		padding-left:   13px !important;   /* = 26px visual gap between items */
		padding-right:  13px !important;
		position:       relative !important;
		display:        inline-flex !important;
		align-items:    center !important;
		transition:     color 0.22s ease, opacity 0.22s ease !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   5. HOVER — opacity fade only (no underline)
	   ══════════════════════════════════════════════════════════════ */

	.elementor-24227 .elementor-element-872b5c7 li:hover .e-n-menu-title,
	.elementor-24227 .elementor-element-872b5c7 li:hover .e-n-menu-title > span {
		color:   #1d1d1f !important;
		opacity: 0.55 !important;
	}

	/* No underline — ::after entirely suppressed */
	.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title::after,
	.elementor-24227 .elementor-element-872b5c7 li:hover .e-n-menu-title::after,
	.elementor-24227 .elementor-element-872b5c7 li.current .e-n-menu-title::after,
	.elementor-24227 .elementor-element-872b5c7 li[aria-current] .e-n-menu-title::after {
		content: none !important;
	}

	/* Active / current page — full opacity only */
	.elementor-24227 .elementor-element-872b5c7 li.current .e-n-menu-title,
	.elementor-24227 .elementor-element-872b5c7 li[aria-current] .e-n-menu-title,
	.elementor-24227 .elementor-element-872b5c7 li.current .e-n-menu-title > span {
		color: #1d1d1f !important; opacity: 1 !important;
	}

	/* Preserve EcoSystem "Eco" gradient colour */
	.elementor-24227 .elementor-element-872b5c7 .sf-eco-green {
		color: #FFC700 !important;
	}
	.elementor-24227 .elementor-element-872b5c7 li:hover .sf-eco-green {
		color: #FFC700 !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   6. SEARCH ICON — compact 29×29 button, 0.70 opacity, full on hover
	   Elementor Kit 24107 sets padding:16px on all buttons — override here.
	   7px padding + 15px SVG + 7px padding = 29px (matches Blueprint).
	   ══════════════════════════════════════════════════════════════ */

	.sf-search-trigger {
		padding:         7px !important;
		width:           auto !important;
		height:          auto !important;
		line-height:     1 !important;
		display:         inline-flex !important;
		align-items:     center !important;
		justify-content: center !important;
		vertical-align:  middle !important;
		background:      none !important;
		border:          none !important;
		cursor:          pointer !important;
		opacity:         0.70 !important;
		transition:      opacity 0.22s ease !important;
	}
	.sf-search-trigger:hover {
		opacity: 1.00 !important;
	}

	/* Constrain the Elementor widget wrapper to the button's natural size */
	.elementor-element-sf_search {
		width:       auto !important;
		height:      auto !important;
		align-self:  center !important;
		flex-shrink: 0 !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   7. LOGO — fully managed by sf_nav_logo_inject in wp_footer.
	   No overrides here — avoids specificity conflicts.
	   ══════════════════════════════════════════════════════════════ */

	/* ══════════════════════════════════════════════════════════════
	   8. BODY OFFSET — compensates for the fixed nav via the shared
	   --sf-nav-h token defined in style.css so reducing nav height
	   automatically closes the gap under the header.
	   ══════════════════════════════════════════════════════════════ */

	body:not(.elementor-editor-active) {
		padding-top: var(--sf-nav-h, 44px) !important;
	}
	body.admin-bar:not(.elementor-editor-active) {
		padding-top: var(--sf-nav-h, 44px) !important;
	}
	body.admin-bar .elementor-24227 .elementor-element.elementor-element-57f862c,
	body.admin-bar .menu-header-shell {
		top: 32px !important;
	}
	@media screen and (max-width: 782px) {
		body.admin-bar .elementor-24227 .elementor-element.elementor-element-57f862c,
		body.admin-bar .menu-header-shell { top: 46px !important; }
		body.admin-bar:not(.elementor-editor-active) { padding-top: var(--sf-nav-h, 44px) !important; }
	}

	/* ══════════════════════════════════════════════════════════════
	   9. RESPONSIVE — proportional reduction, hierarchy preserved
	   ══════════════════════════════════════════════════════════════ */

	/* Large screen ≥ 1440px: slightly more generous item spacing */
	@media (min-width: 1440px) {
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title,
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title > span,
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title .e-n-menu-title-container {
			font-size:     15px !important;
			padding-left:  16px !important;
			padding-right: 16px !important;
		}
	}

	/* Tablet 1180px: tighten item spacing */
	@media (max-width: 1180px) {
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title,
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title > span,
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title .e-n-menu-title-container {
			font-size:     13.5px !important;
			padding-left:  9px !important;
			padding-right: 9px !important;
		}
	}

	/* Laptop / iPad landscape 1024px: tightest desktop spacing */
	@media (max-width: 1024px) {
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title,
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title > span,
		.elementor-24227 .elementor-element-872b5c7 .e-n-menu-title .e-n-menu-title-container {
			font-size:     13px !important;
			padding-left:  6px !important;
			padding-right: 6px !important;
		}
	}

	/* Mobile hamburger ≤ 900px:
	   CSS !important beats the JS inline-style left value so the logo
	   sits at the edge when the hamburger menu is shown.                  */
	@media (max-width: 900px) {
		.sf-nav-logo-wrap { left: 20px !important; }
	}
	@media (max-width: 767px) {
		.sf-nav-logo-wrap { left: 16px !important; }
	}

	/* Touch devices: :hover opacity doesn't apply on tap, reset to full */
	@media (hover: none) {
		.elementor-24227 .elementor-element-872b5c7 li:hover .e-n-menu-title,
		.elementor-24227 .elementor-element-872b5c7 li:hover .e-n-menu-title > span {
			opacity: 1 !important;
			color:   #1d1d1f !important;
		}
		.elementor-24227 .elementor-element-872b5c7 li:hover .sf-eco-green {
			opacity: 1 !important;
			color:   #FFC700 !important;
		}
	}

	/* ══════════════════════════════════════════════════════════════
	   DARK GLASS STATE — white text when nav is over a dark section
	   body.sf-nav-on-dark toggled by sf_scroll_nav_js (WCAG luminance).
	   Placed here — at the END of the last CSS block (priority 19999)
	   — so source order guarantees these beat every dark-text rule above.
	   ══════════════════════════════════════════════════════════════ */

	/* Top nav text — always black (shell is always white) */
	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 .e-n-menu-title,
	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 .e-n-menu-title > span,
	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 .e-n-menu-title .e-n-menu-title-container {
		color:   #000000 !important;
		opacity: 1 !important;
	}

	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 li:hover .e-n-menu-title,
	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 li:hover .e-n-menu-title > span {
		color:   #000000 !important;
		opacity: 1 !important;
	}

	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 li.current .e-n-menu-title,
	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 li[aria-current] .e-n-menu-title,
	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 li.current .e-n-menu-title > span {
		color:   #000000 !important;
		opacity: 1 !important;
	}

	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 .sf-eco-green,
	body.sf-nav-on-dark .elementor-24227 .elementor-element-872b5c7 li:hover .sf-eco-green {
		color: #000000 !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   10. MEGA-MENU DROPDOWN PANEL — hidden by default, shown on hover
	   JS adds/removes .is-open via initMegaMenu() in the header HTML widget.
	   ══════════════════════════════════════════════════════════════ */

	/* Apple-style dropdown reveal animation */
	@keyframes sf-dropdown-in {
		from { opacity: 0; transform: translateY(-5px); }
		to   { opacity: 1; transform: translateY(0);    }
	}

	/* Hidden by default */
	.menu-dropdown-surface {
		display:                 none !important;
		position:                absolute !important;
		top:                     100% !important;
		left:                    0 !important;
		right:                   0 !important;
		z-index:                 9998 !important;
		pointer-events:          none !important;
		/* Glass panel — identical recipe to the nav bar so they read as one continuous surface */
		background:              rgba(255,255,255,0.75) !important;
		-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
		backdrop-filter:         saturate(180%) blur(20px) !important;
		border-top:              none !important;               /* seamless join at nav bottom */
		border-bottom:           1px solid rgba(0,0,0,0.08) !important;
		box-shadow:              0 8px 32px rgba(0,0,0,0.06) !important;
		flex-direction:          column !important;
		align-items:             stretch !important;
		overflow:                hidden !important;
	}

	/* Shown when JS adds .is-open */
	.menu-dropdown-surface.is-open {
		display:        flex !important;
		pointer-events: auto !important;
		animation:      sf-dropdown-in 0.22s cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
	}
	@media (prefers-reduced-motion: reduce) {
		.menu-dropdown-surface.is-open { animation: none !important; }
	}

	/* Force the Elementor inner container to stay within viewport */
	.menu-dropdown-surface > .e-con-inner,
	.menu-dropdown-surface .e-con-inner {
		max-width:  100% !important;
		width:      100% !important;
		box-sizing: border-box !important;
		overflow:   hidden !important;
	}

	/* Constrain dropdown content — left edge aligned with first nav link (x≈410 at 1728px ref) */
	.menu-dropdown-content {
		max-width:      1200px !important;
		width:          100% !important;
		margin:         0 auto !important;
		padding:        24px 52px 28px 146px !important;
		box-sizing:     border-box !important;
		display:        flex !important;
		flex-direction: row !important;
		align-items:    flex-start !important;
		gap:            0 !important;
	}

	/* Strip Elementor's default row-container padding; use gap for equal column spacing */
	.menu-dropdown-content > .e-con-full,
	.menu-dropdown-content > .elementor-element {
		padding: 0 !important;
		gap:     48px !important;
	}

	/* Each column — equal thirds, no individual padding (gap handles spacing) */
	.menu-sub-col-a,
	.menu-sub-col-b,
	.menu-sub-col-c {
		flex:            1 1 0% !important;
		min-width:       0 !important;
		padding-right:   0 !important;
		align-items:     flex-start !important;
		justify-content: flex-start !important;
	}

	/* Column header label — uppercase small blue */
	.menu-sub-col-a h5.elementor-heading-title,
	.menu-sub-col-b h5.elementor-heading-title,
	.menu-sub-col-c h5.elementor-heading-title,
	.menu-sub-col-a h6.elementor-heading-title,
	.menu-sub-col-b h6.elementor-heading-title,
	.menu-sub-col-c h6.elementor-heading-title {
		font-size:      11px !important;
		font-weight:    600 !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
		color:          #6E6E73 !important;
		margin-bottom:  14px !important;
		font-family:    Inter, -apple-system, 'system-ui', sans-serif !important;
	}

	/* Column links — col B & C: standard small size */
	.menu-sub-col-b .elementor-widget-text-editor p,
	.menu-sub-col-c .elementor-widget-text-editor p {
		font-size:   15px !important;
		line-height: 1.4 !important;
		margin:      0 0 2px !important;
		padding:     5px 0 !important;
	}

	/* Column links — col A: larger Apple-style primary nav size */
	.menu-sub-col-a .elementor-widget-text-editor p {
		font-size:      19px !important;
		font-weight:    600 !important;
		line-height:    1.3 !important;
		letter-spacing: -0.01em !important;
		margin:         0 !important;
		padding:        5px 0 !important;
	}

	/* Dropdown link base + hover — light state */
	.menu-dropdown-surface a {
		color:       #1d1d1f !important;
		transition:  color 0.15s ease !important;
		text-decoration: none !important;
	}
	.menu-dropdown-surface a:hover {
		color:       #E6B300 !important;
	}

	/* ══════════════════════════════════════════════════════════════
	   DROPDOWN DARK STATE — mirrors body.sf-nav-on-dark nav behaviour.
	   Switches glass to dark + flips all text to near-white.
	   ══════════════════════════════════════════════════════════════ */

	/* Dark panel glass */
	body.sf-nav-on-dark .menu-dropdown-surface {
		background:              rgba(29, 29, 31, 0.88) !important;
		-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
		backdrop-filter:         saturate(180%) blur(20px) !important;
		border-bottom:           1px solid rgba(255,255,255,0.08) !important;
	}

	/* Column header labels — use brighter blue on dark */
	body.sf-nav-on-dark .menu-sub-col-a h5.elementor-heading-title,
	body.sf-nav-on-dark .menu-sub-col-b h5.elementor-heading-title,
	body.sf-nav-on-dark .menu-sub-col-c h5.elementor-heading-title,
	body.sf-nav-on-dark .menu-sub-col-a h6.elementor-heading-title,
	body.sf-nav-on-dark .menu-sub-col-b h6.elementor-heading-title,
	body.sf-nav-on-dark .menu-sub-col-c h6.elementor-heading-title {
		color: #2997ff !important;
	}

	/* Links — near-white on dark */
	body.sf-nav-on-dark .menu-dropdown-surface a {
		color: rgba(255,255,255,0.90) !important;
	}
	body.sf-nav-on-dark .menu-dropdown-surface a:hover {
		color: #ffffff !important;
	}

	/* In Elementor editor, keep dropdown visible so it's editable */
	.elementor-editor-active .menu-dropdown-surface {
		display:        flex !important;
		position:       relative !important;
		pointer-events: auto !important;
	}

	/* Elementor editor — restore normal flow + light glass so editing works.
	   Placed last so it beats the body.sf-nav-on-dark dark glass above. */
	.elementor-editor-active .elementor-element-57f862c,
	.elementor-editor-active .menu-header-shell,
	body.elementor-editor-active .elementor-24227 .elementor-element.elementor-element-57f862c,
	body.elementor-editor-active .menu-header-shell {
		position:                relative !important;
		top:                     auto !important;
		background:              rgba(255, 255, 255, 0.96) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter:         none !important;
		border-bottom:           1px solid rgba(0, 0, 0, 0.06) !important;
	}