/**
 * Component: Primary + footer navigation
 * Usage: wrap a wp_nav_menu() call in <nav class="site-nav">.
 */

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/*
	 * Fluid between 0.5rem and the original fixed --space-4 (1.5rem)
	 * across the 40rem (mobile breakpoint) – 72rem (--wide-width) range
	 * — shrinks the gap between links as the screen narrows so the
	 * full menu stays on one inline row longer before falling back to
	 * the drawer. Literal rem bounds, not var() — see the h1/h2 comment
	 * in base.css.
	 */
	gap: clamp(0.5rem, -0.75rem + 3.125vw, 1.5rem);
}

.site-nav a {
	position: relative;
	display: inline-block;
	padding-bottom: 0.3em;
	font-family: var(--font-sans);
	/* Same idea as the ul gap above — shrinks between the mobile
	   breakpoint and --wide-width instead of staying fixed at
	   --font-size-sm until the nav abruptly wraps or overflows. */
	font-size: clamp(0.75rem, 0.516rem + 0.586vw, 0.9375rem);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-ink-soft);
	text-decoration: none;
	text-shadow: 0 0 0 transparent;
	/*
	 * UniversExt is a static webfont (not variable), so font-weight can't
	 * be smoothly animated between loaded weights — this fakes a "bolding"
	 * feel on hover by thickening the glyph strokes with offset shadows
	 * instead, which the browser CAN interpolate smoothly.
	 */
	transition: color var(--transition-base), text-shadow 200ms ease;
}

.site-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 200ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav .current-menu-item > a {
	color: var(--color-primary);
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Only the underline sweep is motion (a scaleX transform) — the
	 * color/text-shadow fade on .site-nav a itself is a plain color
	 * change, not a vestibular trigger, so it keeps transitioning. Same
	 * convention as button.css/card.css/news-list.css.
	 */
	.site-nav a::after {
		transition: none;
	}
}

.menu-toggle,
.menu-close {
	display: none;
}

@media (max-width: 40rem) {
	/*
	 * Both buttons hang off the page's top-right corner like a tab —
	 * flush against the top/right edges, rounded only on the inner
	 * (bottom-left) corner. Identical position so .menu-close sits
	 * exactly where .menu-toggle was, swapping in as its replacement
	 * rather than appearing somewhere else.
	 */
	.menu-toggle,
	.menu-close {
		position: absolute;
		top: 0;
		right: 0;
		align-items: center;
		gap: var(--space-2);
		background: var(--color-paper);
		border: 1px solid var(--color-border);
		border-top: none;
		border-right: none;
		border-radius: 0 0 0 var(--radius);
		padding: var(--space-2) var(--space-3);
		font-family: var(--font-sans);
		font-size: var(--font-size-sm);
		cursor: pointer;
		z-index: 101;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.menu-close {
		display: none;
	}

	.site-nav.toggled .menu-toggle {
		display: none;
	}

	.site-nav.toggled .menu-close {
		display: inline-flex;
	}

	.menu-toggle__icon {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.menu-close__icon {
		width: 1.25rem;
		height: 1.25rem;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.menu-close:hover,
	.menu-close:focus-visible {
		color: var(--color-primary);
	}

	/*
	 * Off-canvas slide-over panel, not an inline dropdown — taken out of
	 * normal flow entirely (position: fixed) so opening it never reflows
	 * or pushes the header/logo/page content around. Always display:flex
	 * (not display:none) so the transform can actually transition instead
	 * of snapping; visibility hidden/visible handles both hiding it off
	 * screen and keeping it out of the tab order while closed.
	 */
	.site-nav ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		width: min(80%, 20rem);
		margin: 0;
		padding: var(--space-6) var(--space-4);
		background: var(--color-paper);
		box-shadow: var(--shadow-raised);
		overflow-y: auto;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 300ms ease, visibility 300ms ease;
		z-index: 100;
	}

	.site-nav.toggled ul {
		visibility: visible;
		transform: translateX(0);
	}

	/*
	 * Dims the page behind the open drawer. A real element (not a
	 * ::before on .site-nav) and a sibling of <nav>, not a descendant of
	 * it — see header.php — so the existing click-outside-to-close JS
	 * (siteNavigation.contains(event.target)) correctly treats a click
	 * on it as "outside" and closes the menu, instead of the click
	 * being attributed to .site-nav itself.
	 */
	.nav-backdrop {
		position: fixed;
		inset: 0;
		background: var(--color-scrim);
		visibility: hidden;
		opacity: 0;
		transition: opacity 300ms ease, visibility 300ms ease;
		z-index: 99;
	}

	body.menu-open .nav-backdrop {
		visibility: visible;
		opacity: 1;
	}

	body.menu-open {
		overflow: hidden;
	}

	/*
	 * Applied briefly by navigation.js while the viewport crosses the
	 * mobile breakpoint — see the matchMedia listener there for why.
	 */
	body.no-transition .site-nav ul,
	body.no-transition .nav-backdrop {
		transition: none !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-nav ul,
		.nav-backdrop {
			transition: none;
		}
	}
}