/*
Theme Name: Illinois Turners Camp Bricks Child
Template: bricks
Text Domain: turner-bricks-child
Version: 1.0.0
*/

/* ==========================================================================
   Illinois Turners Camp - design foundation
   Layer 2 (presentation only): design tokens, base typography, a11y.
   Values are 1:1 with the approved React demo (src/index.css,
   tailwind.config.ts, ui/button.tsx). No site logic lives here.
   ========================================================================== */

:root {
	/* --- Brand color (hex, resolved from the demo HSL tokens) --- */
	--turner-color-bg:            #FCFBF7; /* warm cream page background  40 33% 98% */
	--turner-color-surface:       #F6F2EA; /* card surface               40 30% 96% */
	--turner-color-muted-bg:      #EDE9E0; /* alt section background     40 20% 92% */
	--turner-color-border:        #DBD4C7; /* hairlines / dividers       40 20% 85% */
	--turner-color-input:         #DDD7CC; /* form field border          40 20% 88% */
	--turner-color-text:          #2E2424; /* body text                   0 20% 15% */
	--turner-color-heading:       #2E2424; /* headings */
	--turner-color-muted:         #6B5F5F; /* secondary text              0 10% 40% */

	--turner-color-primary:       #6C1322; /* deep maroon               350 70% 25% */
	--turner-color-primary-hover: #561019; /* maroon, pressed */
	--turner-on-primary:          #FCFBF7;

	--turner-color-secondary:     #3273DC; /* royal blue                217 71% 53% */
	--turner-on-secondary:        #FFFFFF;
	/* Darkened royal blue for small text on cream: the base tone lands at
	   4.39:1, just under the 4.5 floor. Use this for type, not for fills. */
	--turner-color-secondary-ink: #2A62CC;

	--turner-color-accent:        #2E6B4D; /* forest green              150 40% 30% */
	--turner-on-accent:           #FCFBF7;

	--turner-color-gold:          #F0B529; /* gold                       42 87% 55% */
	--turner-on-gold:             #2E2424;

	/* --- Gradients --- */
	--turner-gradient-hero:     linear-gradient(135deg, #6C1322 0%, #4A0D17 100%);
	--turner-gradient-card:     linear-gradient(180deg, #FCFBF7 0%, #F1ECE2 100%);
	--turner-gradient-featured: linear-gradient(135deg, #6C1322 0%, #3273DC 100%); /* maroon to blue */

	/* --- Elevation (tinted, never pure black) --- */
	--turner-shadow-soft:     0 4px 20px -4px rgba(46, 36, 36, 0.10);
	--turner-shadow-elevated: 0 12px 40px -8px rgba(46, 36, 36, 0.14);
	--turner-shadow-glow:     0 0 30px rgba(108, 19, 34, 0.20);

	/* --- Type families --- */
	--turner-font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--turner-font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* --- Fluid type scale (mobile min to desktop max) --- */
	--turner-text-h1:      clamp(2.5rem, 1.55rem + 3.4vw, 4.5rem);
	--turner-text-h2:      clamp(2rem, 1.5rem + 1.8vw, 3rem);
	--turner-text-h3:      1.25rem;
	--turner-text-h4:      1.125rem;
	--turner-text-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--turner-text-body:    1rem;
	--turner-text-small:   0.875rem;
	--turner-text-eyebrow: 0.8125rem;

	/* --- Line height / weight / tracking --- */
	--turner-leading-tight: 1.12;
	--turner-leading-snug:  1.3;
	--turner-leading-body:  1.65;
	--turner-weight-body:   400;
	--turner-weight-medium: 500;
	--turner-weight-semibold: 600;
	--turner-weight-heading: 700;
	--turner-tracking-eyebrow: 0.14em;

	/* --- Radius scale (one system: soft cards, pill interactive) --- */
	--turner-radius-sm:   0.25rem;
	--turner-radius:      0.5rem;
	--turner-radius-md:   0.375rem;
	--turner-radius-lg:   1rem;
	--turner-radius-xl:   1.5rem;
	--turner-radius-pill: 999px;

	/* Header height — the hero subtracts this so it fills exactly one screen. */
	--turner-header-h: 4rem;

	/* --- Layout rhythm --- */
	--turner-container-max:  1400px;
	--turner-container-pad:  clamp(1.25rem, 0.75rem + 2vw, 2rem);
	--turner-space-section:  clamp(4rem, 2.5rem + 5vw, 7rem);
	--turner-space-section-sm: clamp(2.5rem, 1.75rem + 3vw, 4rem);

	/* --- Motion --- */
	--turner-ease:     cubic-bezier(0.16, 1, 0.3, 1);
	--turner-duration: 300ms;
}

/* ==========================================================================
   Base reset + typography
   ========================================================================== */

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

/*
 * Root font size — the base every rem token in this file depends on.
 *
 * Bricks ships `html { font-size: 62.5% }` in frontend-layer.css, which makes
 * 1rem = 10px. This token system is authored against a 16px base (the same one
 * the approved React demo used): --turner-text-small: 0.875rem is meant to be
 * 14px, not 8.75px. Left alone, every rem value on the site renders at 62.5%
 * of its intended size.
 *
 * Restore the browser default so the scale above means what it says. Anything
 * that genuinely needs 10px-based rem should use px or its own custom property.
 */
html {
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--turner-color-bg);
	color: var(--turner-color-text);
	font-family: var(--turner-font-body);
	font-size: var(--turner-text-body);
	font-weight: var(--turner-weight-body);
	line-height: var(--turner-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--turner-font-heading);
	font-weight: var(--turner-weight-heading);
	line-height: var(--turner-leading-tight);
	color: var(--turner-color-heading);
	text-wrap: balance;
}

h1 { font-size: var(--turner-text-h1); }
h2 { font-size: var(--turner-text-h2); }
h3 { font-size: var(--turner-text-h3); }
h4 { font-size: var(--turner-text-h4); }
h5 { font-size: 1rem; }
h6 { font-size: var(--turner-text-small); letter-spacing: 0.02em; }

p { margin: 0 0 1rem; max-width: 70ch; }

a {
	color: var(--turner-color-secondary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--turner-duration) var(--turner-ease);
}
a:hover { color: var(--turner-color-primary); }

img, picture, svg, video { max-width: 100%; height: auto; }
img { display: block; }

strong, b { font-weight: var(--turner-weight-semibold); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--turner-color-primary);
	outline-offset: 2px;
	border-radius: var(--turner-radius-sm);
}

/* Skip links.
   Bricks emits these itself at wp_body_open (#brx-content, #brx-footer) and
   they are already correct — clipped until focused, real targets. Only the
   look is Bricks' default black; this brands them on the turner tokens.
   Third-party class, so scoped under .brx-body like the Forminator grid rules
   in components.css rather than styled bare. */
.brx-body .skip-link {
	background: var(--turner-color-primary);
	color: var(--turner-on-primary);
	font-family: var(--turner-font-body);
	font-weight: var(--turner-weight-semibold);
	padding: 0.625rem 1rem;
	border-radius: 0 var(--turner-radius-md) var(--turner-radius-md) 0;
	text-decoration: none;
}

.turner-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Custom scrollbar (1:1 with demo) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--turner-color-muted-bg); }
::-webkit-scrollbar-thumb {
	background: rgba(108, 19, 34, 0.3);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(108, 19, 34, 0.5); }

/* ==========================================================================
   Reduced motion (global)
   ========================================================================== */

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