/**
 * Moneysworth Toolkit — header layout stabiliser
 *
 * Fixes the load-time jump on the pinned header.
 *
 * THE BUG
 * mt-header.css pins both bars with position:fixed, which removes them from
 * normal flow, so their height has to be given back manually:
 *
 *     body #page-container { padding-top: var(--mt-header-total, 117px); }
 *
 * 117px is a hard-coded guess and is the only value the browser has until
 * mt-ux.js runs and measures the real height. Desktop measures 115px, so the
 * page settles 2px — invisible. Mobile differs by far more, which is the jump
 * you can see. It then re-measures on load, resize, orientationchange, a
 * ResizeObserver and two timers, and every measurement that lands on a
 * different number moves the page again. The logo carries no width/height, so
 * the header genuinely does change height once it loads.
 *
 * THE FIX
 * position:sticky instead of fixed. Sticky elements stay in normal flow, so
 * they reserve their own height from the very first paint and still pin on
 * scroll. No measurement, no fallback number to get wrong, nothing to correct
 * later — the entire class of bug disappears rather than being tuned.
 *
 * mt-ux.js is deliberately left alone. Once padding-top is gone, the variables
 * it writes no longer affect layout at all; they only position the minicart,
 * which is what they are good for.
 *
 * ROLLBACK
 *   /?header_stable=0   puts this session back on the previous fixed header
 *   /?header_stable=1   turns it back on
 * or set MT_HEADER_STABLE to false in mt-header-stable.php for everyone.
 */

/* -------------------------------------------------------------------------
 * 1. Both bars back into normal flow.
 * ---------------------------------------------------------------------- */
body.mt-header-stable #top-header {
	position: sticky !important;
	top: var(--mt-header-offset, 0px) !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	z-index: 100000 !important;
}

body.mt-header-stable #main-header {
	position: sticky !important;
	/* 42px matches the min-height mt-header.css already enforces on the top
	   bar, so this is a CSS-guaranteed value rather than a measured guess. */
	top: calc(var(--mt-header-offset, 0px) + var(--mt-topbar-h, 42px)) !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	z-index: 99999 !important;
}

/* -------------------------------------------------------------------------
 * 2. Stop reserving space that is no longer missing.
 *
 * This is the line that was doing the shifting. With the bars in flow the
 * padding is not just unnecessary, it would double the header's height.
 * ---------------------------------------------------------------------- */
body.mt-header-stable #page-container {
	padding-top: 0 !important;
}

/* -------------------------------------------------------------------------
 * 3. Reserve the logo's box before the image arrives.
 *
 * #logo ships with no width or height attribute, so until it loads the browser
 * budgets zero height for it and the header grows when it appears. Declaring
 * the intrinsic ratio (170×61) lets the box be correct from the first paint.
 * ---------------------------------------------------------------------- */
body.mt-header-stable #logo {
	aspect-ratio: 170 / 61;
	height: auto;
}

/* -------------------------------------------------------------------------
 * 4. Give the bars a floor so a late webfont cannot resize them.
 *
 * The top bar already has min-height:42px in mt-header.css. The nav had no
 * equivalent, so swapping in the display face changed its height after paint.
 * ---------------------------------------------------------------------- */
body.mt-header-stable #main-header .container {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@media (max-width: 980px) {
	body.mt-header-stable #main-header .container {
		min-height: 56px;
	}
}

/* -------------------------------------------------------------------------
 * 5. Anchor targets still need to clear the pinned bars.
 * ---------------------------------------------------------------------- */
body.mt-header-stable :target {
	scroll-margin-top: calc(var(--mt-header-total, 115px) + 12px);
}

/* Sticky needs an unclipped ancestor chain; asserted here so a later overflow
   rule elsewhere cannot silently break the pinning. */
body.mt-header-stable,
body.mt-header-stable #page-container {
	overflow: visible;
}