/**
 * Site header — template-parts/header.php.
 *
 * Kept as its own file rather than folded into main.css: it's a large,
 * page-chrome-specific component (not a small reusable primitive like
 * .btn/.card/.badge), same "several small hand-authored files, not one"
 * convention main.css's own docblock establishes. Loads after main.css
 * (see inc/enqueue.php) and reuses its tokens/components throughout —
 * .container, .btn, .badge, and the signal-chevron classes are NOT
 * redefined here, only referenced.
 *
 * New tokens this component needed and didn't have (see tokens.css'
 * "Site chrome" block): --header-height, --header-scroll-threshold,
 * --z-header, --z-header-panel.
 */

/* =========================================================
   Fixed-header offset. .site-header is position:fixed (needed for the
   transparent-over-hero effect), which pulls it out of flow — without
   this, every page's content starts at y:0 and sits underneath it. A
   future hero section that wants the true transparent-header-over-visual
   effect should cancel this out locally (negative margin-top: calc(var(--header-height) * -1)
   on the hero itself), not remove this rule globally.
   ========================================================= */

body {
	padding-top: var(--header-height);
}

/* =========================================================
   Skip link — first focusable element in the DOM (see header.php).
   z-index is a literal 9999, not a token: a skip link must
   unconditionally sit above everything, including --z-header, so it's
   deliberately exempt from the stacking scale rather than a hidden
   dependency on "whatever the highest token currently is".
   ========================================================= */

.skip-link {
	position: fixed;
	top: var(--space-4);
	left: var(--space-4);
	z-index: 9999;
	transform: translateY(-150%);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
	transform: translateY(0);
}

/* =========================================================
   Scroll sentinel — assets/js/header.js observes this instead of
   attaching a scroll listener. Zero footprint: absolutely positioned
   against the document's initial containing block, so it takes up no
   layout space but still scrolls out of view exactly like page content
   would. Its height IS the threshold — JS never needs the pixel value.
   ========================================================= */

.header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: var(--header-scroll-threshold);
	pointer-events: none;
}

/* =========================================================
   Header shell — fixed, transparent -> solid on scroll.
   Only background-color/border-color/box-shadow/opacity transition
   (paint, not layout) and --header-height never changes between states,
   so this never causes layout shift.
   ========================================================= */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	background-color: transparent;
	border-bottom: 2px solid transparent;
	transition: background-color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard);
}

/* Scrim: guarantees header text stays legible over whatever hero content
   ends up behind it (no hero exists yet — this is defensive). Built from
   --color-bg via color-mix(), not a new color token. Fades out once the
   header goes solid, since the solid surface already provides contrast. */
.site-header::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: calc(var(--header-height) * 3);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 70%, transparent), transparent);
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--duration-base) var(--ease-standard);
}

/* Solid state — a thin COBALT bottom border, not a neutral hairline: the
   brief asks for this explicitly ("thin cobalt/accent bottom border"),
   and it doubles as a small recurring brand cue, like a broadcast
   graphics package's underline bar. 2px (not main.css's usual 1px hairline)
   so the accent line actually reads at a glance, not just on close look. */
.site-header.is-scrolled {
	background-color: var(--color-surface);
	border-bottom-color: var(--color-accent);
	box-shadow: var(--shadow-sm);
}

.site-header.is-scrolled::before {
	opacity: 0;
}

.site-header__inner {
	position: relative;
	/* Stays above .site-header__panel: the panel is a DOM descendant of
	   .site-header, not a page-level sibling, so an un-indexed positioned
	   element here loses to the panel's z-index regardless of the numbers
	   involved. Without this, the open panel covers the toggle button, so
	   the hamburger-turned-X has nothing left to click to close the menu. */
	z-index: calc(var(--z-header-panel) + 1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: var(--header-height);
}

/* =========================================================
   Brand / wordmark
   ========================================================= */

/* Reset applied regardless of whether this renders as <h1> or <p> (see
   header.php's is_front_page() check) — h1/p base styles from main.css
   would otherwise leak into the header. */
.site-header__brand {
	margin: 0;
	min-width: 0; /* lets the flex item actually shrink so .site-header__brand-name's ellipsis can kick in, instead of wrapping or pushing the CTA/toggle out */
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: 1;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase; /* one of the few places sitewide uppercase earns its keep by default — a short condensed wordmark, not a long heading, see main.css's .text-uppercase note */
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.site-header__brand-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-standard);
}

.site-header__brand-link:hover {
	color: var(--color-accent);
}

.site-header__brand-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.site-header__brand-logo-img {
	height: calc(var(--header-height) * 0.55);
	width: auto;
}

/* =========================================================
   Primary nav + trust bar cluster (desktop, >= --bp-desktop / 1024px)
   Grouped in one wrapper so .site-header__inner's space-between reads as
   three zones (brand / nav+trust / actions), not four independently
   spaced children.
   ========================================================= */

.site-header__nav-group {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.site-header__nav {
	display: none;
}

.site-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-header__nav-list a {
	position: relative;
	display: inline-block;
	padding-block: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-standard);
}

/* Sharp underline, not a soft glow — 2px flat bar, square ends (default
   for a block box, no border-radius added). */
.site-header__nav-list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-fast) var(--ease-emphasized);
}

.site-header__nav-list a:hover {
	color: var(--color-text);
}

.site-header__nav-list a:hover::after {
	transform: scaleX(1);
}

.site-header__nav-list .current-menu-item > a {
	color: var(--color-text);
}

.site-header__nav-list .current-menu-item > a::after {
	transform: scaleX(1);
}

/* =========================================================
   Trust micro-bar (desktop only — see header.php for why)
   ========================================================= */

.site-header__trust {
	display: none;
}

.site-header__trust-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	white-space: nowrap;
}

.site-header__trust-rating .icon {
	color: var(--color-accent);
	width: 14px;
	height: 14px;
}

.site-header__trust-rating strong {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

/* =========================================================
   Actions (CTA + mobile toggle) — always visible, never collapsed
   ========================================================= */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.site-header__toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

/* Square-cut bars (no border-radius) — Midnight Broadcast's hamburger
   uses fully-rounded bars; this brand's "sharp corners, not rounded" rule
   applies here too, so the one visible exception stays scoped to badges/
   pills only, per main.css section 6's own note. */
.site-header__toggle-bar {
	display: block;
	width: 1.375rem;
	height: 2px;
	background: var(--color-text);
	transition: transform var(--duration-base) var(--ease-standard),
		opacity var(--duration-fast) var(--ease-standard);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   Mobile nav panel (< --bp-desktop / 1024px)
   Full-screen overlay, not a narrow slide-in drawer — same reasoning as
   Midnight Broadcast's header: the French nav labels ("Abonnements",
   "Tutoriels") get room to breathe instead of wrapping in a 280px
   drawer. A short travel distance (6px, vs. a typical 8-16px slide) keeps
   the reveal feeling like a snap-open rather than a slow slide, matching
   this brand's faster motion tokens. Reduced motion isn't handled here —
   main.css's global prefers-reduced-motion rule already collapses this
   transition to near-instant.
   ========================================================= */

.site-header__panel {
	position: fixed;
	inset: 0;
	z-index: var(--z-header-panel);
	display: flex;
	flex-direction: column;
	padding-block-start: var(--header-height);
	background: var(--color-bg);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-emphasized);
}

.site-header__panel.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.site-header__panel-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	overflow-y: auto;
	padding: var(--space-6) var(--container-padding-inline) var(--space-9);
}

.site-header__panel-nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-header__panel-nav-list a {
	display: block;
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-standard);
}

.site-header__panel-nav-list a:hover {
	color: var(--color-accent);
}

.site-header__panel-nav-list .current-menu-item > a {
	color: var(--color-accent);
}

.site-header__panel-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

/* Body scroll lock while the panel is open, set on <html> by header.js. */
.has-open-header-panel {
	overflow: hidden;
}

/* =========================================================
   Breakpoint: desktop and up (>= --bp-desktop / 1024px, matches
   assets/js/header.js's desktopQuery and the design system's canonical
   breakpoint numbers documented in tokens.css)
   ========================================================= */

@media (min-width: 1024px) {
	.site-header__nav {
		display: flex;
		align-items: center;
		gap: var(--space-6);
	}

	.site-header__trust {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.site-header__toggle {
		display: none;
	}

	.site-header__panel {
		display: none;
	}
}