/* ═══════════════════════════════════════════════════════════════════
   SITE HEADER
   Design: desktop has the logo at x100/y60 and the nav from "Services"
   through "Contact us" at y69, 20px Book white, 60px apart; mobile has
   the logo at x30/y30 (225x36) and the menu button at x324/y30 (36x36),
   plus the menu component (button + red drop panel).

   The bar is drawn over the hero rather than above it, and pins itself
   to the viewport when the reader scrolls back UP - the same behaviour
   as the sister site (gdp.wrigglehost.online).
   ═══════════════════════════════════════════════════════════════════ */

/* ── TUNING ──────────────────────────────────────────────────────
   Everything below derives from these. Change a number here, not a
   literal further down. */
.site-header {
	--hdr-speed: 1;
	--hdr-ease: cubic-bezier(.16, 1, .3, 1);

	--hdr-t-bar:    calc(.30s * var(--hdr-speed));  /* bar morphing */
	--hdr-t-drawer: calc(.28s * var(--hdr-speed));  /* mobile panel */
	--hdr-t-pin:    calc(.45s * var(--hdr-speed));  /* slide in / out */

	/* How far below the viewport top the bar sits once pinned. At rest
	   it is the design's own 60px/30px inset; pinned that reads as a
	   gap rather than a bar, so it tightens. */
	--hdr-pin-top: clamp(12px, 8.5px + 0.897vw, 24px);

	/* The drop panel - 20px inside, 20px between links,
	   the links themselves 18px Book in a 25px line box. */
	--drawer-pad:  20px;
	--drawer-gap:  20px;
	--drawer-line: 25px;

	/* Row ramps, anchored 1000 -> 1400. Flat values set the breakpoint at the
	   widest the row ever needs: four 60px gaps are 240px on their own, which
	   is what pushed the swap to 1199. Above 1400 - the design frame included -
	   every one of these is the design's own value, so the ramp is only ever
	   spending the space between 1000 and 1400. */
	--hdr-nav-gap:  clamp(20px, -80px + 10vw, 60px);
	--hdr-row-gap:  clamp(16px, -4px + 2vw, 24px);
	--hdr-nav-size: clamp(18px, 13px + 0.5vw, 20px);
}

.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	/* Logo top: 30px at 390 -> 60px at 1728. */
	padding: clamp(30px, 21.26px + 2.242vw, 60px) var(--gutter) 0;
	transition: transform var(--hdr-t-pin) var(--hdr-ease),
	            padding-block var(--hdr-t-pin) var(--hdr-ease);
	will-change: transform;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdr-row-gap);
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

.site-header__logo {
	display: block;
	flex: none;
	/* 225px at 390 -> 288.62px at 1728 */
	width: clamp(225px, 206.46px + 4.755vw, 288.62px);
	color: var(--white); /* the wordmark halves use currentColor */
}
.site-header__logo svg,
.site-header__logo img { width: 100%; height: auto; display: block; }

/* ── Desktop nav - 20px Book white, 60px apart ────────────────── */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--hdr-nav-gap);
}
.site-nav__list a {
	display: inline-block;
	font-size: var(--hdr-nav-size);
	line-height: 28px;
	font-weight: 400;
	color: var(--white);
	white-space: nowrap;
	transition: color .2s ease;
}
/* The tint is the HOVER state only. The assigned menu's items are anchors on
   this page, so WordPress marks every one of them current-menu-item - tinting
   that turned the whole nav pink at rest. The links are white. */
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--red-tint-strong); }
.site-nav__list .current-menu-item > a { color: var(--white); }
.site-nav__list .current-menu-item > a:hover,
.site-nav__list .current-menu-item > a:focus-visible { color: var(--red-tint-strong); }

/* ── Menu button - 36x36 red square, r5, holding the design's own
      21x21 glyph. Both variants draw the same
      glyph, so it does not change when the panel opens. ────────── */
.nav-toggle {
	display: none;
	position: relative;
	flex: none;
	width: 36px; height: 36px;
	z-index: 30;
	border-radius: 5px;
	background: var(--red);
	transition: background-color .2s ease;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] { background: #c72c2d; }

.nav-toggle__icon {
	position: absolute;
	top: 7px; left: 7px;
	width: 21px; height: 21px;
	background-color: var(--white);
	mask: url("../img/icon-menu.svg") no-repeat center / contain;
	-webkit-mask: url("../img/icon-menu.svg") no-repeat center / contain;
}

/* ══════════════════════════════════════════════════════════════════
   Pinning. The bar rests ABSOLUTE over the hero, so it leaves the
   viewport with the page; it only goes fixed once it has been pinned,
   and it is only ever pinned as the result of an upward scroll.
   ═════════════════════════════════════════════════════════════════ */
/* Pinned, the bar has a ground of its own, so it needs the same inset BELOW
   the logo as above it - with the resting rule's `0` bottom the dark panel
   was cut flush at the logo's baseline. */
.site-header.is-stuck {
	position: fixed;
	padding-block: var(--hdr-pin-top);
}

/* Held for one forced reflow by pin() so the off-screen state lands as
   the element's base value. Lists every element carrying a transition. */
.site-header.is-pinning,
.site-header.is-pinning::before,
.site-header.is-pinning .site-header__logo,
.site-header.is-pinning .site-nav { transition: none; }

/* -100% clears the bar's own height; the pinned inset is above that. */
.site-header.is-hidden {
	transform: translateY(calc(-100% - var(--hdr-pin-top) - 24px));
}

/* The bar is white on a photograph, so anywhere it is NOT over the hero it
   needs a ground of its own - pinned mid-page over light sections, and for the
   whole of any page that does not open with a hero. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(33, 2, 2, .92), rgba(33, 2, 2, .78));
	box-shadow: 0 4px 24px rgba(0, 0, 0, .28);
	opacity: 0;
	transition: opacity var(--hdr-t-bar) var(--hdr-ease);
}
.site-header.is-stuck::before,
.no-hero .site-header::before { opacity: 1; }

/* No hero to overlay, so the bar sits IN FLOW and the page starts below it
   rather than underneath it. It still pins on the way back up: header.js reads
   the computed position, and this is not `sticky`, so it takes the same branch
   the homepage does. */
.no-hero .site-header {
	position: relative;
	padding-block: var(--hdr-pin-top);
}
/* ...but it still leaves the flow to pin. Same specificity as the rule above
   (0,2,0) and declared after it, so this is what decides. */
.no-hero .site-header.is-stuck {
	position: fixed;
	top: 0px;
}

@media (prefers-reduced-motion: reduce) {
	/* Keep the pinning, drop only the part that moves unasked. */
	.site-header.is-hidden { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Below the nav's own width the bar swaps to the button + drop panel.

   Breakpoint, re-derived after the ramps above. Budget the row rather
   than estimating it: content = 0.89536W - 19.2, and
   needed = logo(W) + row gap + nav text + 4 x nav gap.

   The five items measure 438px at 20px Futura PT, 394px at 18px. The
   Jost fallback is the case to size for, and it is NOT the ~8% this
   comment used to claim - measured, it sets the same items 17.7%
   wider, so the floor budgets 464px. At 1024: needed = 255 + 16 + 464
   + 90 = 825 against 898 of content, ~73px spare. Hence 1023, so a
   1024-wide tablet still gets the full row.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

	.nav-toggle { display: block; }

	/* The panel hangs off the button, so the button anchors it. */
	.site-header__inner { position: relative; }

	.site-nav {
		position: absolute;
		top: calc(36px + var(--drawer-gap));  /* 56 - 36 */
		right: 0;
		z-index: 29;
		min-width: 156px;
		padding: var(--drawer-pad);
		border-radius: 10px;
		background: var(--red);
		box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--hdr-t-drawer) var(--hdr-ease),
		            transform var(--hdr-t-drawer) var(--hdr-ease),
		            visibility 0s linear var(--hdr-t-drawer);
	}
	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s, 0s, 0s;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--drawer-gap);
	}
	.site-nav__list a {
		/* Block, not the base rule's inline-block: an inline-level box is
		   baseline-aligned inside its li's line box, which added ~1px per link
		   and made the panel 10px taller than the 243 the design draws. */
		display: block;
		font-size: 18px;
		line-height: var(--drawer-line);
	}

	/* The panel hangs off the button, so it is only ever reachable while
	   the bar itself is on screen - resting at the top of the page, or
	   pinned. Nothing extra is needed to hold it in place. */
}