/* ==========================================================================
   Warrner Legal — design tokens
   Signature concept: Indiana limestone as "solid ground to build on."
   ========================================================================== */

:root {
	/* Color */
	--color-ink: #1B2531;
	--color-ink-70: rgba(27, 37, 49, 0.7);
	--color-limestone: #E7E2D3;
	--color-stone: #C9C2AC;
	--color-brass: #B08D4F;
	--color-brass-dark: #8C6E3A;
	--color-sage: #6B7A5E;
	--color-paper: #FAF8F3;

	/* Type */
	--font-display: 'Bitter', Georgia, serif;
	--font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--heading-tight: -0.03em;
	--body-leading: 1.7;

	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 16px;
	--text-lg: 18px;
	--text-xl: 20px;
	--text-2xl: 24px;
	--text-3xl: 30px;
	--text-4xl: 36px;
	--text-5xl: 48px;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	/* Shadow — layered, ink-tinted, low opacity */
	--shadow-base: 0 1px 2px rgba(27, 37, 49, 0.08);
	--shadow-elevated:
		0 2px 4px rgba(27, 37, 49, 0.06),
		0 8px 16px rgba(27, 37, 49, 0.08);
	--shadow-floating:
		0 4px 8px rgba(27, 37, 49, 0.05),
		0 16px 32px rgba(27, 37, 49, 0.10),
		0 32px 64px rgba(27, 37, 49, 0.06);

	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* Set on both html and body — body's overflow-x doesn't reliably
	   propagate to the root scrolling element across browsers. */
	overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--body-leading);
	color: var(--color-ink);
	background: var(--color-paper);
	-webkit-font-smoothing: antialiased;
	/* Decorative elements (e.g. the hero ring in variant-d.css) are allowed
	   to bleed past their own box on purpose — this stops that bleed from
	   ever widening the page and causing horizontal scroll on mobile. */
	overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
	outline: 2px solid var(--color-brass);
	outline-offset: 2px;
}

/* Shared animation — used by Option A's .vd-hero__ring (variant-d.css);
   was defined here alongside Option B's now-archived .hero__ring, which
   used the same keyframes. */
@keyframes warrner-ring-drift {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.wrap {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.section { padding-block: var(--space-24); }
.section--light { background: var(--color-limestone); color: var(--color-ink); }

/* ==========================================================================
   Site credit — appears on every template via footer.php, independent of
   which homepage variant's own footer (if any) precedes it.
   ========================================================================== */

.site-credit {
	padding-block: var(--space-4);
	border-top: 1px solid var(--color-stone);
	background: var(--color-paper);
	color: var(--color-ink-70);
	font-size: var(--text-xs);
	text-align: center;
}
.site-credit a {
	color: var(--color-brass-dark);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}
.site-credit a:hover { color: var(--color-brass); text-decoration: underline; }

/* ==========================================================================
   Headings
   ========================================================================== */

.h1, .h2, .h3 {
	font-family: var(--font-display);
	letter-spacing: var(--heading-tight);
	line-height: 1.1;
	margin: 0 0 var(--space-4);
}

.h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 700; }
.h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); font-weight: 700; }
.h3 { font-size: var(--text-xl); font-weight: 600; }

/* ==========================================================================
   Legal content (page-legal.php — Privacy Policy, Terms of Use)
   ========================================================================== */

.wrap--narrow { max-width: 760px; }

.legal-back {
	display: inline-block;
	margin-bottom: var(--space-8);
	color: var(--color-brass-dark);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}
.legal-back:hover { color: var(--color-brass); text-decoration: underline; }
.legal-back:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; }

.legal-content { font-size: var(--text-base); line-height: var(--body-leading); }

.legal-content .legal-updated {
	display: block;
	margin: 0 0 var(--space-8);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink-70);
}

.legal-content h2 {
	margin: var(--space-12) 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: var(--heading-tight);
	line-height: 1.2;
}
.legal-content h2:first-of-type { margin-top: 0; }

.legal-content h3 {
	margin: var(--space-8) 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
}

.legal-content p { margin: 0 0 var(--space-4); }

.legal-content ul,
.legal-content ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-6);
}
.legal-content li { margin-bottom: var(--space-2); }

.legal-content a {
	color: var(--color-brass-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--color-brass); }
.legal-content a:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; }

.legal-content strong { font-weight: 700; }

.legal-content hr {
	margin: var(--space-8) 0;
	border: none;
	border-top: 1px solid var(--color-stone);
}