/* ============================================================
   Compact header on scroll (design review, 9 Oct 2026, finding 2).
   The sticky header took 101px of a phone screen (12%) and 115px on
   desktop on every page. Once the page has scrolled past the top,
   nav.js adds .is-compact: the bar drops to 65px / 75px, the logo
   scales down and the strapline folds away. Back near the top it
   returns to full size.

   The header is sticky, so shrinking it would pull everything below
   it up by the difference. margin-bottom grows by exactly what the
   bar loses (same duration and curve), so the page never moves.
   nav.js measures the full height into --as-hdr-full.

   Kept out of style.css, which other sessions edit and deploy.
   Short screens (max-height: 500px) already have a compact header
   that scrolls away, so none of this applies there.
   ============================================================ */
@media (min-height: 501px) {
	:root { --as-hdr-compact: 75px; --as-hdr-ease: cubic-bezier(.2,.8,.2,1); }

	.site-header { transition: margin-bottom .28s var(--as-hdr-ease), transform .26s var(--as-hdr-ease); }
	.site-header .header-inner { transition: height .28s var(--as-hdr-ease); }
	.site-header .logo { transform-origin: left center; transition: scale .28s var(--as-hdr-ease); }

	.site-header.is-compact { margin-bottom: calc(var(--as-hdr-full, 115px) - var(--as-hdr-compact)); }
	.site-header.is-compact .header-inner { height: calc(var(--as-hdr-compact) - 1px); }
	.site-header.is-compact .logo { scale: .85; }
}

@media (min-height: 501px) and (max-width: 1180px) {
	:root { --as-hdr-compact: 65px; }

	.site-header .logo-strapline {
		max-height: 1.6em; overflow: hidden;
		transition: max-height .28s var(--as-hdr-ease), opacity .18s ease;
	}
	.site-header.is-compact .logo { scale: .8; }
	.site-header.is-compact .logo-strapline { max-height: 0; opacity: 0; }

	/* The header carries "Solid work, fair price" at these widths, so the
	   home hero's copy of it, straight underneath, goes (Ashley, 10 Oct).
	   Desktop's header has no strapline and keeps the hero's. */
	.hero-v3-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header, .site-header .header-inner, .site-header .logo,
	.site-header .logo-strapline { transition: none; }
}