/*
 * Site header. Figma at 1920: 125px tall, logo at 40px / 34px,
 * menu from 980px (column 7) at 30px, Reserve right-aligned at 40px.
 * Solid mode: Cooper 1. Overlay mode (Home): white, Reserve in Hillside,
 * until the hero scrolls away (is-solid, set by components/site-header.js).
 * The bar is frosted glass on every page: the Figma 1% grey fill over a
 * progressive background blur, 20px at the top fading to none at the bottom.
 */

:root {
	--header-height: clamp(64px, 6.5104vw, 125px);
	--header-pad-top: clamp(16px, 1.5625vw, 30px);
	--header-logo-offset: clamp(2px, 0.2083vw, 4px);
	--header-duration: 400ms;
	/* Link hover (Figma prototype: Smart Animate, 0.1s, cubic-bezier(1, 0, 0, 1)). */
	--link-hover-duration: 0.1s;
	--link-hover-ease: cubic-bezier(1, 0, 0, 1);
	/* The four layers of the progressive blur (below), also used during page transitions (transitions.css). */
	--header-blur-1: 2.5px;
	--header-blur-2: 5px;
	--header-blur-3: 10px;
	--header-blur-4: 20px;
	--header-fade-1: linear-gradient(to top, transparent 0%, #000 25%, #000 50%, transparent 75%);
	--header-fade-2: linear-gradient(to top, transparent 25%, #000 50%, #000 75%, transparent 100%);
	--header-fade-3: linear-gradient(to top, transparent 50%, #000 75%, #000 100%);
	--header-fade-4: linear-gradient(to top, transparent 75%, #000 100%);
}

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

.site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	column-gap: var(--gutter);
	align-items: start;
	height: var(--header-height);
	padding: var(--header-pad-top) var(--gutter) 0;
	background: rgb(115 115 115 / 0.01);
	color: var(--color-cooper-1);
	transition: color var(--header-duration) ease;
}

.site-header--overlay:not(.is-solid) {
	color: var(--color-white);
}

/*
 * Progressive blur (Figma: background blur 20px at the top of the bar, 0 at
 * the bottom). CSS has none, so four layers blur 2.5, 5, 10 and 20px, each
 * faded in over its own quarter of the bar from the bottom up; each layer
 * also blurs the ones under it. They live in their own fixed layer just under
 * the header, not inside it: a backdrop-filter or a view-transition-name on
 * the header (page-transition.js names it during a page transition) would
 * make the header their backdrop root and switch the blur off.
 */
.site-header__blur {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 49; /* just under the header (50) */
	height: var(--header-height);
	pointer-events: none;
}

.site-header__blur > span {
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	-webkit-mask-image: var(--fade);
	mask-image: var(--fade);
}

.site-header__blur > :nth-child(1) {
	--blur: var(--header-blur-1);
	--fade: var(--header-fade-1);
}

.site-header__blur > :nth-child(2) {
	--blur: var(--header-blur-2);
	--fade: var(--header-fade-2);
}

.site-header__blur > :nth-child(3) {
	--blur: var(--header-blur-3);
	--fade: var(--header-fade-3);
}

.site-header__blur > :nth-child(4) {
	--blur: var(--header-blur-4);
	--fade: var(--header-fade-4);
}

.site-header__logo {
	grid-column: 1 / span 6;
	justify-self: start;
	margin-top: var(--header-logo-offset);
	text-decoration: none;
}

.site-header__nav {
	grid-column: 7 / span 5;
}

.site-header__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex items carry no line box, so the 35px body font adds no height around the links. */
.site-header__menu > li {
	display: flex;
}

/* Its own color, not inherited: an inherited color that is still fading would slow its fade. */
.site-header__reserve {
	grid-column: 12;
	justify-self: end;
	color: var(--color-cooper-1);
	transition: color var(--header-duration) ease;
}

.site-header--overlay:not(.is-solid) .site-header__reserve {
	color: var(--color-hillside);
}

/*
 * Hover and keyboard focus (Figma 9:204 / 9:208, Variant2): Cooper 2 text and
 * a 6px line. The extra 5px is a shadow under the 1px border, so the link
 * keeps its size and nothing moves.
 * The line grows from the hidden zero shadow, so only its thickness animates.
 * Reserve keeps its slower colour fade for the header's mode change, but
 * fades in at the hover speed.
 */
.site-header .link-line {
	box-shadow: 0 0 0 currentColor;
	transition: color var(--link-hover-duration) var(--link-hover-ease), box-shadow var(--link-hover-duration) var(--link-hover-ease);
}

.site-header .site-header__reserve {
	transition: color var(--header-duration) ease, box-shadow var(--link-hover-duration) var(--link-hover-ease);
}

.site-header .link-line:is(:hover, :focus-visible) {
	color: var(--color-cooper-2);
	box-shadow: 0 5px 0 currentColor;
	transition-duration: var(--link-hover-duration);
	transition-timing-function: var(--link-hover-ease);
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header .link-line {
		transition: none;
	}
}

/*
 * Menu button (below 1024px): three Cooper 1 lines (white in overlay mode,
 * inherited), 24px wide, in a 44px tap target that hangs past the gutter so
 * the lines end where the text does. Open (aria-expanded, set by
 * site-menu.js): the outer lines cross, the middle one fades. Hover and focus
 * take the links' Cooper 2 at the links' timing.
 */
.site-header__toggle {
	--toggle-size: 44px;
	--toggle-line: 2px;
	--toggle-gap: 6px;

	display: none;
	grid-column: 3;
	justify-self: end;
	align-self: start;
	width: var(--toggle-size);
	height: var(--toggle-size);
	margin: calc((0.68em - var(--toggle-size)) / 2) calc((24px - var(--toggle-size)) / 2) 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: var(--fs-20);
	cursor: pointer;
	transition: color var(--link-hover-duration) var(--link-hover-ease);
}

.site-header__toggle:is(:hover, :focus-visible) {
	color: var(--color-cooper-2);
}

.site-header__toggle:focus-visible {
	outline-offset: -4px;
}

.site-header__toggle-lines {
	display: flex;
	flex-direction: column;
	gap: var(--toggle-gap);
	width: 24px;
	margin: 0 auto;
}

.site-header__toggle-lines > span {
	height: var(--toggle-line);
	background: currentColor;
	transition: translate 0.3s ease, rotate 0.3s ease, opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-lines > :nth-child(1) {
	translate: 0 calc(var(--toggle-line) + var(--toggle-gap));
	rotate: 45deg;
}

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

.site-header__toggle[aria-expanded="true"] .site-header__toggle-lines > :nth-child(3) {
	translate: 0 calc(-1 * (var(--toggle-line) + var(--toggle-gap)));
	rotate: -45deg;
}

/* 1024–1279px: the six items need more than five columns to stay on one row, so the menu starts one column earlier. */
@media (max-width: 1279px) {
	.site-header__logo {
		grid-column: 1 / span 5;
	}

	.site-header__nav {
		grid-column: 6 / span 6;
	}
}

/* Below 1024px: one row, logo left, Reserve and the menu button right; the bar's menu moves into the panel. */
@media (max-width: 1023px) {
	.site-header {
		grid-template-columns: 1fr auto auto;
		column-gap: var(--space-40);
	}

	.site-header__logo {
		grid-column: 1;
	}

	.site-header__nav {
		display: none;
	}

	.site-header__reserve {
		grid-column: 2;
	}

	.site-header__toggle {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__toggle,
	.site-header__toggle-lines > span {
		transition: none;
	}
}