/**
 * Homepage Tightening — 80% rendering scale
 *
 * Scales the homepage to 80% of standard size, matching the look at
 * 80% browser zoom. Uses CSS `zoom` rather than rewriting the rem base
 * because the production stylesheet has section-specific `.container`
 * max-widths (e.g. `.introduction .container { max-width: 714px }`) and
 * positioning rules (e.g. `.banner .container { max-width: none }`) that
 * would each need bespoke overrides — `zoom` scales all of them
 * uniformly with one rule.
 *
 * Scope: homepage template only. Other pages (services, portfolio,
 * about, news, careers) render at standard size.
 *
 * Accessibility note: this stacks with the user's own browser zoom.
 * A visitor running 125% zoom sees the homepage at 125% × 80% = 100%.
 * Their accessibility tools still work; the homepage just starts at
 * a tighter base. If a stakeholder pushes back on this, the value
 * can be raised to 0.9 (10% tightening) by editing one line.
 *
 * Browser support: `zoom` is supported in Chrome/Edge/Safari and (as
 * of Firefox 126, May 2024) Firefox. Older browsers fall through to
 * standard rendering scale — graceful degradation, not broken layout.
 */

@media (min-width: 768px) {
	body.page-template-home {
		zoom: 0.8;
	}

	/* The body zoom of 0.8 collapses any `100vh` measurement to 80vh
	   of screen space, which would leave the hero short by 20% of the
	   viewport. Compensate by overshooting the banner height to 125vh:
	   125vh × 0.8 = 100vh of actual screen. Title text inside the
	   banner stays at the tightened scale because the entire body
	   (including the banner contents) is still zoomed at 0.8. */
	body.page-template-home .banner {
		min-height: 125vh;
	}

	/* Same compensation for the hamburger nav overlay — without this
	   the menu stops at 80vh and the slideshow shows through at the
	   bottom of the screen. Bump the closed-state top in lockstep so
	   the menu fully clears the viewport when not active (otherwise
	   the extra 25vh of menu peeks out as a white strip above the
	   hero). */
	body.page-template-home .header-nav {
		height: 125vh;
		top: -125vh;
	}
	body.page-template-home .header-nav.active {
		top: 0;
	}
}