/* ============================================
   FOJE Campaign Branding - Patriotic Skin
   Red, White & Blue with Gold accents
   For America 250th Anniversary (2026)
   ============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
    /* Primary Colors - Patriotic palette inspired by the U.S. flag (Old Glory) + Gold for "Golden Washington" */
    --navy: #002868; /* Classic Old Glory Blue */
    --navy-dark: #001F4D;
    --red: #BF0A30; /* Classic Old Glory Red - stronger and more flag-authentic */
    --red-dark: #8B0000; /* Deeper red for hover states */
    --gold: #D4AF37; /* Rich classic gold (better for "Golden Washington" 250th theme) */
    --gold-light: #E8D5A3; /* Lighter gold for accents and highlights */
    /* Neutrals */
    --cream: #F8F4ED;
    --white: #FFFFFF;
    --text-dark: #0F1C2E;
    --text-muted: #5C6B7A;
    /* Semantic */
    --primary: var(--red);
    --secondary: var(--navy);
    --accent: var(--gold);
}

/* ---------- Base / Typography ---------- */
body {
    color: var(--text-dark);
    background-color: var(--cream);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--navy);
    font-weight: 700;
}

/* One-off dramatic statement used on the Donate page.
   Using a very specific class name makes it easy to find and maintain.
   Avoids fighting with the global h1-h6 rules and Bootstrap utilities.
*/
.campaign-mantra {
    font-size: 1.1rem; /* slightly smaller than a normal h4 */
    font-style: italic;
    font-weight: bold;
    color: var(--gold); /* uses the existing gold from our theme */
}

.campaign-credo {
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.45;
    border-left: 3px solid var(--gold);
    padding-left: 0.75rem;
}

.campaign-contrastpop {
    /* Chromostereopsis 3D pop effect (the graphic trick you described):
       Bright red text on a deep blue-tinted dark background creates a subtle
       "floating" 3D perception because the eye has trouble focusing red and
       blue at the same focal plane. Works best without glasses (contacts are fine).
       Reserved for the Declaration quote to present it as an elevated,
       foundational standard rather than a personal opinion.
    */
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 600;
    color: #ff4444; /* bright saturated red for strongest pop */
    background-color: rgba(0, 0, 0, 0.15);
    border-left: 5px solid var(--gold);
    padding: 0.9rem 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--red);
    border-color: var(--red);
    color: var(--white);
    font-weight: 600;
}

    .btn-primary:hover {
        background-color: var(--red-dark);
        border-color: var(--red-dark);
    }

.btn-outline-primary {
    color: var(--red);
    border-color: var(--red);
}

    .btn-outline-primary:hover {
        background-color: var(--red);
        color: var(--white);
    }

.btn-secondary {
    background-color: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

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

/* Gold accent button (good for "Golden Washington" CTAs) */
.btn-gold {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--navy-dark);
    font-weight: 600;
}

    .btn-gold:hover {
        background-color: var(--gold-light);
        color: var(--navy-dark);
    }

/* Gold highlight/glow for high-priority CTAs like Donate */
.btn-with-gold-glow {
    box-shadow: 0 0 0 3px var(--gold-light), 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}

    .btn-with-gold-glow:hover {
        box-shadow: 0 0 0 4px var(--gold), 0 6px 18px rgba(0, 0, 0, 0.45);
        transform: translateY(-1px);
    }

/* Lighter navy button with lighter blue outline highlight for Volunteer (to stand out on dark hero) */
.btn-volunteer {
    background-color: #1e40af; /* lighter navy */
    border-color: #1e40af;
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.6); /* lighter blue outline highlight */
    transition: all 0.2s ease;
}

    .btn-volunteer:hover {
        background-color: #2563eb;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.8);
    }

/* ---------- Cards ---------- */
.card {
    border: none;
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.08);
    background-color: var(--white);
}

.card-gray {
    border: 1px solid var(--gold-light);
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.06);
    background-color: #fffef5; /* soft warm cream, on-brand */
    border-radius: 6px;
}

.card-navy {
    border: 1px solid var(--gold-light);
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.06);
    background-color: #0c1f3d; /* deeper blue-tinted dark for stronger 3D pop */
    border-radius: 6px;
}

.card-header {
    background-color: var(--navy);
    color: var(--white);
    font-weight: 600;
}

/* ---------- Hero / Campaign Headers ---------- */
.hero {
    background-color: var(--navy);
    color: var(--white);
    padding: 4rem 0;
}

    .hero h1,
    .hero h2 {
        color: var(--white);
    }

/* Useful for your Space Needle patriotic graphics */
.hero-patriotic {
    background-size: cover;
    background-position: center;
    position: relative;
}

    .hero-patriotic::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(10, 37, 64, 0.65), rgba(10, 37, 64, 0.55));
    }

/* ---------- Section Styling ---------- */
.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}

    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--red);
    }

/* ---------- Gold Accents ---------- */
.gold-accent {
    color: var(--gold);
}

.text-gold {
    color: var(--gold) !important;
}

.border-gold {
    border-color: var(--gold) !important;
}

/* ---------- Utility Classes ---------- */
.bg-navy {
    background-color: var(--navy) !important;
    color: var(--white);
}

.bg-red {
    background-color: var(--red) !important;
    color: var(--white);
}

.bg-cream {
    background-color: var(--cream) !important;
}

.text-navy {
    color: var(--navy) !important;
}

/* ---------- Forms ---------- */
.form-control:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(178, 34, 52, 0.25);
}

/* ============================================
   Navigation (Top Menu)
   ============================================ */
.navbar {
    background-color: var(--navy) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-bottom: 2px solid var(--gold);
}

    .navbar .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        .navbar .nav-link:hover {
            color: var(--gold) !important;
        }

        .navbar .nav-link.active {
            color: var(--gold) !important;
            border-bottom: 2px solid var(--gold);
            padding-bottom: 2px;
        }

        .navbar .nav-link.donate {
            color: var(--gold) !important;
            font-weight: 600;
        }

            .navbar .nav-link.donate:hover {
                color: var(--gold-light) !important;
            }

.navbar-brand {
    color: var(--white) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

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

footer {
    background-color: var(--navy-dark) !important;
    color: rgba(255, 255, 255, 0.85);
    border-top: 2px solid var(--gold);
}

    footer a {
        color: var(--gold-light);
        font-weight: 500;
    }

        footer a:hover {
            color: var(--gold);
            text-decoration: underline;
        }

    footer .text-muted,
    footer .opacity-50,
    footer .opacity-75 {
        color: rgba(255, 255, 255, 0.65) !important;
    }

/* ---------- Responsive Adjustments ---------- */
@media (max-width: 768px) {
    .hero {
        padding: 3rem 0;
    }
}