/*
 * AVFD Modern Design System
 * Brand refresh for Arundel Volunteer Fire Department
 */

/* ================================================== */
/* CSS CUSTOM PROPERTIES - BRAND COLORS & TYPOGRAPHY */
/* ================================================== */

:root {
    /* Brand Colors */
    --avfd-red: #CC3333;
    --avfd-navy: #1A2332;
    --avfd-gray: #F0F4F8;
    --avfd-gold: #D4A843;
    --avfd-white: #FFFFFF;

    /* Typography */
    --font-heading: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;

    /* Shadows & Effects */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
}

/* ================================================== */
/* BOOTSTRAP ACCENT RE-THEME (one interactive blue)    */
/* ==================================================
   Interactive = ONE blue: #2563EB, the same accent fireman.css already uses
   for the sidebar (--accent-blue). This replaces stock Bootstrap #0D6EFD so
   buttons, links, focus rings, and the sidebar finally agree. Brand red
   (--avfd-red) is reserved for brand chrome and destructive actions only.
   Hover/active/subtle stops come from the same Tailwind blue ramp as the
   sidebar tokens (600/700/800 and 50/200).
   This file loads LAST (after Bootstrap + tokens + fireman), so plain
   :root / [data-bs-theme] blocks here win the cascade. */
:root {
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #1E40AF;
    --bs-primary-bg-subtle: #EFF6FF;
    --bs-primary-border-subtle: #BFDBFE;
    --bs-link-color: #2563EB;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1D4ED8;
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-focus-ring-color: rgba(37, 99, 235, 0.25);
}
/* Dark mode: links and accent TEXT lighten for contrast on the navy surface
   (#6EA8FE ≈ 7:1 on #0E1622). --bs-primary-rgb deliberately stays #2563EB in
   both modes — it feeds solid fills (badge bg-primary, .bg-primary) whose
   white text would fail on a lightened blue. */
[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: #6EA8FE;
    --bs-primary-bg-subtle: #1C2A44;
    --bs-primary-border-subtle: #35507F;
    --bs-link-color: #6EA8FE;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color: #8BB9FE;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-focus-ring-color: rgba(110, 168, 254, 0.25);
}
/* .text-primary is rgba(var(--bs-primary-rgb)) !important, so the dark remap
   needs its own !important; matches the link color above. */
[data-bs-theme="dark"] .text-primary { color: #6EA8FE !important; }

/* Component classes bake #0D6EFD into their own vars — re-point them. */
.btn-primary {
    --bs-btn-bg: #2563EB;
    --bs-btn-border-color: #2563EB;
    --bs-btn-hover-bg: #1D4ED8;
    --bs-btn-hover-border-color: #1D4ED8;
    --bs-btn-active-bg: #1E40AF;
    --bs-btn-active-border-color: #1E40AF;
    --bs-btn-disabled-bg: #2563EB;
    --bs-btn-disabled-border-color: #2563EB;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
    --bs-btn-color: #2563EB;
    --bs-btn-border-color: #2563EB;
    --bs-btn-hover-bg: #2563EB;
    --bs-btn-hover-border-color: #2563EB;
    --bs-btn-active-bg: #2563EB;
    --bs-btn-active-border-color: #2563EB;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #6EA8FE;
    --bs-btn-border-color: #6EA8FE;
    --bs-btn-hover-bg: #6EA8FE;
    --bs-btn-hover-border-color: #6EA8FE;
    --bs-btn-hover-color: #0E1622;
    --bs-btn-active-bg: #6EA8FE;
    --bs-btn-active-border-color: #6EA8FE;
    --bs-btn-active-color: #0E1622;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #93C5FD;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}
.form-check-input:checked {
    background-color: #2563EB;
    border-color: #2563EB;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: #2563EB;
}
.pagination {
    --bs-pagination-active-bg: #2563EB;
    --bs-pagination-active-border-color: #2563EB;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}
.list-group {
    --bs-list-group-active-bg: #2563EB;
    --bs-list-group-active-border-color: #2563EB;
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: #2563EB;
}
.progress, .progress-stacked {
    --bs-progress-bar-bg: #2563EB;
}
.accordion {
    --bs-accordion-active-bg: #EFF6FF;
    --bs-accordion-active-color: #1E40AF;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}
[data-bs-theme="dark"] .accordion {
    --bs-accordion-active-bg: #1C2A44;
    --bs-accordion-active-color: #6EA8FE;
}

/* ================================================== */
/* GLOBAL OVERRIDES */
/* ================================================== */

html {
    scroll-behavior: smooth;
    /* Offset in-page anchor jumps so the target heading clears the
       fixed-top navbar (~64px) instead of hiding behind it on mobile. */
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    color: #333;
}

/* Let wide preformatted content (e.g. the legacy race-results tables) scroll
   inside its own box instead of being clipped off-screen by body{overflow-x:clip}. */
pre {
    overflow-x: auto;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

/* ================================================== */
/* NAVBAR - TRANSPARENT TO SOLID ON SCROLL */
/* ================================================== */

.navbar-dark.fixed-top {
    background-color: transparent;
    /* Scrim gradient keeps the white brand/hamburger legible over the hero
       image even before JS adds .navbar-scrolled (or if JS never loads). */
    background-image: linear-gradient(to bottom, rgba(26, 35, 50, 0.85) 0%, rgba(26, 35, 50, 0) 100%);
    transition: all 0.3s ease-in-out;
    padding: 1rem 0;
}

.navbar-dark.fixed-top.navbar-scrolled {
    background-color: var(--avfd-navy);
    background-image: none;
    box-shadow: var(--shadow-md);
    padding: 0.5rem 0;
}

/* Clear the fixed-top navbar without a hardcoded inline magic number; keyed
   to the class so it stays consistent with scroll-padding-top (80px). */
.page-public {
    padding-top: 80px;
}

/* Dark-theme the dropdown panels while the nav is a mobile offcanvas drawer
   (below lg) so they match the dark drawer instead of flashing white. Desktop
   dropdowns (lg+, where .offcanvas renders inline) are left untouched. */
@media (max-width: 991.98px) {
    #navbarOffcanvas .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.15);
    }
    #navbarOffcanvas .dropdown-item {
        color: rgba(255, 255, 255, 0.85);
    }
    #navbarOffcanvas .dropdown-item:hover,
    #navbarOffcanvas .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
    #navbarOffcanvas .dropdown-header {
        color: rgba(255, 255, 255, 0.55);
    }
    #navbarOffcanvas .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.15);
    }
}

.navbar-brand {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    transition: font-size 0.3s ease;
}

.navbar-scrolled .navbar-brand {
    font-size: 1.25rem;
}


.navbar .btn-danger {
    background-color: var(--avfd-red);
    border-color: var(--avfd-red);
    font-weight: 600;
    transition: all 0.3s ease;
}

.navbar .btn-danger:hover {
    background-color: #AA2222;
    border-color: #AA2222;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ================================================== */
/* HERO SECTION */
/* ================================================== */

.hero-section {
    position: relative;
    min-height: 600px;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Navy fallback so the hero reads as brand colour — never a white flash —
       before the photo paints or if it fails to load. */
    background-color: var(--avfd-navy);
    color: var(--avfd-white);
    text-align: center;
}

/* Cinematic scrim: the photo breathes through the upper-middle, then the frame
   darkens toward the bottom so the centred headline stays legible (WCAG) without
   burying the image under a flat slab. A faint brand-red wash on the leading edge
   keeps it on-brand. One scrim for every hero (home + interior) so they match. */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(11, 15, 22, 0.55) 0%,
            rgba(11, 15, 22, 0.42) 38%,
            rgba(11, 15, 22, 0.50) 60%,
            rgba(11, 15, 22, 0.88) 100%),
        linear-gradient(115deg,
            rgba(204, 51, 51, 0.28) 0%,
            rgba(204, 51, 51, 0) 55%);
}

/* Homepage hero served as a responsive <picture> (WebP + JPG) instead of a
   CSS background, so it sits below the ::before overlay (z-index 1) and the
   content (z-index 2). */
.hero-home .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Ambient hero video: progressive enhancement over the poster image. Sits at
   the same layer as .hero-bg-img (later in the DOM, so it paints above it) and
   stays invisible until the inline loader script confirms playback — no-JS,
   reduced-motion, save-data, and phone visitors keep the still photo. */
.hero-section .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-section .hero-bg-video.is-playing {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .hero-bg-video {
        display: none;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
}

.hero-section h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    /* White headline (with a strong shadow for legibility over photos). This
       explicit colour is required: the global `h1 { color: brand-red }` in
       fireman.css directly targets the element and would otherwise win over the
       white inherited from `.hero-section`, rendering muddy red-on-photo. */
    color: var(--avfd-white);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero-section .lead {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 2rem;
    font-weight: 400;
    opacity: 0.95;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Kicker/eyebrow above the headline — small, wide-tracked, gold. Gives every
   hero the same editorial "label" the flagship pages use. */
.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(0.72rem, 1.2vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--avfd-gold);
    margin-bottom: 1.1rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hero-eyebrow::after {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    margin: 0.75rem auto 0;
    background: var(--avfd-red);
    border-radius: 2px;
}

.hero-section .btn {
    font-size: 1.1rem;
    padding: 0.875rem 2rem;
    margin: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hero-section .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Scroll cue — a subtly bouncing chevron pinned to the bottom of the hero.
   Pure CSS so it works on the interior pages, which don't load the modern JS. */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
    line-height: 1;
    animation: heroScrollCue 2.2s ease-in-out infinite;
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

@keyframes heroScrollCue {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
    50%      { transform: translateX(-50%) translateY(9px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue { animation: none; }
}

/* ================================================== */
/* STATS BAR - IMPACT NUMBERS */
/* ================================================== */

.stats-bar {
    background: linear-gradient(135deg, var(--avfd-navy) 0%, #0F1419 100%);
    color: var(--avfd-white);
    padding: 4rem 0;
}

.stat-item {
    text-align: center;
    padding: 1rem;
}

.stat-number {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--avfd-red);
    display: block;
    line-height: 1;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.stat-label {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

/* ================================================== */
/* THREE WAYS TO HELP - CARD SECTION */
/* ================================================== */

.ways-to-help {
    padding: 5rem 0;
    background: var(--avfd-gray);
}

.help-card {
    background: var(--avfd-white);
    border: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.help-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.help-card .card-body {
    padding: 2.5rem;
}

.help-card .icon {
    font-size: 3.5rem;
    color: var(--avfd-red);
    margin-bottom: 1.5rem;
    display: block;
}

.help-card h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--avfd-navy);
}

.help-card p {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.help-card .btn {
    font-weight: 600;
    transition: all 0.3s ease;
}

/* ================================================== */
/* TESTIMONIALS CAROUSEL */
/* ================================================== */

.testimonials-section {
    padding: 5rem 0;
    background: var(--avfd-gray);
}

.testimonial-item {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-icon {
    font-size: 3rem;
    color: var(--avfd-red);
    opacity: 0.3;
    margin-bottom: 1.5rem;
    display: block;
}

.testimonial-quote {
    font-size: 1.35rem;
    font-style: italic;
    color: var(--avfd-navy);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.testimonial-attribution {
    border-top: 2px solid var(--avfd-red);
    display: inline-block;
    padding-top: 1rem;
}

.testimonial-author {
    font-weight: 700;
    color: var(--avfd-navy);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.testimonial-role {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ================================================== */
/* UPCOMING EVENTS */
/* ================================================== */

.events-section {
    padding: 5rem 0;
    background: var(--avfd-gray);
}

.event-card {
    background: var(--avfd-white);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.event-date-badge {
    background: var(--avfd-red);
    color: var(--avfd-white);
    padding: 1rem;
    text-align: center;
    font-weight: 700;
}

.event-day {
    font-size: 2rem;
    line-height: 1;
    display: block;
}

.event-month {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-card .card-body {
    padding: 1.5rem;
}

.event-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--avfd-navy);
    margin-bottom: 0.5rem;
}

.event-location {
    color: #666;
    font-size: 0.95rem;
}

/* ================================================== */
/* SOCIAL / INSTAGRAM SECTION */
/* ================================================== */

.social-section {
    padding: 5rem 0;
    background: var(--avfd-white);
}

.instagram-cta {
    background: linear-gradient(135deg, var(--avfd-navy) 0%, #2A3A4E 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

/* ================================================== */
/* CTA BANNER */
/* ================================================== */

.cta-banner {
    background: linear-gradient(135deg, var(--avfd-red) 0%, #AA2222 100%);
    color: var(--avfd-white);
    padding: 5rem 2rem;
    text-align: center;
}

.cta-banner h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 2rem;
}

.cta-banner .btn {
    font-size: 1.1rem;
    padding: 0.875rem 2.5rem;
    margin: 0.5rem;
    font-weight: 600;
}

.cta-banner .btn-light {
    background: var(--avfd-white);
    color: var(--avfd-red);
    border: none;
    transition: all 0.3s ease;
}

.cta-banner .btn-light:hover {
    background: var(--avfd-gray);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.cta-banner .btn-outline-light:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ================================================== */
/* MODERN FOOTER */
/* ================================================== */

footer.modern-footer {
    background: var(--avfd-navy);
    color: var(--avfd-white);
    padding: 4rem 0 0;
}

.footer-station-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.footer-section {
    padding-bottom: 2rem;
}

.footer-section h5 {
    color: var(--avfd-red);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1rem;
}

.footer-section p,
.footer-section address {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--avfd-red);
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 0.75rem;
}

/* Give the dense footer quick-links a taller tap row for thumbs. */
.footer-section ul li a {
    display: inline-block;
    padding: 0.25rem 0;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--avfd-white);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--avfd-red);
    color: var(--avfd-white);
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    margin-top: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-mutual-aid {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* ================================================== */
/* SCROLL-TRIGGERED FADE-IN ANIMATIONS */
/* ================================================== */

.fade-in-section {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Only hide sections up-front when JS is available to reveal them (the
   inline <head> script adds .js to <html>). Without JS — or before the
   IntersectionObserver runs — content stays visible instead of blank,
   so the hero headline and primary CTAs never depend on JS to appear. */
html.js .fade-in-section {
    opacity: 0;
    transform: translateY(30px);
}

/* Reveal rule must out-specify the hide rule above: `html.js .fade-in-section`
   is specificity (0,2,1), so the reveal must also carry the `html.js` prefix —
   otherwise `.is-visible` (0,2,0) loses the cascade and content the
   IntersectionObserver "revealed" stays at opacity:0, blanking the whole page. */
html.js .fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================== */
/* MODERN PAGE HEADER (replaces BS3 .page-header) */
/* ================================================== */

.modern-page-header {
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--avfd-red);
}

.modern-page-header h1 {
    color: var(--avfd-navy);
    font-weight: 700;
    margin-bottom: 0;
}

/* ================================================== */
/* MODERN HERO BANNER (replaces BS3 .jumbotron) */
/* ================================================== */

.modern-banner {
    position: relative;
    padding: 4rem 2rem;
    margin-bottom: 3rem;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    color: var(--avfd-white);
}

.modern-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 35, 50, 0.7);
    z-index: 1;
}

.modern-banner-content {
    position: relative;
    z-index: 2;
}

.modern-banner h1 {
    color: var(--avfd-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.modern-banner p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 0;
}

/* ================================================== */
/* UTILITY CLASSES */
/* ================================================== */

.section-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--avfd-navy);
    margin-bottom: 3rem;
    text-align: center;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--avfd-red);
    margin: 1rem auto 0;
    border-radius: 2px;
}

.text-avfd-red {
    color: var(--avfd-red);
}

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

.text-avfd-gold {
    color: var(--avfd-gold) !important;
    font-weight: 600;
}

.bg-avfd-red {
    background-color: var(--avfd-red);
}

.bg-avfd-navy {
    background-color: var(--avfd-navy);
}

.bg-avfd-gray {
    background-color: var(--avfd-gray);
}

/* ================================================== */
/* CONTENT ENHANCEMENT STYLES */
/* ================================================== */

/* Feature boxes for highlighting content */
.feature-box {
    background: var(--avfd-white);
    border-left: 4px solid var(--avfd-red);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.feature-box:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.feature-box h3 {
    color: var(--avfd-navy);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.feature-box .icon {
    font-size: 3rem;
    color: var(--avfd-red);
    margin-bottom: 1rem;
}

/* Info cards for structured content */
.info-card {
    background: var(--avfd-white);
    border-radius: 12px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--avfd-red);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.info-card h2, .info-card h3 {
    color: var(--avfd-navy);
}

/* Highlight callout boxes */
.callout {
    background: linear-gradient(135deg, var(--avfd-gray) 0%, #e8e6e0 100%);
    border-left: 5px solid var(--avfd-red);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 0 8px 8px 0;
}

.callout-danger {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-left-color: var(--avfd-red);
}

.callout-info {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0f0ff 100%);
    border-left-color: #4B9CD3;
}

/* Content with icons */
.icon-list {
    list-style: none;
    padding: 0;
}

.icon-list li {
    padding-left: 2.5rem;
    position: relative;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.icon-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--avfd-red);
    font-size: 1.2rem;
}

/* Stats or number highlights */
.number-highlight {
    font-size: 3rem;
    font-weight: 700;
    color: var(--avfd-red);
    font-family: var(--font-heading);
    line-height: 1;
    display: block;
    margin-bottom: 0.5rem;
}

/* `.hero-dark` used to layer a heavier flat wash on top of the base scrim,
   which muddied the photo into a navy-red slab. The unified cinematic scrim on
   `.hero-section::before` now handles legibility for every hero, so this is just
   a marker class on photographic heroes — no extra overlay needed. */

/* Subsection headers */
.subsection-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--avfd-navy);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--avfd-red);
}

/* Enhanced tables */
.table-modern {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-modern thead {
    background: var(--avfd-navy);
    color: var(--avfd-white);
}

.table-modern thead th {
    border: none;
    padding: 1rem;
    font-weight: 600;
}

.table-modern tbody tr:hover {
    background-color: var(--avfd-gray);
    transition: background-color 0.2s ease;
}

/* ================================================== */
/* 404 ERROR PAGE */
/* ================================================== */

.error-hero {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--avfd-navy) 0%, #0F1419 100%);
    color: var(--avfd-white);
    padding: 6rem 2rem;
}

.error-icon {
    font-size: 5rem;
    color: var(--avfd-red);
    margin-bottom: 2rem;
    opacity: 0.8;
}

.error-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.error-hero .lead {
    font-size: 1.25rem;
    opacity: 0.85;
    margin-bottom: 2rem;
}

.error-links .btn {
    margin: 0.5rem;
    font-weight: 600;
}

.error-suggestions {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 2rem;
}

.error-suggestions p {
    opacity: 0.7;
    font-size: 0.95rem;
}

/* ================================================== */
/* RESPONSIVE ADJUSTMENTS */
/* ================================================== */

@media (max-width: 768px) {
    .hero-section {
        min-height: 500px;
        height: 70vh;
    }

    .hero-eyebrow {
        margin-bottom: 0.85rem;
    }

    .hero-scroll-cue {
        bottom: 1rem;
        font-size: 1.2rem;
    }

    .stats-bar {
        padding: 3rem 0;
    }

    .ways-to-help,
    .testimonials-section,
    .events-section,
    .social-section {
        padding: 3rem 0;
    }

    .cta-banner {
        padding: 3rem 1.5rem;
    }

    .help-card .card-body {
        padding: 2rem;
    }

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

    .social-icons {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-section .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }

    .cta-banner .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }

    .stat-item {
        margin-bottom: 2rem;
    }
}

/* ================================================== */
/* DASHBOARD WIDGETS                                   */
/* ================================================== */

.dashboard-widget {
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.dashboard-widget:hover {
    box-shadow: var(--shadow-md);
}

.dashboard-widget .card-header h5 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--avfd-navy);
}

.dashboard-widget .card-footer {
    background-color: var(--avfd-gray);
    font-size: 0.875rem;
}

/* Footer links inherit --bs-link-color (the themed accent blue) so they read
   as navigation, not alerts — and pick up the AA dark-mode value for free.
   (The old var(--avfd-red) was ~3.1:1 on the dark footer surface.) */
.dashboard-widget .card-footer a {
    text-decoration: none;
    font-weight: 500;
}

.dashboard-widget .card-footer a:hover {
    text-decoration: underline;
}

/* One card per page gets to be the headline: navy header echoing the sidebar
   section-header treatment (navy + red brand keel), white title text. Used by
   the dashboard's On Duty Now card. Works unchanged in dark mode. */
.dashboard-widget-featured .card-header {
    background-color: var(--avfd-navy);
    box-shadow: inset 3px 0 0 var(--avfd-red);
}
.dashboard-widget-featured .card-header h5,
.dashboard-widget-featured .card-header h5 i {
    color: #F1F5F9;
}
[data-bs-theme="dark"] .dashboard-widget-featured .card-header {
    background-color: #131C2B;
}
[data-bs-theme="dark"] .dashboard-widget-featured .card-header h5 {
    color: #F1F5F9;
}

/* ================================================== */
/* APPLICATION FORM                                    */
/* ================================================== */

.application-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    border-top: 4px solid var(--avfd-red);
}

.application-card .card-header {
    background: var(--avfd-navy);
    color: var(--avfd-white);
    padding: 1rem 1.5rem;
    border-bottom: none;
}

.application-card .card-header .card-title {
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--avfd-white);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.application-card .card-header .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--avfd-red);
    color: var(--avfd-white);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.application-card .card-body {
    padding: 2rem 1.5rem;
}

.application-card .form-label,
.application-card > .card-body > label {
    font-weight: 600;
    color: var(--avfd-navy);
    margin-bottom: 0.5rem;
    margin-top: 1.25rem;
}

.application-card .form-label:first-child,
.application-card > .card-body > label:first-child {
    margin-top: 0;
}

.application-card .form-control:focus {
    border-color: var(--avfd-red);
    box-shadow: 0 0 0 0.2rem rgba(204, 51, 51, 0.15);
}

.application-card .field-sublabel {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.application-card .form-check {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.application-card .form-check label {
    cursor: pointer;
}

.application-card .form-text {
    font-size: 0.875rem;
}

.application-card .field-error {
    color: var(--avfd-red);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.application-card textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.application-card .section-divider {
    border-top: 1px solid #e9ecef;
    margin: 1.25rem 0;
    padding: 0;
}

.application-card .interest-group-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--avfd-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.btn-apply {
    background: var(--avfd-red);
    border-color: var(--avfd-red);
    color: var(--avfd-white);
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0.75rem 2.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-apply:hover {
    background: #AA2222;
    border-color: #AA2222;
    color: var(--avfd-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.affirmation-box {
    background: var(--avfd-gray);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}