/* ============================================================================
 * Stitch Design Tokens
 *
 * Layers the "Modern Organic" palette + type system from the Stitch redesign
 * (Source Serif 4 headlines, Hanken Grotesk body, deep-forest primary,
 * spring-green secondary, golden-hour tertiary) on top of main.css.
 *
 * Loaded AFTER main.css so the new tokens win the cascade without touching
 * any of the existing scoped page CSS. Old --cream / --green-* var names
 * are bridged to the new palette so every existing page instantly gets
 * the refresh without template changes.
 *
 * Mobile-first: base rules assume phone widths; desktop overrides come later.
 * ========================================================================= */

/* ── Palette ─────────────────────────────────────────────────────────────── */
:root {
    /* Surface / neutral canvas — "bone white" */
    --stitch-surface:                #fbf9f5;
    --stitch-surface-container-low:  #f5f3ef;
    --stitch-surface-container:      #efeeea;
    --stitch-surface-container-high: #eae8e4;
    --stitch-on-surface:             #1b1c1a;
    --stitch-on-surface-variant:     #414941;
    --stitch-outline:                #717971;
    --stitch-outline-variant:        #c1c9bf;

    /* Primary — deep forest green (grounding, authoritative) */
    --stitch-primary:                #033619;
    --stitch-on-primary:             #ffffff;
    --stitch-primary-container:      #1f4d2e;
    --stitch-on-primary-container:   #8cbd95;
    --stitch-inverse-primary:        #a0d2a9;

    /* Secondary — spring green (growth, success, active) */
    --stitch-secondary:              #006c48;
    --stitch-on-secondary:           #ffffff;
    --stitch-secondary-container:    #92f7c3;
    --stitch-on-secondary-container: #00734d;

    /* Tertiary — golden hour (highlights, badges, ratings) */
    --stitch-tertiary:               #3c2c00;
    --stitch-tertiary-container:     #574100;
    --stitch-on-tertiary-container:  #d1ad56;
    --stitch-tertiary-accent:        #e8c268;

    /* Semantic accents */
    --stitch-earth-brown:            #432818;
    --stitch-harvest-red:            #BC4749;
    --stitch-error:                  #ba1a1a;
    --stitch-error-container:        #ffdad6;

    /* ── Bridge to existing var names so old scoped CSS auto-updates ── */
    --cream:        var(--stitch-surface);
    --cream-dark:   var(--stitch-surface-container-high);
    --green-deep:   var(--stitch-primary);
    --green-mid:    var(--stitch-secondary);
    --green-bright: var(--stitch-on-tertiary-container); /* golden accent for CTAs */
    --green-light:  var(--stitch-secondary-container);
    --amber:        var(--stitch-tertiary-accent);
    --amber-light:  #ffdf98;
    --amber-dark:   #574100;
    --bark:         var(--stitch-earth-brown);
    --bark-light:   #c9a882;
    --text-dark:    var(--stitch-on-surface);
    --text-mid:     var(--stitch-on-surface-variant);
    --text-muted:   var(--stitch-outline);

    /* Radii — "curves found in nature" */
    --stitch-radius-sm:  0.25rem;
    --stitch-radius:     0.5rem;
    --stitch-radius-md:  0.75rem;
    --stitch-radius-lg:  1rem;
    --stitch-radius-xl:  1.5rem;
    --stitch-radius-full: 9999px;

    /* Spacing rhythm */
    --stitch-gutter:            24px;
    --stitch-margin-mobile:     16px;
    --stitch-margin-desktop:    64px;
    --stitch-section-gap:       80px;   /* mobile default; 120px on desktop */

    /* Type stacks */
    --stitch-font-headline: "Source Serif 4", "Playfair Display", Georgia, serif;
    --stitch-font-body:     "Hanken Grotesk", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --stitch-font-label:    "Hanken Grotesk", "DM Sans", system-ui, sans-serif;
}

/* ── Site-wide typography refresh ─────────────────────────────────────────
 * Only touch the base — pages with their own explicit font-family stay put.
 * ========================================================================= */
body {
    font-family: var(--stitch-font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--stitch-on-surface);
    background-color: var(--stitch-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.headline, .display {
    font-family: var(--stitch-font-headline);
    color: var(--stitch-on-surface);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Mobile-first headline sizes; desktop bumps come after. */
h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 26px; font-weight: 600; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

@media (min-width: 768px) {
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3 { font-size: 26px; }
    h4 { font-size: 20px; }
}

/* Small-caps label treatment (used by scoped pages via .label class) */
.stitch-label,
.overline {
    font-family: var(--stitch-font-label);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stitch-on-surface-variant);
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a {
    color: var(--stitch-primary);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease;
}
a:hover {
    color: var(--stitch-secondary);
}
a:focus-visible {
    outline: 2px solid var(--stitch-primary);
    outline-offset: 3px;
    border-radius: var(--stitch-radius-sm);
}

/* ── Buttons — mirror the "primary solid / secondary ghost" pattern ─────── */
.btn,
.button,
button:not([class*="btn"]):not([class*="button"]):not(.plain) {
    font-family: var(--stitch-font-body);
    font-weight: 600;
    border-radius: var(--stitch-radius);
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.05s ease;
}
.btn:active,
.button:active {
    transform: scale(0.985);
}

.btn-primary,
.button-primary,
.btn.primary {
    background-color: var(--stitch-primary);
    color: var(--stitch-on-primary);
    border: 1px solid var(--stitch-primary);
}
.btn-primary:hover,
.button-primary:hover,
.btn.primary:hover {
    background-color: var(--stitch-primary-container);
    border-color: var(--stitch-primary-container);
}

.btn-secondary,
.button-secondary,
.btn.ghost {
    background-color: transparent;
    color: var(--stitch-primary);
    border: 1px solid var(--stitch-primary);
}
.btn-secondary:hover,
.button-secondary:hover,
.btn.ghost:hover {
    background-color: var(--stitch-primary);
    color: var(--stitch-on-primary);
}

/* Golden-hour highlight button — for Trade / Donate actions */
.btn-accent,
.btn.accent {
    background-color: var(--stitch-tertiary-accent);
    color: var(--stitch-tertiary);
    border: 1px solid var(--stitch-tertiary-accent);
}
.btn-accent:hover,
.btn.accent:hover {
    background-color: var(--stitch-on-tertiary-container);
}

/* ── Inputs — minimalist with a 1px soft border ─────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,
select {
    font-family: var(--stitch-font-body);
    background-color: var(--stitch-surface-container-low);
    color: var(--stitch-on-surface);
    border: 1px solid var(--stitch-outline-variant);
    border-radius: var(--stitch-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--stitch-primary);
    box-shadow: 0 0 0 2px rgba(3, 54, 25, 0.15);
}

input::placeholder,
textarea::placeholder {
    color: var(--stitch-outline);
    opacity: 0.85;
}

/* ── Cards — soft rounded, low-opacity primary-tinted shadow ─────────────── */
.card,
.mgc-card {
    background-color: var(--stitch-surface-container-low);
    border: 1px solid var(--stitch-outline-variant);
    border-radius: var(--stitch-radius-lg);
    box-shadow: 0 2px 8px rgba(3, 54, 25, 0.04);
}

/* ── Chips / tags — pill shape ──────────────────────────────────────────── */
.chip,
.tag,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 4px 12px;
    font-family: var(--stitch-font-label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--stitch-radius-full);
    background-color: var(--stitch-secondary-container);
    color: var(--stitch-on-secondary-container);
    border: 1px solid transparent;
}

/* ── Mobile-first tweaks: better tap targets, tighter gutters ───────────── */
@media (max-width: 767px) {
    /* Ensure interactive controls hit the 44px iOS minimum */
    a.btn, a.button, .btn, .button, button {
        min-height: 44px;
        padding: 12px 20px;
    }

    /* Section rhythm — mobile gap smaller than desktop */
    section {
        padding-left: var(--stitch-margin-mobile);
        padding-right: var(--stitch-margin-mobile);
    }

    /* Prevent horizontal scroll on small screens */
    body {
        overflow-x: hidden;
    }

    /* Font sizes hold for readability */
    body { font-size: 16px; }
}

/* ── Accessibility: honor prefers-reduced-motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    a, .btn, .button, button, input, textarea, select,
    .card, .mgc-card {
        transition: none !important;
    }
    .btn:active, .button:active {
        transform: none !important;
    }
}

/* ── Selection color — match the palette ───────────────────────────────── */
::selection {
    background-color: var(--stitch-secondary-container);
    color: var(--stitch-on-secondary-container);
}

/* ============================================================================
 * MOBILE HEADER / NAV POLISH
 *
 * The existing nav.php ships a functional but flat header. This layer adds
 * the Stitch treatment: sticky + backdrop-blur, softer buttons, a rounded
 * logo mark, and tighter proportions. All CSS-only — no template edits.
 *
 * Selectors match the existing #mainNav / .nav-* classes so nothing rewrites
 * the JS drawer behavior.
 * ========================================================================= */

#mainNav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(251, 249, 245, 0.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--stitch-outline-variant);
    box-shadow: 0 1px 3px rgba(3, 54, 25, 0.03);
    transition: box-shadow 0.2s ease;
}

/* Add subtle elevation once the page has scrolled — signals the header
   is floating above content. */
#mainNav.is-scrolled {
    box-shadow: 0 2px 12px rgba(3, 54, 25, 0.08);
}

/* Logo — the leaf gets a soft primary-tint circle behind it, and the
   wordmark switches to Source Serif 4 to match the display font. */
.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--stitch-font-headline);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--stitch-primary);
    text-decoration: none;
}
.nav-logo-leaf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--stitch-radius-full);
    background-color: var(--stitch-primary);
    color: var(--stitch-inverse-primary);
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(3, 54, 25, 0.15);
}

/* Hamburger — a soft rounded pill instead of a bare emoji-style button.
   44px min target for iOS accessibility.
   NOTE: no `display` here — main.css owns visibility (none on desktop,
   inline-flex ≤768px). Declaring display:inline-flex in this file used
   to override that (this sheet loads after main.css) and leaked the
   hamburger onto desktop nav on every page. */
.nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: var(--stitch-radius-full);
    background-color: transparent;
    color: var(--stitch-primary);
    border: 1px solid transparent;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
    background-color: var(--stitch-surface-container);
    border-color: var(--stitch-outline-variant);
    outline: none;
}
.nav-toggle[aria-expanded="true"] {
    background-color: var(--stitch-primary);
    color: var(--stitch-on-primary);
    border-color: var(--stitch-primary);
}

/* Nav CTAs — inherit the design-system button treatment. */
.nav-cta {
    background-color: var(--stitch-primary);
    color: var(--stitch-on-primary);
    border-radius: var(--stitch-radius-full);
    padding: 0.55rem 1.1rem;
    font-family: var(--stitch-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.nav-cta:hover {
    background-color: var(--stitch-primary-container);
    color: var(--stitch-on-primary);
}
.nav-cta:active {
    transform: scale(0.98);
}

/* Nav links — refined type + interactive states */
.nav-links a {
    font-family: var(--stitch-font-body);
    color: var(--stitch-on-surface-variant);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
    color: var(--stitch-primary);
}
.nav-links a.active {
    color: var(--stitch-primary);
    font-weight: 600;
}

/* ── Mobile-specific header treatments ─────────────────────────────────── */
@media (max-width: 768px) {
    #mainNav {
        padding: 0.6rem 1rem !important;
    }

    /* Tighten the logo on phones — 30px instead of 34px so the header stays
       under 60px total. */
    .nav-logo-leaf {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    .nav-logo {
        font-size: 1.15rem;
    }

    /* Expanded drawer — softer background, rounded top border to feel like
       a sheet sliding down instead of a border-top divider. */
    #mainNav.nav-open .nav-links {
        background-color: var(--stitch-surface-container-low);
        border-top: 1px solid var(--stitch-outline-variant);
        border-radius: 0 0 var(--stitch-radius-lg) var(--stitch-radius-lg);
        padding: 0.8rem 0.4rem 1rem;
        margin: 0.6rem -1rem -0.6rem;
        box-shadow: 0 8px 24px rgba(3, 54, 25, 0.08);
    }
    #mainNav.nav-open .nav-links li {
        padding: 0.7rem 1rem;
        border-radius: var(--stitch-radius);
        transition: background-color 0.12s ease;
    }
    #mainNav.nav-open .nav-links li:hover,
    #mainNav.nav-open .nav-links li:focus-within {
        background-color: var(--stitch-surface-container);
    }
    #mainNav.nav-open .nav-links a {
        display: block;
        padding: 0;
        color: var(--stitch-on-surface);
    }
}