/*
 * 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);
}

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 sit behind the header content. The
 * header itself must not get a backdrop-filter: it would become their backdrop.
 */
.site-header__blur,
.site-header__blur > span {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.site-header__blur {
	z-index: -1;
}

.site-header__blur > span {
	-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: 2.5px;
	--fade: linear-gradient(to top, transparent 0%, #000 25%, #000 50%, transparent 75%);
}

.site-header__blur > :nth-child(2) {
	--blur: 5px;
	--fade: linear-gradient(to top, transparent 25%, #000 50%, #000 75%, transparent 100%);
}

.site-header__blur > :nth-child(3) {
	--blur: 10px;
	--fade: linear-gradient(to top, transparent 50%, #000 75%, #000 100%);
}

.site-header__blur > :nth-child(4) {
	--blur: 20px;
	--fade: linear-gradient(to top, transparent 75%, #000 100%);
}

.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 header is in the page flow below 1100px).
 * 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;
	}
}

/* Provisional layout until the mobile design arrives: logo and Reserve on one row,
   menu below, header in the page flow so a wrapped menu never covers content. */
@media (max-width: 1100px) {
	.site-header {
		position: relative;
		top: auto;
		grid-template-columns: 1fr auto;
		row-gap: var(--space-20);
		height: auto;
		padding-bottom: var(--space-20);
	}

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

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

	.site-header__nav {
		grid-column: 1 / -1;
	}

	/* Home: the light header stays on top of the hero photo, as on desktop. */
	.site-header--overlay {
		position: absolute;
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}