/* Header — logo 1:22 at (104,56), nav 107:2329. Sits over the light sheet. */
.site-header { position: relative; z-index: 50; }
/* Floats over the first .sheet (see body_class in inc/setup.php). Sheet inset = 8px mobile / 12px desktop. */
.has-sheet-top .site-header { position: absolute; top: 8px; left: 0; right: 0; }
@media (min-width: 1024px) {
	.has-sheet-top .site-header { top: 0; }
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.5rem;
}

/* Mobile header — Figma 69:5938: logo 86×32, Menu icon 69:5937 (32×32) at y32.
   Open menu — Figma 69:6481: white panel drops from the top (360×240, radius 24), logo + black × (69:6589)
   stay on top, links centred 14/24, gap 16. */
.site-header__logo { position: relative; z-index: 2; }
.site-header__logo img { width: 86px; height: auto; }

/* 44px tap target, pulled out 6px so the 32px icon lines up with the gutter. */
.site-header__toggle { position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px; }
.site-header__icon { display: block; width: 32px; height: 32px; }
.site-header__toggle[aria-expanded="true"] .site-header__icon--open,
.site-header__toggle[aria-expanded="false"] .site-header__icon--close { display: none; }

/* Dimmed page under the open panel. */
.site-header::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(31, 39, 44, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}
.site-header.is-menu-open::after { opacity: 1; visibility: visible; }
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	max-height: 100vh;
	padding: 96px 24px 40px;
	background: var(--c-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-cookies);
	overflow-y: auto;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0.3s;
}
.site-nav.is-open { transform: translateY(0); visibility: visible; }
/* The header logo stays visible above the panel, so the panel copy is not shown. */
.site-nav__logo { display: none; }
.site-nav__list { display: grid; gap: 16px; justify-items: center; }
.site-nav__link { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; line-height: 24px; font-weight: 500; text-decoration: none; }
a.site-nav__link:hover { color: var(--c-orange); }
.site-nav__icon { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
	.site-nav, .site-header::after { transition: none; }
}
body.menu-open { overflow: hidden; }

@media (min-width: 1024px) {
	.site-header__inner { padding-block: 56px 0; }
	.site-header__logo img { width: 130px; }
	.site-header__toggle { display: none; }
	.site-nav { position: static; max-height: none; padding: 0; background: none; border-radius: 0; box-shadow: none; overflow: visible; transform: none; visibility: visible; transition: none; }
	.site-header::after { display: none; }
	.site-nav__list { display: flex; gap: 32px; }
	.site-nav__link { line-height: 1.5; }
}