/* ==========================================================================
   header.css — sticky top bar, wordmark, primary nav, mobile menu, cookie bar
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--paper) 82%, transparent);
	backdrop-filter: saturate(150%) blur(10px);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--line);
}

@supports not (backdrop-filter: blur(1px)) {
	.site-header {
		background: var(--paper);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 4.25rem;
}

/* --- wordmark ------------------------------------------------------------
   static/images/logo.webp is itself the wordmark, so it stands alone. */

.wordmark {
	display: inline-flex;
	align-items: center;
	flex: none;
	border-radius: var(--r-sm);
}

.wordmark:hover {
	text-decoration: none;
}

.wordmark img {
	height: 1.75rem;
	width: auto;
	transition: opacity var(--dur) var(--ease);
}

.wordmark:hover img {
	opacity: .72;
}

@media (min-width: 48rem) {
	.wordmark img {
		height: 2.125rem;
	}
}

/* --- desktop nav --------------------------------------------------------- */

.site-nav {
	display: none;
}

@media (min-width: 48rem) {
	.site-nav {
		display: block;
	}
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	list-style: none;
}

.site-nav a {
	display: block;
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-pill);
	font-size: var(--t-md);
	font-weight: 500;
	color: var(--ink-muted);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-nav a:hover {
	background: var(--mint-soft);
	color: var(--ink);
	text-decoration: none;
}

.site-nav a[aria-current="page"] {
	background: var(--mint);
	color: var(--ink);
	font-weight: 600;
}

/* --- hamburger ----------------------------------------------------------- */

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-toggle .icon {
	font-size: 1.15rem;
}

.nav-toggle:hover {
	background: var(--ink);
	color: var(--surface);
}

@media (min-width: 48rem) {
	.nav-toggle {
		display: none;
	}
}

/* --- mobile menu (rendered inside .overlay by popup.js) ------------------- */

.menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--s-4);
}

.menu__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
}

.menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: var(--mint-soft);
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.menu__close:hover {
	background: var(--ink);
	color: var(--surface);
}

.menu__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.menu__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	font-size: var(--t-lg);
	font-weight: 600;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.menu__list a:hover,
.menu__list a[aria-current="page"] {
	background: var(--mint);
	text-decoration: none;
}

.menu__list .icon {
	font-size: 1.05rem;
	color: var(--ink-faint);
}

.menu__list a:hover .icon {
	color: var(--ink);
}

/* --- cookie notice -------------------------------------------------------
   Moved out of the header into a dismissible bar pinned to the viewport
   bottom, so it no longer pushes the page content down on load. */

.cookie-notice {
	position: fixed;
	left: 50%;
	bottom: var(--s-4);
	z-index: 90;
	transform: translateX(-50%);
	width: min(92%, 34rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-lg);
}

.cookie-notice p {
	font-size: var(--t-md);
	color: var(--ink-muted);
	margin: 0;
}

.cookie-notice .btn {
	padding-block: var(--s-2);
	flex: none;
}

@media (max-width: 30rem) {
	.cookie-notice {
		border-radius: var(--r-lg);
		padding: var(--s-4);
		justify-content: center;
		text-align: center;
	}
}