/*
 * G-03 site header and primary navigation (Phase 6). Ported from the redesign
 * PoC (css/site.css @ ed0ab9f7, "Header") using theme.json tokens and base.css
 * aliases only; docs/05 §5 "Navigation" and "Buttons".
 *
 * Without JavaScript the navigation is a visible list. With JavaScript, a
 * one-line inline script in <head> adds `.js` to <html> before the first
 * paint (docs/12 §2), so the navigation is a drawer below the md breakpoint
 * (900px, docs/05 §3.1) from the start, with no layout shift when nav.js
 * runs. nav.js wires the toggle and adds `.is-open` while the drawer is open.
 *
 * Literal values kept from the PoC: 1px borders, the 2px current-page
 * underline and its 8px offset, the backdrop blur (14px, saturate 140%), the
 * 8px drawer slide and the 22px toggle icon.
 */

/* Keep focused elements clear of the sticky header (WCAG 2.4.11, docs/13). */
html {
	scroll-padding-top: calc(var(--wp--custom--header--height) + var(--wp-admin--admin-bar--height, 0px));
}

.site-header {
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px));
	z-index: 50;
	border-bottom: 1px solid var(--line-soft);
	background: color-mix(in srgb, var(--c-black) 72%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
}

.site-header-inner {
	display: flex;
	gap: var(--wp--custom--gap--stack);
	align-items: center;
	justify-content: space-between;
	height: var(--wp--custom--header--height);
}

.site-brand img {
	display: block;
	width: auto;
	height: var(--wp--custom--header--logo-height);
}

/* ---------- Desktop navigation ---------- */

.site-nav {
	display: flex;
	gap: var(--wp--custom--header--nav-cta-gap);
	align-items: center;
}

.site-nav-list {
	display: flex;
	gap: var(--wp--custom--header--nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-list a {
	position: relative;
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--nav);
	font-weight: 500;
	color: var(--c-muted);
	text-decoration: none;
}

.site-nav-list a:hover,
.site-nav-list a[aria-current="page"] {
	color: var(--c-text);
}

.site-nav-list a[aria-current="page"]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -8px;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--gradient-brand);
}

.site-nav-cta {
	display: inline-flex;
	align-items: center;
	border: 1px solid transparent;
	padding: var(--wp--custom--header--cta-padding);
	font-size: var(--wp--custom--font-size--nav-cta);
}

.site-nav-cta:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-1px);
}

/* ---------- Menu toggle (shown only when JavaScript is available) ---------- */

.site-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--header--toggle-size);
	height: var(--wp--custom--header--toggle-size);
	border: 1px solid var(--line);
	border-radius: var(--wp--preset--border-radius--input);
	padding: 0;
	background: none;
	color: var(--c-text);
	cursor: pointer;
}

.site-nav-toggle svg {
	width: 22px;
	height: 22px;
}

.site-nav-toggle-close,
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-open {
	display: none;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-close {
	display: block;
}

.site-nav-toggle:not(.has-text-label) .site-nav-toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Below md: drawer (enhanced) or plain list (no JS) ---------- */

@media (max-width: 900px) {

	.site-nav {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}

	/* Without JS: a static header with the navigation listed under the logo. */
	:where(html:not(.js)) .site-header {
		position: relative;
		top: auto;
	}

	:where(html:not(.js)) .site-header .site-header-inner {
		flex-wrap: wrap;
		height: auto;
	}

	:where(html:not(.js)) .site-header .site-brand {
		display: flex;
		align-items: center;
		min-height: var(--wp--custom--header--height);
	}

	:where(html:not(.js)) .site-header .site-nav {
		flex-basis: 100%;
		padding-bottom: var(--wp--custom--gap--stack-lg);
	}

	.js .site-header .site-nav-toggle {
		display: inline-flex;
	}

	.js .site-header .site-nav {
		position: fixed;
		top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header--height));
		right: 0;
		left: 0;
		border-bottom: 1px solid var(--line);
		padding: var(--wp--custom--gap--stack) var(--wp--custom--gutter) var(--wp--custom--gap--stack-lg);
		background: var(--c-ink-deep);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
	}

	.site-header.is-open .site-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav-list {
		flex-direction: column;
		gap: 0;
	}

	.site-nav-list a {
		display: block;
		border-bottom: 1px solid var(--line-soft);
		padding-block: var(--wp--custom--gap--stack);
		font-size: var(--wp--custom--font-size--nav-drawer);
	}

	.site-nav-list a[aria-current="page"] {
		color: var(--c-orange);
	}

	.site-nav-list a[aria-current="page"]::after {
		display: none;
	}

	.site-nav-cta {
		justify-content: center;
		margin-top: var(--wp--custom--gap--stack);
	}
}

/* The admin bar scrolls away on small screens; the header then sits at the top. */
@media (max-width: 600px) {

	.admin-bar .site-header {
		--wp-admin--admin-bar--height: 0px;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.site-nav-list a {
		transition: color var(--wp--custom--motion--fast);
	}

	.site-nav-cta {
		transition: background-color var(--wp--custom--motion--fast), box-shadow var(--wp--custom--motion--fast), transform var(--wp--custom--motion--fast);
	}

	/* Closing: fade out, then hide. */
	.js .site-header .site-nav {
		transition: opacity var(--wp--custom--motion--fast), transform var(--wp--custom--motion--fast), visibility 0s linear var(--wp--custom--motion--fast);
	}

	/* Opening: visible at once, so keyboard focus can enter the drawer
	   immediately (a transitioned visibility stays hidden until the first
	   frame), then fade in. */
	.js .site-header.is-open .site-nav {
		transition: opacity var(--wp--custom--motion--fast), transform var(--wp--custom--motion--fast), visibility 0s;
	}
}