/*
 * NSEMM global theme stylesheet (handle: nsemm-theme-global).
 *
 * The foundation layer for the bespoke Phase 2 design. It carries only the
 * pieces that are genuinely global and shared across blocks/patterns:
 *
 *   1. The local colour/radius/font var mapping. Every brand colour is read
 *      from the theme.json preset custom properties so the Brand-Sync module
 *      keeps recolouring this CSS at runtime. NEVER hard-code a brand hex
 *      here; use the local vars exactly as the wireframe does.
 *   2. Smooth scroll behaviour (theme-wide).
 *   3. The on-brand gold :focus-visible ring (light + dark-bg variants).
 *   4. The shared hero/drawer buttons .btn-hl and .btn-hs, defined once here
 *      because both the hero pattern and the header block's mobile drawer
 *      consume them.
 *   5. The .reveal / .reveal.visible scroll-reveal utility plus .d1..d4 delays.
 *   6. A global prefers-reduced-motion block that neutralises transitions and
 *      animations so no motion is forced on the user.
 *
 * Faithful to /var/www/nsemm-design/home-v6.html.
 */

/* == LOCAL VAR MAPPING ==
   gold-dark is a hover shade that is not in the brand palette, so it stays a
   literal value. Everything else maps to a theme.json preset property. */
:root {
	--blue: var(--wp--preset--color--university-blue);
	--gold: var(--wp--preset--color--knowledge-gold);
	--teal: var(--wp--preset--color--discovery-teal);
	--brown: var(--wp--preset--color--foundational-brown);
	--sandy: var(--wp--preset--color--sandy-brown);
	--midnight: var(--wp--preset--color--midnight);
	--bg: var(--wp--preset--color--white);
	--gold-dark: #D4AC00; /* hover shade, not a palette slug */

	/* Floating header radius */
	--r-hdr: 20px;
	/* Header button radius when scrolled (pill morphs to this on scroll) */
	--r-btn-scrolled: 12px;
	/* Everything outside the header uses a full pill */
	--r-pill: 9999px;
	/* Content panels */
	--r-card: 16px;
	/* AQL bar height, used for the cookie/FAB stack offset */
	--aql-h: 64px;

	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);
}

html {
	scroll-behavior: smooth;
	/* Wireframe used body{overflow-x:hidden}; clip (not hidden) controls the
	   off-canvas drawer's horizontal overflow WITHOUT creating a scroll
	   container, so the header's position:sticky still works. */
	overflow-x: clip;
}

/* == CONTENT WIDTH ==
   The rounded-rectangle content area (CMS pages/posts and any non-full-bleed
   homepage content) is ~90% of the viewport, capped so it never sprawls on
   very wide screens. This replaces the old 1320px cap from the wireframe's
   .page rule. Full-bleed homepage sections (hero, stats band, CTA) own their
   own width inside their own block CSS and are not constrained by this. */
.nsemm-page {
	width: 90vw;
	max-width: 1600px;
	margin-inline: auto;
}

/* The FSE header template part wraps our block in an element that, left in the
   box tree, traps the sticky header and stacks the utility bar beside it. Making
   the slot display:contents removes its box so .util and .hdr-wrap become
   body-level (full-bleed + sticky across the whole page) exactly like the
   standalone wireframe, with the gold <header> as the single header landmark. */
.nsemm-header-slot {
	display: contents;
}

/* == FOCUS RING (wireframe §12) ==
   On-brand gold ring, not the default browser outline, visible but designed.
   The glow uses color-mix on var(--gold) (not an rgba hex literal) so it keeps
   tracking the live palette under Brand-Sync. The wireframe baked the alpha as
   rgba(250,205,0,...) because plain CSS could not put alpha on a var-colour;
   color-mix restores recolouring while matching the wireframe's 25% / 35%. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
	border-radius: 8px;
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 25%, transparent);
	transition: outline-offset .15s ease, box-shadow .15s ease;
}
/* On dark backgrounds (footer, header pill, cta-band) the glow needs a touch
   more contrast. */
footer a:focus-visible,
footer button:focus-visible,
.cta-band a:focus-visible {
	outline-color: var(--gold);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 35%, transparent);
}

/* == SHARED HERO / DRAWER BUTTONS ==
   External, always full pill. Defined here once; consumed by both the hero
   pattern and the header block's mobile drawer. Shadows and the blue hover
   shade go through color-mix on var(--blue)/var(--gold) (not rgba/hex literals)
   so they keep tracking the live palette under Brand-Sync; the percentages
   reproduce the wireframe's alpha values, and the blue hover is the wireframe's
   #152d55 expressed as blue darkened 15%. */
.btn-hl {
	background: var(--blue);
	color: var(--bg);
	font-family: var(--head);
	font-size: 16px;
	font-weight: 600;
	padding: 14px 30px;
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: background .18s, transform .18s, box-shadow .18s;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 25%, transparent);
}
.btn-hl:hover {
	background: color-mix(in srgb, var(--blue) 85%, black);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 35%, transparent);
}
.btn-hs {
	background: var(--gold);
	color: var(--brown);
	font-family: var(--head);
	font-size: 16px;
	font-weight: 600;
	padding: 14px 30px;
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: background .18s, transform .18s, box-shadow .18s;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--gold) 28%, transparent);
}
.btn-hs:hover {
	background: var(--gold-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--gold) 40%, transparent);
}

/* == SCROLL REVEAL ==
   Fade + lift, starting at slight opacity so elements are never fully
   invisible if the observer never fires. */
.reveal {
	opacity: 0.08;
	transform: translateY(28px);
	transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* == REDUCED MOTION ==
   Neutralise every transition/animation theme-wide so reduced-motion users
   land on the final state instantly with no movement. Scroll behaviour drops
   back to auto, and revealed elements are forced to their visible state. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}