/*
 * Narrow-screen header navigation.
 *
 * Loaded after style.css, and it only ever touches the header: the button, the
 * menu panel, and the list of links inside it. Every colour, size and space
 * comes from the tokens in style.css, so the header is still re-skinned in one
 * place.
 *
 * Below 900px the row of links is replaced by one button and a full-width
 * panel under the header: a wrapped row of links is the first thing a phone
 * visitor sees and the least usable thing on the site.
 *
 * The button stays hidden until the small script in header.php has run, so a
 * browser without JavaScript gets the menu as a plain stacked list below
 * instead of a button that does nothing.
 */

/* ===========================================================================
 * The button
 * ========================================================================= */

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 var(--space-xs);
	background: transparent;
	border: var(--hairline-dark);
	border-radius: var(--radius);
	color: var(--ink-on-dark);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle[hidden] {
	display: none;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	border-color: var(--accent-bright);
	color: var(--accent-bright);
}

.nav-toggle[aria-expanded="true"] {
	background: var(--navy);
	border-color: var(--accent-bright);
	color: var(--accent-bright);
}

.nav-toggle__bars {
	display: grid;
	gap: var(--space-2xs);
	width: 1.125rem;
}

.nav-toggle__bars span {
	display: block;
	height: 2px;
	background: currentColor;
}

/* ===========================================================================
 * Below 900px: one row in the header, the links in a panel under it
 * ========================================================================= */

@media (max-width: 899px) {
	.site-header {
		gap: var(--space-xs);
	}

	.nav-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	/*
	 * The panel runs edge to edge.
	 *
	 * `left: 0` / `right: 0` here are already the screen edges, and the reason
	 * is worth writing down because the obvious alternative is wrong: an
	 * absolutely positioned box is placed against the *padding* box of the
	 * positioned ancestor, not its content box. The header is the full width of
	 * the page and its padding is what holds the brand and the button in from
	 * the edge, but the padding box starts at the page's left edge all the
	 * same. Pulling the panel out by `var(--gutter)` to "escape" that padding
	 * therefore overshot it by the gutter on each side — 430px of panel in a
	 * 390px viewport, hanging 20px off each edge.
	 *
	 * Zero offsets cannot overshoot: the panel is exactly as wide as the page,
	 * so it cannot produce a sideways scroll, and it also avoids `100vw`, which
	 * counts the scrollbar on a desktop browser and would reintroduce the
	 * overflow this is meant to remove.
	 *
	 * The panel's own padding-inline is the same gutter the header uses, so the
	 * links line up with the brand above them.
	 */
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		margin: 0;
		padding: var(--space-2xs) var(--gutter) var(--space-sm);
		background: var(--navy-deep);
		border-top: var(--hairline-dark);
		border-bottom: var(--hairline-dark);
		box-shadow: var(--shadow-md);
	}

	.site-nav[hidden] {
		display: none;
	}

	.nav-list {
		display: grid;
		gap: 0;
	}

	.nav-list li {
		width: 100%;
		border-top: var(--hairline-dark);
	}

	.nav-list li:first-child {
		border-top: 0;
	}

	.nav-list a {
		width: 100%;
		padding-inline: 0;
		border-bottom: 0;
	}

	.nav-list li:not(.nav-cta) > a:hover,
	.nav-list li:not(.nav-cta) > a:focus {
		background: var(--navy);
		color: var(--accent-bright);
	}

	/*
	 * A second level is an indented row rather than a flyout: there is no hover
	 * on a touch screen to open one with.
	 */
	.nav-list .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		padding: 0 0 0 var(--space-sm);
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.nav-cta > a {
		justify-content: center;
		margin-block: var(--space-xs);
		padding-inline: var(--space-sm);
	}
}

/*
 * The header is sticky from 768px up (see style.css); below that it has to be a
 * positioning context for the panel above it.
 */
@media (max-width: 767px) {
	.site-header {
		position: relative;
	}
}

/*
 * Below 480px the label goes and the button is the icon alone. It is not the
 * button's accessible name — that is the aria-label — so a screen reader loses
 * nothing, and the header keeps room for a long site title.
 */
@media (max-width: 479px) {
	.nav-toggle__label {
		display: none;
	}
}