/* 01-foundation.css: tokens, fonts, reset, base typography, forms, alerts.
   FILE ORDER IS CASCADE ORDER across the numbered stylesheets.
   Palette and type are the binding table in docs/DESIGN.md. */

/* Self-hosted fonts (org rule: no external font CDNs; CSP allows no external
   style or font hosts). Variable latin subsets, font-display: swap so text
   paints immediately in the system fallback. Preloaded in App.razor. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/oswald-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- design tokens (docs/DESIGN.md palette table, verbatim) ---------- */

:root {
    --white: #FFFFFF;        /* page background */
    --off-white: #F6F7F3;    /* alternating section background (cool) */
    --earth-100: #F3EEE6;    /* alternating section background (warm, brown-tinted), callouts */
    --stone-200: #E3E6E0;    /* card borders, dividers, table rules */
    --stone-300: #C9CEC5;    /* secondary borders, disabled */
    --stone-500: #8C928A;    /* muted text on DARK backgrounds and disabled only (3.1:1 on white, fails AA for small text) */
    --stone-600: #626861;    /* muted / hint text on light (4.9:1 on white) */
    --stone-700: #3B403A;    /* body text on light, secondary headings */
    --ink-900: #141414;      /* headings, hero/footer dark bg, CTA text on green-200 */
    --leaf-300: #A6D06B;     /* highlight on dark sections, hover on dark */
    --leaf-500: #74A436;     /* logo green. Accents, icons, rules, stat numbers on dark, focus rings. NOT body text on white (3.2:1) */
    --green-700: #3D6B1E;    /* primary CTA background (white text 6.6:1), hover darkens */
    --green-800: #2F5417;    /* CTA hover/pressed; link and green TEXT on white (8.4:1) */
    --green-100: #E8F2DB;    /* subtle green callout background, success bg */
    --bark-600: #6B4423;     /* brown accent on light (5.9:1 on white): eyebrow labels, icons, 2px rules under headings */
    --bark-800: #3A1E0E;     /* dark brown: footer top band, quote/PDF header, secondary dark surfaces */
    --danger: #B42318;       /* errors, emergency accent (6.0:1 on white) */
    --danger-bg: #FEE4E2;    /* error background */
    --warning-bg: #FEF0C7;   /* oak-wilt seasonal banner background (text ink-900) */

    /* semantic aliases used by alerts and status pills */
    --success: #2F5417;
    --success-bg: #E8F2DB;

    /* LEGACY ALIASES. 07-admin.css (lane D) and pages/blog.css (lane B) are
       owned by other lanes and still reference the scaffold's token names.
       These map them onto the design-system palette so admin and article
       styling keeps working without editing files this lane does not own.
       Remove once those lanes adopt the names above. */
    --silver-100: var(--stone-200);
    --silver-300: var(--stone-300);
    --silver-500: var(--stone-500);
    --steel-600: var(--stone-600);
    --steel-700: var(--stone-700);
    --charcoal-900: var(--ink-900);
    --brown-700: var(--bark-600);
    --gold-100: var(--green-100);
    --gold-400: var(--leaf-500);
    --gold-500: var(--green-700);
    --gold-600: var(--green-800);
    --gold-700: var(--green-800);

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 2px rgba(20, 20, 20, .06), 0 6px 18px rgba(20, 20, 20, .06);
    --shadow-lift: 0 4px 10px rgba(20, 20, 20, .10), 0 14px 34px rgba(20, 20, 20, .10);
    --container-max: 1200px;
    --section-px: 20px;
    --call-bar-height: 64px;
    --tap: 44px;
}

/* ---------- reset ---------- */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Fragment targets (lightbox, in-page anchors) must clear the sticky
       header, which is the logo row plus the nav row. */
    scroll-padding-top: 140px;
}

body {
    font-family: var(--font-sans);
    background: var(--white);
    color: var(--stone-700);
    font-size: 17px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* Long unbreakable tokens (emails, URLs) must wrap instead of escaping
       their container on narrow viewports. */
    overflow-wrap: break-word;
}

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

input, button, textarea, select {
    font: inherit;
}

@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;
        scroll-behavior: auto !important;
    }
}

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--ink-900);
    line-height: 1.15;
    font-weight: 600;
}

/* Oswald block caps for H1/H2 (the logo's voice); sentence case below. */
h1, h2 {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.2rem; letter-spacing: 0.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0.01em; }

p {
    color: var(--stone-700);
}

/* Sharp 2px brown rule under section headings. */
.section-heading {
    display: block;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 22px;
}

.section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: var(--bark-600);
}

.section-heading-center {
    text-align: center;
}

.section-heading-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Brown eyebrow label above a heading. */
.eyebrow {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bark-600);
    margin-bottom: 10px;
}

.lead {
    font-size: 1.12rem;
    color: var(--stone-700);
}

.muted {
    color: var(--stone-600);
    font-size: 0.94rem;
}

/* Prices and stats: Oswald, tabular. */
.num {
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--green-800);
}

/* Links on white use green-800 (8.4:1). Hover never lightens. */
a {
    color: var(--green-800);
    text-decoration: none;
}

a:hover {
    color: var(--green-800);
    text-decoration: underline;
}

/* Visible focus ring everywhere (3px leaf green). */
:focus-visible {
    outline: 3px solid var(--leaf-500);
    outline-offset: 2px;
    border-radius: 2px;
}

/* UX-M4: FocusOnNavigate focuses the page h1 on every navigation and Chromium
   treats that programmatic focus as focus-visible, so the ring survives until
   the user clicks elsewhere. Headings are not interactive: suppress the ring
   unconditionally (screen readers still announce the focused heading). */
h1:focus,
h1:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Skip link for keyboard users. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink-900);
    color: var(--white);
    padding: 12px 18px;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
    color: var(--white);
}

/* ---------- forms ---------- */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-group label,
.form-legend {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink-900);
}

.form-hint {
    font-size: 0.84rem;
    color: var(--stone-600);
}

.form-input {
    /* 16px+ inputs prevent iOS zoom-on-focus (accessibility). */
    font-size: 16px;
    min-height: var(--tap);
    padding: 11px 12px;
    border: 1px solid var(--stone-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink-900);
    width: 100%;
}

textarea.form-input {
    min-height: 120px;
    line-height: 1.5;
}

.form-input:focus-visible {
    outline: 3px solid var(--leaf-500);
    outline-offset: 1px;
    border-color: var(--leaf-500);
}

.form-input:disabled {
    background: var(--off-white);
    color: var(--stone-500);
    border-color: var(--stone-300);
}

/* Field-level validation: every invalid field is marked at once, with its
   message adjacent to the input. */
.form-input-error {
    border-color: var(--danger);
}

.field-error {
    font-size: 0.84rem;
    color: var(--danger);
    font-weight: 600;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

@media (max-width: 560px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--stone-700);
    cursor: pointer;
    min-height: var(--tap);
}

.form-checkbox,
.form-radio {
    width: 20px;
    height: 20px;
    accent-color: var(--green-700);
    flex: 0 0 auto;
}

/* Honeypot: off-screen, never display:none (bots skip hidden inputs). */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- alerts ---------- */

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--green-700);
}

.alert-info {
    background: var(--earth-100);
    color: var(--stone-700);
    border: 1px solid var(--stone-200);
}

/* ---------- utilities ---------- */

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

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }