/**
 * P15 — Hero Sub-navigation Bar (anchor-nav)
 *
 * A full-content-width pill bar rendered at the bottom of the interior hero.
 * Sticks under the site header once the hero scrolls off-screen.
 *
 * Tokens used (no hardcoded values except the sticky-top offset which cannot
 * reference a CSS var in position:sticky top calculation directly):
 *   --blg-color-accent-1  (#0974BC, Figma 273:5060 bar background)
 *   --blg-color-base        (white — pill text / link colour)
 *   --blg-color-secondary   (indigo — active underline, hover bg)
 *   --blg-radius-pill       (100px — pill shape)
 *   --blg-radius-md         (12px — admin empty-state corners; bar itself = 10px per Figma)
 *   --blg-radius-sm         (4px  — dropdown panel corners)
 *   --blg-shadow-sm         (dropdown shadow)
 *   --blg-font-body         (Inter)
 *   --blg-transition-fast / --blg-transition-base
 *   --blg-z-header + 1      (sticky bar sits just above content, below header)
 *   --blg-edge-pad          (horizontal inset matches content column)
 */

/* ── Sticky-top calculation ──────────────────────────────────────────────────
   The site header wrapper is position:sticky (see global.css), staying at the top
   and shrinking to the main bar (--blg-mainbar-height) on scroll. This bar sticks
   directly UNDER it, so its sticky `top` = the collapsed header height + the WP
   admin-bar height (32/46px logged-in, 0 in production). Defined as a custom
   property for easy override. */
:root {
	--blg-subnav-bar-height: 50px;
	/* Docks directly UNDER the sticky primary nav (its height), + the WP admin bar
	   for logged-in users (0 in production). */
	--blg-subnav-sticky-top: calc(
		var(--wp-admin--admin-bar--height, 0px) + var(--blg-mainbar-height)
	);
	--blg-subnav-active-bar: 6px; /* active-item underline thickness (Figma) */
	--blg-subnav-font-size: 1.0625rem; /* 17px, Figma Inter SemiBold */
}

/* ── Empty / admin-only placeholder ─────────────────────────────────────────── */

.kd-subnav-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--blg-subnav-bar-height);
	background: rgba(9, 116, 188, 0.15);
	border-radius: var(--blg-radius-md);
	font-size: 0.875rem;
	color: var(--blg-color-base);
	font-style: italic;
	margin-inline: var(--blg-edge-pad);
}

/* ── Bar outer wrapper ───────────────────────────────────────────────────────── */

.kd-subnav-bar {
	/* Content-width floating bar — aligns to the same column as the page content
	   (Figma 273:5060: 1224px bar inset by the gutter in a 1440 frame), NOT full
	   bleed. --blg-edge-pad is the shared content-column inset, so the bar's left/
	   right edges line up with the sections below it. */
	margin-inline: var(--blg-edge-pad);
	/* Seat the bar into the hero's bottom band (Figma 273:5060: nav sits inside
	   the hero, bottom edge flush with the hero). The bar renders at <main> level
	   for sticky to work, so we pull it up by its own height to overlap the hero's
	   bottom padding zone. z-index keeps it above the hero gradient. */
	margin-top: calc(-1 * var(--blg-subnav-bar-height));
	background-color: var(--blg-color-accent-1);
	border-radius: 10px; /* Figma 273:5060 bar corners */
	box-shadow: 0 4px 10px 3px rgba(0, 0, 0, 0.05);
	overflow: visible; /* allow dropdown panels to escape */

	/* Sticky behaviour: docks under the header when the bar reaches the top */
	position: sticky;
	top: var(--blg-subnav-sticky-top);
	z-index: calc(var(--blg-z-header) - 1);

	/* Smoothly widen to full-bleed when it docks under the header */
	transition:
		margin var(--blg-transition-base),
		border-radius var(--blg-transition-base);
}

/* Docked — full-width edge-to-edge once the bar sticks beneath the primary nav.
   JS (anchor-nav.js) toggles .is-docked when the bar reaches the header bottom. */
.kd-subnav-bar.is-docked {
	margin-inline: 0;
	border-radius: 0;
}

/* Docked: right-align the items so they line up with the (right-aligned) primary
   menu above, padded to the same content gutter. At rest (in the hero) the menu
   stays left-aligned. */
.kd-subnav-bar.is-docked .kd-subnav-menu {
	justify-content: flex-end;
	padding-inline: var(--blg-edge-pad);
}

/* ── Nav + menu ─────────────────────────────────────────────────────────────── */

.kd-subnav-wrap {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.kd-subnav-menu {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* left-aligned — robust for variable real-world menus (the bar is wider than the items) */
	flex-wrap: wrap;
	gap: var(--blg-space-md);
	margin: 0;
	padding: 0 var(--blg-space-lg);
	list-style: none;
	width: 100%;
	min-height: var(--blg-subnav-bar-height);
}

/* ── Menu items ─────────────────────────────────────────────────────────────── */

.kd-subnav-menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* Top-level links */
.kd-subnav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0 var(--blg-space-sm);
	height: var(--blg-subnav-bar-height);
	font-family: var(--blg-font-body);
	font-size: var(--blg-subnav-font-size);
	font-weight: 600;
	line-height: 1.2;
	color: var(--blg-color-base);
	text-decoration: none;
	white-space: nowrap;
	border-radius: 0;
	transition: background-color var(--blg-transition-fast);
	position: relative;
}

.kd-subnav-menu > li > a:hover,
.kd-subnav-menu > li > a:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--blg-color-base);
	outline: none;
}

.kd-subnav-menu > li > a:focus-visible {
	outline: 2px solid var(--blg-color-base);
	outline-offset: -3px;
}

/* Active underline — 6px bottom bar (Figma spec) */
.kd-subnav-menu > li.is-active > a,
.kd-subnav-menu > li.current-menu-item > a {
	box-shadow: inset 0 calc(-1 * var(--blg-subnav-active-bar)) 0
		var(--blg-color-base);
}

/* ── Dropdown chevron ────────────────────────────────────────────────────────── */

/* Items with children get a chevron-down button beside the link text */
.kd-subnav-menu > li.menu-item-has-children > a {
	padding-right: calc(var(--blg-space-sm) * 0.75);
}

/* The chevron is appended by anchor-nav.js as a <button> sibling of the <a> */
.kd-subnav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: var(--blg-subnav-bar-height);
	padding: 0 0.25rem;
	background: transparent;
	border: none;
	color: var(--blg-color-base);
	cursor: pointer;
	transition: background-color var(--blg-transition-fast);
	flex-shrink: 0;
}

.kd-subnav-toggle:hover,
.kd-subnav-toggle:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	outline: none;
}

.kd-subnav-toggle:focus-visible {
	outline: 2px solid var(--blg-color-base);
	outline-offset: -3px;
}

/* Chevron icon inside the toggle button */
.kd-subnav-toggle svg {
	display: block;
	width: 12px;
	height: 12px;
	transition: transform var(--blg-transition-fast);
}

.kd-subnav-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* ── Dropdown panels ─────────────────────────────────────────────────────────── */

.kd-subnav-menu .sub-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	min-width: 200px;
	background: var(--blg-color-base);
	border-radius: var(--blg-radius-sm);
	box-shadow: var(--blg-shadow-sm);
	z-index: calc(var(--blg-z-header) + 10);

	/* Hidden by default — JS toggles aria-expanded and .is-open */
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity var(--blg-transition-fast),
		transform var(--blg-transition-fast),
		visibility var(--blg-transition-fast);
	pointer-events: none;
}

.kd-subnav-menu > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.kd-subnav-menu .sub-menu a {
	display: block;
	padding: 0.5rem 1.25rem;
	font-family: var(--blg-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--blg-color-contrast);
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--blg-transition-fast),
		background-color var(--blg-transition-fast);
}

.kd-subnav-menu .sub-menu a:hover,
.kd-subnav-menu .sub-menu a:focus-visible {
	color: var(--blg-color-primary);
	background-color: var(--blg-color-neutral-100);
	outline: none;
}

/* ── Disclosure button — hidden at ≥1024px (desktop only) ───────────────────── */

/*
 * The toggle button (.kd-subnav-mobile-toggle) is rendered server-side for all
 * viewports but hidden via display:none at ≥1024px. This keeps the DOM simple
 * (no JS insertion) while keeping the desktop bar byte-identical to the approved
 * design.
 */
.kd-subnav-mobile-toggle {
	display: none; /* hidden on desktop — shown only in the collapsed (mobile + tablet) block below */
}

/* ── Collapsed nav — disclosure button + dropdown panel (<1024px) ───────────── */
/*
 * Mobile AND tablet: below 1024px the bar collapses to a single full-width
 * disclosure button that opens a dropdown listing ALL items. This replaces both
 * the old horizontal-scroll strip (mobile) and the multi-row wrapping the
 * horizontal bar produced at tablet widths with an unknown item count
 * (client decision 2026-06: extend the disclosure up through tablet rather than
 * wrap or use a "More" overflow).
 *
 * No designer frame exists for the collapsed states; behaviour derived from the
 * desktop design + token spec. FLAG: responsive pass needs designer review.
 */

@media (max-width: 1023.98px) {
	/* Bar: edge-to-edge strip, sits below the hero in normal flow on mobile.
	   overflow:visible so the dropdown panel can escape the bar boundary. */
	.kd-subnav-bar {
		margin-inline: 0;
		margin-top: 0; /* no negative pull — sits below the hero */
		border-radius: 0;
		position: sticky;
		top: var(--blg-subnav-sticky-top);
		overflow: visible;
	}

	/* Wrap stretches to fill the bar width. */
	.kd-subnav-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	/* ── Disclosure toggle button ──────────────────────────────────────────────
	   Full-width; minimum 44px touch target (WCAG 2.5.8). Flex so the label
	   left-aligns and the chevron right-aligns in a single row. */
	.kd-subnav-mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 44px; /* WCAG 2.5.8 minimum touch target */
		padding: 0 var(--blg-space-lg);
		background: transparent;
		border: none;
		color: var(--blg-color-base);
		font-family: var(--blg-font-body);
		font-size: var(--blg-subnav-font-size);
		font-weight: 600;
		cursor: pointer;
		text-align: left;
	}

	.kd-subnav-mobile-toggle:focus-visible {
		outline: 2px solid var(--blg-color-base);
		outline-offset: -3px;
	}

	/* Chevron SVG — matches size of the existing desktop dropdown toggle. */
	.kd-subnav-mobile-toggle svg {
		display: block;
		width: 12px;
		height: 12px;
		flex-shrink: 0;
		margin-left: var(--blg-space-sm);
		transition: transform var(--blg-transition-fast);
	}

	/* Rotate chevron 180° when open — mirrors .kd-subnav-toggle[aria-expanded="true"] svg */
	.kd-subnav-mobile-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* ── Dropdown panel ────────────────────────────────────────────────────────
	   The nav <ul> is hidden by default; becomes an absolute overlay when open.
	   Absolute positioning means it overlays content below rather than pushing it
	   down (prevents layout shift on open/close). */
	.kd-subnav-menu {
		/* Hidden state */
		display: none;
		position: absolute;
		top: 100%; /* immediately below the bar */
		left: 0;
		right: 0;
		z-index: calc(var(--blg-z-header) + 10);
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		padding: var(--blg-space-xs) 0;
		min-height: unset;
		width: 100%;
		background: var(--blg-color-accent-1);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	}

	/* Panel open — JS adds .is-open to the nav element via aria-expanded. */
	.kd-subnav-menu.is-open {
		display: flex;
	}

	/* Top-level items: full-width stacked rows. */
	.kd-subnav-menu > li {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	/* Top-level links: full-width, 44px min touch target. */
	.kd-subnav-menu > li > a {
		height: auto;
		min-height: 44px; /* WCAG 2.5.8 */
		padding: var(--blg-space-sm) var(--blg-space-lg);
		font-size: 1rem;
		white-space: normal;
		border-radius: 0;
	}

	/* Desktop dropdown toggle button: hide below 1024px (children shown inline). */
	.kd-subnav-toggle {
		display: none;
	}

	/* Child items (depth-2): always visible inside the panel, indented.
	   No sub-sub-menus in this design, but depth-2 must be reachable. */
	.kd-subnav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		box-shadow: none;
		background: transparent;
		border-radius: 0;
		padding: 0;
		min-width: unset;
		/* Always show children in the mobile panel — no separate toggle. */
		display: block;
	}

	.kd-subnav-menu .sub-menu a {
		padding-left: calc(var(--blg-space-lg) + 1rem); /* indent under parent */
		color: rgba(
			255,
			255,
			255,
			0.82
		); /* slightly dimmed to distinguish from top level */
		font-size: 0.9375rem;
		min-height: 44px; /* WCAG 2.5.8 */
		display: flex;
		align-items: center;
	}

	.kd-subnav-menu .sub-menu a:hover,
	.kd-subnav-menu .sub-menu a:focus-visible {
		color: var(--blg-color-base);
		background-color: rgba(255, 255, 255, 0.1);
	}

	/* Active underline: suppress on mobile (bar is full-width, underline reads oddly). */
	.kd-subnav-menu > li.is-active > a,
	.kd-subnav-menu > li.current-menu-item > a {
		box-shadow: none;
		background-color: rgba(255, 255, 255, 0.12);
	}

	/* Docked state: no change needed on mobile — bar is always edge-to-edge. */
	.kd-subnav-bar.is-docked .kd-subnav-menu {
		justify-content: flex-start;
		padding-inline: 0;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.kd-subnav-menu .sub-menu,
	.kd-subnav-toggle svg,
	.kd-subnav-mobile-toggle svg {
		transition: none;
	}
}