/*
 * Rudolph — global design system: "the switch-on".
 *
 * A blue-hour evening that deepens to night, lit by warm-white bulbs and
 * exactly one red one. Source: designs/rudolph-christmas-lights (index.html,
 * assets/styles.css, DESIGN.md).
 *
 * Hand-authored (no build step). Enqueued on the front end AND inside the block
 * editor (add_editor_style), so blocks look identical in both. Per-block
 * style.scss files consume the --rl-* custom properties below.
 *
 * TOKEN NAMES ARE THE MOCKUP'S, VERBATIM. The mockup already used the --rl-
 * prefix, so the starter's placeholder names (--rl-dark, --rl-accent…) were
 * replaced rather than aliased: one name per token (docs/HANDOFF.md). Note that
 * --rl-display and --rl-text are the two FONT stacks, not colours.
 *
 * Header, footer and call bar styles live in chrome.css (front end only).
 */

:root {
	/* --- Grounds: the evening, in page order --- */
	--rl-dusk: #243044;          /* blue hour, sampled from the hero photo's sky */
	--rl-dusk-raise: #2e3b52;
	--rl-twilight: #e3e6ee;      /* last light, the reading ground */
	--rl-twilight-raise: #d5dae6;
	--rl-night: #151c2a;
	--rl-night-deep: #0e1320;

	/* --- Ink --- */
	--rl-ink: #151b28;           /* on twilight */
	--rl-ink-soft: #465169;      /* on twilight, secondary */
	--rl-snow: #eef1f7;          /* on dusk and night */
	--rl-mist: #b3bccd;          /* on dusk and night, secondary */
	--rl-city-ink: #8f99ad;      /* the footer's unlit towns */

	/* --- Light --- */
	--rl-warm: #ffe7b3;          /* warm white bulb */
	--rl-warm-hover: #fff1cf;
	--rl-amber: #f0b545;         /* bulb glow, sampled from the photos */
	--rl-amber-ink: #7a5208;     /* amber as TEXT on twilight (raw amber fails AA there) */
	--rl-red: #e5252f;           /* Rudolph's nose. One per scene, never text. */
	--rl-red-unlit: #4a1f25;     /* the nose before it lights */
	--rl-red-shine: #ffd4d6;     /* the glint on the nose's glass */
	--rl-error: #ff9aa0;         /* invalid field edge, on night only */
	--rl-cord: #3a4760;
	--rl-cord-light: #b9c0cf;
	--rl-cord-bulb: #5d6983;     /* an unlit bulb on the cord; also field borders */

	/* --- Type. Load in inc/enqueue.php; ALSO set in theme.json, or WordPress's
	   own global body font rule wins on the front end (SETUP §9). --- */
	--rl-display: "Jost", "Futura", "Century Gothic", sans-serif;
	--rl-text: "Radio Canada", "Segoe UI", system-ui, sans-serif;

	/* --- Rhythm: the bulb pitch is the unit --- */
	--rl-pitch: 8px;
	--rl-gutter: clamp(16px, 4.5vw, 48px);
	--rl-max: 1240px;
	--rl-section: clamp(88px, 12vw, 168px);
	--rl-header-h: 76px;

	/* --- Motion --- */
	--rl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--rl-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (max-width: 640px) {
	:root {
		--rl-header-h: 64px;
	}
}

/* --- Base reset (WordPress ships none of this on the front end — SETUP §9) --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-color: var(--rl-cord) var(--rl-night-deep);
}

body {
	margin: 0;
	background: var(--rl-night);
	color: var(--rl-snow);
	font: 400 1.0625rem/1.65 var(--rl-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	caret-color: var(--rl-amber);
	/* clip, not hidden — hidden would make <body> a scroll container and break
	   position: sticky inside the blocks. */
	overflow-x: clip;
	transition: background-color 700ms var(--rl-ease-out);
}

::selection {
	background: var(--rl-warm);
	color: var(--rl-night-deep);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

a {
	color: inherit;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--rl-display);
	font-weight: 400;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

/* Form controls don't inherit font-family from body — force it. */
button,
input,
select,
textarea,
optgroup {
	font-family: inherit;
}

:focus-visible {
	outline: 2px solid var(--rl-amber);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Layout --- */
.rl-wrap {
	width: min(100% - 2 * var(--rl-gutter), var(--rl-max));
	margin-inline: auto;
}

/* Visually hidden, still read aloud. */
.rl-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Grounds. Every section carries data-ground (validated server-side by
   rudolph_ground()). Without JS each section paints its own ground. --- */
[data-ground="dusk"] {
	background: var(--rl-dusk);
}

[data-ground="twilight"] {
	background: var(--rl-twilight);
	color: var(--rl-ink);
}

[data-ground="night"] {
	background: var(--rl-night);
}

[data-ground="night-deep"] {
	background: var(--rl-night-deep);
}

/* With JS, theme.js fades the BODY between grounds as you scroll, and the dark
   sections go transparent over it. Only the dark ones hand over, so light text
   never meets the pale ground mid-fade. The hero keeps its own paint. */
.js.rl-follow .rl-main [data-ground]:not([data-ground="twilight"]):not(.rl-hero),
.js.rl-follow .rl-footer {
	background: transparent;
}

/* --- Buttons. Styled here, not per block, because several blocks share them.
   .rl-btn--lit   warm-white fill, the primary action
   .rl-btn--line  hairline on a dark ground --- */
.rl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	font: 500 1rem/1 var(--rl-text);
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms var(--rl-ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 240ms ease;
}

.rl-btn:active {
	transform: scale(0.97);
}

.rl-btn.rl-btn--lit {
	background: var(--rl-warm);
	color: var(--rl-night-deep);
	box-shadow: 0 8px 20px -10px rgba(8, 11, 19, 0.7);
}

.rl-btn.rl-btn--line {
	border-color: rgba(238, 241, 247, 0.5);
	color: var(--rl-snow);
}

@media (hover: hover) and (pointer: fine) {
	.rl-btn.rl-btn--lit:hover {
		background: var(--rl-warm-hover);
		box-shadow: 0 12px 26px -10px rgba(8, 11, 19, 0.8);
	}

	.rl-btn.rl-btn--line:hover {
		border-color: var(--rl-snow);
		background: rgba(238, 241, 247, 0.08);
	}
}

/* A row of buttons. On phones they stack full-width (two easy tap targets). */
.rl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

@media (max-width: 760px) {
	.rl-actions .rl-btn {
		flex: 1 1 100%;
	}
}

/* --- Shared section type --- */
.rl-h2 {
	font-weight: 400;
	font-size: clamp(2.1rem, 4.2vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.rl-prose {
	display: grid;
	gap: 1.15em;
	max-width: 64ch;
}

.rl-lede {
	font-size: clamp(1.2rem, 1.6vw, 1.375rem);
	line-height: 1.5;
}

/* --- Quote captions: sit in a photo's bottom edge, attributed --- */
.rl-quote-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 64px clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
	background: linear-gradient(to top, rgba(14, 19, 32, 0.9), rgba(14, 19, 32, 0));
	color: var(--rl-snow);
	display: grid;
	gap: 6px;
}

.rl-quote-cap q {
	quotes: "\201C" "\201D";
	font: 400 clamp(1rem, 1.25vw, 1.125rem)/1.45 var(--rl-text);
	max-width: 46ch;
}

.rl-quote-cap span {
	font: 400 0.8125rem/1 var(--rl-text);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rl-mist);
}

/* --- Photos "switch on" as you reach them (theme.js adds .is-lit) --- */
.js .rl-photo img {
	filter: brightness(0.5) saturate(0.7);
	transition: filter 1100ms var(--rl-ease-out);
}

.js .rl-photo.is-lit img {
	filter: none;
}

/* The editor canvas has no theme.js, so photos must never start dimmed there. */
.editor-styles-wrapper .rl-photo img {
	filter: none;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}

	.js .rl-photo img {
		filter: none;
	}
}