/**
 * Header critical CSS.
 *
 * Moved out of an inline <style> in header.php (which rendered mid-body and
 * caused a FOUC: the mega-menu panels painted open before the late style loaded).
 * Enqueued in <head> (render-blocking) via ms_enqueue_header_css() so panels are
 * hidden and positioned from first paint. Uses main.css custom properties.
 */

/* ── Sticky header ─────────────────────────────────────
   The nav is buried under several ACF/FSE block wrappers, none tall enough
   for CSS `position: sticky` to behave. The sticky-header.js script adds
   `.ms-header-stuck` to <body>, which switches the nav to `position: fixed`
   and pads the body so content doesn't jump up by the nav's height. */
/* --ms-announce-height (set by sticky-header.js) is the announcement bar's
   height, or 0 when it's absent/dismissed. It stacks below the WP admin bar
   (--ms-header-top) and above the header. */
body.ms-header-stuck {
	padding-top: calc(var(--ms-announce-height, 0px) + var(--ms-header-height, 72px));
}
body.ms-header-stuck nav.sticky {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--ms-header-top, 0px) + var(--ms-announce-height, 0px));
}

/* ── Top-level nav bar links: white, no underline ─────── */
.nav-link,
.nav-link:visited,
.nav-link:hover,
.nav-link:active,
.nav-link:focus {
	text-decoration: none !important;
	color: var(--color-morton-blue-content) !important;
}

/* ── Top-level nav links: animated center-out underline ── */
/* Applied to the title <span> so the rule never runs under the
   dropdown chevron. The bar scales from the center on hover/focus. */
.nav-link > span:first-child {
	position: relative;
}
.nav-link > span:first-child::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-item:hover .nav-link > span:first-child::after,
.nav-link:focus-visible > span:first-child::after {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.nav-link > span:first-child::after {
		transition: none;
	}
}

/* ── Mega menu: strip all underlines ─────────────────── */
.mega-menu-container a {
	text-decoration: none !important;
}

/* ── Mega menu: visible keyboard focus indicator ─────── */
/* Links inside the panel only show on hover/focus; once underlines are
   stripped they need an explicit ring so keyboard users can see focus. */
.mega-menu-container a:focus-visible {
	outline: 2px solid var(--color-morton-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Mega menu depth-1 category headings ─────────────── */
/* All categories — including the current page/ancestor — render the same:
   morton-blue, wonder-blue on hover. No "current page" highlight. */
.mega-menu-container .mega-menu-category > a,
.mega-menu-container .mega-menu-category > a:visited {
	color: var(--color-morton-blue) !important;
}
.mega-menu-container .mega-menu-category > a:hover {
	color: var(--color-wonder-blue) !important;
}

/* ── Mega menu depth-2 child links ───────────────────── */
/* Under current category: wonder-blue on hover */
.mega-menu-container .mega-menu-category.is-current-category ul a:hover,
.mega-menu-container .mega-menu-category.is-current-category ul .current-menu-item > a {
	color: var(--color-wonder-blue) !important;
}

/* Under other categories: morton-blue, wonder-blue on hover only.
   The currently-visited child link is no longer highlighted. */
.mega-menu-container .mega-menu-category:not(.is-current-category) ul a,
.mega-menu-container .mega-menu-category:not(.is-current-category) ul a:visited {
	color: var(--color-morton-blue) !important;
}
.mega-menu-container .mega-menu-category:not(.is-current-category) ul a:hover {
	color: var(--color-wonder-blue) !important;
}

/* ── Mega menu show/hide ───────────────────────────────── */
.mega-menu-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 50;
	background-color: #FEFBE7;
	box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.nav-item:hover .mega-menu-container,
.nav-item:focus-within .mega-menu-container,
.nav-item.is-open .mega-menu-container {
	opacity: 1;
	visibility: visible;
}

/* Parent labels are <button>s now (they open the menu instead of navigating);
   strip native button chrome so they match the old .nav-link anchors. Do NOT
   reset font/color here — those come from the .nav-link utility classes
   (text-fatfrank-display-1, text-morton-blue-content) and a `font`/`color`
   shorthand would out-specify and clobber them. */
.nav-item > button.nav-link {
	appearance: none;
	background: none;
	border: 0;
	padding-inline: 0;
	cursor: pointer;
}

/* Mobile second-level accordion: icon-only chevron toggle beside the (now
   navigating) group heading. 44x44 tap target exceeds WCAG 2.5.8 AA (24x24).
   The chevron points down when the group is open, right when collapsed. */
.mobile-l2-toggle {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
}
.mobile-l2-chevron {
	transition: transform 0.2s ease;
}
.mobile-l2-toggle[aria-expanded="true"] .mobile-l2-chevron {
	transform: rotate(90deg);
}

/* Keyboard: Escape collapses the menu while the parent link keeps focus.
   focus-within would otherwise hold it open, so this override wins. The
   hidden links drop out of the tab order, so Tab moves on to the next item. */
.nav-item.is-kb-collapsed .mega-menu-container {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Invisible bridge — keeps mega menu open as cursor moves
   from the nav link down to the panel */
.mega-menu-container::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 0.75rem;
}

/* ── Mobile overlay offset ───────────────────────────── */
/* Start the overlay below the WP admin bar + announcement bar (same vars the
   sticky header uses), so the menu opens beneath them rather than over them.
   Both vars are set on <body> by sticky-header.js and inherit down here. */
#mobile-nav-overlay {
	top: calc(var(--ms-header-top, 0px) + var(--ms-announce-height, 0px));
}

/* ── Mobile search: fatfrank font matching nav links ──── */
#mobile-nav-panel input[type="search"],
#mobile-nav-panel input[type="search"]::placeholder {
	font-family: fatfrank, var(--font-sans);
	font-weight: 400;
}

/* ── Header search: hide native clear (×) ──────────────── */
/* The inputs are type="search"; suppress WebKit's built-in clear button so it
   doesn't collide with our circular submit arrow. */
#header-search-desktop::-webkit-search-cancel-button,
#header-search-mobile::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* ── Mobile nav: strip all underlines & colors ───────── */
#mobile-nav-overlay a,
#mobile-nav-overlay a:visited,
#mobile-nav-overlay a:hover {
	text-decoration: none !important;
}

.mobile-nav-top-link,
.mobile-nav-top-link:visited {
	color: var(--color-morton-blue) !important;
}

.mobile-sub-panel a,
.mobile-sub-panel a:visited {
	color: var(--color-morton-blue) !important;
}

.mobile-sub-panel a:hover {
	color: var(--color-wonder-blue) !important;
}

.mobile-sub-panel summary {
	color: var(--color-morton-blue) !important;
}

details.group[open] > summary svg {
	transform: rotate(90deg);
}
