/**
 * RC Landscape Theme: Tokens + Component Overrides
 *
 * Accessibility-first stylesheet for landscape portal subsites.
 * Mirrors the canonical RC token layer (rc-core.css :root) so a
 * landscape subsite is a true downstream consumer of the same
 * design tokens. Per-site identity flows through the landscape
 * accent layer at the bottom of :root, overridden inline by
 * functions.php from the Customizer value.
 *
 * Version: 1.3.0
 * Updated: LV-S10 (May 29, 2026) - full rem-based tokenization
 * Token source: docs/living/RC_DESIGN_TOKENS.md v1.2 / rc-core.css
 * Standards: WCAG 2.2 AA, sRGB-verified contrast
 */

/* ===============================================================
 * 1. TOKENS
 *
 * Canonical brand + semantic tokens mirrored from rc-core.css.
 * Subsites do not load the rc-starter plugin, so the token layer
 * is declared here. Values are kept in lockstep with the main
 * site so a future Customizer change propagates identically.
 * =============================================================== */
:root {
    /* Brand palette (canonical, rc-core.css) */
    --rc-deep-forest: #122B1A;
    --rc-forest: #1A4731;
    --rc-canopy: #2D6A4F;
    --rc-fern: #40916C;
    --rc-moss: #74C69D;
    --rc-lichen: #B7E4C7;
    --rc-salmon: #A8502E;
    --rc-salmon-light: #E89F7A;
    --rc-salmon-dark: #8A3E22;
    --rc-river: #2D6B8A;
    --rc-sky-water: #5A9BB5;
    --rc-fog: #E8EDE4;
    --rc-cream: #F6F3ED;
    --rc-warm-white: #FAFAF6;
    --rc-ink: #1C2018;
    --rc-text: #4A4A42;
    --rc-earth: #795548;
    --rc-gold: #B8963E;
    --rc-gold-dark: #8B7028;
    --rc-error: #8B3A1F;

    /* RGB companions (for rgba composition at arbitrary opacity) */
    --rc-deep-forest-rgb: 18, 43, 26;
    --rc-forest-rgb: 26, 71, 49;
    --rc-cream-rgb: 246, 243, 237;

    /* Type size scale (rem; 1rem = 16px). WCAG 1.4.4 Resize Text.
       Floor for new code is --fs-300 (12px). */
    --fs-300: 0.75rem;     /* 12px */
    --fs-400: 0.8125rem;   /* 13px */
    --fs-500: 0.875rem;    /* 14px */
    --fs-600: 0.9375rem;   /* 15px */
    --fs-700: 1rem;        /* 16px - base body */
    --fs-800: 1.125rem;    /* 18px */
    --fs-900: 1.25rem;     /* 20px */
    --fs-1000: 1.5rem;     /* 24px */
    --fs-1100: 1.875rem;   /* 30px */

    /* Display scale (Cormorant headings, off the body scale).
       Rem-based so they honor the browser base size. */
    --rc-landscape-display-sm: 1.375rem;  /* 22px */
    --rc-landscape-display-md: 2rem;      /* 32px */
    --rc-landscape-display-lg: 2.5rem;    /* 40px */

    /* On-dark semantic text (ratios on deep-forest / forest) */
    --rc-on-dark-strong: #F6F3ED;                  /* cream, 13.68:1 */
    --rc-on-dark-primary: rgba(255,255,255,0.82);  /* ~9.6:1 */
    --rc-on-dark-secondary: rgba(255,255,255,0.7); /* ~6.8:1 */
    --rc-on-dark-muted: rgba(255,255,255,0.55);    /* ~4.9:1 on deep-forest ONLY; 4.41:1 on forest (fails). Do not use for text on a --rc-forest surface. */

    /* On-light semantic text */
    --rc-on-light-strong: var(--rc-forest);   /* 10.56:1 on white */
    --rc-on-light-primary: var(--rc-text);    /* 9.01:1 on white */
    --rc-on-light-meta: #737370;              /* 4.76:1 white, 4.54:1 warm-white */

    /* UI component borders (3:1 per WCAG 1.4.11) */
    --rc-ui-border-light: rgba(0,0,0,0.2);
    --rc-ui-border-form: #737370;             /* solid input border, 4.76:1 on white */

    /* Tap target floor (CSS px per WCAG 2.5.8) */
    --tap-generous: 44px;

    /* ---------------------------------------------------------
       Landscape identity layer.
       This file is shared by every landscape subsite. The accent
       default below is the generic pre-Customizer fallback
       (canopy). functions.php injects the per-site value inline on
       wp_head from the Customizer (rc_landscape_accent_color), e.g.
       #2D6B8A for Vashon. Every per-site color derives from it.
       --------------------------------------------------------- */
    --rc-landscape-accent: #2D6A4F;
    --rc-landscape-link: var(--rc-landscape-accent);
    --rc-landscape-border: var(--rc-landscape-accent);
    --rc-landscape-focus: var(--rc-landscape-accent);
    --rc-landscape-meta: var(--rc-on-light-meta);

    /* Typography defaults */
    --rc-landscape-font-min: var(--fs-500);
    --rc-landscape-font-body: var(--fs-700);
    --rc-landscape-line-height: 1.5;
}

/* ===============================================================
 * 2. FOCUS STYLES (WCAG 2.2)
 * =============================================================== */
a:focus, button:focus, input:focus, textarea:focus,
select:focus, [tabindex]:focus {
    outline: 2px solid var(--rc-landscape-focus);
    outline-offset: 2px;
}

a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) {
    outline: none;
}

/* ===============================================================
 * 3. SCROLL PADDING (sticky header clearance)
 * =============================================================== */
html { scroll-padding-top: 200px; }

/* ===============================================================
 * 4. LANDSCAPE CONTENT AREA
 * =============================================================== */
.rc-landscape-content {
    font-size: var(--rc-landscape-font-body);
    line-height: var(--rc-landscape-line-height);
}

.rc-landscape-content a {
    color: var(--rc-landscape-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.rc-landscape-content a:hover {
    text-decoration-thickness: 2px;
}

.rc-landscape-content h2,
.rc-landscape-content h3,
.rc-landscape-content h4 {
    color: var(--rc-landscape-accent);
}

.rc-landscape-content p {
    margin-bottom: 1.5em;
}

.rc-landscape-meta,
.rc-landscape-date,
.rc-landscape-caption {
    color: var(--rc-landscape-meta);
    font-size: var(--fs-500);
    line-height: 1.5;
}

/* ===============================================================
 * 5. CARDS
 * =============================================================== */
.rc-landscape-card {
    background: var(--rc-warm-white);
    border: 1px solid var(--rc-fog);
    border-radius: 8px;
    padding: 24px;
    transition: box-shadow 0.15s ease;
}

.rc-landscape-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rc-landscape-card__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fs-900);
    font-weight: 700;
    line-height: 1.2;
    color: var(--rc-on-light-strong);
    margin: 0 0 8px;
}

.rc-landscape-card__title a {
    color: inherit;
    text-decoration: none;
}

.rc-landscape-card__title a:hover,
.rc-landscape-card__title a:focus-visible {
    color: var(--rc-landscape-link);
    text-decoration: underline;
}

.rc-landscape-card__excerpt {
    font-size: var(--fs-600);
    line-height: 1.6;
    color: var(--rc-text);
    margin: 0 0 12px;
}

.rc-landscape-card__meta {
    font-size: var(--fs-500);
    color: var(--rc-landscape-meta);
    line-height: 1.5;
}

.rc-landscape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* ===============================================================
 * 6. FORM BASELINE (WCAG 2.2 AA)
 * =============================================================== */
.rc-landscape-form label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: var(--fs-500);
    font-weight: 500;
    color: var(--rc-text);
    margin-bottom: 6px;
    line-height: 1.5;
}

.rc-landscape-form input[type="text"],
.rc-landscape-form input[type="email"],
.rc-landscape-form input[type="url"],
.rc-landscape-form input[type="tel"],
.rc-landscape-form input[type="date"],
.rc-landscape-form textarea,
.rc-landscape-form select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-family: 'Jost', sans-serif;
    font-size: var(--fs-700);
    line-height: 1.5;
    color: var(--rc-ink);
    background: #fff;
    border: 1px solid var(--rc-ui-border-form);
    border-radius: 6px;
    transition: border-color 0.15s ease;
}

.rc-landscape-form input:focus,
.rc-landscape-form textarea:focus,
.rc-landscape-form select:focus {
    border-color: var(--rc-landscape-accent);
    outline: 2px solid var(--rc-landscape-focus);
    outline-offset: 2px;
}

.rc-landscape-form input:focus:not(:focus-visible),
.rc-landscape-form textarea:focus:not(:focus-visible),
.rc-landscape-form select:focus:not(:focus-visible) {
    outline: none;
}

.rc-landscape-form .field-error {
    color: var(--rc-error);
    font-size: var(--fs-500);
    line-height: 1.5;
    margin-top: 4px;
}

.rc-landscape-form .field-error::before {
    content: '\26A0\FE0F ';
}

/* ===============================================================
 * 7. BUTTONS
 *
 * Anchor-tag buttons need specificity to override the parent
 * theme's a { color } rule. a.rc-landscape-btn carries it.
 * Text is #fff (not cream): every validated landscape accent clears
 * 4.5:1 against white, but cream (#F6F3ED, L=0.88) drops the two
 * lightest accents (the-gorge, S. Willamette) below AA. White is the
 * accent-safe label color. See inc/landscape-config.php.
 * =============================================================== */
.rc-landscape-form button[type="submit"],
.rc-landscape-btn,
a.rc-landscape-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 28px;
    font-family: 'Jost', sans-serif;
    font-size: var(--fs-600);
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    background: var(--rc-landscape-accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.rc-landscape-form button[type="submit"]:hover,
.rc-landscape-btn:hover,
a.rc-landscape-btn:hover {
    opacity: 0.88;
    color: #fff;
    text-decoration: none;
}

.rc-landscape-form button[type="submit"]:focus,
.rc-landscape-btn:focus,
a.rc-landscape-btn:focus {
    outline: 2px solid var(--rc-landscape-focus);
    outline-offset: 2px;
}

.rc-landscape-form button[type="submit"]:focus:not(:focus-visible),
.rc-landscape-btn:focus:not(:focus-visible),
a.rc-landscape-btn:focus:not(:focus-visible) {
    outline: none;
}

/* ===============================================================
 * 8. RESPONSIVE
 * =============================================================== */
@media (max-width: 768px) {
    .rc-landscape-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .rc-landscape-card { padding: 20px; }
    html { scroll-padding-top: 140px; }
}

/* ===============================================================
 * 9. REDUCED MOTION
 * =============================================================== */
@media (prefers-reduced-motion: reduce) {
    .rc-landscape-card,
    .rc-landscape-form input,
    .rc-landscape-form textarea,
    .rc-landscape-form select,
    .rc-landscape-form button,
    .rc-landscape-btn,
    a.rc-landscape-btn,
    .rc-landscape-content a {
        transition: none;
    }
}

/* ===============================================================
 * 10. HIGH CONTRAST MODE
 * =============================================================== */
@media (forced-colors: active) {
    .rc-landscape-card { border: 1px solid CanvasText; }
    .rc-landscape-form input,
    .rc-landscape-form textarea,
    .rc-landscape-form select { border: 1px solid CanvasText; }
}