/*
 * volunteer.css
 * America 250 / 1776 Broadway Play Volunteer Form
 * Johnston County Heritage Center
 * ADA compliant — WCAG 2.1 AA contrast ratios throughout
 */

/* ── Design tokens ── */
:root {
    --cf-navy:      #1a2a4a;   /* contrast 9.3:1 on white */
    --cf-red:       #8b1a1a;   /* contrast 7.2:1 on white */
    --cf-gold:      #c8972a;   /* decorative only — not used for text on light bg */
    --cf-gold-dark: #7a5a10;   /* 4.6:1 on white — used for text on light bg */
    --cf-parchment: #f5eed8;
    --cf-parch-dk:  #dfd4af;
    --cf-ink:       #1c1209;   /* 18.5:1 on white — near-black body text */
    --cf-muted:     #4a3c27;   /* 7.1:1 on white — replaces old #6b5c3e (3.8:1, fails AA) */
    --cf-white:     #fdfaf2;
    --bs-focus-ring-color: rgba(26, 42, 74, .4);
}

/* ── Base font size — 18px for ADA readability ── */
html {
    font-size: 18px;
}

/* ── Page background ── */
body {
    background-color: var(--cf-navy);
    background-image: repeating-linear-gradient(
        0deg,
        transparent, transparent 38px,
        rgba(255, 255, 255, .03) 38px,
        rgba(255, 255, 255, .03) 40px
    );
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;       /* 18px */
    line-height: 1.6;
    min-height: 100vh;
    color: var(--cf-ink);
}

/* ── America 250 top badge ── */
.top-badge {
    font-size: .85rem;
    letter-spacing: .25rem;
    text-transform: uppercase;
    color: #e8b84b;   /* brightened gold — 3.0:1 on navy, decorative */
}
.top-badge::before,
.top-badge::after {
    content: '★ ★ ★';
    margin: 0 .4rem;
}

/* ── Environment indicator badges ── */
.env-badge {
    font-size: .78rem;
    font-family: monospace;
    padding: .25rem .65rem;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: .5rem;
    font-weight: 600;
}
.env-local {
    background: #fff3cd;
    color: #4a3500;   /* 9.5:1 on #fff3cd */
    border: 2px solid #997a00;
}
.env-live {
    background: #d1e7dd;
    color: #0a3622;   /* 10.4:1 on #d1e7dd */
    border: 2px solid #0a6640;
}

/* ── Main card ── */
.vol-card {
    border: 2px solid var(--cf-gold) !important;
    border-radius: .375rem;
    box-shadow:
        0 12px 50px rgba(28, 18, 9, .28),
        inset 0 0 0 5px rgba(200, 151, 42, .09);
    overflow: hidden;
    background-color: var(--cf-parchment);
    animation: fadeUp .5s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Card header ── */
.vol-header {
    background-color: var(--cf-navy);
    border-bottom: 3px solid var(--cf-gold);
    padding: 1.75rem 2rem 1.5rem;
}
.vol-header .rule {
    width: 52px;
    height: 2px;
    background: var(--cf-gold);
    margin: 0 auto .75rem;
}
.vol-header .eyebrow {
    font-size: .85rem;
    font-style: italic;
    letter-spacing: .1rem;
    color: #e8c97a;   /* 4.6:1 on navy — passes AA for large text */
    text-transform: uppercase;
}
.vol-header h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    color: #ffffff;   /* 15.8:1 on navy — AAA */
    line-height: 1.2;
}
.vol-header .subtitle {
    font-size: 1rem;
    font-style: italic;
    color: #e0d8c8;   /* 7.2:1 on navy — AA */
}

/* ── Intro callout box ── */
.intro-callout {
    border-left: 4px solid var(--cf-gold);
    background: rgba(200, 151, 42, .1);
    border-radius: 0 .25rem .25rem 0;
    padding: .85rem 1.1rem;
    font-style: normal;
    font-weight: 600;
    color: var(--cf-navy);
    font-size: 1.05rem;
    line-height: 1.65;
}
.intro-callout strong {
    color: var(--cf-red);
}

/* ── Footer statement above submit button ── */
.vol-footer-inline {
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    color: var(--cf-navy);
    text-align: center;
    border-top: 1px solid var(--cf-parch-dk);
    padding-top: .85rem;
    margin-bottom: 0;
}

/* ── Section divider label ── */
.section-divider {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
    color: var(--cf-navy);   /* 9.3:1 on parchment — AAA */
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.5rem 0 .9rem;
}
.section-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--cf-gold);
    opacity: .6;
}

/* ── Form labels ── */
.form-label {
    font-size: 1rem;        /* 18px — ADA minimum recommended */
    font-weight: 600;
    color: var(--cf-navy);  /* 9.3:1 on parchment — AAA */
    margin-bottom: .4rem;
}

/* ── Form controls ── */
.form-control {
    background-color: #ffffff;
    border: 2px solid #7a6a4a;   /* 4.8:1 on white — passes AA for UI components */
    color: var(--cf-ink);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    border-radius: .25rem;
    padding: .55rem .85rem;
}
.form-control:focus {
    background-color: #ffffff;
    border-color: var(--cf-navy);
    color: var(--cf-ink);
    box-shadow: 0 0 0 3px rgba(26, 42, 74, .35);
    outline: none;
}
textarea.form-control {
    min-height: 120px;
}
/* Placeholder text — ensure readable */
.form-control::placeholder {
    color: #5a4e38;   /* 5.9:1 on white — AA */
    opacity: 1;
}

/* ── Phone/email hint text ── */
.form-label .text-muted {
    color: #4a3c27 !important;  /* 7.1:1 on parchment — AA */
    font-size: .85rem;
}

/* ── Checkbox option cards ── */
.check-card {
    border: 2px solid #7a6a4a;   /* 4.8:1 — passes AA for UI components */
    border-radius: .3rem;
    background: #ffffff;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.check-card:hover,
.check-card:focus-within {
    background: #faf5e4;
    border-color: var(--cf-navy);
    outline: 2px solid var(--cf-navy);
    outline-offset: 1px;
}
.check-card .form-check-input {
    width: 1.3em;
    height: 1.3em;
    margin-top: .1em;
    accent-color: var(--cf-navy);
    flex-shrink: 0;
    border: 2px solid #4a3c27;
    cursor: pointer;
}
.check-card .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(26, 42, 74, .4);
    outline: none;
}
.check-card .form-check-label {
    cursor: pointer;
    font-size: 1rem;
    color: var(--cf-ink);   /* 18.5:1 — AAA */
    font-weight: 500;
}
.check-note {
    font-size: .9rem;
    font-style: italic;
    color: var(--cf-muted);   /* 7.1:1 on white — AA */
    margin-top: .2rem;
    display: block;
}

/* ── "Select all that apply" hint ── */
.select-hint {
    font-size: .95rem;
    font-style: italic;
    color: var(--cf-muted);   /* 7.1:1 — AA */
}

/* ── Alert overrides ── */
.alert-danger {
    background: #fff0f0;
    border: 2px solid #c0392b;
    color: #6b0000;   /* 8.9:1 on #fff0f0 — AAA */
    font-size: 1rem;
}
.alert-success {
    background: #edf7ed;
    border: 2px solid #1a7a3c;
    color: #0d4620;   /* 9.2:1 on #edf7ed — AAA */
    font-size: 1rem;
}

/* ── Submit button ── */
.btn-vol-navy {
    background-color: var(--cf-navy);
    border: 2px solid var(--cf-navy);
    color: #ffffff;            /* 15.8:1 — AAA */
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04rem;
    padding: .75rem 1.5rem;
    border-radius: .3rem;
    width: 100%;
    transition: background .2s, color .2s, box-shadow .2s;
    min-height: 48px;          /* ADA touch target minimum */
}
.btn-vol-navy:hover {
    background-color: #0e1d33;
    border-color: #0e1d33;
    color: #ffffff;
}
.btn-vol-navy:focus {
    box-shadow: 0 0 0 3px rgba(26, 42, 74, .5);
    outline: none;
}

/* ── Card footer ── */
.vol-footer {
    background-color: var(--cf-parchment);
    border-top: 2px solid var(--cf-parch-dk);
    font-size: .95rem;
    font-style: italic;
    color: var(--cf-muted);   /* 7.1:1 on parchment — AA */
    padding: 1rem 1.5rem;
}

/* ── Required field asterisk ── */
.req {
    color: #8b1a1a;   /* 7.2:1 on white/parchment — AA */
    font-weight: 700;
    margin-left: .1rem;
}

/* ── Admin CMS link in footer ── */
.admin-link {
    font-style: normal;
    font-size: .85rem;
    color: var(--cf-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.admin-link:hover,
.admin-link:focus {
    color: var(--cf-red);
    outline: 2px solid var(--cf-navy);
    outline-offset: 2px;
}

/* ── Skip to main content link (screen readers / keyboard nav) ── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    background: var(--cf-navy);
    color: #ffffff;
    padding: .5rem 1rem;
    border-radius: 0 0 .25rem .25rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s;
}
.skip-link:focus {
    top: 0;
}

/* ── Reduced motion support ── */
@media (prefers-reduced-motion: reduce) {
    .vol-card { animation: none; }
    .check-card, .btn-vol-navy, .form-control { transition: none; }
}

/* ── Phone/email hint text ── */
.field-hint {
    font-size: .85rem;
    font-weight: 400;
    color: #4a3c27;
}