/**
 * Site header, per the alston-alt design: logo centred on top, nav row
 * centred beneath it, on every page. Loaded after components.css
 * (inc/enqueue.php), so it overrides the base header rules there by source
 * order; the markup is unchanged (template-parts/header/brand-bar.php with
 * the real primary menu and Alston_Late_Mega_Walker).
 *
 * At nav widths the tall header scrolls with the page until only its bottom
 * 64px is left on screen, then pins there: sticky (fixed on the home page)
 * with a negative top of --header-scroll-away. So the logo leaves by plain
 * scrolling, and the nav row is inside the pinned strip when it stops. At
 * that point theme.js adds .site-header--stuck, the row becomes the compact
 * bar (logo left, nav right), and the logo slides in from the left while the
 * links glide across to their new places.
 *
 * The header keeps ONE height (--header-block-h) in both states, so the
 * content below it never moves.
 *
 * On the home page (body.has-immersive-hero, inc/home.php) the header floats
 * over the hero photo on a solid white ground — deliberately no gradient.
 *
 * Sizes are the design's pixels, not the --sp-* scale, on purpose.
 */

/* --- Where the header pins --- */

/*
 * --header-pin is the top edge it pins to: 0, or under the WordPress admin
 * bar. At nav widths the header pins that far minus --header-scroll-away
 * (below), which is what scrolls the logo away first.
 */
.site-header {
	--header-pin: 0px;

	top: var(--header-pin);
}

.admin-bar .site-header {
	--header-pin: var(--wp-admin--admin-bar--height, 32px);
}

/* At 600px and below core's admin bar scrolls away (position: absolute), so a stuck header would leave a gap. */
@media (max-width: 600px) {
	.admin-bar .site-header--stuck {
		--header-pin: 0px;
	}
}

/* --- Every page, at nav widths --- */

/* The nav is only rendered at this width; below it the burger row stands. */
@media (min-width: 1024px) {
	.site-header {
		/* 20 + 66 logo + 14 white below it, then the 64px band, plus the 1px border. */
		--header-block-h: 165px;
		/*
		 * How far the header scrolls before it pins: everything but the
		 * 64px bar and its border, i.e. --header-block-h - --header-h-sticky
		 * - 1. A plain length because theme.js reads it. The logo ends at 86, so 14px of white sits under it.
		 */
		--header-scroll-away: 100px;

		top: calc(var(--header-pin) - var(--header-scroll-away));
		height: var(--header-block-h);
	}

	/* The theme's own height/max-height transitions (components.css) would fight the glide. */
	.site-header,
	.site-header__inner,
	.site-header__brand img,
	.site-header__logo {
		transition: none;
	}

	/*
	 * Full-bleed, with the content aligned to the 1440px wrap by padding
	 * instead of max-width, so the mega panel (positioned against this
	 * element) stays edge to edge. Relative so the panel's top: 100%
	 * measures from this box — the compact row when stuck, not the outer.
	 */
	.site-header__inner {
		position: relative;
		max-width: none;
		padding-inline: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter)));
	}

	/* The bar fills the pinned strip at the bottom of the header. Padding, as a margin on the row would collapse through the header. */
	.site-header--stuck {
		padding-top: var(--header-scroll-away);
	}

	/*
	 * The nav row sits on a full-bleed Alston blue band: the bottom 64px of
	 * the header, which is exactly the strip that pins, so the band and the
	 * stuck bar are one and the same. The logo keeps its white ground above.
	 */
	.site-header {
		background: linear-gradient(to bottom, var(--surface) var(--header-scroll-away), var(--brand-navy) var(--header-scroll-away));
		border-bottom-color: var(--brand-navy);
	}

	/* 20 + 66 logo + 27 + ~39 nav row + 12 centres the row in the band. */
	.site-header:not(.site-header--stuck) .site-header__inner {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 27px;
		height: auto;
		padding-top: 20px;
		padding-bottom: 12px;
	}

	/*
	 * Stuck, the whole bar is blue, so the full-colour logo (navy and black
	 * on white) gives way to the reversed one: white with the red kept.
	 */
	.site-header--stuck .site-header__brand {
		display: flex;
		align-items: center;
		align-self: stretch;
	}

	.site-header--stuck .site-header__brand > :not(.site-header__logo-reversed) {
		display: none;
	}

	.site-header--stuck .site-header__logo-reversed {
		display: block;
	}

	/* A set height, as max-width: 100% inside the shrinking flex item would collapse it. */
	.site-header--stuck .site-header__logo-reversed img {
		display: block;
		height: calc(var(--header-h-sticky) - var(--sp-4));
		max-width: none;
	}

	.site-header:not(.site-header--stuck) .site-header__brand img,
	.site-header:not(.site-header--stuck) .site-header__logo {
		max-height: 66px;
	}

	/*
	 * One line, always, so the stack height stays constant. The gap tightens
	 * with the viewport: 14px at 1024, the design's 42px from ~1400 up.
	 */
	.site-header:not(.site-header--stuck) .nav {
		flex-wrap: nowrap;
		justify-content: center;
		gap: clamp(14px, calc((100vw - 900px) / 12), 42px);
	}
}


/* Only the compact bar at nav widths shows it (above). */
.site-header__logo-reversed {
	display: none;
}

/*
 * The compact bar's cap for a real custom logo (components.css only shrinks
 * the placeholder .site-header__logo).
 */
.site-header--stuck .site-header__brand img {
	max-height: calc(var(--header-h-sticky) - var(--sp-4));
}

/* The drawer opens under the compact bar when stuck; it is the header's next sibling. */
.site-header--stuck + .drawer {
	inset-block-start: var(--header-h-sticky);
}

/* --- Top-level nav links, in both states --- */

/*
 * Heavier than the design's 600: the client wants the row to read bolder.
 * White on the blue band, a size up so it holds against the dark ground.
 */
.nav__item--depth-0 > .nav__link {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.17em;
	color: var(--ink-invert);
}

/*
 * Top-level only: the mega panel's column headings keep the navy hover.
 * Red text would sink into the blue, so the red underline marks the hover.
 */
.nav__item--depth-0 > .nav__link:hover {
	color: var(--ink-invert);
}

/* The base focus ring is navy, the same as the band. */
.nav__item--depth-0 > .nav__link:focus-visible {
	outline: 2px solid var(--ink-invert);
	outline-offset: 4px;
}

/* The design draws the underline in red. */
.nav__item--depth-0 > .nav__link::after {
	background: var(--brand-red);
}

/* --- Home page: float over the hero --- */

/*
 * Out of flow at the top (absolute) so the hero starts at the top of the
 * viewport with no offset to keep in sync with the header's height, and out
 * of flow when stuck (fixed) so the switch never shifts layout. The ground
 * stays the plain white from components.css.
 */
.has-immersive-hero .site-header {
	position: absolute;
	left: 0;
	right: 0;
}

.has-immersive-hero .site-header--stuck {
	position: fixed;
}

/* Absolute until stuck, so it scrolls from the very top of the page. */
@media (min-width: 1024px) {
	.has-immersive-hero .site-header:not(.site-header--stuck) {
		top: var(--header-pin);
	}
}