/*
    Enchanted Garden Shop
    shared.css -- site-wide design system
    Approved direction: Concept B2, Moss and Cream
    Every page loads this file first, then its own page-specific CSS file.
*/

/* Self-hosted fonts (was Google Fonts, moved local to drop the
   fonts.googleapis.com/fonts.gstatic.com round trip entirely). Files live
   in /fonts, latin subset only, matching what the site actually uses. */

@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/marcellus-latin-400-normal.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: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/playfair-display-latin-500-normal.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: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/playfair-display-latin-600-normal.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: 'Playfair Display';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/playfair-display-latin-500-italic.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: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/quicksand-latin-400-normal.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: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/quicksand-latin-500-normal.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: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/quicksand-latin-600-normal.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;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Core palette, do not introduce new colors outside this list */
    --moss: #7c9169;
    --moss-deep: #5c7350;
    --cream: #fbf7ec;
    --panel: #ffffff;
    --forest-deep: #35472c;
    --ink: #33301f;
    --gold: #c99a3f;
    --ruby: #ad4f52;
    --ruby-deep: #8d4043;
    --gold-light: #f6e3ab;

    /* Fonts */
    --font-display: 'Playfair Display', serif;
    --font-label: 'Marcellus', serif;
    --font-body: 'Quicksand', sans-serif;

    /* Spacing scale */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 44px;
    --space-xl: 64px;

    /* Radius scale */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--moss);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Inline links inside body copy (paragraphs, list items) need to look
   clickable: color plus an underline. Buttons, nav links, footer links,
   and card links intentionally keep the plain `a` reset above, since
   they already read as clickable some other way (button styling, being
   in a nav bar, etc). This scopes the treatment to prose so we don't
   have to repeat it as an inline style on every content link. */
.section-inner p a,
.section-inner li a {
    color: var(--ruby);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.section-inner p a:hover,
.section-inner li a:hover {
    color: var(--ruby-deep);
}

img {
    max-width: 100%;
    display: block;
}

main {
    display: block;
}

ul, ol {
    list-style: none;
}

/* ==========================================================================
   Accessibility: skip link and focus states
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--forest-deep);
    color: var(--cream);
    padding: 14px 22px;
    font-family: var(--font-label);
    font-size: 14px;
    z-index: 200;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ruby);
    outline-offset: 2px;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--forest-deep);
}

.eyebrow {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ruby);
    margin-bottom: 10px;
    display: block;
}

.eyebrow.on-dark {
    color: var(--cream);
}

/* ==========================================================================
   Crisis resources banner
   Every page that discusses trauma, abuse, or counseling includes this.
   ========================================================================== */

.crisis-banner {
    background: var(--cream);
    border: 1px solid var(--moss-deep);
    border-left: 5px solid var(--ruby);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin: var(--space-md) auto;
    max-width: 720px;
    font-size: 15px;
    color: var(--ink);
}

.crisis-banner strong {
    color: var(--forest-deep);
}

.crisis-banner a {
    color: var(--ruby);
    font-weight: 600;
    text-decoration: underline;
}

/* Each hotline sits on its own plain line, structurally the same as
   the phone link on the Contact page, rather than the flex/nowrap
   layout this used to have. That layout was suspected of being why
   iOS Safari showed its "Allow Call" confirmation on these tel: links
   even on a precise tap, unlike the plain link on Contact that dials
   immediately. */
.crisis-banner-item {
    margin-top: 6px;
}

.crisis-banner-item:first-of-type {
    margin-top: 10px;
}

.crisis-banner-resources {
    margin-top: 10px;
    text-align: right;
}

/* ==========================================================================
   Site Header
   ========================================================================== */

/* shared.js fetches and injects the real header/footer after load. These
   reserve roughly the injected height up front (measured on the live site)
   so that injection doesn't shift the rest of the page down. */
#site-header {
    min-height: 252px;
}

#site-footer {
    min-height: 300px;
}

header.site-header {
    padding: 20px 24px;
    background: var(--moss-deep);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.site-brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    text-align: left;
}

.site-crest {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid var(--cream);
    padding: 8px;
    background: var(--cream);
    box-shadow: 0 6px 18px rgba(53, 71, 44, 0.25);
}

.site-crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-crest.crest-mobile-only {
    display: none;
}

.site-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.site-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 34px;
    color: var(--cream);
    text-shadow: 0 2px 10px rgba(53, 71, 44, 0.3);
}

.site-tagline {
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream);
}

.header-donate {
    flex-shrink: 0;
    padding: 12px 24px;
}

/* ==========================================================================
   Navigation, with dropdown support and mobile hamburger
   ========================================================================== */

nav.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding: 16px 16px;
    background: var(--cream);
    border-top: 3px solid var(--forest-deep);
    border-bottom: 3px solid var(--forest-deep);
    position: relative;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--forest-deep);
    color: var(--forest-deep);
    font-family: var(--font-label);
    font-size: 14px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin: 8px auto;
}

.nav-toggle .bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--forest-deep);
    position: relative;
}

.nav-toggle .bar::before,
.nav-toggle .bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--forest-deep);
}

.nav-toggle .bar::before {
    top: -6px;
}

.nav-toggle .bar::after {
    top: 6px;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
}

nav.site-nav > .nav-links > a,
nav.site-nav .nav-item > a {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--forest-deep);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-block;
}

nav.site-nav > .nav-links > a[aria-current="page"],
nav.site-nav .nav-item > a[aria-current="page"] {
    background: var(--forest-deep);
    color: var(--cream);
}

nav.site-nav > .nav-links > a:hover,
nav.site-nav .nav-item:hover > a,
nav.site-nav .nav-item > a:focus {
    background: var(--forest-deep);
    color: var(--cream);
}

.nav-item {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel);
    border: 1px solid var(--moss-deep);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 28px rgba(53, 71, 44, 0.2);
    padding: 8px;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 20;
}

.nav-item:hover .nav-dropdown,
.nav-item.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
    font-family: var(--font-label);
    font-size: 13px;
    color: var(--forest-deep);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    text-align: left;
}

.nav-dropdown a:hover {
    background: var(--cream);
    color: var(--ruby);
}

.announcement-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    background: var(--gold-light);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    padding: 12px 20px;
    transition: filter 0.2s ease;
}

.announcement-bar[hidden] {
    display: none;
}

.announcement-bar:hover {
    filter: brightness(0.96);
}

.announcement-bar-title {
    font-family: var(--font-label);
    font-weight: 700;
}

.announcement-bar-date {
    opacity: 0.85;
}

.announcement-bar-cta {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
}

@media (max-width: 780px) {
    .header-inner {
        justify-content: center;
        text-align: center;
    }

    .site-brand {
        flex-direction: column;
        text-align: center;
    }

    .site-brand-text {
        align-items: center;
    }

    .site-crest.crest-desktop-only {
        display: none;
    }

    .site-crest.crest-mobile-only {
        display: block;
        width: 56px;
        height: 56px;
    }

    .header-donate {
        order: 2;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        max-height: 0;
        overflow: hidden;
        padding: 0 8px;
        transition: max-height 0.25s ease;
    }

    .nav-item.open .nav-dropdown {
        /* The desktop hover/open rule above (.nav-item.open .nav-dropdown,
           same specificity, earlier in the file) sets a translateX/Y
           transform to center and drop the floating dropdown. On mobile
           the dropdown is static and full-width instead, but nothing
           here was resetting that transform back to none, so it stayed
           in effect and shifted the whole open dropdown box off-screen
           to the left, showing as an empty white box. */
        transform: none;
        max-height: 400px;
        padding: 8px;
    }

    #site-header {
        min-height: 390px;
    }

    #site-footer {
        min-height: 455px;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 13px 28px;
    border-radius: var(--radius-sm);
    border: 1px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(255, 255, 255, 0.12);
    display: inline-block;
    /* Two buttons sitting side by side with no gap touch each other
       with zero space once they wrap onto separate lines on a narrow
       phone screen, since inline-block elements don't add their own
       spacing. This margin keeps a consistent gap whether buttons sit
       side by side or stack, on any page that places more than one
       .btn next to another. */
    margin: 6px;
}

.btn:hover {
    background: #ffffff;
    color: var(--forest-deep);
}

.btn.solid {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.btn.solid:hover {
    background: var(--forest-deep);
    border-color: var(--forest-deep);
    color: var(--cream);
}

.btn.on-light {
    border-color: var(--forest-deep);
    color: var(--forest-deep);
    background: transparent;
}

.btn.on-light:hover {
    background: var(--forest-deep);
    color: var(--cream);
}

.btn.donate {
    background: var(--ruby);
    border-color: var(--ruby);
    color: #ffffff;
}

.btn.donate:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--forest-deep);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin: 28px 24px 0;
    border-radius: var(--radius-lg);
}

.hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75) saturate(1.05);
}

/* A dedicated scrim over the whole photo: a strong, even horizontal
   band through the middle where the text block actually sits (this
   photo is busy with lots of small light and dark detail, so a weak
   or radial scrim leaves parts of the text over light patches like
   the window and sunflowers), tapering off only at the top and bottom
   of the hero rather than side to side. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(10, 14, 8, 0.1) 0%,
        rgba(10, 14, 8, 0.32) 12%,
        rgba(10, 14, 8, 0.32) 88%,
        rgba(10, 14, 8, 0.1) 100%
    );
}

.hero-overlay {
    position: relative;
    z-index: 2;
    max-width: 660px;
    padding: var(--space-md);
}

.hero-overlay h1 {
    font-weight: 600;
    font-size: 36px;
    color: #ffffff;
    margin-bottom: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.8), 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hero-overlay p {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 28px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.6);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.hero-buttons .btn:not(.solid) {
    background: rgba(15, 20, 12, 0.4);
    border-color: #ffffff;
}

.hero-buttons .btn:not(.solid):hover {
    background: #ffffff;
    color: var(--forest-deep);
}

/* Page header variant, for interior pages without a full photo hero */
.page-header {
    padding: 56px 24px 44px;
    text-align: center;
    background: var(--forest-deep);
    color: var(--cream);
}

.page-header h1 {
    color: var(--cream);
    font-size: 34px;
    margin-bottom: 14px;
}

.page-header p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 17px;
    opacity: 0.92;
}

/* ==========================================================================
   Section wrappers
   ========================================================================== */

.section {
    padding: var(--space-xl) var(--space-md);
}

.section + .section {
    padding-top: var(--space-md);
}

.section.on-moss {
    background: var(--moss-deep);
    text-align: center;
}

.section.on-cream {
    background: var(--cream);
}

.section.on-panel {
    background: var(--panel);
}

.section h2 {
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    margin-bottom: var(--space-lg);
}

.section.on-moss h2 {
    color: var(--cream);
}

.section-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.section-inner.narrow {
    max-width: 720px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 1020px;
    margin: 0 auto;
}

.card-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.card {
    background: var(--cream);
    border-radius: var(--radius-md);
    padding: 34px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-bottom: 4px solid var(--gold);
    text-align: left;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(53, 71, 44, 0.28);
}

.card-dot {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--moss);
    color: var(--cream);
}

.card h3 {
    font-family: var(--font-label);
    font-size: 17px;
    margin-bottom: 12px;
    color: var(--forest-deep);
}

.card p {
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 18px;
}

.card p.card-price {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ruby);
    margin-top: -6px;
    margin-bottom: 14px;
}

.card .link {
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ruby);
}

/* Class / event card variant, with a date tag and price */

.card.class-card {
    padding: 0;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
}

.class-card-photo {
    width: 100%;
    height: auto;
    max-height: 360px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--forest-deep);
    display: block;
}

.class-card .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 18px 0;
}

.class-card .tag {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream);
    background: var(--forest-deep);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.class-card .price {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ruby);
}

.class-card h3 {
    padding: 14px 18px 4px;
}

.class-card p {
    padding: 0 18px 20px;
    opacity: 0.75;
    margin-bottom: 0;
}

.class-card p .class-card-link {
    color: var(--ruby);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.class-card p .class-card-link:hover {
    color: var(--ruby-deep);
}

.class-card-meta {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 18px 10px;
    margin-top: -12px;
    font-size: 13px;
    color: var(--forest-deep);
    opacity: 0.85;
}

.class-card-meta li {
    display: flex;
    gap: 6px;
}

.class-card-meta .class-card-meta-label {
    font-family: var(--font-label);
    font-weight: 600;
}

.class-card-footer {
    padding: 4px 18px 20px;
}

.class-card-urgency {
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ruby);
    margin: 0 0 10px;
}

.class-card-cta {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    background: var(--forest-deep);
    color: var(--cream);
    transition: background 0.25s ease, color 0.25s ease;
}

.card.class-card:hover .class-card-cta {
    background: var(--gold);
    color: var(--forest-deep);
}

.class-card-cta.is-full {
    background: var(--panel);
    color: var(--ruby-deep);
    font-weight: 600;
}

/* ==========================================================================
   Pill tags
   ========================================================================== */

.pill-list {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pill {
    font-size: 12px;
    font-family: var(--font-label);
    letter-spacing: 0.04em;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    display: inline-block;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-shell {
    max-width: 560px;
    margin: 0 auto;
    background: var(--panel);
    border-radius: var(--radius-lg);
    padding: 36px 30px;
    text-align: left;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--forest-deep);
    margin-bottom: 6px;
}

.form-field .hint {
    font-size: 12px;
    color: var(--ink);
    opacity: 0.6;
    margin-top: 4px;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    padding: 11px 14px;
    border: 1px solid var(--moss-deep);
    border-radius: var(--radius-sm);
    background: var(--cream);
    color: var(--ink);
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
    border-color: var(--ruby);
}

.form-field-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.form-field-row .form-field {
    flex: 1;
    min-width: 200px;
}

.form-error-text {
    display: none;
    font-size: 13px;
    color: var(--ruby);
    margin-top: 6px;
}

.form-field.has-error .form-error-text {
    display: block;
}

/* Honeypot field, hidden from sighted users and keyboard tab order, but
   left in the DOM for bots that fill in every field indiscriminately. */
.form-field.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    display: none;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

.form-status.success {
    display: block;
    background: #e8f0e2;
    color: var(--forest-deep);
    border: 1px solid var(--moss);
}

.form-status.error {
    display: block;
    background: #f7e8e9;
    color: var(--ruby);
    border: 1px solid var(--ruby);
}

/* A soft, non-pushy call to action shown under a form-status success
   message once a form has been submitted (contact, vendor signup, and
   so on). Only appears after the visitor has already engaged. */
.post-submit-cta {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--moss);
    font-size: 14px;
    color: var(--ink);
    opacity: 0.85;
}

.form-submit {
    width: 100%;
    text-align: center;
    border: none;
    font-family: var(--font-label);
    font-size: 14px;
    letter-spacing: 0.06em;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    background: var(--forest-deep);
    color: var(--cream);
    cursor: pointer;
    transition: background 0.25s ease;
}

.form-submit:hover {
    background: var(--gold);
    color: var(--forest-deep);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.site-footer {
    background: var(--forest-deep);
    color: var(--cream);
    text-align: center;
    padding: 40px 24px 28px;
    font-family: var(--font-label);
    font-size: 12px;
}

.footer-donate {
    margin-bottom: 24px;
}

.foot-nav {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    letter-spacing: 0.04em;
}

.foot-nav a:hover {
    color: var(--gold-light);
}

.foot-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 12px;
    opacity: 0.85;
}

.foot-links a:hover {
    color: var(--gold-light);
}

.foot-address {
    margin-bottom: 6px;
    opacity: 0.9;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.foot-fein {
    opacity: 0.65;
    font-size: 11px;
    margin-bottom: 14px;
}

.fine {
    opacity: 0.6;
    font-size: 11px;
}

.foot-team {
    margin-top: 10px;
    opacity: 0.5;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.foot-team a:hover {
    color: var(--gold-light);
}

.foot-legal {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 11px;
    opacity: 0.65;
}

.foot-legal a:hover {
    color: var(--gold-light);
}

.not-found-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 8px;
}

.not-found-links li {
    display: inline;
}

.not-found-links a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--moss);
    border-radius: var(--radius-pill);
    color: var(--forest-deep);
    font-family: var(--font-label);
    font-size: 13px;
}

.not-found-links a:hover {
    background: var(--moss);
    color: #ffffff;
}

/* ==========================================================================
   Utility
   ========================================================================== */

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

.mt-md {
    margin-top: var(--space-md);
}

.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;
}

/* Real photo used at the top of a long-form article page, such as a
   Meet Kelli or Meet Mark page */
.article-photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    border-bottom: 4px solid var(--gold);
    box-shadow: 0 16px 30px rgba(53, 71, 44, 0.28);
}

/* Placeholder image blocks, used where a real client photo is still needed */
.photo-placeholder {
    background: repeating-linear-gradient(135deg, var(--moss-deep), var(--moss-deep) 12px, var(--moss) 12px, var(--moss) 24px);
    border: 2px dashed var(--cream);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cream);
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: var(--space-md);
    min-height: 220px;
}

/* ==========================================================================
   Need gauge (the Donate page progress bar)
   ========================================================================== */

.need-gauge-track {
    height: 18px;
    background: var(--gold-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.need-gauge-fill {
    width: var(--gauge-percent, 0%);
    height: 100%;
    background: var(--moss-deep);
    border-radius: var(--radius-pill);
    transition: width 1.2s ease-out;
}

.need-gauge.is-funded .need-gauge-fill {
    background: var(--forest-deep);
}

.need-gauge-label {
    font-family: var(--font-label);
    font-size: 16px;
    color: var(--forest-deep);
    margin-top: var(--space-xs);
}

.need-gauge-label strong {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--forest-deep);
}

.need-gauge-status {
    font-family: var(--font-label);
    font-size: 14px;
    color: var(--forest-deep);
    background: var(--gold-light);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-top: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {
    .need-gauge-fill {
        transition: none;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 780px) {
    .card-grid,
    .card-grid.two-col {
        grid-template-columns: 1fr;
    }

    .site-name {
        font-size: 26px;
    }

    .hero-overlay h1 {
        font-size: 26px;
    }

    .hero {
        margin: 20px 12px 0;
        min-height: 360px;
    }

    .form-shell {
        padding: 26px 20px;
    }

    /* On narrow phones, "RAINN National Sexual Assault Hotline
       800-656-4673" as one unbreakable line is wider than the screen
       and bleeds past the card edge. Let the label text wrap here; the
       phone number itself stays on one line since .crisis-banner
       a[href^="tel:"] keeps its own nowrap. */
    .crisis-banner-item {
        white-space: normal;
    }
}