/*
 * Sticky header (owner request, 8 September 2026).
 *
 * Neve has no sticky-header setting of its own — that lives in Neve Pro's
 * Header Booster, which is not installed — so it is done here. Two things in
 * the theme actively prevented it, and both are handled below rather than
 * worked around by force.
 *
 * This stylesheet is enqueued wherever oaw_child_sticky_header() says so, which
 * is the whole site as of 8 September 2026 (the owner asked for the home page
 * first, then for it everywhere). Rules stay scoped to .oaw-sticky-header on the
 * body regardless, so narrowing the scope again stays one line in functions.php.
 */

:root {
	/*
	 * Overwritten with the real measured height by oaw-sticky-header.js. The
	 * fallback matters: the logo is capped at 200px wide on desktop against a
	 * 1126x749 source, so the header is a little over 130px tall — a guessed
	 * constant would go stale the first time the logo or its cap changed,
	 * which is exactly why the script measures instead.
	 */
	--oaw-header-h: 134px;
}

/*
 * Neve clips overflow in TWO places, and a sticky header needs both undone.
 * Any overflow value other than visible makes that element a scroll container,
 * and a sticky child then sticks to a scrollport that never scrolls — so the
 * header simply would not move.
 *
 *   body                                        { overflow-x: hidden }
 *   body > .wrapper:not(.et-fb-iframe-ancestor) { overflow: hidden }
 *
 * The wrapper is the one that actually matters, because `.header` is its child.
 * It was missed on the first pass here: Neve also carries a plain
 * `.wrapper { overflow: visible }`, which is the rule that turns up first and
 * looks like the whole story, but it loses on specificity to the
 * `body > .wrapper` selector above. The header did not stick until this was
 * added.
 *
 * `clip` clips identically without creating a scroll container, which is
 * precisely the difference that matters. It still contains the full-bleed bands
 * on the home page, so nothing about any layout changes.
 *
 * `!important` on the wrapper because Neve's selector scores (0,2,1) and ties
 * with anything reasonable here, which would leave the outcome to enqueue
 * order. This is the same escape, for the same reason, that lt-shop-tables.css
 * and lt-shop-cart.css already use to make the floating basket and the order
 * review stick — see the matching rules there.
 *
 * Where `clip` is unsupported the declarations are dropped, `hidden` stands,
 * and the header stays where it always was. A missing convenience, not a broken
 * page.
 */
body.oaw-sticky-header {
	overflow-x: clip;
}

body.oaw-sticky-header > .wrapper {
	overflow: clip !important;
}

body.oaw-sticky-header .header {
	position: sticky;
	top: 0;
	/*
	 * Above the page content it now covers — the home page's bands set
	 * position: relative, and the shop's floating basket and sticky table head
	 * are themselves sticky — while staying well below Neve's mobile
	 * navigation drawer, which the header contains rather than competes with.
	 *
	 * Winning that stacking contest is only half of it: an element the header
	 * covers also has to START below the header, or it pins itself out of
	 * sight underneath. Those offsets live with the elements that own them, in
	 * lt-shop-tables.css and lt-shop-cart.css, and read the --oaw-header-h
	 * this file publishes.
	 */
	z-index: 100;
	/*
	 * Neve renders `.header--row { background: 0 0 }`: the header is
	 * transparent and only looks white because the page behind it is. Once it
	 * stops scrolling away, content would run underneath it, so it needs a
	 * ground of its own — taken from Neve's own token so it follows the
	 * palette rather than pinning #fff here.
	 */
	background: var(--nv-site-bg, #fff);
}

/*
 * A hairline and a shadow that only appear once the page has actually been
 * scrolled, so the header sits flat against the hero at rest and lifts off the
 * content it covers thereafter. animation-timeline is progressive enhancement:
 * without support the header simply carries the separator at all times, which
 * is correct, just less subtle.
 */
body.oaw-sticky-header .header {
	box-shadow:
		0 1px 0 rgba(39, 38, 38, .08),
		0 8px 20px -16px rgba(39, 38, 38, .5);
}

@supports (animation-timeline: scroll()) {
	body.oaw-sticky-header .header {
		animation: oaw-header-lift linear both;
		animation-timeline: scroll();
		animation-range: 0 80px;
	}

	@keyframes oaw-header-lift {
		from {
			box-shadow:
				0 1px 0 rgba(39, 38, 38, 0),
				0 8px 20px -16px rgba(39, 38, 38, 0);
		}
		to {
			box-shadow:
				0 1px 0 rgba(39, 38, 38, .08),
				0 8px 20px -16px rgba(39, 38, 38, .5);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	body.oaw-sticky-header .header {
		animation: none;
	}
}

/*
 * The admin bar is itself fixed to the top, so a sticky header has to start
 * below it or the two overlap. WordPress switches the bar from 32px to 46px at
 * 782px, and hides it below 600px in some contexts — matching those exact
 * breakpoints is what keeps the header flush in every case.
 */
body.oaw-sticky-header.admin-bar .header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.oaw-sticky-header.admin-bar .header {
		top: 46px;
	}
}

/*
 * The whole point of the anchors in the main menu — What we supply, Our story,
 * The team, Contact — is that they jump down this page. A sticky header covers
 * the top of whatever they land on, so every scroll into a fragment needs to
 * stop short by the header's height.
 *
 * scroll-padding-top on the scroll container handles the browser's own
 * fragment navigation, the menu links, and any in-page link alike — one
 * declaration instead of a scroll-margin on each section. The extra 12px is
 * breathing room so the heading is not welded to the header's underside.
 */
html {
	scroll-padding-top: calc(var(--oaw-header-h) + 12px);
}