/*
 * Galleria — components.css
 * Shared component CSS (chrome, cards, grids). THM-03 lands the first real
 * content: the sticky editorial header (nav top-bar + a giant centered
 * wordmark band below it) and the minimal footer. Consumes the --gl-* tokens
 * (css/tokens.css, loaded before this sheet in the chain) for color, type
 * roles, spacing and z-index; component-specific sizes with no dedicated
 * token (nav label scale, tab gap, wordmark band height) use literal
 * clamp()s measured off the approved design-reference screens (HANDOFF.md —
 * reference is measurements, not restyling license).
 *
 * Near-still (MOTION doctrine): every hover below is a plain, durationless
 * :hover rule — no transition, no !important, no --gl-h indirection (that is
 * a design-runtime artifact, not ported per CODE-STAGE-NOTES §7.2).
 */

/* ---- Canonical WP screen-reader-text utility (the skip-link depends on it) ---- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--gl-paper-2);
	border-radius: var(--gl-radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--gl-ink);
	display: block;
	font-family: var(--gl-font-body);
	font-size: 1rem;
	font-weight: var(--gl-fw-bold);
	height: auto;
	left: var(--gl-s1);
	line-height: normal;
	padding: var(--gl-s4) var(--gl-s5);
	text-decoration: none;
	top: var(--gl-s1);
	width: auto;
	z-index: 100000;
}

/* ---- Pre-JS fallback: js/chrome.js overrides this with the real measured height ---- */
:root {
	--gl-hh: 80px;
}

/* ==================== HEADER (THM-03) ====================
   Two rows inside the ONE sticky #masthead: a thin nav top-bar, then a giant
   centered wordmark band. Sticky, non-compacting: no height change and no
   transition on scroll — the whole header is a fixed-height band regardless
   of scroll position. */

.gl-header {
	position: sticky;
	top: 0;
	z-index: var(--gl-z-nav);
	background: var(--gl-bg);
}

.gl-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gl-s5); /* 24px — dc:92 (G35 chrome correction; was s4/16) */
	padding: 13px var(--gl-gutter); /* dc:92 literal 13px (G35; was s3/12) */
	border-bottom: 1px solid var(--gl-line);
}

.gl-nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.6vw, 34px);
}

.gl-tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--gl-ink);
	font-family: var(--gl-font-display);
	font-weight: var(--gl-fw-medium);
	font-size: clamp(1.1rem, 1.6vw, 1.5rem); /* dc:94 cap 1.5rem (G35; was 1.44) */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.gl-tab:hover .gl-tab-label {
	color: var(--gl-red);
}

.gl-tab--inst:hover {
	color: var(--gl-red);
}

.gl-tab-box {
	width: 0.92em;
	height: 0.92em;
	border: 1px solid var(--gl-ink);
	border-radius: var(--gl-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.gl-tab-ex {
	width: 100%;
	height: 100%;
	display: block;
}

.gl-tab-ex line {
	stroke: var(--gl-red);
	stroke-width: 1.2;
}

.gl-wordmark-band {
	display: flex;
	justify-content: center;
	align-items: center;
	/* dc:118 — fluid vertical strip padding (G35; was fixed s3/12px). */
	padding: clamp(8px, 1.2vh, 14px) var(--gl-gutter);
	border-bottom: 1px solid var(--gl-line);
}

.gl-wordmark {
	display: flex;
	max-width: 100%;
}

/* The wordmark scale is VIEWPORT-HEIGHT-driven — dc:119 verbatim
   `clamp(84px, 15.5vh, 168px)`. G35 chrome correction: THM-03 shipped a
   width-driven clamp(56px, 9.7vw, 140px) measured at one ~900-tall window
   (where the two coincide near 140px), so at taller viewports the wordmark
   rendered up to 28px SHORT and off-proportion vs the masthead — caught at
   the SCR-08 feel-gate. Aspect stays locked by the SVG viewBox
   (841.89 × 225.46) via width:auto; max-width:100% shrinks it on narrow
   screens, exactly as the dc. --gl-hh self-measures (js/chrome.js), so the
   sticky offsets and the Home pins track the corrected height automatically. */
.gl-wordmark-svg {
	height: clamp(84px, 15.5vh, 168px);
	width: auto;
	max-width: 100%;
	display: block;
	fill: var(--gl-red);
}

/* ==================== MOBILE CHROME (THM-04) ====================
   The ≤900 top bar (institutional links + burger), the burger 3-lines→✕
   micro-animation (the ONE sanctioned mover, MOTION #30), and the static
   full-viewport overlay dialog. Shown/hidden by the ≤900 swap below. */

.gl-topbar-mobile {
	display: none; /* desktop: hidden; the ≤900 swap flips it to flex */
	justify-content: space-between;
	align-items: center;
	gap: 16px; /* dc:105 container gap 16 (F/QA-01B CH-2; was 20, mis-sourced from dc:106's nav gap). No visual effect — space-between pushes the two children apart — but matches the .dc.html. */
	padding: 6px 20px; /* dc:105 literal 20px sides (G35; was var(--gl-gutter)) */
	border-bottom: 1px solid var(--gl-line);
}

/* ≤900: chrome bar swap (SYSTEM-MAP #87). Hide the whole desktop top bar and
   show the mobile bar (About·Subscribe + burger); the wordmark band stays, its
   clamp() already shrinking it at narrow widths. This block MUST sit AFTER the
   .gl-topbar and .gl-topbar-mobile base rules: at equal specificity (0,1,0)
   the cascade is decided by source order, so these overrides only win when they
   come last. Boundary ≤900 matches THM-03 exactly. */
@media ( max-width: 900px ) {
	.gl-topbar {
		display: none;
	}
	.gl-topbar-mobile {
		display: flex;
	}
	/* F/QA-01B CH-1: the mobile bar's institutional nav (About↔Subscribe) uses
	   the .dc.html's FIXED 20px gap, not the desktop .gl-nav clamp it otherwise
	   inherits (which rendered 18–23.4px). The (0,2,0) selector beats the
	   .gl-nav base (0,1,0) by specificity — never by source order (D56). */
	.gl-topbar-mobile .gl-nav {
		gap: 20px;
	}
}

/* Burger — 3 ink lines → ✕. Keyed off aria-expanded (the ported nav.js sets
   it), so no extra state class. Ink only, NEVER red (red = the active ✕ +
   wordmark). 28×1.5px lines, 5px gap → 6.5px center pitch. */
.gl-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex: none;
}

.gl-burger span {
	display: block;
	width: 28px;
	height: 1.5px;
	background: var(--gl-ink);
}

.gl-burger span:nth-child(1),
.gl-burger span:nth-child(3) {
	transition: transform 180ms ease;
}

.gl-burger span:nth-child(2) {
	transition: opacity 120ms ease;
}

.gl-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.gl-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.gl-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* The two reduced-motion kills: the media query (user preference) + the
   frozen-clock failsafe class the ported nav.js adds to <html>. Either → the
   icon snaps between states with no transition (MOTION §2 / #30). */
@media ( prefers-reduced-motion: reduce ) {
	.gl-burger span {
		transition: none;
	}
}

.gl-anim-instant .gl-burger span {
	transition: none;
}

/* Overlay dialog — full-viewport cream panel, z-40 UNDER the z-50 header
   (wordmark + burger stay visible above). Static show/hide (near-still #31):
   display none↔flex, no transition on the panel itself. Forced hidden ≥901. */
.gl-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--gl-z-overlay);
	background: var(--gl-bg);
	flex-direction: column;
	overflow: auto;
}

.gl-menu.is-open {
	display: flex;
}

@media ( min-width: 901px ) {
	.gl-menu {
		display: none !important;
	}
}

.gl-menu-nav {
	display: flex;
	flex-direction: column;
	gap: var(--gl-s2);
	/* Offset below the sticky header: the JS-measured --gl-hh + 20px (the
	   design's menuPadTop = headerH + 20). Tracks the mobile header height. */
	padding: calc( var(--gl-hh) + 20px ) var(--gl-s5) clamp( 44px, 8vh, 80px );
}

/* Overlay tabs — the .gl-tab idiom (box + ✕ + label) at overlay scale.
   Specificity 0,2,0 (.gl-menu-nav .gl-menu-tab) so it wins over .gl-tab (D56). */
.gl-menu-nav .gl-menu-tab {
	min-height: 44px;
	gap: 14px;
	font-size: clamp( 1.25rem, 5.2vw, 1.6rem );
}

/* The 3px ink closing rule pinned to the panel bottom. */
.gl-menu-rule {
	margin-top: auto;
	height: 3px;
	background: var(--gl-ink);
	flex: none;
}

/* ==================== FOOTER (THM-03) ==================== */

.gl-footer {
	border-top: 1px solid var(--gl-line);
	background: var(--gl-bg);
}

.gl-footer-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px var(--gl-s4); /* dc:290 gap 14px 16px (G35; was column-gap only) */
	/* dc:290 — fluid vertical padding (G35; was fixed s5/24px). */
	padding: clamp(16px, 2.2vh, 26px) var(--gl-gutter);
}

.gl-footer-contact {
	justify-self: start;
}

.gl-footer-follow {
	justify-self: end;
}

.gl-footer-link {
	text-decoration: none;
	color: var(--gl-ink);
	font-family: var(--gl-font-display);
	font-weight: var(--gl-fw-medium);
	/* dc:291 — the footer links share the NAV register (G35; the shipped
	   clamp(1rem, 1.3vw, 1.2rem) under-sized them vs the design). */
	font-size: clamp(1.1rem, 1.6vw, 1.5rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.gl-footer-link:hover {
	color: var(--gl-red);
}

.gl-footer-copy {
	font-family: var(--gl-font-body);
	font-size: 0.9rem;
	font-weight: var(--gl-fw-body);
	color: var(--gl-text-2);
	text-align: center;
}

@media (max-width: 560px) {
	.gl-footer-inner {
		/* dc:42-45 — the 560 stack changes ONLY the tracks + copy placement;
		   the base 14px row gap stays (G35; an 8px override was a drift). */
		grid-template-columns: auto auto;
	}

	.gl-footer-copy {
		grid-column: 1 / -1;
		order: 3;
		text-align: center;
	}
}