/*
 * Site header: sage bar (88px) with wordmark + nav, large bgsv logo below.
 * Figma: nav Eudoxus Medium 11 / 6% / uppercase, logo 174x85.
 */

.site-header {
	--header-bar-height: 56px;

	position: relative;
	z-index: 100;

	@media (min-width: 1024px) {
		--header-bar-height: var(--wp--custom--header-height);
	}
}

.site-header__bar {
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--black);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-bar-height);
}

.site-header__wordmark {
	position: relative;
	z-index: 2;
	color: var(--wp--preset--color--white);

	& svg {
		width: 101px;
		height: auto;
	}
}

.site-header__logo-wrap {
	pointer-events: none;
}

.site-header__logo {
	display: flex;
	width: fit-content;
	pointer-events: auto;
	color: var(--wp--preset--color--black);

	& svg {
		width: clamp(104px, 11.5vw, 174px);
		height: auto;
	}
}

/* Home: logo sits on top of the hero image. */
.site-header--overlay {
	& .site-header__logo-wrap {
		position: absolute;
		inset-inline: 0;
		top: var(--header-bar-height);
	}

	& .site-header__logo {
		color: var(--wp--preset--color--white);
	}
}

/* Navigation — desktop inline, mobile full-screen overlay. */

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	display: inline-block;
	font-size: var(--wp--preset--font-size--label-s);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	padding-block: 8px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;

	&:hover,
	&[aria-current="page"] {
		border-bottom-color: currentColor;
	}
}

.site-header__toggle {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--label-s);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* Two-line burger that turns into a cross. */
.site-header__toggle-icon {
	position: relative;
	width: 22px;
	height: 8px;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background: currentColor;
		transition: transform 0.25s, top 0.25s;
	}

	&::before { top: 0; }
	&::after { top: 7px; }
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
	&::before { top: 4px; transform: rotate(45deg); }
	&::after { top: 4px; transform: rotate(-45deg); }
}

@media (max-width: 1023px) {
	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		padding: calc(var(--header-bar-height) + 32px) var(--wp--custom--gutter) 48px;
		background: var(--wp--preset--color--sage);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.25s, visibility 0s 0.25s;
	}

	.site-header.is-open .site-nav {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.25s;
	}

	.site-nav__list {
		display: grid;
		gap: 16px;
	}

	.site-nav a {
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--heading-l);
		font-weight: 300;
		letter-spacing: var(--wp--custom--letter-spacing--heading);
		text-transform: none;
		padding-block: 4px;
	}

	body.has-open-nav {
		overflow: hidden;
	}
}

@media (min-width: 1024px) {
	.site-header__toggle {
		display: none;
	}

	.site-nav__list {
		display: flex;
		gap: 28px;
	}
}