:root {
    --color-sage: #8a9a6b;
    --color-sage-dark: #5b6b45;
    --color-cream: #f6f1e4;
    --color-parchment: #efe6d0;
    --color-brown: #4a3524;
    --color-brown-soft: #6b4a32;
    --color-gold: #b8923f;
    --color-gold-bright: #c9a94c;
    --color-white: #fffdf8;
    /* Error/attention tone: autumn-clay, drawn from the warm bark tones of the owl
       artwork — distinct from the sage/gold accents without breaking the palette. */
    --color-clay: #9c4a2f;

    --font-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --font-body: "Lato", "Source Sans 3", -apple-system, sans-serif;

    --radius-md: 0.5rem;
    --radius-lg: 1.25rem;
    --shadow-soft: 0 8px 30px rgba(74, 53, 36, 0.12);
    --transition-organic: 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-cream);
    color: var(--color-brown);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    scroll-behavior: smooth;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-brown);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.5em;
}

h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-family: var(--font-display);
}

h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    color: var(--color-sage-dark);
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--color-sage-dark);
    text-decoration: none;
}

a:hover {
    color: var(--color-gold);
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--color-gold);
    margin-bottom: 0.6em;
}

.btn-primary, .btn-secondary {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.85em 1.9em;
    border-radius: 999px;
    transition: transform var(--transition-organic), box-shadow var(--transition-organic), background var(--transition-organic);
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--color-sage-dark);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-gold);
    color: var(--color-brown);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.btn-secondary {
    border-color: var(--color-sage-dark);
    color: var(--color-sage-dark);
    background: transparent;
}

.btn-secondary:hover {
    background: var(--color-sage-dark);
    color: var(--color-white);
}

.oak-divider {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.oak-divider img {
    width: min(420px, 70vw);
    height: auto;
}

/* The hidden starting state is gated on html.js-reveal (added by site.js as it starts),
   so content can only ever be hidden while the reveal script is actually running — if JS
   is unavailable or the script fails, everything stays visible instead of blanking. */
html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-organic), transform var(--transition-organic);
    /* Second safety net: even with the script running, if the IntersectionObserver never
       delivers (or an element is added in a way nothing observes), the element reveals
       itself on a timer instead of staying invisible. The scroll-triggered reveal still
       plays for anything the observer reaches first. */
    animation: reveal-fallback 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.2s forwards;
}

html.js-reveal .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

@keyframes reveal-fallback {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .parallax-layer {
        transform: none !important;
    }
}

/* Keyboard focus: inputs already have their own focus outline; give links and buttons an
   equally visible one in the brand gold. */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

.sparkle {
    color: var(--color-gold-bright);
}

/* ---------- Form validation (Blazor EditForm) ---------- */

.validation-message {
    color: var(--color-clay);
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.1rem;
}

.validation-errors {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    background: rgba(156, 74, 47, 0.08);
    border-left: 4px solid var(--color-clay);
    border-radius: var(--radius-md);
}

.validation-errors .validation-message {
    margin: 0.15rem 0;
}

.form-row input.invalid,
.form-row select.invalid,
.form-row textarea.invalid {
    border-color: var(--color-clay);
}

.form-row input.invalid:focus,
.form-row select.invalid:focus,
.form-row textarea.invalid:focus {
    outline-color: var(--color-clay);
}