/* Serene Nav — modern header on top of Hub's header menu.
   Selectors start with #header so they beat the Elementor header CSS and the old
   "mega menu" rules in Customizer > Additional CSS (left untouched, just overridden). */

:root {
	--sd-ink: #2b2427;
	--sd-muted: #6b6366;
	--sd-sage: #89a18b;
	--sd-sage-dark: #6c876e;
	--sd-gold: #986d40;
	--sd-cream: #f7f5f0;
	--sd-glass: rgba(32, 26, 29, .92);
	--sd-top: var(--wp-admin--admin-bar--height, 0px);
}

/* ---------- Desktop (Hub shows the desktop header from 1200px) ---------- */
@media (min-width: 1200px) {

	/* Sticky header: overlay headers become fixed, others sticky. Compact dark glass bar once scrolled. */
	#header.main-header-overlay { position: fixed; top: var(--sd-top); left: 0; right: 0; z-index: 1000; }
	#header:not(.main-header-overlay) { position: sticky; top: var(--sd-top); z-index: 1000; }
	#header { transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
	.sd-scrolled #header {
		background: var(--sd-glass);
		-webkit-backdrop-filter: saturate(140%) blur(12px);
		backdrop-filter: saturate(140%) blur(12px);
		box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
	}
	#header .elementor-top-section { transition: padding .3s; }
	.sd-scrolled #header .elementor-top-section { padding-top: 4px; padding-bottom: 4px; border-bottom-color: transparent; }
	.sd-scrolled #header .elementor-element-f5cea83 { display: none; } /* home: green "Book your appointment" strip */
	#header .elementor-element-1d7a0edb { border-bottom-color: rgba(255, 255, 255, .25); }

	/* Mega panels are positioned against the header row, not the menu item. */
	#header .elementor-column:has(#primary-nav),
	#header .elementor-widget-wrap:has(#primary-nav),
	#header .elementor-widget:has(#primary-nav),
	#header .elementor-widget-container:has(#primary-nav),
	#header .module-primary-nav,
	#header #main-header-collapse,
	#header #primary-nav,
	#header #primary-nav > li.sd-mega { position: static; }

	#header #primary-nav { align-items: center; gap: 2px; }
	#header #primary-nav > li:not(.sd-mega) { position: relative; } /* simple/split dropdowns sit under their own link */

	/* Top-level links */
	#header #primary-nav > li > a {
		position: relative;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: .02em;
		text-transform: none;
		padding: 12px 14px;
		color: #fff;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		/* hover underline, drawn as a background so ::after stays free for the hover bridge */
		background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% + 6px) / 0 1px content-box;
		background-origin: content-box;
		background-clip: border-box;
		transition: background-size .25s;
	}
	#header #primary-nav > li:hover > a,
	#header #primary-nav > li.is-active > a,
	#header #primary-nav > li.current-menu-item > a,
	#header #primary-nav > li.current-menu-ancestor > a { background-size: 100% 1px; }

	/* Hover bridge: invisible strip under parent links reaching down to the panel, so the
	   pointer never leaves the menu item while crossing the gap (panels can't host it: they scroll/clip) */
	#header #primary-nav > li.menu-item-has-children > a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; top: 100%;
		height: 48px;
	}
	#header #primary-nav > li.menu-item-has-children:not(.is-active):not(:hover) > a::after { display: none; }

	/* Chevron after parents (Hub's JS strips its own expander icons on desktop) */
	#header #primary-nav > li.menu-item-has-children > a::before {
		content: "";
		order: 2;
		width: 6px; height: 6px;
		margin: -3px 0 0 2px;
		border: solid currentColor;
		border-width: 0 1.5px 1.5px 0;
		opacity: .75;
		transform: rotate(45deg);
		transition: transform .25s, margin .25s;
	}
	#header #primary-nav > li.menu-item-has-children.is-active > a::before { transform: rotate(225deg); margin-top: 3px; }
	#header #primary-nav .submenu-expander { display: none; }

	/* Book Now → pill button, always last */
	#header #primary-nav > li.sd-cta { order: 99; margin-left: 14px; }
	#header #primary-nav > li.sd-cta > a {
		background: var(--sd-sage);
		color: #fff;
		border-radius: 999px;
		padding: 11px 24px;
		font-weight: 600;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
		transition: background-color .2s, transform .2s;
	}
	#header #primary-nav > li.sd-cta > a:hover { background: var(--sd-sage-dark); transform: translateY(-1px); }

	/* Logo slot: only the home header (no logo of its own) uses it, and only once scrolled past the hero logo */
	#header #primary-nav > li.sd-logo { display: none; }
	#header .elementor-7988 .elementor-widget:has(#primary-nav),
	#header .elementor-7988 .elementor-widget-container:has(#primary-nav),
	#header .elementor-7988 .module-primary-nav,
	#header .elementor-7988 #main-header-collapse,
	#header .elementor-7988 #primary-nav { width: 100%; }
	#header .elementor-7988 #primary-nav > li.sd-logo {
		display: flex;
		order: -1;
		margin-right: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s, visibility .3s;
	}
	#header .elementor-7988 #primary-nav > li.sd-cta { margin-left: auto; }
	.sd-scrolled #header .elementor-7988 #primary-nav > li.sd-logo { opacity: 1; visibility: visible; }
	#header #primary-nav > li.sd-logo a { padding: 0; }
	#header #primary-nav > li.sd-logo a { background: none; }
	#header #primary-nav > li.sd-logo img { height: 46px; width: auto; display: block; }

	/* ---- Dropdown panels (all) ---- */
	#header #primary-nav > li > .nav-item-children {
		display: block;
		width: 250px;
		min-width: 0;
		padding: 12px;
		top: calc(100% + 12px);
		left: 50% !important;
		right: auto;
		transform: translate(-50%, 8px);
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 24px 60px rgba(20, 14, 17, .18), 0 2px 6px rgba(20, 14, 17, .06);
		transition: opacity .2s, visibility .2s, transform .25s;
		text-align: left;
	}
	#header #primary-nav > li.is-active > .nav-item-children,
	#header #primary-nav > li:focus-within > .nav-item-children { transform: translate(-50%, 0); }
	#header #primary-nav > li:focus-within > .nav-item-children { opacity: 1; visibility: visible; }

	/* hover bridge over the gap between link and panel; kill the old 100vw grey backdrop */
	#header #primary-nav .nav-item-children::before {
		content: "";
		position: absolute;
		top: -24px; left: 0; right: 0;
		width: auto;
		height: 24px;
		background: none;
		box-shadow: none;
	}
	#header #primary-nav .nav-item-children::after { display: none; }
	#header #primary-nav .nav-item-children > li { position: relative; width: auto; }

	#header #primary-nav .nav-item-children li > a {
		display: block;
		padding: 9px 12px;
		border-radius: 8px;
		font-size: 14.5px;
		line-height: 1.35;
		text-transform: none;
		letter-spacing: 0;
		color: var(--sd-ink);
		transition: background-color .15s, color .15s;
	}
	#header #primary-nav .nav-item-children li > a:hover { background: var(--sd-cream); color: var(--sd-gold); }
	#header #primary-nav .nav-item-children li.current-menu-item > a { color: var(--sd-gold); }

	/* 3rd level is always shown inline inside its parent panel (no fly-outs) */
	#header #primary-nav .nav-item-children .nav-item-children {
		position: static;
		display: block;
		visibility: inherit;
		opacity: 1;
		transform: none;
		width: auto;
		min-width: 0;
		padding: 0;
		margin: 0;
		background: none;
		box-shadow: none;
		border-radius: 0;
	}
	#header #primary-nav .nav-item-children .nav-item-children::before { display: none; }

	/* Group heading inside mega/split panels */
	#header #primary-nav .sd-mega > .nav-item-children > li.menu-item-has-children > a,
	#header #primary-nav .sd-split > .nav-item-children > li.menu-item-has-children > a {
		font-family: "Marcellus", serif;
		font-size: 16px;
		color: var(--sd-gold);
		padding: 4px 12px 10px;
		margin-bottom: 6px;
		border-bottom: 1px solid #ece8e1;
		border-radius: 0;
	}
	#header #primary-nav .sd-mega > .nav-item-children > li.menu-item-has-children > a:hover,
	#header #primary-nav .sd-split > .nav-item-children > li.menu-item-has-children > a:hover { background: none; color: var(--sd-ink); }
	#header #primary-nav .nav-item-children .nav-item-children li > a { padding: 5px 12px; font-size: 14px; color: var(--sd-muted); }
	#header #primary-nav .nav-item-children .nav-item-children li > a:hover { color: var(--sd-gold); }

	/* Mega: Treatments, All Conditions — full-width multi-column panel under the header row */
	#header #primary-nav > li.sd-cols-2 { --sd-cols: 2; }
	#header #primary-nav > li.sd-cols-3 { --sd-cols: 3; }
	#header #primary-nav > li.sd-cols-4 { --sd-cols: 4; }
	#header #primary-nav > li.sd-cols-5 { --sd-cols: 5; }
	#header #primary-nav > li.sd-cols-6 { --sd-cols: 6; }
	#header #primary-nav > li.sd-cols-7 { --sd-cols: 7; }
	#header #primary-nav > li.sd-mega > .nav-item-children {
		display: grid;
		grid-template-columns: repeat(var(--sd-cols, 6), minmax(0, 1fr));
		gap: 8px 20px;
		width: min(calc(var(--sd-cols, 6) * 210px + 56px), 1180px, calc(100vw - 48px));
		top: 100%;
		padding: 28px 28px 22px;
		max-height: calc(100vh - var(--sd-hb, 160px) - 16px); /* --sd-hb = header bottom, set by nav.js */
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	#header #primary-nav > li.sd-mega > .nav-item-children > li { min-width: 0; }
	#header #primary-nav > li.sd-mega > .nav-item-children > li:not(.menu-item-has-children):not(.sd-foot) > a {
		font-family: "Marcellus", serif; font-size: 16px; color: var(--sd-gold);
		padding: 4px 12px 10px; border-bottom: 1px solid #ece8e1; border-radius: 0;
	}
	/* "Before and After" footer row */
	#header #primary-nav > li.sd-mega > .nav-item-children > li.sd-foot { grid-column: 1 / -1; border-top: 1px solid #ece8e1; padding-top: 12px; margin-top: 8px; }
	#header #primary-nav > li.sd-mega > .nav-item-children > li.sd-foot > a {
		display: inline-flex; align-items: center; gap: 8px;
		background: var(--sd-cream); color: var(--sd-ink); font-weight: 600; padding: 10px 18px; border-radius: 999px;
	}
	#header #primary-nav > li.sd-mega > .nav-item-children > li.sd-foot > a::after { content: "→"; color: var(--sd-gold); }

	/* Split: About — links on the left, doctors list on the right */
	#header #primary-nav > li.sd-split > .nav-item-children {
		display: grid;
		grid-template-columns: 210px 1fr;
		grid-auto-flow: row dense;
		gap: 0 20px;
		width: 600px;
		padding: 20px;
	}
	#header #primary-nav > li.sd-split > .nav-item-children > li { grid-column: 1; }
	#header #primary-nav > li.sd-split > .nav-item-children > li.menu-item-has-children {
		grid-column: 2; grid-row: 1 / span 12;
		background: var(--sd-cream); border-radius: 12px; padding: 14px 8px;
	}
	#header #primary-nav > li.sd-split > .nav-item-children > li.menu-item-has-children > .nav-item-children { columns: 2; column-gap: 4px; }
	#header #primary-nav > li.sd-split > .nav-item-children > li.menu-item-has-children > .nav-item-children > li { break-inside: avoid; }
}

/* Tighter top-level spacing on smaller desktops */
@media (min-width: 1200px) and (max-width: 1365px) {
	#header #primary-nav > li > a { padding-left: 10px; padding-right: 10px; font-size: 14.5px; }
}

/* ---------- Mobile / tablet (< 1200px) ---------- */
@media (max-width: 1199px) {
	#header { position: sticky; top: var(--sd-top); z-index: 1000; }
	@media (max-width: 600px) { #header { top: 0; } } /* WP admin bar scrolls away on phones */
	/* theme's body{overflow-x:hidden} turns body into a scroll box and breaks sticky; clip does the same job without that */
	html:not(.mobile-nav-activated) body { overflow-x: clip; overflow-y: visible; }

	#header .lqd-mobile-sec-inner { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
	#header .lqd-mobile-sec .navbar-toggle .bar { background: var(--sd-ink); }

	/* Drawer: scrolls inside itself, big tap targets */
	#header #mobile-primary-nav {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 90px);
		max-height: calc(100dvh - 90px);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		padding: 8px 0 20px;
		box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
	}
	#header #mobile-primary-nav li { position: relative; border: 0; }
	#header #mobile-primary-nav > li { border-bottom: 1px solid #f0ece6; }
	#header #mobile-primary-nav > li > a {
		display: block;
		font-size: 17px;
		font-weight: 500;
		color: var(--sd-ink);
		padding: 15px 64px 15px 24px;
	}
	#header #mobile-primary-nav li.current-menu-item > a { color: var(--sd-gold); }

	/* Expander: 44px round tap target beside the link (Hub's JS moves it into the <li>, so pin it to the top row) */
	#header #mobile-primary-nav .submenu-expander {
		top: 4px !important; right: 12px;
		width: 44px; height: 44px;
		transform: none;
		display: flex; align-items: center; justify-content: center;
		border-radius: 50%;
		background: var(--sd-cream);
		color: var(--sd-ink);
		font-size: 13px;
		transition: transform .25s, background-color .2s;
	}
	#header #mobile-primary-nav li.is-active > .submenu-expander,
	#header #mobile-primary-nav li.is-active > a > .submenu-expander { transform: rotate(180deg); background: #ece6dc; }

	/* Sub levels */
	#header #mobile-primary-nav .nav-item-children { background: var(--sd-cream); padding: 6px 0; margin: 0; }
	#header #mobile-primary-nav .nav-item-children > li > a {
		display: block;
		padding: 11px 64px 11px 36px;
		font-size: 15.5px;
		color: var(--sd-ink);
		text-transform: none;
	}
	#header #mobile-primary-nav .nav-item-children .nav-item-children { background: #efebe3; }
	#header #mobile-primary-nav .nav-item-children .nav-item-children > li > a { padding-left: 50px; font-size: 15px; color: var(--sd-muted); }
	#header #mobile-primary-nav .nav-item-children .submenu-expander { top: 3px !important; width: 36px; height: 36px; background: #fff; }

	/* Book Now + Call as buttons at the bottom of the drawer */
	#header #mobile-primary-nav > li.sd-cta,
	#header #mobile-primary-nav > li.sd-call { order: 99; border: 0; padding: 0 20px; }
	#header #mobile-primary-nav > li.sd-cta { margin-top: 18px; }
	#header #mobile-primary-nav > li.sd-call { margin-top: 10px; }
	#header #mobile-primary-nav > li.sd-cta > a,
	#header #mobile-primary-nav > li.sd-call > a {
		text-align: center;
		border-radius: 999px;
		padding: 14px 20px;
		font-weight: 600;
		font-size: 16px;
	}
	#header #mobile-primary-nav > li.sd-cta > a { background: var(--sd-sage); color: #fff; }
	#header #mobile-primary-nav > li.sd-call > a { border: 1.5px solid var(--sd-sage); color: var(--sd-sage-dark); }
}

@media (prefers-reduced-motion: reduce) {
	#header, #header * { transition: none !important; }
}