@layer app {
/* ===================================================================
   BASE - FiveAlarmWeb
   Global styles, page shell (navbar/sidebar/footer/ribbon), theme-derived
   tokens and theme component rules. Sections in original load order:
   site, figma-tokens, figma-layout.
   =================================================================== */

/* ===================================================================
   >>> SECTION: site
   =================================================================== */

/* -----------------------------------------------------------
   FiveAlarmWeb — Global Styles
   - Professional typeface (Inter)
   - Design tokens (colors, spacing, radii, themes) live in tokens.css
   - Responsive, accessible dark mode via html[data-theme]
----------------------------------------------------------- */

/* ========== Base & Accessibility ========== */
@media (min-width: 768px) {
    html {
        font-size: var(--fs-root);
    }
}

/* ========== LINES 100-120: COMPLETE REPLACEMENT ========== */
html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto; /* html is the scroll container */
}

body {
    min-height: 100%;
    margin: 0;
    margin-top: calc(var(--ribbon-h) + var(--navbar-h));
    padding-top: 0;
    display: block;
    background: var(--bg-body);
    color: var(--text);
    font-family: var(--ff-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: visible;
}


/* Navbar */
.navbar {
  border-bottom: none;
  box-shadow: none; /* optional: removes any shadow line too */
}
/* Use the same surface color as the sidebar */
.navbar-dark.bg-dark {
    background-color: var(--header-bg);
    color: var(--header-fg);
}

    /* Ensure links/brand inherit readable color on both themes */
    .navbar-dark.bg-dark .navbar-brand,
    .navbar-dark.bg-dark .nav-link,
    .navbar-dark.bg-dark .navbar-text {
        color: var(--header-fg) !important;
    }

        .navbar-dark.bg-dark .nav-link:hover,
        .navbar-dark.bg-dark .nav-link.active {
            color: #fff !important;
        }


/* ========== Sidebar ========== */
.sidebar {
    width: 240px;
    background-size: cover;
    background-blend-mode: multiply;
    background-attachment: fixed, fixed;
    font-size: 1.125rem;
    padding: var(--sp-4);
    color: var(--sidebar-text);
    position: sticky;
    top: 0;
    height: calc(100vh - var(--navbar-h));
    overflow-y: auto;
    text-align: center;
    border-right: 1px solid var(--sidebar-border);
}

    .sidebar img {
        max-width: 96px;
        margin-bottom: var(--sp-4);
        animation: pulse 2s infinite;
        background-color: rgba(0,0,0,.3);
        padding: .5rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

    .sidebar .nav-link {
        color: #fff;
        margin: .25rem 0;
        padding: .4rem .6rem;
        border-radius: var(--radius-sm);
        transition: background-color var(--trans-fast), color var(--trans-fast);
    }

        .sidebar .nav-link:hover {
            text-decoration: none;
            background: rgba(255,255,255,.12);
        }

        .sidebar .nav-link.active,
        .sidebar .nav-link[aria-current="page"] {
            color: #fff;
            background: rgba(255,255,255,.18);
            font-weight: 700;
        }

/* ========== Content ========== */
.content {
    flex-grow: 1;
    padding: 2rem;
    overflow: visible;
    background-color: var(--bg-body);
}

header.banner-wrap {
    position: relative;
    block-size: 20vh;
    min-block-size: 120px;
    max-block-size: 260px;
    overflow: visible;
    margin: 0;
    padding: 0;
}

    header.banner-wrap .banner {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: fill;
        display: block;
        border: 0;
        box-shadow: var(--shadow-sm);
    }

/* ==== Full-bleed banner: cancel .content side padding visually ==== */
main.content.with-banner {
    /* you already set padding-top: 0 earlier; this just makes it explicit */
    padding-top: 0;
}

/* Pull the banner out to the viewport edges within the content area */
.content.with-banner > .banner-wrap {
    margin-left: -2rem; /* match .content { padding: 2rem } */
    margin-right: -2rem; /* match .content { padding: 2rem } */
}

/* Inline preview overlay matches same box */
.banner-preview-inline {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-rows: 1fr;
    align-items: stretch;
    background: color-mix(in oklab, var(--bg-surface) 12%, transparent);
    backdrop-filter: saturate(140%) blur(2px);
    padding: 0;
}

    /* Preview image: behave exactly like live banner (stretch) */
    .banner-preview-inline img#bannerPreviewImg {
        inline-size: 100%;
        block-size: 100%;
        object-fit: fill; /* <-- stretch to fit */
        display: block;
        border: 0;
        background: transparent;
        pointer-events: none; /* clicks go to actions */
    }

    /* Confirm/Cancel pill */
    .banner-preview-inline .banner-preview-actions {
        position: absolute;
        right: .5rem;
        bottom: .5rem;
        z-index: 6;
        display: inline-flex;
        gap: .5rem;
        background: color-mix(in oklab, var(--bg-surface) 85%, transparent 15%);
        border: 1px solid var(--border);
        padding: .25rem .5rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

/* Admin FAB on banner */
.banner-actions {
    position: absolute;
    right: 1rem;
    top: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: color-mix(in oklab, var(--bg-surface) 80%, transparent 20%);
    padding: .25rem .5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.banner-fab {
    position: absolute;
    right: .5rem;
    top: .5rem;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg-surface) 78%, transparent 22%);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    opacity: .8;
    transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
}

    .banner-fab:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

/* Back FAB */
.back-fab {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg-surface) 78%, transparent 22%);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    opacity: .75;
    z-index: 999;
    transition: opacity 150ms ease, transform 150ms ease;
}

    .back-fab:hover {
        opacity: 1;
        transform: translateY(-2px);
    }

    .back-fab:active {
        transform: scale(0.93);
    }

/* Smooth banner transitions */
header.banner-wrap .banner {
    transition: opacity 240ms ease, filter 240ms ease;
}

    header.banner-wrap .banner.is-fading-out {
        opacity: .25;
        filter: blur(1px);
    }

@keyframes bannerFadeIn {
    from {
        opacity: 0;
        filter: blur(2px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

header.banner-wrap .banner.banner-fade-in {
    animation: bannerFadeIn 360ms ease-out both;
}

/* ========== Components ========== */

/* Panels & images */
.panel-image,
.panel-image-large,
.panel-image-grid-full {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--bg-elev);
}

.panel-image {
    height: 280px;
}

.panel-image-large {
    max-height: 520px;
    object-fit: contain;
    cursor: zoom-in;
    margin-bottom: var(--sp-4);
}

.panel-image-grid-full {
    height: 100%;
    cursor: zoom-in;
}

/* Carousel slides fill viewport with internal scroll */
.carousel-item {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--bg-subtle);
    padding: var(--sp-8);
}

/* Panel slide wrapper */
.panel-slide {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--bg-subtle), var(--bg-elev));
    overflow: hidden;
    padding: var(--sp-8);
}

.panel-content-wrapper {
    max-width: 1400px;
    width: 100%;
}

/* Text blocks / cards */
.text-block {
    background-color: color-mix(in oklab, var(--bg-surface) 92%, transparent 8%);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    margin-top: var(--sp-8);
    border: 1px solid var(--border);
}

    .text-block p {
        margin-bottom: .5rem;
    }

/* Utility */
.text-white {
    color: #fff !important;
}

.staggered {
    margin-top: 40px;
}

/* Cards */
.card-header {
    background-image: linear-gradient(to right, var(--card-gradient-start), var(--card-gradient-end));
    color: var(--text);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    font-weight: 700;
    letter-spacing: .3px;
}

.card-body p {
    font-size: .96rem;
    line-height: 1.5;
    color: var(--text);
}

/* Payments */
.btn-paypal {
    background: var(--paypal-gold);
    color: #111;
    border: none;
    font-weight: 600;
}

    .btn-paypal:hover {
        background: #FFB020;
        color: #111;
    }

.btn-venmo {
    background: var(--venmo-blue);
    color: #fff;
    border: none;
    font-weight: 700;
}

    .btn-venmo:hover {
        background: #2f77a5;
        color: #fff;
    }

.pay-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-md);
}

.or-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-muted);
}

    .or-divider::before,
    .or-divider::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: var(--border);
    }

/* Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: .9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Member Points cards ── */
.kpi-card {
    background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,.02));
    border-radius: 1rem;
}

/* ── Points breakdown mini-panels: force contrast regardless of theme ── */
.points-panel {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    border-radius: .5rem;
}

.points-panel .small,
.points-panel .text-muted {
    color: rgba(255,255,255,.65) !important;
}

.points-panel .fw-semibold {
    color: #fff;
}

/* ===== BASE LAYOUT - APPLIES TO ALL SCREENS ===== */
.layout {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    position: relative;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.layout::-webkit-scrollbar {
    display: none;
}

/* ===== MOBILE MODIFICATIONS ===== */
@media (max-width: 991.98px) {
    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--sidebar-border);
        background-attachment: scroll, scroll;
    }   
}

/* ===== MOBILE / TABLET SIDEBAR ===== */
@media (max-width: 991.98px) {
    .layout {
        padding-left: 0;
    }

    .sidebar {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--sidebar-border);
        background-attachment: scroll, scroll;
    }
}

/* ===== DESKTOP ADDITIONS ===== */
@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        top: var(--navbar-h);
        left: 0;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
        height: calc(100vh - var(--navbar-h));
        overflow-y: auto;
        z-index: 1020;
    }

    .content {
        height: auto;
        min-height: calc(100vh - var(--navbar-h));
    }
}

/* ===== MOBILE SIDEBAR ADJUSTMENTS ===== */
@media (max-width: 991.98px) {
    .layout {
        padding-left: 0;
    }

    .sidebar {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--sidebar-border);
        background-attachment: scroll, scroll;
    }
}

/* ============================================================
   NAVBAR — Responsive 3-Column Layout
   [Logo + Social] | [Nav Links Centered] | [Member / Login]
   Supports: mobile < 576 | tablet 576–991 | desktop 992–1399 | widescreen 1400+
   ============================================================ */

/* --- Inner wrapper: full-width flex row --- */
.figma-navbar .navbar-content-left-aligned {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0 1rem;
    flex-wrap: wrap;
}

/* --- Logo: zero shrink, fixed height fills navbar --- */
.figma-navbar .navbar-brand {
    flex: 0 0 auto;
    margin-right: 0;
}

/* --- Social icons: inline group, no shrink --- */
.figma-navbar .navbar-social-links-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .5rem;
}

/* --- Hamburger: pushed to far right on mobile via margin-left:auto --- */
.figma-navbar .navbar-toggler {
    flex: 0 0 auto;
    margin-left: auto;
}

/* --- Mobile action icons (donate / join / login): sit right of hamburger --- */
.figma-navbar .navbar-mobile-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .375rem;
}

/* --- Collapsed menu panel: full-width row below the top strip --- */
.figma-navbar .navbar-collapse {
    width: 100%;
    flex-basis: 100%;
    order: 99;
}

/* ============================================================
   DESKTOP (≥ 992px) — true 3-column layout
   ============================================================ */
@media (min-width: 992px) {
    .figma-navbar .navbar-content-left-aligned {
        flex-wrap: nowrap;
        padding: 0 1.5rem;
    }

    /* Collapse expands inline as a flex row */
    .figma-navbar .navbar-collapse {
        display: flex !important;
        flex: 1 1 0;
        align-items: center;
        min-width: 0;
        width: auto;
        flex-basis: auto;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        margin-top: 0;
    }

    /* CENTER NAV: grows and centers — NO display:flex here so JS toggle works */
    .figma-navbar .navbar-collapse > ul.navbar-nav:not(.ms-auto) {
        flex: 1 1 0;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: .125rem;
        margin: 0 !important;
    }

    /* When JS shows the nav (display:flex set by JS), honor the centering */
    .figma-navbar .navbar-collapse > ul.navbar-nav:not(.ms-auto)[style*="display: flex"],
    .figma-navbar .navbar-collapse > ul.navbar-nav:not(.ms-auto)[style*="display:flex"] {
        display: flex !important;
        justify-content: center;
    }

    /* RIGHT NAV (member / login controls) */
    .figma-navbar .navbar-collapse > ul.navbar-nav.ms-auto {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        gap: .375rem;
        margin-left: 0;
    }

    .figma-navbar .navbar-toggler {
        margin-left: 0;
    }

    .figma-navbar .navbar-social-links-left {
        gap: .5rem;
        padding: 0 .75rem;
    }
}

/* ============================================================
   WIDESCREEN (≥ 1400px)
   ============================================================ */
@media (min-width: 1400px) {
    .figma-navbar .navbar-content-left-aligned {
        padding: 0 2rem;
    }

    .figma-navbar .navbar-collapse > ul.navbar-nav:not(.ms-auto) {
        gap: .375rem;
    }

    .figma-navbar .navbar-collapse > ul.navbar-nav.ms-auto {
        gap: .5rem;
    }
}

/* ============================================================
   TABLET (576px – 991.98px)
   ============================================================ */
@media (max-width: 991.98px) {
    .figma-navbar .navbar-content-left-aligned {
        padding: 0 .75rem;
        min-height: var(--navbar-h);
        align-content: flex-start;
    }

    .figma-navbar .navbar-collapse.show,
    .figma-navbar .navbar-collapse.collapsing {
        width: 100%;
        padding: .75rem 1rem 1rem;
        border-top: 1px solid var(--figma-navbar-mobile-border, rgba(255,255,255,.12));
        box-shadow: var(--figma-navbar-mobile-shadow, 0 8px 24px rgba(0,0,0,.4));
    }

    .figma-navbar .navbar-collapse .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .figma-navbar .navbar-collapse > ul.navbar-nav.ms-auto {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        padding-top: .75rem;
        margin-top: .75rem;
        border-top: 1px solid var(--figma-navbar-mobile-border, rgba(255,255,255,.12));
        width: 100%;
    }
}

/* ============================================================
   MOBILE (< 576px)
   ============================================================ */
@media (max-width: 575.98px) {
    .figma-navbar .navbar-social-links-left {
        display: none !important;
    }

    .figma-navbar .navbar-content-left-aligned {
        padding: 0 .5rem;
    }
}

/* ========== Dark Mode Toggle (switch) ========== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--text);
    user-select: none;
}

    .theme-toggle .toggle {
        position: relative;
        width: 44px;
        height: 24px;
        border-radius: var(--radius-pill);
        background: rgba(var(--fg-rgb), .25);
        cursor: pointer;
        transition: background var(--trans-fast);
    }

        .theme-toggle .toggle::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--bg-surface);
            box-shadow: var(--shadow-sm);
            transition: left var(--trans-fast), transform var(--trans-fast);
        }

    .theme-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

        .theme-toggle input:checked + .toggle {
            background: var(--primary);
        }

            .theme-toggle input:checked + .toggle::after {
                left: 22px;
                transform: translateX(0);
            }

:root[data-theme="dark"] .theme-toggle {
    color: #e5e7eb;
}

:root[data-theme="dark"] .banner-actions {
    background: color-mix(in oklab, var(--bg-elev) 85%, transparent 15%);
}

:root.admin-mode-off .admin-only {
    display: none !important;
}

:root.admin-mode-on .admin-only {
    display: revert !important;
}

/* ===== Fixed top navbar ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* Offset body content below the fixed navbar — margin-top instead of
   padding-top so the navbar background bleeds all the way to the top edge */
body {
    padding-top: 0;
    margin-top: calc(var(--ribbon-h) + var(--navbar-h));
}

/* ========== Emergency Ribbon ========== */
.emergency-ribbon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;          /* one layer above the navbar (1030) */
    height: var(--ribbon-h);
    background: #8b0000;    /* deep fire red — serious, not garish */
    display: flex;
    align-items: center;
    justify-content: center;
}
.emergency-ribbon-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0 1rem;
}
/* Higher-specificity override so the figma-theme generic text color
   never wins over the ribbon's intended white text */
body.figma-theme .emergency-ribbon-inner {
    color: #fff !important;
}
.emergency-ribbon-icon {
    font-size: 0.75rem;
    animation: ribbon-ring 2.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ribbon-ring {
    0%, 100% { transform: rotate(0deg);  }
    8%        { transform: rotate(-12deg); }
    16%       { transform: rotate(12deg);  }
    24%       { transform: rotate(-8deg);  }
    32%       { transform: rotate(8deg);   }
    40%       { transform: rotate(0deg);   }
}

/* ========== Announcement Bands (Homepage) ========== */
.hp-ann-stack {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.hp-ann-band {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-left: 5px solid transparent;
    transition: background 0.15s ease;
}
.hp-ann-band:last-child { border-bottom: none; }
.hp-ann-band:hover { text-decoration: none; }

.hp-ann-band-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.hp-ann-band-content { flex: 1; min-width: 0; }

.hp-ann-band-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.hp-ann-band-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 100px;
}

.hp-ann-band-title {
    font-weight: 700;
    font-size: 0.975rem;
    color: rgba(255,255,255,0.95);
    margin-bottom: 0.15rem;
}

.hp-ann-band-body {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-ann-band-chevron {
    flex-shrink: 0;
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    transition: color 0.15s, transform 0.15s;
}
.hp-ann-band:hover .hp-ann-band-chevron {
    color: rgba(255,255,255,0.7);
    transform: translateX(3px);
}

.hp-ann-star { color: #fbbf24; font-size: 0.7rem; flex-shrink: 0; }
.hp-ann-lock { color: #60a5fa; font-size: 0.7rem; flex-shrink: 0; }

.hp-ann-band-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 0.5rem;
}
.hp-ann-band-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.hp-ann-band:hover .hp-ann-band-thumb img { transform: scale(1.05); }
@media (max-width: 480px) { .hp-ann-band-thumb { display: none; } }

/* Info (blue) */
.hp-ann-band-info                   { background: rgba(14,165,233,0.07);  border-left-color: #0ea5e9; }
.hp-ann-band-info:hover             { background: rgba(14,165,233,0.13); }
.hp-ann-band-info .hp-ann-band-icon { background: rgba(14,165,233,0.15); color: #38bdf8; }
.hp-ann-badge-info                  { background: rgba(14,165,233,0.2);  color: #7dd3fc; }

/* Warning (amber) */
.hp-ann-band-warning                   { background: rgba(245,158,11,0.07);  border-left-color: #f59e0b; }
.hp-ann-band-warning:hover             { background: rgba(245,158,11,0.13); }
.hp-ann-band-warning .hp-ann-band-icon { background: rgba(245,158,11,0.15); color: #fbbf24; }
.hp-ann-badge-warning                  { background: rgba(245,158,11,0.2);  color: #fde68a; }

/* Exciting (purple) */
.hp-ann-band-exciting                   { background: rgba(139,92,246,0.07);  border-left-color: #8b5cf6; }
.hp-ann-band-exciting:hover             { background: rgba(139,92,246,0.13); }
.hp-ann-band-exciting .hp-ann-band-icon { background: rgba(139,92,246,0.15); color: #a78bfa; }
.hp-ann-badge-exciting                  { background: rgba(139,92,246,0.2);  color: #c4b5fd; }

/* Success (green) */
.hp-ann-band-success                   { background: rgba(34,197,94,0.07);  border-left-color: #22c55e; }
.hp-ann-band-success:hover             { background: rgba(34,197,94,0.13); }
.hp-ann-band-success .hp-ann-band-icon { background: rgba(34,197,94,0.15); color: #4ade80; }
.hp-ann-badge-success                  { background: rgba(34,197,94,0.2);  color: #86efac; }

/* Sad (slate) */
.hp-ann-band-sad                   { background: rgba(148,163,184,0.07);  border-left-color: #94a3b8; }
.hp-ann-band-sad:hover             { background: rgba(148,163,184,0.13); }
.hp-ann-band-sad .hp-ann-band-icon { background: rgba(148,163,184,0.15); color: #cbd5e1; }
.hp-ann-badge-sad                  { background: rgba(148,163,184,0.2);  color: #e2e8f0; }

/* ── Announcement Spotlight (public homepage, showLabel=false mode) ── */
/* ===================================================================
   ANNOUNCEMENTS — STICKY ALERT STRIP (urgent: Warning / Exciting)
   =================================================================== */
.hp-ann-alert-strip {
    position: sticky;
    top: calc(var(--ribbon-h, 30px) + var(--navbar-h, 72px));
    z-index: 1020;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--ann-strip-bg, rgba(15, 20, 28, 0.97));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    /* Elevated look — the surrounding chrome is seamless, so the strip
       itself pops with a stronger shadow and subtle top/bottom edges */
    box-shadow: var(--ann-strip-shadow, 0 4px 22px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4));
    border-top: 1px solid var(--ann-strip-border, rgba(255,255,255,0.12));
    border-bottom: 1px solid var(--ann-strip-border, rgba(255,255,255,0.12));
}
.hp-ann-alert-track {
    position: relative;
    display: block;
    min-height: 50px;
}
.hp-ann-alert-slide {
    display: none;
    width: 100%;
    text-decoration: none;
    color: var(--ann-strip-text, #f1f5f9);
    border-left: 3px solid var(--ann-accent, #38bdf8);
}
.hp-ann-alert-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0.7rem 3.25rem 0.7rem 1.5rem;
}
.hp-ann-alert-slide-active {
    display: flex;
    animation: hpAnnAlertFade 0.35s ease;
}
.hp-ann-alert-slide:hover { text-decoration: none; color: var(--ann-strip-text-hover, #fff); background: var(--ann-strip-hover-bg, rgba(255,255,255,0.04)); }

@keyframes hpAnnAlertFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hp-ann-alert-slide-warning  { --ann-accent: #f59e0b; }
.hp-ann-alert-slide-exciting { --ann-accent: #a78bfa; }

.hp-ann-alert-icon {
    font-size: 1rem;
    flex-shrink: 0;
    display: inline-flex;
    color: var(--ann-accent, #38bdf8);
}
.hp-ann-alert-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ann-accent, #38bdf8);
    border: 1px solid var(--ann-accent, #38bdf8);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.hp-ann-alert-thumb {
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    border-radius: 5px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
}
.hp-ann-alert-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-ann-alert-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ann-strip-text, #f8fafc);
}
.hp-ann-alert-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ann-strip-muted, rgba(255,255,255,0.55));
    transition: color 0.15s, gap 0.15s;
}
.hp-ann-alert-slide:hover .hp-ann-alert-cta {
    color: var(--ann-strip-text-hover, rgba(255,255,255,0.9));
    gap: 9px;
}

.hp-ann-alert-dots {
    position: absolute;
    right: 3.25rem;
    bottom: 5px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.hp-ann-alert-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ann-strip-dot, rgba(255,255,255,0.28));
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.hp-ann-alert-dot-active {
    background: var(--ann-strip-dot-active, rgba(255,255,255,0.85));
    transform: scale(1.3);
}

.hp-ann-alert-dismiss {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ann-strip-muted, rgba(255,255,255,0.45));
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    z-index: 3;
    transition: color 0.15s, background 0.15s;
}
.hp-ann-alert-dismiss:hover { color: var(--ann-strip-text-hover, #fff); background: var(--ann-strip-hover-bg, rgba(255,255,255,0.1)); }

@media (max-width: 600px) {
    .hp-ann-alert-inner { padding: 0.6rem 2.6rem 0.6rem 1rem; gap: 0.55rem; }
    .hp-ann-alert-title { font-size: 0.82rem; }
    .hp-ann-alert-cta { display: none; }
    .hp-ann-alert-dots { right: 2.6rem; }
}

.hp-ann-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding: 2rem;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hp-ann-spotlight:last-child  { margin-bottom: 0; }
.hp-ann-spotlight:hover       {
    opacity: 1;
    text-decoration: none;
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    transform: translateY(-2px);
}
.hp-ann-spotlight-reverse     { direction: rtl; }
.hp-ann-spotlight-reverse > * { direction: ltr; }

.hp-ann-spotlight-media {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    max-height: 320px;
    background: rgba(164,32,13,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-ann-spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.hp-ann-spotlight:hover .hp-ann-spotlight-img { transform: scale(1.04); }

.hp-ann-spotlight-icon-placeholder {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(164,32,13,0.35);
}

.hp-ann-spotlight-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* type pill — coloured per announcement style */
.hp-ann-spotlight-type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 4px;
    width: fit-content;
}
.hp-ann-type-info     { background: rgba(14,165,233,0.14);  color: #38bdf8; border: 1px solid rgba(56,189,248,0.35);  }
.hp-ann-type-warning  { background: rgba(245,158,11,0.14);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.35);  }
.hp-ann-type-exciting { background: rgba(139,92,246,0.14);  color: #a78bfa; border: 1px solid rgba(167,139,250,0.35); }
.hp-ann-type-success  { background: rgba(34,197,94,0.14);   color: #4ade80; border: 1px solid rgba(74,222,128,0.35);  }
.hp-ann-type-sad      { background: rgba(148,163,184,0.14); color: #cbd5e1; border: 1px solid rgba(203,213,225,0.35); }

/* icon placeholder tint per style */
.hp-ann-spotlight-icon-info     { color: rgba(14,165,233,0.40);  }
.hp-ann-spotlight-icon-warning  { color: rgba(245,158,11,0.40);  }
.hp-ann-spotlight-icon-exciting { color: rgba(139,92,246,0.40);  }
.hp-ann-spotlight-icon-success  { color: rgba(34,197,94,0.40);   }
.hp-ann-spotlight-icon-sad      { color: rgba(148,163,184,0.40); }

.hp-ann-spotlight-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--text, #fff);
}
.hp-ann-spotlight-body {
    font-size: 0.96rem;
    color: rgba(255,255,255,0.68);
    line-height: 1.7;
    margin: 0;
}
.hp-ann-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-top: 0.15rem;
    transition: color 0.15s, gap 0.15s;
}
.hp-ann-spotlight:hover .hp-ann-spotlight-cta {
    color: rgba(255,255,255,0.95);
    gap: 10px;
}

@media (max-width: 768px) {
    .hp-ann-spotlight,
    .hp-ann-spotlight.hp-ann-spotlight-reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 1.5rem;
        padding: 2rem 0;
    }
}

/* ── Announcement cards (Member Home) — thumbnail + clean "Read more" link ── */
.hp-ann-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-left: 5px solid transparent;
}
.hp-ann-card:last-child { border-bottom: none; }

.hp-ann-card-thumb {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.hp-ann-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-ann-card-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
@media (max-width: 480px) {
    .hp-ann-card-thumb { width: 56px; height: 56px; }
}

.hp-ann-card-body { flex: 1; min-width: 0; }

.hp-ann-card-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
}

.hp-ann-card-title {
    font-weight: 700;
    font-size: 0.975rem;
    color: rgba(255,255,255,0.95);
    margin-bottom: 0.2rem;
}

.hp-ann-card-excerpt {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.hp-ann-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: rgba(255,255,255,0.6);
    transition: color 0.15s ease, gap 0.15s ease;
}
.hp-ann-card-link:hover {
    color: rgba(255,255,255,0.95);
    gap: 8px;
    text-decoration: none;
}

.hp-ann-card-info      { background: rgba(14,165,233,0.07);  border-left-color: #0ea5e9; }
.hp-ann-card-info      .hp-ann-card-icon { color: #38bdf8; }

.hp-ann-card-warning   { background: rgba(245,158,11,0.07);  border-left-color: #f59e0b; }
.hp-ann-card-warning   .hp-ann-card-icon { color: #fbbf24; }

.hp-ann-card-exciting  { background: rgba(139,92,246,0.07);  border-left-color: #8b5cf6; }
.hp-ann-card-exciting  .hp-ann-card-icon { color: #a78bfa; }

.hp-ann-card-success   { background: rgba(34,197,94,0.07);   border-left-color: #22c55e; }
.hp-ann-card-success   .hp-ann-card-icon { color: #4ade80; }

.hp-ann-card-sad       { background: rgba(148,163,184,0.07); border-left-color: #94a3b8; }
.hp-ann-card-sad       .hp-ann-card-icon { color: #cbd5e1; }

/* ── legacy ticker restore button (kept for graceful fallback) ── */
.ann-ticker-restore-btn {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    background: var(--brand, #C02B2B);
    color: var(--text);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    transition: background .15s, transform .15s;
}

.ann-ticker-restore-btn:hover {
    background: #a02020;
    transform: scale(1.08);
}

/* ============================================================
   MODAL Z-INDEX FIX
   Ensure modals and their backdrops appear above all content
   ============================================================ */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

.modal-dialog {
    z-index: 1060;
}

/* ============================================================
   SMALL-SCREEN CONTENT GUARDS (phone + tablet)
   Note: padding-top for .content is governed by the inline
   <style> block in _Layout.cshtml which wins the cascade.
   These rules cover banner sizing and gutter adjustments only.
   ============================================================ */

/* ── TABLET (576–991.98px) ── */
@media (min-width: 576px) and (max-width: 991.98px) {
    body { margin-top: calc(var(--ribbon-h) + var(--navbar-h)); }
    main.content { padding-left: 1rem; padding-right: 1rem; }

    /* Keep full-bleed banner from overflowing narrower content padding */
    .content.with-banner > .banner-wrap { margin-left: -1rem; margin-right: -1rem; }
}

/* ── PHONE (≤ 575.98px) ── */
@media (max-width: 575.98px) {
    main.content { padding-left: .75rem; padding-right: .75rem; }

    /* Banner bleed matches the smaller phone gutters */
    .content.with-banner > .banner-wrap { margin-left: -.75rem; margin-right: -.75rem; }
}

/* ── Chief's Message ── */
.about-chief-message {
    position: relative;
    background: var(--about-card-bg, rgba(var(--fg-rgb), 0.03));
    border-left: 4px solid #A4200D;
    border-radius: .5rem;
    padding: 1.5rem 1.75rem;
    margin-top: .5rem;
}
html[data-theme="light"] .about-chief-message {
    background: rgba(0, 0, 0, 0.04);
}
.about-chief-quote-icon {
    font-size: 2.5rem;
    color: var(--brand, #C02B2B);
    opacity: .25;
    position: absolute;
    top: .5rem;
    left: 1rem;
}
.about-chief-blockquote {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
    border: none;
    padding: 0;
    white-space: pre-wrap;
}

/* ============================================================
   LAYOUT: HOMEPAGE (Views/Home/Index.cshtml)
   Migrated from an inline <style> block during homepage refactor.
   ============================================================ */
/* Hero: 2/3 of original 1080px */
.homepage .figma-hero {
    min-height: 720px !important;
}

/* ===================================================================
   FEATURED NEWS CARD — gold border accent to stand out in the grid
   =================================================================== */
.hp-news-card-featured {
    border-color: var(--accent);
    box-shadow: 0 2px 16px rgba(212, 160, 23, 0.18), 0 0 0 1px rgba(212, 160, 23, 0.25);
}
.hp-news-card-featured:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 24px rgba(212, 160, 23, 0.28), 0 0 0 1px rgba(212, 160, 23, 0.45);
}
.hp-news-card-featured .hp-news-thumb {
    height: auto;
    overflow: visible;
}
.hp-news-card-featured .hp-news-thumb img {
    height: auto;
    object-fit: contain;
}

/* The homepage zeroes out main.content's top margin (for the flush hero carousel).
   The announcements section now renders first, so it carries the offset that
   used to live on .dept-name-header. */
.homepage .hp-announcements-section {
    padding-top: calc(var(--ribbon-h) + var(--navbar-h) + 22px);
}

@media (max-width: 768px) {
    .homepage .hp-announcements-section {
        padding-top: calc(var(--ribbon-h) + var(--navbar-h) + 22px);
    }
    .homepage .dept-name-container {
        padding-top: 0.625rem;
    }
}

@media (max-width: 480px) {
    .homepage .hp-announcements-section {
        padding-top: calc(var(--ribbon-h) + var(--navbar-h) + 22px);
    }
    .homepage .dept-name-container {
        padding-top: 0.5rem;
    }
}

/* ===================================================================
   DEPARTMENT NAME HEADER
   =================================================================== */
.dept-name-header {
    background: var(--header-bg);
    border-bottom: 2px solid rgba(164, 32, 13, 0.8);
    padding: 0.35rem 1.5rem;
    position: relative;
    /* no drop shadow — the header should blend with the navbar above it
       instead of reading as a separate strip */
    box-shadow: none;
}

.dept-name-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.dept-name-title {
    font-size: 4.75rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .dept-name-header { padding: 0.75rem 1rem; }
    .dept-name-title { font-size: 2.5rem; }
}

@media (max-width: 480px) {
    .dept-name-title { font-size: 2rem; }
}

.gold-foil-text {
    background:
        linear-gradient(135deg,
            rgba(255, 215, 0, 0.8) 0%,
            rgba(255, 237, 78, 1) 25%,
            rgba(212, 175, 55, 0.9) 50%,
            rgba(255, 237, 78, 1) 75%,
            rgba(255, 215, 0, 0.8) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence baseFrequency="0.9"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.05"/></svg>');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    letter-spacing: 0.02em;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
}

/* ===================================================================
   HERO STATS BANNER
   =================================================================== */
.hero-stats-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    z-index: 10;
    background: linear-gradient(to right,
        rgba(255,255,255,0.08) 0%,
        rgba(40, 40, 40, 0.95) 33%,
        rgba(40, 40, 40, 0.95) 67%,
        rgba(255,255,255,0.08) 100%);
    backdrop-filter: var(--glass-blur-lg);
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 48px;
    text-align: center;
    position: relative;
}

.hero-stat-item.dark-bg { 
    background: rgba(40, 40, 40, 0.98); 
    backdrop-filter: var(--glass-blur-lg);
}

a.hero-stat-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

a.hero-stat-link:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

a.hero-stat-link.dark-bg:hover { background: rgba(80, 80, 80, 0.98); }

.hero-stat-number {
    font-family: 'Instrument Sans', var(--figma-font-primary, sans-serif);
    font-size: 4.5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.98);
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-stat-label {
    font-family: 'Instrument Sans', var(--figma-font-primary, sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
    .hero-stats-banner {
        position: relative;
        grid-template-columns: 1fr;
        background: rgba(40, 40, 40, 0.95);
    }
    .hero-stat-item { padding: 24px 32px; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .hero-stat-item:last-child { border-bottom: none; }
    .hero-stat-number { font-size: 3rem; }
    .hero-stat-label { font-size: 0.875rem; }
    .hero-stat-menu { display: none; }
    .hero-stat-with-menu.active .hero-stat-menu { display: block; opacity: 1; visibility: visible; }
}

@media (max-width: 768px) {
    .hero-stat-item { padding: 20px 24px; }
    .hero-stat-number { font-size: 2.5rem; }
    .hero-stat-label { font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .hero-stat-item { padding: 16px 20px; }
    .hero-stat-number { font-size: 2rem; }
}

/* ===================================================================
   SHARED SECTION TYPOGRAPHY
   =================================================================== */
.hp-section-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(164, 32, 13, 0.9);
    margin-bottom: 0.5rem;
}

.hp-section-eyebrow--center {
    text-align: center;
}

.hp-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text, #fff);
    margin: 0 0 2rem 0;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .hp-section-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
}

/* ===================================================================
   INFO CARDS
   =================================================================== */
.hp-info-cards-section {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--figma-surface, rgba(0,0,0,0.3));
    backdrop-filter: var(--glass-blur);
}

.hp-info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.hp-info-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text, #fff);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hp-info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(164, 32, 13, 0.5);
    background: rgba(164, 32, 13, 0.06);
    color: var(--text, #fff);
    text-decoration: none;
}

.hp-info-card-donate:hover {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.06);
}

.hp-info-card-icon {
    font-size: 2rem;
    color: rgba(164, 32, 13, 0.9);
    line-height: 1;
}

.hp-info-card-donate .hp-info-card-icon { color: rgba(255, 215, 0, 0.9); }

.hp-info-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--text, #fff);
}

.hp-info-card-body {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}

.hp-info-card-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(164, 32, 13, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.hp-info-card:hover .hp-info-card-link { color: rgba(200, 50, 20, 1); }
.hp-info-card-donate .hp-info-card-link { color: rgba(255, 215, 0, 0.9); }

/* Event list inside card */
.hp-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hp-event-item {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 0.5rem;
}

.hp-event-item:last-child { border-bottom: none; padding-bottom: 0; }

.hp-event-date {
    font-weight: 700;
    color: rgba(164, 32, 13, 0.9);
    white-space: nowrap;
    min-width: 52px;
    font-size: 0.8rem;
}

.hp-event-name {
    color: rgba(255,255,255,0.85);
    line-height: 1.3;
}

@media (max-width: 900px) {
    .hp-info-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .hp-info-cards-section { padding: 2.5rem 1rem; }
    .hp-info-cards { grid-template-columns: 1fr; }
}

/* ===================================================================
   ABOUT US
   =================================================================== */
.hp-about-section {
    padding: 4rem 2rem;
    background: radial-gradient(61.27% 128.85% at 100% 0%, rgba(164, 32, 13, 0.08) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.25);
    backdrop-filter: var(--glass-blur-lg);
}

.hp-about-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}

.hp-about-text { flex: 1; }

.hp-about-body {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.hp-about-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(164, 32, 13, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hp-about-link:hover { color: rgba(200, 50, 20, 1); text-decoration: none; }

.hp-about-image {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-patch-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
}

.hp-about-image-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(164,32,13,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: rgba(164, 32, 13, 0.5);
}

@media (max-width: 768px) {
    .hp-about-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hp-about-image {
        margin: 0 auto;
        width: 160px;
        height: 160px;
    }
    .hp-about-section { padding: 2.5rem 1rem; }
}

/* ===================================================================
   CALL VOLUME STATS
   =================================================================== */
.hp-stats-section {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--figma-surface, rgba(0,0,0,0.3));
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hp-stats-grid {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.hp-stat-block {
    flex: 1 1 180px;
    padding: 2rem 2.5rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s ease;
}

.hp-stat-block:last-child { border-right: none; }

.hp-stat-block:hover { background: rgba(164,32,13,0.05); }

.hp-stat-block-current .hp-stat-number { color: rgba(255,215,0,1); }

.hp-stat-number {
    font-family: 'Instrument Sans', var(--figma-font-primary, sans-serif);
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.95);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hp-stat-link {
    color: inherit;
    text-decoration: none;
}

.hp-stat-link:hover { text-decoration: underline; opacity: 0.85; }

.hp-stat-year {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

@media (max-width: 640px) {
    .hp-stats-grid { flex-direction: column; gap: 0; }
    .hp-stat-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 1.5rem; }
    .hp-stat-block:last-child { border-bottom: none; }
    .hp-stat-number { font-size: 2.5rem; }
    .hp-stats-section { padding: 2.5rem 1rem; }
}

/* ===================================================================
   LATEST NEWS
   =================================================================== */
.hp-news-section {
    padding: 4rem 2rem;
    background: radial-gradient(61.27% 128.85% at 100% 0%, rgba(164,32,13,0.08) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.25);
    backdrop-filter: var(--glass-blur-lg);
}

.hp-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.hp-news-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text, #fff);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hp-news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(164,32,13,0.4);
    background: rgba(164,32,13,0.05);
    color: var(--text, #fff);
    text-decoration: none;
}

.hp-news-thumb {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: rgba(164,32,13,0.1);
    flex-shrink: 0;
}

.hp-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.hp-news-card:hover .hp-news-thumb img { transform: scale(1.04); }

.hp-news-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(164,32,13,0.4);
}

.hp-news-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.hp-news-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hp-news-date {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

.hp-news-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(164,32,13,0.2);
    color: rgba(255,100,80,0.9);
    border: 1px solid rgba(164,32,13,0.3);
}

.hp-news-tag-featured {
    background: rgba(255,215,0,0.15);
    color: rgba(255,215,0,0.9);
    border-color: rgba(255,215,0,0.3);
}

.hp-news-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    color: var(--text, #fff);
}

.hp-news-excerpt {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.hp-news-footer {
    text-align: center;
    margin-top: 2rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.hp-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    border: 1px solid rgba(164,32,13,0.5);
    color: rgba(255,255,255,0.9);
    background: rgba(164,32,13,0.1);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hp-read-more-btn:hover {
    background: rgba(164,32,13,0.25);
    border-color: rgba(164,32,13,0.8);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 900px) {
    .hp-news-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .hp-news-section { padding: 2.5rem 1rem; }
    .hp-news-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   SLIDESHOW SECTION
   =================================================================== */
.slideshow-section {
    background: radial-gradient(61.27% 128.85% at 100% 0%, rgba(164, 32, 13, 0.08) 0%, rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, 0.25);
    backdrop-filter: var(--glass-blur-lg);
    padding: 48px 0;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.slideshow-section #featuredSlideshow.featured-hero,
.slideshow-section #featuredSlideshow,
.slideshow-section .featured-hero,
#slideshow-section #featuredSlideshow.featured-hero,
#slideshow-section #featuredSlideshow,
#slideshow-section .featured-hero {
    max-width: none;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 991px) { .slideshow-section { padding: 32px 0; } }
@media (max-width: 768px) { .slideshow-section { padding: 24px 0; } }

/* ===================================================================
   FUND DRIVE SECTION
   =================================================================== */
.fund-drive-section {
    background: transparent;
    backdrop-filter: none;
    padding: 48px 1% 48px 1%;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.fund-drive-wrapper {
    max-width: none;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}

.fund-drive-wrapper .figma-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block;
    padding: 0;
}

.fund-drive-wrapper .figma-card-content {
    padding: 0 !important;
    width: 100%;
}

@media (max-width: 991px) { .fund-drive-section { padding: 32px 1.5%; } }
@media (max-width: 768px) { .fund-drive-section { padding: 24px 2.5%; } }
@media (max-width: 480px) { .fund-drive-section { padding: 20px 3%; } }

/* ===================================================================
   RECRUITMENT VIDEO
   =================================================================== */
.hp-recruit-section {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--figma-surface, rgba(0,0,0,0.3));
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.hp-recruit-video-wrap {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 0 auto 2rem auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}

.hp-recruit-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hp-recruit-cta {
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .hp-recruit-section { padding: 2.5rem 1rem; }
}

/* ===================================================================
   WEATHER WIDGET
   =================================================================== */
#figmaWeatherInlineWrapper[style*="display: none"],
#figmaWeatherInlineWrapper.hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

.weather-restore-btn {
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
    border: 2px solid rgba(var(--fg-rgb), 0.3);
    color: var(--text);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    backdrop-filter: var(--glass-blur);
}

.weather-restore-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .weather-header-bar { padding: 6px 12px; }
    .figma-weather-compact .weather-forecast-compact,
    .figma-weather-compact .weather-alerts-compact { display: none; }
    .figma-weather-compact .weather-current-compact { justify-content: center; gap: 10px; font-size: 0.85rem; }
    .figma-weather-compact .weather-icon-compact { width: 28px; height: 28px; }
}

/* ===================================================================
   MOBILE CTA BAR
   =================================================================== */
.mobile-cta-bar {
    display: none;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85));
    backdrop-filter: var(--glass-blur-lg);
    border-bottom: 2px solid rgba(164, 32, 13, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.mobile-cta-wrapper {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    max-width: 600px;
    margin: 0 auto;
}

.mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.cta-join {
    background: linear-gradient(135deg, rgba(255,215,0,0.95), rgba(255,195,0,0.95));
    color: #000;
    border-color: rgba(255,215,0,1);
}

.cta-donate {
    background: linear-gradient(135deg, rgba(220,38,38,0.95), rgba(164,32,13,0.95));
    color: #fff;
    border-color: rgba(220,38,38,1);
}

@media (max-width: 768px) {
    .mobile-cta-bar { display: block; }
}

/* ===================================================================
   COMPANIES / FIREHOUSES BAND
   =================================================================== */
.hp-companies-section {
    padding: 4rem 2rem;
    text-align: center;
    background: radial-gradient(61.27% 128.85% at 0% 100%, rgba(164,32,13,0.08) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.3);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hp-companies-grid {
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.hp-company-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: var(--text, #fff);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.hp-company-card:last-child { border-bottom: none; }

.hp-company-card:hover {
    opacity: 0.88;
    color: var(--text, #fff);
    text-decoration: none;
}

/* Alternate image/content sides for each successive station */
.hp-companies-grid .hp-company-card:nth-child(even) {
    direction: rtl;
}

.hp-companies-grid .hp-company-card:nth-child(even) > * {
    direction: ltr;
}

.hp-company-img {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(164,32,13,0.1);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-company-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.35s ease;
}

.hp-company-card:hover .hp-company-img img { transform: scale(1.04); }

.hp-company-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(164,32,13,0.35);
}

.hp-company-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hp-company-name {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--text, #fff);
}

.hp-company-address {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hp-company-address .bi { color: rgba(164,32,13,0.8); }

.hp-company-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.8;
    margin: 0;
}

.hp-company-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-top: 0.25rem;
    transition: color 0.15s, gap 0.15s;
}

.hp-company-card:hover .hp-company-cta {
    color: rgba(255,255,255,0.95);
    gap: 10px;
}

@media (max-width: 768px) {
    .hp-companies-section { padding: 2.5rem 1rem; }
    .hp-company-card,
    .hp-companies-grid .hp-company-card:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 1.5rem;
        padding: 2rem 0;
    }
}

/* ===================================================================
   FEATURED SPOTLIGHT BANDS
   =================================================================== */
.hp-spotlight-band {
    padding: 4rem 2rem;
    background: var(--figma-surface, rgba(0,0,0,0.3));
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.hp-spotlight-band-alt {
    background: radial-gradient(61.27% 128.85% at 100% 0%, rgba(164,32,13,0.08) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.25);
}

.hp-spotlight-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hp-spotlight-reverse {
    direction: rtl;
}

.hp-spotlight-reverse > * {
    direction: ltr;
}

.hp-spotlight-media {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(164,32,13,0.1);
    aspect-ratio: 4 / 3;
}

.hp-spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-spotlight-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(164,32,13,0.4);
    min-height: 240px;
}

.hp-spotlight-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hp-spotlight-body {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 768px) {
    .hp-spotlight-inner,
    .hp-spotlight-inner.hp-spotlight-reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    .hp-spotlight-band { padding: 2.5rem 1rem; }
}

/* ── OUR DEPARTMENT TILES ─────────────────────────────────────── */
.hp-dept-tiles-section {
    background: var(--bg-surface);
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid var(--border);
}
.hp-dept-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 960px;
    margin: 2.5rem auto 0;
}
.hp-dept-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    background: transparent;
    text-decoration: none;
    color: inherit;
    transition: opacity .2s;
}
.hp-dept-tile:hover {
    opacity: 0.75;
}
.hp-dept-tile-icon {
    font-size: 2.25rem;
    color: var(--brand);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.hp-dept-tile-label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}
.hp-dept-tile-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}
@media (max-width: 768px) {
    .hp-dept-tiles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── SAFETY & PREPAREDNESS ────────────────────────────────────── */
.hp-safety-section {
    background: radial-gradient(61.27% 128.85% at 0% 100%, rgba(164,32,13,0.08) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.3);
    backdrop-filter: var(--glass-blur);
    padding: 4rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hp-safety-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 2rem;
    max-width: 1100px;
    margin: 2rem auto 0;
}
.hp-safety-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-decoration: none;
    color: rgba(255,255,255,0.9);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hp-safety-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(164,32,13,0.5);
    background: rgba(164,32,13,0.06);
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}
.hp-safety-tile-icon {
    font-size: 1.75rem;
    color: var(--brand, #C02B2B);
    margin-bottom: 0.25rem;
}
.hp-safety-tile-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin: 0;
}
.hp-safety-tile-body {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.hp-safety-tile-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand, #C02B2B);
    margin-top: 0.25rem;
}
@media (max-width: 900px) {
    .hp-safety-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .hp-safety-grid { grid-template-columns: 1fr; }
}

/* ── ADMINISTRATION BAND ──────────────────────────────────────── */
.hp-admin-section {
    background: rgba(164,32,13,0.06);
    padding: 4rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hp-admin-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 680px;
    margin: 0 auto;
}
.hp-admin-body {
    font-size: 0.975rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.hp-admin-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0;
}
.hp-admin-link-item {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
    color: rgba(255,200,180,0.9);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color .15s;
}
.hp-admin-link-item:hover {
    color: #fff;
    text-decoration: underline;
}
.hp-admin-link-item + .hp-admin-link-item::before {
    content: ' · ';
    color: rgba(255,255,255,0.35);
    font-weight: 400;
}

/* ===================================================================
   ANNOUNCEMENTS SECTION
   =================================================================== */
.hp-announcements-section {
    /* Match the navbar/header chrome so the whole top of the page is one
       continuous color. The announcement alert strip inside keeps its own
       accent styling. */
    background: var(--figma-navbar-bg, var(--figma-bg-navbar, var(--figma-surface, rgba(0,0,0,0.3))));
    backdrop-filter: var(--glass-blur);
    /* no border-bottom — blends seamlessly into the dept-name-header below */
    border-bottom: none;
    padding: 3rem 2rem;
    width: 100%;
}
.hp-announcements-inner {
    max-width: 1320px;
    margin: 0 auto;
}
.hp-section-title--center {
    text-align: center;
}
@media (max-width: 900px) {
    .hp-announcements-section { padding: 1.5rem 1rem; }
}

/* ===========================================================
   Attendance Page (Members/Attendance) — Figma Styling
   =========================================================== */

/* Stats Row */
.figma-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.figma-stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.figma-stat-card:hover {
    background: var(--glass-bg-strong);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.figma-stat-success {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.figma-stat-warning {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.05);
}

.figma-stat-info {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
}

.figma-stat-danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.figma-stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #9ca3af);
    margin-bottom: 8px;
    font-weight: 500;
}

.figma-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text, #ffffff);
}

.figma-stat-sublabel {
    font-size: 0.8rem;
    color: var(--text-secondary, #9ca3af);
    margin-top: 4px;
    font-weight: 500;
}

.figma-rms-note {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(96, 165, 250, 1);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Filter Form */
.figma-filter-form {
    width: 100%;
}

.figma-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
}

.figma-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.figma-filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--fg-rgb), 0.88);
}

.figma-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--figma-input-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-strong);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.figma-select:focus {
    background: var(--figma-input-bg);
    border-color: rgba(59, 130, 246, 0.5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Breakdown Grid */
.figma-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.figma-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--glass-bg);
    border-radius: 6px;
    border: 1px solid var(--glass-border);
}

.figma-breakdown-type {
    font-weight: 600;
    color: rgba(var(--fg-rgb), 0.88);
}

.figma-breakdown-count {
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.1rem;
}

/* Table Styling */
.figma-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.figma-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: rgba(var(--fg-rgb), 0.88);
    border-bottom: 2px solid rgba(var(--fg-rgb), 0.08);
    background: var(--glass-bg);
}

.figma-table tbody td {
    padding: 14px 16px;
    color: var(--text-strong);
    border-bottom: 1px solid var(--glass-border);
}

.figma-table tbody tr {
    transition: background-color 0.15s ease;
}

.figma-table tbody tr:hover {
    background: var(--glass-bg);
}

/* Badges */
.figma-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid;
}

.figma-badge-secondary {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(107, 114, 128, 0.3);
    color: rgba(156, 163, 175, 1);
}

.figma-badge-success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: rgba(74, 222, 128, 1);
}

.figma-badge-warning {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: rgba(253, 224, 71, 1);
}

.figma-badge-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: rgba(96, 165, 250, 1);
}

.figma-badge-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(248, 113, 113, 1);
}

/* Links */
.figma-link {
    color: rgba(96, 165, 250, 1);
    text-decoration: none;
    transition: color 0.15s ease;
}

.figma-link:hover {
    color: rgba(147, 197, 253, 1);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .figma-resource-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .figma-stats-row {
        grid-template-columns: 1fr;
    }

    .figma-filter-row {
        grid-template-columns: 1fr;
    }

    .figma-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===================================================================
   >>> SECTION: figma-tokens
   =================================================================== */

/* ===================================================================
   FIGMA DESIGN TOKENS - FiveAlarmWeb
   Colorblind-safe: luminance + shape, never color alone.
   Each theme has its own visual personality — not just a color swap.

   NOTE: Core palette tokens (backgrounds, text, brand, accent, border)
   now live in tokens.css. The --figma-* names used here are aliases
   defined there. This file keeps the theme-specific derived tokens
   (gradients, navbar, homepage, card personality) and theme component
   rules pending migration.
   =================================================================== */

/* ===== GLOBAL RESET: NO TEXT SHADOWS ===== */
* {
    text-shadow: none;
}

:root {
    /* ===== BACKGROUNDS (core palette: see tokens.css) ===== */
    --figma-bg-navbar:     rgba(0, 0, 0, 0.4);

    /* ===== GRADIENTS ===== */
    --figma-gradient-card-primary: radial-gradient(23.21% 88.82% at 100% 100%, rgba(164,32,13,0.2) 0%, rgba(0,0,0,0) 100%),
                                   radial-gradient(20.72% 64.91% at 0% 0%, rgba(164,32,13,0.2) 0%, rgba(0,0,0,0) 100%),
                                   rgba(0,0,0,0.4);
    --figma-gradient-card-red:  var(--figma-gradient-card-primary);
    --figma-gradient-card-gold: radial-gradient(42.6% 353.85% at 100% 0%, rgba(180,140,0,0.2) 0%, rgba(0,0,0,0) 100%),
                                rgba(0,0,0,0.3);

    /* ===== BUTTON TOKENS ===== */
    --figma-btn-primary-text:     #ffffff;
    --figma-btn-primary-bg:       var(--brand);
    --figma-btn-primary-bg-hover: var(--brand-dark);

    /* ===== BORDERS ===== */
    --figma-border-width:  1px;

    /* ===== PROGRESS ===== */
    --figma-progress-bg:   rgba(230, 230, 230, 0.05);
    --figma-progress-fill: linear-gradient(90deg, #3E0C05 0%, #741709 52.88%, #A4200D 100%);

    /* ===== CARD PERSONALITY ===== */
    --figma-card-shadow:       0 4px 24px rgba(0, 0, 0, 0.4);
    --figma-card-blur:         none;
    --figma-card-border-style: solid;
    --figma-card-bg:           var(--bg-card);

    /* ===== RESOURCE CARD TOKENS ===== */
    --figma-resource-card-bg:              radial-gradient(61.27% 128.85% at 100% 0%, rgba(164,32,13,0.2) 0%, rgba(0,0,0,0) 100%), #000000;
    --figma-resource-card-border:          rgba(var(--fg-rgb), 0.25);
    --figma-resource-card-footer-bg:       radial-gradient(42.6% 353.85% at 100% 0%, rgba(164,32,13,0.2) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.3);
    --figma-resource-card-footer-border:   rgba(196, 60, 60, 0.5);

    /* ===== HOMEPAGE-SPECIFIC TOKENS ===== */
    --figma-home-header-bg:            var(--bg-surface);
    --figma-home-header-border:        rgba(164, 32, 13, 0.8);
    --figma-home-header-shine:         rgba(255, 215, 0, 0.6);
    --figma-home-stats-bg:             rgba(40, 40, 40, 0.95);
    --figma-home-stats-dark-bg:        rgba(40, 40, 40, 0.98);
    --figma-home-stats-border:         rgba(var(--fg-rgb), 0.1);
    --figma-home-stat-number-color:    rgba(var(--fg-rgb), 0.98);
    --figma-home-stat-menu-bg:         rgba(20, 20, 20, 0.98);
    --figma-home-stat-menu-border:     rgba(var(--fg-rgb), 0.2);
    --figma-home-stat-menu-hover:      rgba(255, 215, 0, 0.15);
    --figma-home-stat-menu-accent:     rgba(255, 215, 0, 0.9);
    --figma-home-quicklinks-bg:        rgba(0, 0, 0, 0.4);
    --figma-home-quicklinks-border:    rgba(var(--fg-rgb), 0.1);
    --figma-home-quicklink-bg:         rgba(var(--fg-rgb), 0.05);
    --figma-home-quicklink-border:     rgba(var(--fg-rgb), 0.15);
    --figma-home-quicklink-hover-bg:   rgba(255, 215, 0, 0.2);
    --figma-home-quicklink-hover-border: rgba(255, 215, 0, 0.5);
    --figma-home-quicklink-count-bg:   rgba(255, 215, 0, 0.2);
    --figma-home-quicklink-count-color: rgba(255, 215, 0, 1);
    --figma-home-quicklink-primary-bg: rgba(255, 215, 0, 0.12);
    --figma-home-quicklink-primary-border: rgba(255, 215, 0, 0.3);
    --figma-home-rotating-bg:          rgba(139, 92, 246, 0.12);
    --figma-home-rotating-border:      rgba(139, 92, 246, 0.3);
    --figma-home-rotating-shimmer:     rgba(139, 92, 246, 0.3);
    --figma-home-slideshow-bg:         radial-gradient(61.27% 128.85% at 100% 0%, rgba(164,32,13,0.08) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.25);
    --figma-home-cta-bg:               rgba(0, 0, 0, 0.95);
    --figma-home-cta-border:           rgba(164, 32, 13, 0.6);
    --figma-home-title-gradient:       linear-gradient(135deg, rgba(255,215,0,0.8) 0%, rgba(255,237,78,1) 25%, rgba(212,175,55,0.9) 50%, rgba(255,237,78,1) 75%, rgba(255,215,0,0.8) 100%);
    --figma-home-title-glow:           rgba(255, 215, 0, 0.5);

    /* ===== NAVBAR TOKENS (default theme) ===== */
    /* Background */
    --figma-navbar-bg:               rgba(0, 0, 0, 0.55);
    --figma-navbar-backdrop:         blur(24px);
    /* Bottom accent border — the main per-theme differentiator */
    --figma-navbar-border-bottom:    none;
    --figma-navbar-border-color:     transparent;
    --figma-navbar-border-thickness: 0px;
    /* Top accent stripe */
    --figma-navbar-top-stripe:       none;
    --figma-navbar-top-color:        transparent;
    /* Link states */
    --figma-navbar-link-color:       rgba(var(--fg-rgb), 0.85);
    --figma-navbar-link-hover-bg:    rgba(var(--fg-rgb), 0.10);
    --figma-navbar-link-hover-color: #ffffff;
    --figma-navbar-link-active-bg:   rgba(164, 32, 13, 0.20);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: var(--brand);
    /* Dropdown */
    --figma-navbar-dropdown-bg:      rgba(10, 8, 8, 0.97);
    --figma-navbar-dropdown-border:  rgba(var(--fg-rgb), 0.10);
    --figma-navbar-dropdown-item-hover-bg:    rgba(164, 32, 13, 0.15);
    --figma-navbar-dropdown-item-hover-color: #ffffff;
    /* Toggler (hamburger) */
    --figma-navbar-toggler-bg:       rgba(var(--fg-rgb), 0.08);
    --figma-navbar-toggler-border:   rgba(var(--fg-rgb), 0.25);
    --figma-navbar-toggler-icon:     rgba(var(--fg-rgb), 0.95);
    /* Mobile menu panel */
    --figma-navbar-mobile-bg:        rgba(10, 8, 8, 0.98);
    --figma-navbar-mobile-border:    rgba(164, 32, 13, 0.30);
    --figma-navbar-mobile-shadow:    0 12px 40px rgba(0, 0, 0, 0.6);
    /* Segmented control */
    --figma-navbar-seg-bg:           rgba(var(--fg-rgb), 0.06);
    --figma-navbar-seg-border:       rgba(var(--fg-rgb), 0.12);
    --figma-navbar-seg-active-bg:    var(--brand);
    --figma-navbar-seg-active-color: #ffffff;
    /* Social icon links */
    --figma-navbar-social-bg:        rgba(var(--fg-rgb), 0.06);
    --figma-navbar-social-border:    rgba(var(--fg-rgb), 0.12);
    --figma-navbar-social-hover-bg:  var(--brand);
    /* Join / CTA button */
    --figma-navbar-join-bg:          var(--brand);
    --figma-navbar-join-color:       #ffffff;
    --figma-navbar-join-border:      transparent;
    --figma-navbar-join-shadow:      0 2px 12px rgba(164, 32, 13, 0.4);

    /* ===== FORM INPUTS ===== */
    --figma-input-bg:           rgba(17, 17, 17, 1);
    --figma-input-border:       rgba(var(--fg-rgb), 0.12);
    --figma-input-text:         rgba(var(--fg-rgb), 0.95);
    --figma-input-placeholder:  rgba(var(--fg-rgb), 0.45);
    --figma-input-focus-border: rgba(164, 32, 13, 0.6);
    --figma-input-focus-shadow: rgba(164, 32, 13, 0.15);

    /* ===== TYPOGRAPHY PERSONALITY ===== */
    --figma-font-primary:    'Inter', system-ui, sans-serif;
    --figma-font-secondary:  'Inter', system-ui, sans-serif;
    --figma-font-heading:    'Manrope', system-ui, sans-serif;
    --figma-heading-weight:  700;
    --figma-heading-spacing: 0em;

    /* ===== FONT SIZES ===== */
    --figma-fs-hero:  104px; --figma-lh-hero:  127px;
    --figma-fs-h1:     64px; --figma-lh-h1:     78px;
    --figma-fs-h2:     40px; --figma-lh-h2:     49px;
    --figma-fs-h3:     32px; --figma-lh-h3:     39px;
    --figma-fs-h4:     28px; --figma-lh-h4:     34px;
    --figma-fs-h5:     24px; --figma-lh-h5:     29px;
    --figma-fs-body:   20px; --figma-lh-body:   24px;
    --figma-fs-nav:    16px; --figma-lh-nav:    20px;
    --figma-fs-small:  16px;

    --figma-fw-regular:   400;
    --figma-fw-medium:    500;
    --figma-fw-semibold:  600;
    --figma-fw-bold:      700;
    --figma-fw-extrabold: 800;

    /* ===== SPACING ===== */
    --figma-sp-xs:  8px;  --figma-sp-sm:  16px;
    --figma-sp-md: 24px;  --figma-sp-lg:  32px;
    --figma-sp-xl: 48px;  --figma-sp-2xl: 56px;

    /* ===== BORDER RADIUS ===== */
    --figma-radius-sm:    6px;
    --figma-radius-md:   12px;
    --figma-radius-lg:   12px;
    --figma-radius-xl:   16px;
    --figma-radius-full: 1000px;

    /* ===== EFFECTS ===== */
    --figma-shadow-icon:     drop-shadow(0px 0px 8px rgba(204, 148, 69, 0.32));
    --figma-shadow-card:     0px 0px  6px rgba(0, 0, 0, 0.08);
    --figma-shadow-border:   0px 0px 16px rgba(0, 0, 0, 0.08);
    --figma-shadow-progress: 0px 0px 16px rgba(0, 0, 0, 0.08);
    --figma-backdrop-blur:       blur(24px);
    --figma-backdrop-blur-light: blur(7.2px);

    /* ===== TRANSITIONS ===== */
    --figma-transition-fast:   200ms ease;
    --figma-transition-normal: 0.3s ease;

    /* ===== SEMANTIC STATUS TOKENS ===== */
    --figma-status-success-bg:     rgba(37,  99, 235, 0.2);
    --figma-status-success-border: rgba(37,  99, 235, 0.4);
    --figma-status-success-text:   #93c5fd;
    --figma-status-warning-bg:     rgba(217, 119,  6, 0.2);
    --figma-status-warning-border: rgba(217, 119,  6, 0.4);
    --figma-status-warning-text:   #fcd34d;
    --figma-status-danger-bg:      rgba(220,  38, 38, 0.2);
    --figma-status-danger-border:  rgba(220,  38, 38, 0.4);
    --figma-status-danger-text:    #fca5a5;
    --figma-status-info-bg:        rgba(8,  145, 178, 0.2);
    --figma-status-info-border:    rgba(8,  145, 178, 0.4);
    --figma-status-info-text:      #67e8f9;
}

/* ===================================================================
   WIRE HOMEPAGE TOKENS INTO ACTUAL ELEMENTS
   =================================================================== */

.dept-name-header {
    /* Match the navbar background exactly so the top of the page reads as
       one continuous chrome surface instead of stacked strips. */
    background:    var(--figma-navbar-bg, var(--figma-bg-navbar, var(--figma-home-header-bg))) !important;
    backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important;
    -webkit-backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important;
    border-bottom: 3px solid var(--figma-home-header-border) !important;
}
.dept-name-header::after {
    background: linear-gradient(90deg, transparent 0%, var(--figma-home-header-shine) 50%, transparent 100%) !important;
}

.gold-foil-text {
    background: var(--figma-home-title-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 20px var(--figma-home-title-glow)) !important;
}

.hero-stats-banner {
    background: linear-gradient(to right,
        rgba(255,255,255,0.08) 0%,
        var(--figma-home-stats-bg) 33%,
        var(--figma-home-stats-bg) 67%,
        rgba(255,255,255,0.08) 100%) !important;
}
.hero-stat-item.dark-bg { background: var(--figma-home-stats-dark-bg) !important; }
.hero-stat-item         { border-bottom-color: var(--figma-home-stats-border); }
.hero-stat-number       { color: var(--figma-home-stat-number-color) !important; }

.hero-stat-menu {
    background:   var(--figma-home-stat-menu-bg) !important;
    border-color: var(--figma-home-stat-menu-border);
}
.stat-menu-item:hover  { background: var(--figma-home-stat-menu-hover) !important; }
.stat-menu-item strong { color: var(--figma-home-stat-menu-accent) !important; }

.incident-quick-links {
    background: var(--figma-home-quicklinks-bg);
    border-bottom: 1px solid var(--figma-home-quicklinks-border);
}
.quick-link {
    background:   var(--figma-home-quicklink-bg) !important;
    border-color: var(--figma-home-quicklink-border);
    color:        var(--text-secondary) !important;
}
.quick-link:hover {
    background:   var(--figma-home-quicklink-hover-bg) !important;
    border-color: var(--figma-home-quicklink-hover-border);
    color:        var(--text) !important;
}
.quick-link-primary {
    background: var(--figma-home-quicklink-primary-bg);
    border-color: var(--figma-home-quicklink-primary-border);
}
.link-count {
    background: var(--figma-home-quicklink-count-bg);
    color: var(--figma-home-quicklink-count-color);
}
.quick-link-rotating {
    background: var(--figma-home-rotating-bg);
    border-color: var(--figma-home-rotating-border);
}
.slideshow-section { background: var(--figma-home-slideshow-bg) !important; }
.mobile-cta-bar {
    background: var(--figma-home-cta-bg);
    border-bottom: 2px solid var(--figma-home-cta-border);
}

/* ===== NAVBAR — consume tokens ===== */
.figma-navbar .dropdown-menu {
    background:    var(--figma-navbar-dropdown-bg) !important;
    border-color: var(--figma-navbar-dropdown-border);
    border-radius: var(--figma-radius-lg) !important;
}
.figma-navbar .nav-link:hover,
.figma-navbar .nav-link.active {
    background:    var(--figma-navbar-link-hover-bg) !important;
    color:         var(--figma-navbar-link-hover-color) !important;
    border-radius: var(--figma-radius-sm) !important;
}
.figma-navbar .dropdown-item:hover {
    background: var(--figma-navbar-dropdown-item-hover-bg) !important;
    color:      var(--figma-navbar-dropdown-item-hover-color) !important;
    border-radius: var(--figma-radius-sm) !important;
}
.figma-navbar .navbar-brand img { border-radius: var(--figma-radius-sm); }
.sidebar-figma .nav-link.active { border-left-color: var(--figma-navbar-active-indicator); }

/* ===================================================================
   APPLY PERSONALITY TOKENS GLOBALLY
   =================================================================== */
body.figma-theme .figma-resource-card,
body.figma-theme .apparatus-details-card,
body.figma-theme .inquiry-form-card,
body.figma-theme .figma-card,
body.figma-theme .figma-stats-container,
body.figma-theme .card {
    box-shadow:      var(--figma-card-shadow) !important;
    border-width: var(--figma-border-width);
    backdrop-filter: var(--figma-card-blur) !important;
}

body.figma-theme .figma-resource-card {
    background:   var(--figma-resource-card-bg) !important;
    border-color: var(--figma-resource-card-border) !important;
}

body.figma-theme .figma-card-footer {
    background:   var(--figma-resource-card-footer-bg) !important;
    border-color: var(--figma-resource-card-footer-border) !important;
}

body.figma-theme h1,
body.figma-theme h2,
body.figma-theme h3,
body.figma-theme h4,
body.figma-theme h5 {
    font-weight:    var(--figma-heading-weight) !important;
    letter-spacing: var(--figma-heading-spacing) !important;
}

body.figma-theme .btn-primary,
body.figma-theme .figma-btn-primary {
    background: var(--figma-btn-primary-bg) !important;
    color:      var(--figma-btn-primary-text) !important;
    border:     none !important;
}
body.figma-theme .btn-primary:hover,
body.figma-theme .figma-btn-primary:hover {
    background: var(--figma-btn-primary-bg-hover) !important;
    color:      var(--figma-btn-primary-text) !important;
}

body.figma-theme input.form-control,
body.figma-theme textarea.form-control,
body.figma-theme select.form-select {
    background:    var(--figma-input-bg) !important;
    border-color:  var(--figma-input-border) !important;
    color:         var(--figma-input-text) !important;
    border-radius: var(--figma-radius-sm) !important;
}
body.figma-theme input.form-control:focus,
body.figma-theme textarea.form-control:focus,
body.figma-theme select.form-select:focus {
    border-color: var(--figma-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--figma-input-focus-shadow) !important;
}
body.figma-theme input::placeholder,
body.figma-theme textarea::placeholder { color: var(--figma-input-placeholder) !important; }


/* ===================================================================
   THEME OVERRIDES
   =================================================================== */

/* ── Default — deep red, subtle ember glow ── */
/* navbar tokens already set in :root above */

/* ── Dark ── razor-thin, deep black, cool monochrome, zero red ── */
html[data-theme="dark"] {
    --figma-bg-navbar:     rgba(0, 0, 0, 0.97);


    /* Strip all red — pure cool silver accent */

    --figma-border-width:  1px;

    --figma-progress-fill: linear-gradient(90deg, #445566 0%, #667788 52.88%, #8899aa 100%);

    --figma-card-shadow:  0 2px 16px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.05);
    --figma-card-blur:    none;
    --figma-card-bg:      rgba(18, 18, 18, 0.92);

    --figma-resource-card-bg:            radial-gradient(61.27% 128.85% at 100% 0%, rgba(136,153,170,0.10) 0%, rgba(0,0,0,0) 100%), #030303;
    --figma-resource-card-border:        rgba(255, 255, 255, 0.07);
    --figma-resource-card-footer-bg:     rgba(10, 10, 10, 0.95);
    --figma-resource-card-footer-border: rgba(136, 153, 170, 0.25);

    --figma-btn-primary-bg:       #667788;
    --figma-btn-primary-bg-hover: #556677;
    --figma-btn-primary-text:     #ffffff;

    --figma-input-bg:           rgba(5, 5, 5, 1);
    --figma-input-border:       rgba(255, 255, 255, 0.10);
    --figma-input-focus-border: rgba(136, 153, 170, 0.70);
    --figma-input-focus-shadow: rgba(136, 153, 170, 0.12);

    --figma-heading-weight:  600;
    --figma-heading-spacing: 0.01em;

    --figma-radius-sm:  4px; --figma-radius-md:  6px;
    --figma-radius-lg:  8px; --figma-radius-xl: 10px;

    /* Navbar: pure monochrome — no red anywhere */
    --figma-navbar-bg:               rgba(3, 3, 3, 0.98);
    --figma-navbar-backdrop:         blur(32px);
    --figma-navbar-border-thickness: 1px;
    --figma-navbar-border-color:     rgba(255, 255, 255, 0.10);
    --figma-navbar-top-color:        transparent;
    --figma-navbar-link-color:       rgba(255, 255, 255, 0.65);
    --figma-navbar-link-hover-bg:    rgba(255, 255, 255, 0.07);
    --figma-navbar-link-hover-color: #ffffff;
    --figma-navbar-link-active-bg:   rgba(255, 255, 255, 0.10);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: #8899aa;
    --figma-navbar-dropdown-bg:      rgba(3, 3, 3, 0.99);
    --figma-navbar-dropdown-border:  rgba(255, 255, 255, 0.07);
    --figma-navbar-dropdown-item-hover-bg:    rgba(255, 255, 255, 0.07);
    --figma-navbar-dropdown-item-hover-color: #ffffff;
    --figma-navbar-toggler-bg:       rgba(255, 255, 255, 0.05);
    --figma-navbar-toggler-border:   rgba(255, 255, 255, 0.12);
    --figma-navbar-mobile-bg:        rgba(3, 3, 3, 0.99);
    --figma-navbar-mobile-border:    rgba(255, 255, 255, 0.08);
    --figma-navbar-mobile-shadow:    0 16px 48px rgba(0, 0, 0, 0.95);
    --figma-navbar-seg-bg:           rgba(255, 255, 255, 0.04);
    --figma-navbar-seg-border:       rgba(255, 255, 255, 0.09);
    --figma-navbar-seg-active-bg:    #667788;
    --figma-navbar-seg-active-color: #ffffff;
    --figma-navbar-social-bg:        rgba(255, 255, 255, 0.04);
    --figma-navbar-social-border:    rgba(255, 255, 255, 0.09);
    --figma-navbar-social-hover-bg:  #667788;
    --figma-navbar-join-bg:          #667788;
    --figma-navbar-join-color:       #ffffff;
    --figma-navbar-join-border:      transparent;
    --figma-navbar-join-shadow:      none;

    /* Homepage */
    --figma-home-header-bg:          #030303;
    --figma-home-header-border:      rgba(136, 153, 170, 0.50);
    --figma-home-header-shine:       rgba(200, 215, 230, 0.25);
    --figma-home-title-gradient:     linear-gradient(135deg, rgba(180,195,210,0.9) 0%, rgba(220,230,240,1) 25%, rgba(150,170,190,0.9) 50%, rgba(220,230,240,1) 75%, rgba(180,195,210,0.9) 100%);
    --figma-home-title-glow:         rgba(136, 153, 170, 0.40);
    --figma-home-stats-bg:           rgba(8, 8, 8, 0.98);
    --figma-home-stats-dark-bg:      rgba(3, 3, 3, 0.99);
    --figma-home-stats-border:       rgba(255, 255, 255, 0.07);
    --figma-home-stat-number-color:  rgba(255, 255, 255, 0.95);
    --figma-home-stat-menu-bg:       rgba(3, 3, 3, 0.99);
    --figma-home-stat-menu-border:   rgba(255, 255, 255, 0.10);
    --figma-home-stat-menu-hover:    rgba(255, 255, 255, 0.06);
    --figma-home-stat-menu-accent:   rgba(200, 215, 230, 0.90);
    --figma-home-quicklinks-bg:      rgba(0, 0, 0, 0.65);
    --figma-home-quicklinks-border:  rgba(255, 255, 255, 0.07);
    --figma-home-quicklink-bg:       rgba(255, 255, 255, 0.03);
    --figma-home-quicklink-border:   rgba(255, 255, 255, 0.09);
    --figma-home-quicklink-hover-bg:    rgba(255, 255, 255, 0.08);
    --figma-home-quicklink-hover-border: rgba(255, 255, 255, 0.25);
    --figma-home-quicklink-count-bg:    rgba(136, 153, 170, 0.18);
    --figma-home-quicklink-count-color: rgba(200, 215, 230, 1);
    --figma-home-quicklink-primary-bg:  rgba(136, 153, 170, 0.10);
    --figma-home-quicklink-primary-border: rgba(136, 153, 170, 0.30);
    --figma-home-rotating-bg:        rgba(136, 153, 170, 0.08);
    --figma-home-rotating-border:    rgba(136, 153, 170, 0.25);
    --figma-home-rotating-shimmer:   rgba(136, 153, 170, 0.20);
    --figma-home-slideshow-bg:       rgba(0, 0, 0, 0.55);
    --figma-home-cta-bg:             #000000;
    --figma-home-cta-border:         rgba(136, 153, 170, 0.45);
    --figma-navbar-active-indicator: #8899aa;
}

/* ── Slate ── corporate frosted glass, steel blue ── */
html[data-theme="slate"] {
    --figma-bg-navbar:        rgba(16, 20, 34, 0.92);
    --figma-border-width:     1px;
    --figma-progress-fill:    linear-gradient(90deg, #263f6e 0%, #3a5fa0 52.88%, #4d7cc9 100%);
    --figma-card-blur:    blur(12px);
    --figma-card-shadow:  0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(77,124,201,0.18);
    --figma-card-bg:      rgba(30, 36, 56, 0.6);
    --figma-resource-card-bg:              radial-gradient(61.27% 128.85% at 100% 0%, rgba(77,124,201,0.2) 0%, rgba(0,0,0,0) 100%), rgba(19,23,32,0.9);
    --figma-resource-card-border:          rgba(77, 124, 201, 0.25);
    --figma-resource-card-footer-bg:       rgba(26, 31, 46, 0.8);
    --figma-resource-card-footer-border:   rgba(77, 124, 201, 0.35);
    --figma-btn-primary-bg:       #4d7cc9;
    --figma-btn-primary-bg-hover: #3a5fa0;
    --figma-input-bg:           rgba(19, 23, 32, 0.95);
    --figma-input-border:       rgba(77, 124, 201, 0.3);
    --figma-input-focus-border: rgba(77, 124, 201, 0.8);
    --figma-input-focus-shadow: rgba(77, 124, 201, 0.2);
    --figma-radius-sm:   8px; --figma-radius-md:  16px;
    --figma-radius-lg:  20px; --figma-radius-xl:  24px;
    --figma-heading-weight:  600;
    --figma-heading-spacing: 0.02em;

    /* Navbar: steel glass — blue tint, frosted, pill links */
    --figma-navbar-bg:               rgba(16, 20, 38, 0.88);
    --figma-navbar-backdrop:         blur(28px) saturate(160%);
    --figma-navbar-border-thickness: 1px;
    --figma-navbar-border-color:     rgba(77, 124, 201, 0.35);
    --figma-navbar-top-color:        rgba(77, 124, 201, 0.6);
    --figma-navbar-link-color:       rgba(180, 210, 255, 0.85);
    --figma-navbar-link-hover-bg:    rgba(77, 124, 201, 0.18);
    --figma-navbar-link-hover-color: #e0edff;
    --figma-navbar-link-active-bg:   rgba(77, 124, 201, 0.28);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: #4d7cc9;
    --figma-navbar-dropdown-bg:      rgba(16, 20, 38, 0.97);
    --figma-navbar-dropdown-border:  rgba(77, 124, 201, 0.25);
    --figma-navbar-dropdown-item-hover-bg:    rgba(77, 124, 201, 0.18);
    --figma-navbar-dropdown-item-hover-color: #e0edff;
    --figma-navbar-toggler-bg:       rgba(77, 124, 201, 0.12);
    --figma-navbar-toggler-border:   rgba(77, 124, 201, 0.35);
    --figma-navbar-toggler-icon:     rgba(180, 210, 255, 0.95);
    --figma-navbar-mobile-bg:        rgba(16, 20, 38, 0.99);
    --figma-navbar-mobile-border:    rgba(77, 124, 201, 0.35);
    --figma-navbar-mobile-shadow:    0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(77,124,201,0.2);
    --figma-navbar-seg-bg:           rgba(77, 124, 201, 0.10);
    --figma-navbar-seg-border:       rgba(77, 124, 201, 0.25);
    --figma-navbar-seg-active-bg:    #4d7cc9;
    --figma-navbar-social-bg:        rgba(77, 124, 201, 0.10);
    --figma-navbar-social-border:    rgba(77, 124, 201, 0.25);
    --figma-navbar-social-hover-bg:  #4d7cc9;
    --figma-navbar-join-bg:          #4d7cc9;
    --figma-navbar-join-color:       #ffffff;
    --figma-navbar-join-shadow:      0 2px 16px rgba(77, 124, 201, 0.45);

    /* homepage */
    --figma-home-header-bg:          #131720;
    --figma-home-header-border:      rgba(77, 124, 201, 0.8);
    --figma-home-header-shine:       rgba(77, 124, 201, 0.5);
    --figma-home-title-gradient:      linear-gradient(135deg, rgba(107,149,216,0.9) 0%, rgba(147,197,253,1) 25%, rgba(77,124,201,0.9) 50%, rgba(147,197,253,1) 75%, rgba(107,149,216,0.9) 100%);
    --figma-home-title-glow:          rgba(77, 124, 201, 0.6);
    --figma-home-stats-bg:            rgba(19, 23, 32, 0.95);
    --figma-home-stats-dark-bg:       rgba(13, 17, 26, 0.98);
    --figma-home-stats-border:        rgba(77, 124, 201, 0.2);
    --figma-home-stat-number-color:   #93c5fd;
    --figma-home-stat-menu-bg:        rgba(13, 17, 26, 0.98);
    --figma-home-stat-menu-border:    rgba(77, 124, 201, 0.3);
    --figma-home-stat-menu-hover:     rgba(77, 124, 201, 0.15);
    --figma-home-stat-menu-accent:    rgba(147, 197, 253, 0.9);
    --figma-home-quicklinks-bg:       rgba(19, 23, 32, 0.8);
    --figma-home-quicklinks-border:   rgba(77, 124, 201, 0.2);
    --figma-home-quicklink-bg:        rgba(77, 124, 201, 0.08);
    --figma-home-quicklink-border:    rgba(77, 124, 201, 0.2);
    --figma-home-quicklink-hover-bg:  rgba(77, 124, 201, 0.2);
    --figma-home-quicklink-hover-border: rgba(77, 124, 201, 0.5);
    --figma-home-quicklink-count-bg:  rgba(77, 124, 201, 0.2);
    --figma-home-quicklink-count-color: #93c5fd;
    --figma-home-quicklink-primary-bg: rgba(77, 124, 201, 0.15);
    --figma-home-quicklink-primary-border: rgba(77, 124, 201, 0.4);
    --figma-home-rotating-bg:         rgba(13, 148, 136, 0.12);
    --figma-home-rotating-border:     rgba(13, 148, 136, 0.3);
    --figma-home-rotating-shimmer:    rgba(13, 148, 136, 0.3);
    --figma-home-slideshow-bg:        rgba(19, 23, 32, 0.5);
    --figma-home-cta-bg:              rgba(13, 17, 26, 0.97);
    --figma-home-cta-border:          rgba(77, 124, 201, 0.6);
}

/* ── Firehouse ── gritty, scorched, glowing ember red ── */
html[data-theme="firehouse"] {
    --figma-bg-navbar:        rgba(10, 1, 1, 0.97);
    --figma-border-width:     2px;
    --figma-progress-fill:    linear-gradient(90deg, #7a1005 0%, #cc1f08 52.88%, #ff3319 100%);
    --figma-card-shadow:  0 4px 32px rgba(255,51,25,0.18), 0 0 0 2px rgba(255,51,25,0.12);
    --figma-card-bg:      rgba(60, 6, 6, 0.6);
    --figma-resource-card-bg:              radial-gradient(61.27% 128.85% at 100% 0%, rgba(255,51,25,0.25) 0%, rgba(0,0,0,0) 100%), #0f0202;
    --figma-resource-card-border:          rgba(255, 51, 25, 0.35);
    --figma-resource-card-footer-bg:       rgba(40, 4, 4, 0.9);
    --figma-resource-card-footer-border:   rgba(255, 51, 25, 0.5);
    --figma-btn-primary-bg:       #ff3319;
    --figma-btn-primary-bg-hover: #cc1f08;
    --figma-input-bg:           rgba(20, 3, 3, 1);
    --figma-input-border:       rgba(255, 51, 25, 0.3);
    --figma-input-focus-border: rgba(255, 51, 25, 0.8);
    --figma-input-focus-shadow: rgba(255, 51, 25, 0.15);
    --figma-radius-sm:  3px; --figma-radius-md:  6px;
    --figma-radius-lg:  8px; --figma-radius-xl: 10px;
    --figma-heading-weight:  800;
    --figma-heading-spacing: -0.01em;

    /* Navbar: scorched metal — heavy red glow bottom border, warm tint */
    --figma-navbar-bg:               rgba(12, 2, 2, 0.97);
    --figma-navbar-backdrop:         blur(16px);
    --figma-navbar-border-thickness: 3px;
    --figma-navbar-border-color:     #ff3319;
    --figma-navbar-top-color:        rgba(255, 51, 25, 0.6);
    --figma-navbar-link-color:       rgba(255, 200, 180, 0.90);
    --figma-navbar-link-hover-bg:    rgba(255, 51, 25, 0.18);
    --figma-navbar-link-hover-color: #ffffff;
    --figma-navbar-link-active-bg:   rgba(255, 51, 25, 0.28);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: #ff3319;
    --figma-navbar-dropdown-bg:      rgba(12, 2, 2, 0.99);
    --figma-navbar-dropdown-border:  rgba(255, 51, 25, 0.30);
    --figma-navbar-dropdown-item-hover-bg:    rgba(255, 51, 25, 0.18);
    --figma-navbar-dropdown-item-hover-color: #ffffff;
    --figma-navbar-toggler-bg:       rgba(255, 51, 25, 0.12);
    --figma-navbar-toggler-border:   rgba(255, 51, 25, 0.40);
    --figma-navbar-toggler-icon:     rgba(255, 200, 180, 0.95);
    --figma-navbar-mobile-bg:        rgba(12, 2, 2, 0.99);
    --figma-navbar-mobile-border:    rgba(255, 51, 25, 0.40);
    --figma-navbar-mobile-shadow:    0 16px 48px rgba(200, 30, 10, 0.25), 0 0 0 1px rgba(255,51,25,0.15);
    --figma-navbar-seg-bg:           rgba(255, 51, 25, 0.10);
    --figma-navbar-seg-border:       rgba(255, 51, 25, 0.30);
    --figma-navbar-seg-active-bg:    #ff3319;
    --figma-navbar-social-bg:        rgba(255, 51, 25, 0.10);
    --figma-navbar-social-border:    rgba(255, 51, 25, 0.30);
    --figma-navbar-social-hover-bg:  #ff3319;
    --figma-navbar-join-bg:          #ff3319;
    --figma-navbar-join-color:       #ffffff;
    --figma-navbar-join-shadow:      0 2px 16px rgba(255, 51, 25, 0.50);

    /* homepage */
    --figma-home-header-bg:          #0f0202;
    --figma-home-header-border:      rgba(255, 51, 25, 0.9);
    --figma-home-header-shine:       rgba(255, 51, 25, 0.7);
    --figma-home-title-gradient:     linear-gradient(135deg, rgba(255,100,60,0.9) 0%, rgba(255,140,80,1) 25%, rgba(255,51,25,0.95) 50%, rgba(255,140,80,1) 75%, rgba(255,100,60,0.9) 100%);
    --figma-home-title-glow:         rgba(255, 51, 25, 0.7);
    --figma-home-stats-bg:           rgba(26, 4, 4, 0.97);
    --figma-home-stats-dark-bg:      rgba(15, 2, 2, 0.99);
    --figma-home-stats-border:       rgba(255, 51, 25, 0.2);
    --figma-home-stat-number-color:  #ff6347;
    --figma-home-stat-menu-bg:       rgba(15, 2, 2, 0.99);
    --figma-home-stat-menu-border:   rgba(255, 51, 25, 0.3);
    --figma-home-stat-menu-hover:    rgba(255, 51, 25, 0.15);
    --figma-home-stat-menu-accent:   rgba(234, 179, 8, 0.9);
    --figma-home-quicklinks-bg:      rgba(15, 2, 2, 0.7);
    --figma-home-quicklinks-border:  rgba(255, 51, 25, 0.2);
    --figma-home-quicklink-bg:       rgba(255, 51, 25, 0.07);
    --figma-home-quicklink-border:   rgba(255, 51, 25, 0.2);
    --figma-home-quicklink-hover-bg: rgba(255, 51, 25, 0.2);
    --figma-home-quicklink-hover-border: rgba(255, 51, 25, 0.5);
    --figma-home-quicklink-count-bg:    rgba(234, 179, 8, 0.2);
    --figma-home-quicklink-count-color: rgba(234, 179, 8, 1);
    --figma-home-quicklink-primary-bg:  rgba(234, 179, 8, 0.1);
    --figma-home-quicklink-primary-border: rgba(234, 179, 8, 0.3);
    --figma-home-rotating-bg:        rgba(255, 51, 25, 0.1);
    --figma-home-rotating-border:    rgba(255, 51, 25, 0.3);
    --figma-home-rotating-shimmer:   rgba(255, 51, 25, 0.3);
    --figma-home-slideshow-bg:       radial-gradient(61.27% 128.85% at 100% 0%, rgba(255,51,25,0.1) 0%, rgba(0,0,0,0) 100%), rgba(15,2,2,0.6);
    --figma-home-cta-bg:             rgba(10, 1, 1, 0.97);
    --figma-home-cta-border:         rgba(255, 51, 25, 0.8);
}

/* ── Midnight ── elegant navy, soft indigo glow ── */
html[data-theme="midnight"] {
    --figma-bg-navbar:        rgba(5, 6, 14, 0.97);
    --figma-border-width:     1px;
    --figma-progress-fill:    linear-gradient(90deg, #312e81 0%, #4f46e5 52.88%, #6366f1 100%);
    --figma-card-blur:    blur(16px);
    --figma-card-shadow:  0 8px 40px rgba(99,102,241,0.14), 0 0 0 1px rgba(99,102,241,0.18);
    --figma-card-bg:      rgba(20, 24, 50, 0.7);
    --figma-resource-card-bg:              radial-gradient(61.27% 128.85% at 100% 0%, rgba(99,102,241,0.22) 0%, rgba(0,0,0,0) 100%), rgba(8,10,18,0.95);
    --figma-resource-card-border:          rgba(99, 102, 241, 0.22);
    --figma-resource-card-footer-bg:       rgba(13, 15, 36, 0.9);
    --figma-resource-card-footer-border:   rgba(99, 102, 241, 0.4);
    --figma-btn-primary-bg:       #6366f1;
    --figma-btn-primary-bg-hover: #4f46e5;
    --figma-input-bg:           rgba(8, 10, 20, 0.95);
    --figma-input-border:       rgba(99, 102, 241, 0.3);
    --figma-input-focus-border: rgba(99, 102, 241, 0.8);
    --figma-input-focus-shadow: rgba(99, 102, 241, 0.2);
    --figma-radius-sm:   10px; --figma-radius-md:  18px;
    --figma-radius-lg:  22px; --figma-radius-xl:  28px;
    --figma-heading-weight:  400;
    --figma-heading-spacing: 0.04em;

    /* Navbar: deep navy, indigo glow, very rounded pill links */
    --figma-navbar-bg:               rgba(6, 7, 18, 0.96);
    --figma-navbar-backdrop:         blur(24px) saturate(180%);
    --figma-navbar-border-thickness: 2px;
    --figma-navbar-border-color:     rgba(99, 102, 241, 0.40);
    --figma-navbar-top-color:        rgba(99, 102, 241, 0.50);
    --figma-navbar-link-color:       rgba(196, 181, 253, 0.88);
    --figma-navbar-link-hover-bg:    rgba(99, 102, 241, 0.18);
    --figma-navbar-link-hover-color: #e0e7ff;
    --figma-navbar-link-active-bg:   rgba(99, 102, 241, 0.28);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: #6366f1;
    --figma-navbar-dropdown-bg:      rgba(6, 7, 18, 0.97);
    --figma-navbar-dropdown-border:  rgba(99, 102, 241, 0.22);
    --figma-navbar-dropdown-item-hover-bg:    rgba(99, 102, 241, 0.16);
    --figma-navbar-dropdown-item-hover-color: #e0e7ff;
    --figma-navbar-toggler-bg:       rgba(99, 102, 241, 0.12);
    --figma-navbar-toggler-border:   rgba(99, 102, 241, 0.35);
    --figma-navbar-toggler-icon:     rgba(196, 181, 253, 0.95);
    --figma-navbar-mobile-bg:        rgba(6, 7, 18, 0.99);
    --figma-navbar-mobile-border:    rgba(99, 102, 241, 0.30);
    --figma-navbar-mobile-shadow:    0 16px 48px rgba(20, 10, 60, 0.5), 0 0 0 1px rgba(99,102,241,0.15);
    --figma-navbar-seg-bg:           rgba(99, 102, 241, 0.10);
    --figma-navbar-seg-border:       rgba(99, 102, 241, 0.25);
    --figma-navbar-seg-active-bg:    #6366f1;
    --figma-navbar-social-bg:        rgba(99, 102, 241, 0.10);
    --figma-navbar-social-border:    rgba(99, 102, 241, 0.25);
    --figma-navbar-social-hover-bg:  #6366f1;
    --figma-navbar-join-bg:          #6366f1;
    --figma-navbar-join-color:       #ffffff;
    --figma-navbar-join-shadow:      0 2px 16px rgba(99, 102, 241, 0.45);

    /* homepage */
    --figma-home-header-bg:          #080a12;
    --figma-home-header-border:      rgba(99, 102, 241, 0.8);
    --figma-home-header-shine:       rgba(99, 102, 241, 0.5);
    --figma-home-title-gradient:     linear-gradient(135deg, rgba(129,140,248,0.9) 0%, rgba(196,181,253,1) 25%, rgba(99,102,241,0.9) 50%, rgba(196,181,253,1) 75%, rgba(129,140,248,0.9) 100%);
    --figma-home-title-glow:         rgba(99, 102, 241, 0.7);
    --figma-home-stats-bg:           rgba(13, 15, 34, 0.96);
    --figma-home-stats-dark-bg:      rgba(8, 10, 22, 0.99);
    --figma-home-stats-border:       rgba(99, 102, 241, 0.15);
    --figma-home-stat-number-color:  #a5b4fc;
    --figma-home-stat-menu-bg:       rgba(8, 10, 20, 0.99);
    --figma-home-stat-menu-border:   rgba(99, 102, 241, 0.25);
    --figma-home-stat-menu-hover:    rgba(99, 102, 241, 0.12);
    --figma-home-stat-menu-accent:   rgba(245, 158, 11, 0.9);
    --figma-home-quicklinks-bg:      rgba(8, 10, 20, 0.7);
    --figma-home-quicklinks-border:  rgba(99, 102, 241, 0.15);
    --figma-home-quicklink-bg:       rgba(99, 102, 241, 0.07);
    --figma-home-quicklink-border:   rgba(99, 102, 241, 0.18);
    --figma-home-quicklink-hover-bg: rgba(99, 102, 241, 0.18);
    --figma-home-quicklink-hover-border: rgba(99, 102, 241, 0.45);
    --figma-home-quicklink-count-bg:    rgba(245, 158, 11, 0.2);
    --figma-home-quicklink-count-color: rgba(245, 158, 11, 1);
    --figma-home-quicklink-primary-bg:  rgba(245, 158, 11, 0.1);
    --figma-home-quicklink-primary-border: rgba(245, 158, 11, 0.3);
    --figma-home-rotating-bg:        rgba(99, 102, 241, 0.1);
    --figma-home-rotating-border:    rgba(99, 102, 241, 0.25);
    --figma-home-rotating-shimmer:   rgba(99, 102, 241, 0.25);
    --figma-home-slideshow-bg:       radial-gradient(61.27% 128.85% at 100% 0%, rgba(99,102,241,0.08) 0%, rgba(0,0,0,0) 100%), rgba(8,10,18,0.5);
    --figma-home-cta-bg:             rgba(5, 6, 14, 0.97);
    --figma-home-cta-border:         rgba(99, 102, 241, 0.7);
}

/* ── High Contrast ── WCAG AAA, pure black/white, maximum legibility ── */
html[data-theme="highcontrast"] {
    /* ===== BACKGROUNDS ===== */
    --figma-bg-navbar:     #000000;

    /* ===== BRAND / ACCENT ===== */

    /* ===== GRADIENTS ===== */
    --figma-gradient-card-primary: #000000;
    --figma-gradient-card-red:     #000000;
    --figma-gradient-card-gold:    #000000;

    /* ===== BUTTONS ===== */
    --figma-btn-primary-text:     #000000;
    --figma-btn-primary-bg:       #ffff00;
    --figma-btn-primary-bg-hover: #cccc00;

    /* ===== TEXT ===== */

    /* ===== BORDERS ===== */
    --figma-border-width:  2px;

    /* ===== PROGRESS ===== */
    --figma-progress-bg:   #333333;
    --figma-progress-fill: linear-gradient(90deg, #cccc00 0%, #ffff00 100%);

    /* ===== CARDS ===== */
    --figma-card-shadow:       0 0 0 2px #ffffff;
    --figma-card-blur:         none;
    --figma-card-border-style: solid;
    --figma-card-bg:           #000000;

    /* ===== RESOURCE CARDS ===== */
    --figma-resource-card-bg:              #000000;
    --figma-resource-card-border:          #ffffff;
    --figma-resource-card-footer-bg:       #111111;
    --figma-resource-card-footer-border:   #ffff00;

    /* ===== INPUTS ===== */
    --figma-input-bg:           #000000;
    --figma-input-border:       #ffffff;
    --figma-input-text:         #ffffff;
    --figma-input-placeholder:  #aaaaaa;
    --figma-input-focus-border: #ffff00;
    --figma-input-focus-shadow: rgba(255, 255, 0, 0.4);

    /* ===== TYPOGRAPHY ===== */
    --figma-font-primary:    system-ui, -apple-system, 'Segoe UI', sans-serif;
    --figma-font-secondary:  system-ui, -apple-system, 'Segoe UI', sans-serif;
    --figma-font-heading:    system-ui, -apple-system, 'Segoe UI', sans-serif;
    --figma-heading-weight:  700;
    --figma-heading-spacing: 0em;

    /* ===== BORDER RADIUS — sharp, no ambiguity ===== */
    --figma-radius-sm:    2px;
    --figma-radius-md:    4px;
    --figma-radius-lg:    4px;
    --figma-radius-xl:    6px;
    --figma-radius-full:  1000px;

    /* ===== EFFECTS — none, clarity over decoration ===== */
    --figma-shadow-icon:         none;
    --figma-backdrop-blur:       none;
    --figma-backdrop-blur-light: none;
    --figma-transition-fast:     0ms;
    --figma-transition-normal:   0ms;

    /* ===== NAVBAR ===== */
    --figma-navbar-bg:               #000000;
    --figma-navbar-backdrop:         none;
    --figma-navbar-border-thickness: 3px;
    --figma-navbar-border-color:     #ffff00;
    --figma-navbar-top-color:        transparent;
    --figma-navbar-link-color:       #ffffff;
    --figma-navbar-link-hover-bg:    #ffff00;
    --figma-navbar-link-hover-color: #000000;
    --figma-navbar-link-active-bg:   #ffff00;
    --figma-navbar-link-active-color: #000000;
    --figma-navbar-active-indicator: #ffff00;
    --figma-navbar-dropdown-bg:      #000000;
    --figma-navbar-dropdown-border:  #ffffff;
    --figma-navbar-dropdown-item-hover-bg:    #ffff00;
    --figma-navbar-dropdown-item-hover-color: #000000;
    --figma-navbar-toggler-bg:       #000000;
    --figma-navbar-toggler-border:   #ffffff;
    --figma-navbar-toggler-icon:     #ffffff;
    --figma-navbar-mobile-bg:        #000000;
    --figma-navbar-mobile-border:    #ffff00;
    --figma-navbar-mobile-shadow:    0 0 0 2px #ffff00;
    --figma-navbar-seg-bg:           #000000;
    --figma-navbar-seg-border:       #ffffff;
    --figma-navbar-seg-active-bg:    #ffff00;
    --figma-navbar-seg-active-color: #000000;
    --figma-navbar-social-bg:        #000000;
    --figma-navbar-social-border:    #ffffff;
    --figma-navbar-social-hover-bg:  #ffff00;
    --figma-navbar-join-bg:          #ffff00;
    --figma-navbar-join-color:       #000000;
    --figma-navbar-join-border:      #ffff00;
    --figma-navbar-join-shadow:      none;

    /* ===== HOMEPAGE TOKENS ===== */
    --figma-home-header-bg:              #000000;
    --figma-home-header-border:          #ffff00;
    --figma-home-header-shine:           transparent;
    --figma-home-title-gradient:         none;
    --figma-home-title-glow:             transparent;
    --figma-home-stats-bg:               #111111;
    --figma-home-stats-dark-bg:          #000000;
    --figma-home-stats-border:           #ffffff;
    --figma-home-stat-number-color:      #ffff00;
    --figma-home-stat-menu-bg:           #000000;
    --figma-home-stat-menu-border:       #ffffff;
    --figma-home-stat-menu-hover:        #ffff00;
    --figma-home-stat-menu-accent:       #ffff00;
    --figma-home-quicklinks-bg:          #000000;
    --figma-home-quicklinks-border:      #ffffff;
    --figma-home-quicklink-bg:           #000000;
    --figma-home-quicklink-border:       #ffffff;
    --figma-home-quicklink-hover-bg:     #ffff00;
    --figma-home-quicklink-hover-border: #ffff00;
    --figma-home-quicklink-count-bg:     #ffff00;
    --figma-home-quicklink-count-color:  #000000;
    --figma-home-quicklink-primary-bg:   #000000;
    --figma-home-quicklink-primary-border: #ffff00;
    --figma-home-rotating-bg:            #000000;
    --figma-home-rotating-border:        #ffffff;
    --figma-home-rotating-shimmer:       transparent;
    --figma-home-slideshow-bg:           #000000;
    --figma-home-cta-bg:                 #000000;
    --figma-home-cta-border:             #ffff00;
}

/* ── High Contrast: force solid borders, remove all decoration ── */
html[data-theme="highcontrast"] body.figma-theme .figma-card,
html[data-theme="highcontrast"] body.figma-theme .figma-resource-card,
html[data-theme="highcontrast"] body.figma-theme .card {
    background:   #000000 !important;
    border:       2px solid #ffffff !important;
    box-shadow:   none !important;
    backdrop-filter: none !important;
}

html[data-theme="highcontrast"] body.figma-theme .figma-card:hover,
html[data-theme="highcontrast"] body.figma-theme .figma-resource-card:hover,
html[data-theme="highcontrast"] body.figma-theme .card:hover {
    border-color: #ffff00 !important;
    box-shadow:   none !important;
    filter:       none !important;
}

html[data-theme="highcontrast"] body.figma-theme .btn-primary,
html[data-theme="highcontrast"] body.figma-theme .figma-btn-primary {
    background:  #ffff00 !important;
    color:       #000000 !important;
    border:      2px solid #ffff00 !important;
    box-shadow:  none !important;
    font-weight: 700 !important;
}

html[data-theme="highcontrast"] body.figma-theme .gold-foil-text {
    background:              none !important;
    -webkit-text-fill-color: #ffff00 !important;
    filter:                  none !important;
    color: #ffff00;
}

/* ===================================================================
   FOREST THEME — teal/earthy, natural greens, organic depth
   =================================================================== */
html[data-theme="forest"] {
    --figma-bg-navbar:        rgba(6, 14, 7, 0.97);
    --figma-border-width:     1px;
    --figma-progress-fill:    linear-gradient(90deg, #164d2c 0%, #26794a 52.88%, #34a05a 100%);
    --figma-card-blur:        blur(14px);
    --figma-card-shadow:      0 8px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(52,160,90,0.18);
    --figma-card-bg:          rgba(18, 40, 20, 0.65);
    --figma-resource-card-bg:            radial-gradient(61.27% 128.85% at 100% 0%, rgba(52,160,90,0.2) 0%, rgba(0,0,0,0) 100%), rgba(8,18,9,0.95);
    --figma-resource-card-border:        rgba(52, 160, 90, 0.25);
    --figma-resource-card-footer-bg:     rgba(12, 28, 14, 0.9);
    --figma-resource-card-footer-border: rgba(52, 160, 90, 0.40);
    --figma-btn-primary-bg:       #34a05a;
    --figma-btn-primary-bg-hover: #26794a;
    --figma-btn-primary-text:     #ffffff;
    --figma-input-bg:           rgba(8, 18, 9, 0.98);
    --figma-input-border:       rgba(52, 160, 90, 0.30);
    --figma-input-focus-border: rgba(52, 160, 90, 0.80);
    --figma-input-focus-shadow: rgba(52, 160, 90, 0.18);
    --figma-radius-sm:   8px; --figma-radius-md:  16px;
    --figma-radius-lg:  20px; --figma-radius-xl:  24px;
    --figma-heading-weight:  600;
    --figma-heading-spacing: 0.01em;

    /* Navbar: earthy glass — green tint, frosted, pill links */
    --figma-navbar-bg:               rgba(6, 14, 7, 0.94);
    --figma-navbar-backdrop:         blur(24px) saturate(160%);
    --figma-navbar-border-thickness: 2px;
    --figma-navbar-border-color:     rgba(52, 160, 90, 0.45);
    --figma-navbar-top-color:        rgba(52, 160, 90, 0.50);
    --figma-navbar-link-color:       rgba(163, 230, 180, 0.88);
    --figma-navbar-link-hover-bg:    rgba(52, 160, 90, 0.18);
    --figma-navbar-link-hover-color: #e6f7ed;
    --figma-navbar-link-active-bg:   rgba(52, 160, 90, 0.28);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: #34a05a;
    --figma-navbar-dropdown-bg:      rgba(6, 14, 7, 0.99);
    --figma-navbar-dropdown-border:  rgba(52, 160, 90, 0.22);
    --figma-navbar-dropdown-item-hover-bg:    rgba(52, 160, 90, 0.18);
    --figma-navbar-dropdown-item-hover-color: #e6f7ed;
    --figma-navbar-toggler-bg:       rgba(52, 160, 90, 0.12);
    --figma-navbar-toggler-border:   rgba(52, 160, 90, 0.35);
    --figma-navbar-toggler-icon:     rgba(163, 230, 180, 0.95);
    --figma-navbar-mobile-bg:        rgba(6, 14, 7, 0.99);
    --figma-navbar-mobile-border:    rgba(52, 160, 90, 0.35);
    --figma-navbar-mobile-shadow:    0 16px 48px rgba(0, 30, 10, 0.55), 0 0 0 1px rgba(52,160,90,0.15);
    --figma-navbar-seg-bg:           rgba(52, 160, 90, 0.10);
    --figma-navbar-seg-border:       rgba(52, 160, 90, 0.25);
    --figma-navbar-seg-active-bg:    #34a05a;
    --figma-navbar-seg-active-color: #ffffff;
    --figma-navbar-social-bg:        rgba(52, 160, 90, 0.10);
    --figma-navbar-social-border:    rgba(52, 160, 90, 0.25);
    --figma-navbar-social-hover-bg:  #34a05a;
    --figma-navbar-join-bg:          #34a05a;
    --figma-navbar-join-color:       #ffffff;
    --figma-navbar-join-border:      transparent;
    --figma-navbar-join-shadow:      0 2px 16px rgba(52, 160, 90, 0.45);

    /* homepage */
    --figma-home-header-bg:          #081209;
    --figma-home-header-border:      rgba(52, 160, 90, 0.80);
    --figma-home-header-shine:       rgba(52, 160, 90, 0.50);
    --figma-home-title-gradient:     linear-gradient(135deg, rgba(86,196,120,0.9) 0%, rgba(163,196,122,1) 25%, rgba(52,160,90,0.9) 50%, rgba(163,196,122,1) 75%, rgba(86,196,120,0.9) 100%);
    --figma-home-title-glow:         rgba(52, 160, 90, 0.60);
    --figma-home-stats-bg:           rgba(12, 28, 14, 0.95);
    --figma-home-stats-dark-bg:      rgba(8, 18, 9, 0.99);
    --figma-home-stats-border:       rgba(52, 160, 90, 0.18);
    --figma-home-stat-number-color:  #86efac;
    --figma-home-stat-menu-bg:       rgba(6, 14, 7, 0.99);
    --figma-home-stat-menu-border:   rgba(52, 160, 90, 0.28);
    --figma-home-stat-menu-hover:    rgba(52, 160, 90, 0.14);
    --figma-home-stat-menu-accent:   rgba(163, 196, 122, 0.9);
    --figma-home-quicklinks-bg:      rgba(12, 28, 14, 0.75);
    --figma-home-quicklinks-border:  rgba(52, 160, 90, 0.20);
    --figma-home-quicklink-bg:       rgba(52, 160, 90, 0.07);
    --figma-home-quicklink-border:   rgba(52, 160, 90, 0.20);
    --figma-home-quicklink-hover-bg: rgba(52, 160, 90, 0.20);
    --figma-home-quicklink-hover-border: rgba(52, 160, 90, 0.50);
    --figma-home-quicklink-count-bg:  rgba(163, 196, 122, 0.20);
    --figma-home-quicklink-count-color: rgba(163, 196, 122, 1);
    --figma-home-quicklink-primary-bg: rgba(163, 196, 122, 0.10);
    --figma-home-quicklink-primary-border: rgba(163, 196, 122, 0.30);
    --figma-home-rotating-bg:        rgba(52, 160, 90, 0.10);
    --figma-home-rotating-border:    rgba(52, 160, 90, 0.30);
    --figma-home-rotating-shimmer:   rgba(52, 160, 90, 0.30);
    --figma-home-slideshow-bg:       radial-gradient(61.27% 128.85% at 100% 0%, rgba(52,160,90,0.08) 0%, rgba(0,0,0,0) 100%), rgba(8,18,9,0.55);
    --figma-home-cta-bg:             rgba(6, 14, 7, 0.97);
    --figma-home-cta-border:         rgba(52, 160, 90, 0.70);
}

/* ── Neon ── cyberpunk, full glow, electric on black ── */
html[data-theme="neon"] {
    --figma-bg-navbar:     rgba(0, 0, 0, 0.95);
    --figma-gradient-card-primary: radial-gradient(23.21% 88.82% at 100% 100%, rgba(255,0,204,0.18) 0%, rgba(0,0,0,0) 100%),
                                   radial-gradient(20.72% 64.91% at 0% 0%, rgba(0,255,247,0.12) 0%, rgba(0,0,0,0) 100%),
                                   rgba(0,0,0,0.85);
    --figma-gradient-card-gold: radial-gradient(42.6% 353.85% at 100% 0%, rgba(0,255,247,0.18) 0%, rgba(0,0,0,0) 100%),
                                rgba(0,0,0,0.85);
    --figma-btn-primary-text:     #000000;
    --figma-btn-primary-bg:       #ff00cc;
    --figma-btn-primary-bg-hover: #cc0099;
    --figma-border-width:  1px;
    --figma-progress-bg:   rgba(255, 0, 204, 0.08);
    --figma-progress-fill: linear-gradient(90deg, #660050 0%, #cc0099 52.88%, #ff00cc 100%);
    --figma-card-shadow:       0 0 12px rgba(255, 0, 204, 0.35), 0 0 32px rgba(255, 0, 204, 0.15), 0 0 0 1px rgba(255, 0, 204, 0.30);
    --figma-card-blur:         none;
    --figma-card-border-style: solid;
    --figma-card-bg:           rgba(0, 0, 0, 0.85);
    --figma-resource-card-bg:            radial-gradient(61.27% 128.85% at 100% 0%, rgba(255,0,204,0.22) 0%, rgba(0,0,0,0) 100%), #000000;
    --figma-resource-card-border:        rgba(255, 0, 204, 0.50);
    --figma-resource-card-footer-bg:     radial-gradient(42.6% 353.85% at 100% 0%, rgba(0,255,247,0.12) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.85);
    --figma-resource-card-footer-border: rgba(0, 255, 247, 0.45);
    --figma-input-bg:           rgba(0, 0, 0, 1);
    --figma-input-border:       rgba(255, 0, 204, 0.45);
    --figma-input-text:         #ffffff;
    --figma-input-placeholder:  rgba(255, 0, 204, 0.40);
    --figma-input-focus-border: #ff00cc;
    --figma-input-focus-shadow: rgba(255, 0, 204, 0.30);
    --figma-font-primary:    'Inter', system-ui, sans-serif;
    --figma-font-secondary:  'Inter', system-ui, sans-serif;
    --figma-font-heading:    'Manrope', system-ui, sans-serif;
    --figma-heading-weight:  700;
    --figma-heading-spacing: 0.03em;
    --figma-radius-sm:  3px; --figma-radius-md:   6px;
    --figma-radius-lg:  8px; --figma-radius-xl:  10px;
    --figma-shadow-icon:         drop-shadow(0 0 10px rgba(255, 0, 204, 0.9));
    --figma-backdrop-blur:       none;
    --figma-backdrop-blur-light: none;

    --figma-navbar-bg:               rgba(0, 0, 0, 0.97);
    --figma-navbar-backdrop:         blur(8px);
    --figma-navbar-border-thickness: 2px;
    --figma-navbar-border-color:     #ff00cc;
    --figma-navbar-top-color:        rgba(0, 255, 247, 0.6);
    --figma-navbar-link-color:       rgba(255, 180, 240, 0.90);
    --figma-navbar-link-hover-bg:    rgba(255, 0, 204, 0.18);
    --figma-navbar-link-hover-color: #ff00cc;
    --figma-navbar-link-active-bg:   rgba(255, 0, 204, 0.28);
    --figma-navbar-link-active-color: #ff00cc;
    --figma-navbar-active-indicator: #ff00cc;
    --figma-navbar-dropdown-bg:      rgba(0, 0, 0, 1);
    --figma-navbar-dropdown-border:  rgba(255, 0, 204, 0.40);
    --figma-navbar-dropdown-item-hover-bg:    rgba(255, 0, 204, 0.18);
    --figma-navbar-dropdown-item-hover-color: #ff00cc;
    --figma-navbar-toggler-bg:       rgba(255, 0, 204, 0.10);
    --figma-navbar-toggler-border:   rgba(255, 0, 204, 0.50);
    --figma-navbar-toggler-icon:     rgba(255, 180, 240, 0.95);
    --figma-navbar-mobile-bg:        rgba(0, 0, 0, 1);
    --figma-navbar-mobile-border:    rgba(255, 0, 204, 0.50);
    --figma-navbar-mobile-shadow:    0 0 40px rgba(255, 0, 204, 0.25), 0 0 0 1px rgba(255,0,204,0.25);
    --figma-navbar-seg-bg:           rgba(255, 0, 204, 0.08);
    --figma-navbar-seg-border:       rgba(255, 0, 204, 0.35);
    --figma-navbar-seg-active-bg:    #ff00cc;
    --figma-navbar-seg-active-color: #000000;
    --figma-navbar-social-bg:        rgba(255, 0, 204, 0.08);
    --figma-navbar-social-border:    rgba(255, 0, 204, 0.35);
    --figma-navbar-social-hover-bg:  #ff00cc;
    --figma-navbar-join-bg:          #ff00cc;
    --figma-navbar-join-color:       #000000;
    --figma-navbar-join-border:      transparent;
    --figma-navbar-join-shadow:      0 0 12px rgba(255, 0, 204, 0.7), 0 0 24px rgba(255, 0, 204, 0.35);

    --figma-home-header-bg:            #000000;
    --figma-home-header-border:        #ff00cc;
    --figma-home-header-shine:         rgba(0, 255, 247, 0.7);
    --figma-home-title-gradient:       linear-gradient(135deg, rgba(255,0,204,1) 0%, rgba(255,100,220,1) 25%, rgba(0,255,247,0.9) 50%, rgba(255,100,220,1) 75%, rgba(255,0,204,1) 100%);
    --figma-home-title-glow:           rgba(255, 0, 204, 0.8);
    --figma-home-stats-bg:             rgba(5, 0, 10, 0.98);
    --figma-home-stats-dark-bg:        rgba(0, 0, 0, 1);
    --figma-home-stats-border:         rgba(255, 0, 204, 0.25);
    --figma-home-stat-number-color:    #ff00cc;
    --figma-home-stat-menu-bg:         rgba(0, 0, 0, 1);
    --figma-home-stat-menu-border:     rgba(255, 0, 204, 0.40);
    --figma-home-stat-menu-hover:      rgba(255, 0, 204, 0.14);
    --figma-home-stat-menu-accent:     #00fff7;
    --figma-home-quicklinks-bg:        rgba(0, 0, 0, 0.8);
    --figma-home-quicklinks-border:    rgba(255, 0, 204, 0.25);
    --figma-home-quicklink-bg:         rgba(255, 0, 204, 0.06);
    --figma-home-quicklink-border:     rgba(255, 0, 204, 0.30);
    --figma-home-quicklink-hover-bg:   rgba(255, 0, 204, 0.18);
    --figma-home-quicklink-hover-border: #ff00cc;
    --figma-home-quicklink-count-bg:   rgba(0, 255, 247, 0.18);
    --figma-home-quicklink-count-color: #00fff7;
    --figma-home-quicklink-primary-bg: rgba(0, 255, 247, 0.10);
    --figma-home-quicklink-primary-border: rgba(0, 255, 247, 0.40);
    --figma-home-rotating-bg:          rgba(255, 0, 204, 0.10);
    --figma-home-rotating-border:      rgba(255, 0, 204, 0.40);
    --figma-home-rotating-shimmer:     rgba(255, 0, 204, 0.40);
    --figma-home-slideshow-bg:         radial-gradient(61.27% 128.85% at 100% 0%, rgba(255,0,204,0.10) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.7);
    --figma-home-cta-bg:               rgba(0, 0, 0, 0.98);
    --figma-home-cta-border:           #ff00cc;

    --figma-status-success-bg:     rgba(0,   255, 247, 0.12);
    --figma-status-success-border: rgba(0,   255, 247, 0.55);
    --figma-status-success-text:   #00fff7;
    --figma-status-warning-bg:     rgba(255, 220,   0, 0.12);
    --figma-status-warning-border: rgba(255, 220,   0, 0.55);
    --figma-status-warning-text:   #ffdc00;
    --figma-status-danger-bg:      rgba(255,   0, 204, 0.12);
    --figma-status-danger-border:  rgba(255,   0, 204, 0.55);
    --figma-status-danger-text:    #ff00cc;
    --figma-status-info-bg:        rgba(180,  80, 255, 0.12);
    --figma-status-info-border:    rgba(180,  80, 255, 0.55);
    --figma-status-info-text:      #b450ff;
}

/* ── Neon: extra glow rules ── */
html[data-theme="neon"] body.figma-theme .figma-card,
html[data-theme="neon"] body.figma-theme .figma-resource-card,
html[data-theme="neon"] body.figma-theme .card {
    box-shadow: 0 0 8px rgba(255, 0, 204, 0.40),
                0 0 24px rgba(255, 0, 204, 0.18),
                0 0 0 1px rgba(255, 0, 204, 0.35) !important;
}
html[data-theme="neon"] body.figma-theme .figma-card:hover,
html[data-theme="neon"] body.figma-theme .figma-resource-card:hover,
html[data-theme="neon"] body.figma-theme .card:hover {
    box-shadow: 0 0 16px rgba(255, 0, 204, 0.70),
                0 0 48px rgba(255, 0, 204, 0.28),
                0 0 0 1px #ff00cc !important;
    filter: brightness(1.08);
}
html[data-theme="neon"] body.figma-theme .btn-primary,
html[data-theme="neon"] body.figma-theme .figma-btn-primary {
    box-shadow: 0 0 10px rgba(255, 0, 204, 0.7), 0 0 20px rgba(255, 0, 204, 0.35) !important;
    text-shadow: 0 0 8px rgba(255, 0, 204, 0.6);
}
html[data-theme="neon"] body.figma-theme .btn-primary:hover,
html[data-theme="neon"] body.figma-theme .figma-btn-primary:hover {
    box-shadow: 0 0 18px rgba(255, 0, 204, 1), 0 0 36px rgba(255, 0, 204, 0.5) !important;
}
html[data-theme="neon"] body.figma-theme h1,
html[data-theme="neon"] body.figma-theme h2,
html[data-theme="neon"] body.figma-theme h3 {
    text-shadow: 0 0 12px rgba(255, 0, 204, 0.55);
}
html[data-theme="neon"] body.figma-theme input.form-control:focus,
html[data-theme="neon"] body.figma-theme textarea.form-control:focus,
html[data-theme="neon"] body.figma-theme select.form-select:focus {
    box-shadow: 0 0 0 2px #ff00cc, 0 0 12px rgba(255, 0, 204, 0.45) !important;
}

/* ===================================================================
   MUNICIPAL / SIMPLE THEMES — derived tokens.
   Palette lives in tokens.css; these are the app-layer derived tokens
   (radii, fonts, navbar, inputs) that base.css :root would otherwise win.
   =================================================================== */
html[data-theme="municipal"] {
    --figma-bg-navbar:     var(--muni-navy);
    --figma-surface:       #f2f4f6;
    --figma-input-bg-focus: #ffffff;
    --header-bg:           #ffffff;
    --figma-border-width:  1px;
    --figma-radius-sm:   3px;
    --figma-radius-md:   4px;
    --figma-radius-lg:   6px;
    --figma-radius-xl:   8px;
    --figma-radius-full: 999px;
    --figma-card-shadow: 0 1px 3px rgba(27,42,74,0.10);
    --figma-card-blur:   none;
    --figma-card-bg:     #ffffff;
    --figma-font-primary:   Georgia, 'Times New Roman', serif;
    --figma-font-secondary: 'Segoe UI', Tahoma, system-ui, sans-serif;
    --figma-font-heading:   Georgia, 'Times New Roman', serif;
    --figma-heading-weight:  700;
    --figma-heading-spacing: 0.01em;
    --figma-btn-primary-bg:       var(--muni-red);
    --figma-btn-primary-bg-hover: var(--muni-red-dark);
    --figma-btn-primary-text:     #ffffff;
    --figma-input-bg:     #ffffff;
    --figma-input-border: #c3c9d2;
    --figma-input-text:   var(--muni-ink);
    --figma-input-placeholder: #8a92a0;
    --figma-gradient-card-primary: #ffffff;
    --figma-gradient-card-red:     #ffffff;
    --figma-gradient-card-gold:    #ffffff;
    --figma-home-header-bg:        #ffffff;
    --figma-navbar-bg:               var(--muni-navy);
    --figma-navbar-backdrop:         none;
    --figma-navbar-border-bottom:    3px solid var(--muni-gold);
    --figma-navbar-border-color:     var(--muni-gold);
    --figma-navbar-border-thickness: 3px;
    --figma-navbar-link-color:       rgba(255,255,255,0.92);
    --figma-navbar-link-hover-bg:    rgba(255,255,255,0.10);
    --figma-navbar-link-hover-color: #ffffff;
    --figma-navbar-link-active-bg:   var(--muni-red);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: var(--muni-gold);
    --figma-navbar-dropdown-bg:      var(--muni-navy-dark);
    --figma-navbar-dropdown-border:  rgba(255,255,255,0.15);
    --figma-navbar-dropdown-item-hover-bg:    rgba(255,255,255,0.10);
    --figma-navbar-dropdown-item-hover-color: #ffffff;
    --figma-navbar-toggler-bg:       rgba(255,255,255,0.08);
    --figma-navbar-toggler-border:   rgba(255,255,255,0.30);
    --figma-navbar-toggler-icon:     #ffffff;
    --figma-navbar-mobile-bg:        var(--muni-navy-dark);
    --figma-navbar-mobile-border:    rgba(255,255,255,0.20);
    --figma-navbar-mobile-shadow:    0 8px 24px rgba(0,0,0,0.25);
    --figma-navbar-seg-bg:           rgba(255,255,255,0.08);
    --figma-navbar-seg-border:       rgba(255,255,255,0.20);
    --figma-navbar-seg-active-bg:    var(--muni-red);
    --figma-navbar-social-bg:        rgba(255,255,255,0.08);
    --figma-navbar-social-border:    rgba(255,255,255,0.20);
    --figma-navbar-social-hover-bg:  var(--muni-red);
    --figma-navbar-join-bg:          var(--muni-red);
    --figma-navbar-join-shadow:      none;
    --figma-transition-fast:   150ms ease;
    --figma-transition-normal: 250ms ease;
    --figma-backdrop-blur:       none;
    --figma-backdrop-blur-light: none;
}

html[data-theme="simple"] {
    --figma-bg-navbar:     var(--smp-blue);
    --figma-surface:       var(--smp-panel);
    --figma-input-bg-focus: #ffffff;
    --header-bg:           #ffffff;
    --figma-border-width:  1px;
    --figma-radius-sm:   2px;
    --figma-radius-md:   3px;
    --figma-radius-lg:   4px;
    --figma-radius-xl:   4px;
    --figma-radius-full: 999px;
    --figma-card-shadow: none;
    --figma-card-blur:   none;
    --figma-card-bg:     #ffffff;
    --figma-font-primary:   'Segoe UI', Arial, Helvetica, sans-serif;
    --figma-font-secondary: 'Segoe UI', Arial, Helvetica, sans-serif;
    --figma-font-heading:   'Segoe UI', Arial, Helvetica, sans-serif;
    --figma-heading-weight:  600;
    --figma-heading-spacing: 0;
    --figma-btn-primary-bg:       var(--smp-blue);
    --figma-btn-primary-bg-hover: var(--smp-blue-dark);
    --figma-btn-primary-text:     #ffffff;
    --figma-input-bg:     #ffffff;
    --figma-input-border: #b9c0c8;
    --figma-input-text:   var(--smp-ink);
    --figma-input-placeholder: #8a9099;
    --figma-gradient-card-primary: #ffffff;
    --figma-gradient-card-red:     #ffffff;
    --figma-gradient-card-gold:    #ffffff;
    --figma-home-header-bg:        #ffffff;
    --figma-navbar-bg:               var(--smp-blue);
    --figma-navbar-backdrop:         none;
    --figma-navbar-border-bottom:    none;
    --figma-navbar-link-color:       rgba(255,255,255,0.95);
    --figma-navbar-link-hover-bg:    rgba(255,255,255,0.12);
    --figma-navbar-link-hover-color: #ffffff;
    --figma-navbar-link-active-bg:   var(--smp-blue-dark);
    --figma-navbar-link-active-color: #ffffff;
    --figma-navbar-active-indicator: #ffffff;
    --figma-navbar-dropdown-bg:      #ffffff;
    --figma-navbar-dropdown-border:  var(--smp-border);
    --figma-navbar-dropdown-item-hover-bg:    var(--smp-panel);
    --figma-navbar-dropdown-item-hover-color: var(--smp-ink);
    --figma-navbar-toggler-bg:       rgba(255,255,255,0.10);
    --figma-navbar-toggler-border:   rgba(255,255,255,0.35);
    --figma-navbar-toggler-icon:     #ffffff;
    --figma-navbar-mobile-bg:        var(--smp-blue-dark);
    --figma-navbar-mobile-border:    rgba(255,255,255,0.25);
    --figma-navbar-mobile-shadow:    0 8px 24px rgba(0,0,0,0.2);
    --figma-navbar-seg-bg:           rgba(255,255,255,0.10);
    --figma-navbar-seg-border:       rgba(255,255,255,0.25);
    --figma-navbar-seg-active-bg:    var(--smp-blue-dark);
    --figma-navbar-social-bg:        rgba(255,255,255,0.10);
    --figma-navbar-social-border:    rgba(255,255,255,0.25);
    --figma-navbar-social-hover-bg:  var(--smp-blue-dark);
    --figma-navbar-join-bg:          var(--smp-blue-dark);
    --figma-navbar-join-shadow:      none;
    --figma-transition-fast:   100ms ease;
    --figma-transition-normal: 150ms ease;
    --figma-backdrop-blur:       none;
    --figma-backdrop-blur-light: none;
}

/* ===================================================================
   LIGHT THEME — clean white, warm paper, brand red preserved
   =================================================================== */

/* The ribbon uses deep red (#8b0000) and white text — works on both themes.
   In light mode keep the same deep red so it reads as "serious / urgent". */
html[data-theme="light"] .emergency-ribbon {
    background: #8b0000;
}

/* Keep the ribbon's text/icon white in light mode — overrides the generic
   light-theme span/i.bi color rules. */
html[data-theme="light"] body.figma-theme .emergency-ribbon-inner,
html[data-theme="light"] body.figma-theme .emergency-ribbon-text,
html[data-theme="light"] body.figma-theme .emergency-ribbon-icon,
html[data-theme="light"] body.figma-theme .emergency-ribbon-inner i.bi {
    color: #fff !important;
}

html[data-theme="light"] {
    /* ===== BACKGROUNDS ===== */
    --figma-bg-navbar:     rgba(255, 255, 255, 0.88);

    /* ===== GRADIENTS ===== */
    --figma-gradient-card-primary: radial-gradient(23.21% 88.82% at 100% 100%, rgba(164,32,13,0.07) 0%, rgba(255,255,255,0) 100%),
                                   radial-gradient(20.72% 64.91% at 0% 0%, rgba(164,32,13,0.07) 0%, rgba(255,255,255,0) 100%),
                                   rgba(255,255,255,0.9);
    --figma-gradient-card-red:  var(--figma-gradient-card-primary);
    --figma-gradient-card-gold: radial-gradient(42.6% 353.85% at 100% 0%, rgba(180,140,0,0.08) 0%, rgba(255,255,255,0) 100%),
                                rgba(255,255,255,0.9);

    /* ===== BRAND COLORS — red preserved, gold darkened for contrast ===== */

    /* ===== BUTTONS ===== */
    --figma-btn-primary-text:     #ffffff;
    --figma-btn-primary-bg:       #A4200D;
    --figma-btn-primary-bg-hover: #741709;

    /* ===== TEXT ===== */

    /* ===== BORDERS ===== */
    --figma-border-width:  1px;

    /* ===== PROGRESS ===== */
    --figma-progress-bg:   rgba(0, 0, 0, 0.06);
    --figma-progress-fill: linear-gradient(90deg, #3E0C05 0%, #741709 52.88%, #A4200D 100%);

    /* ===== CARDS ===== */
    --figma-card-shadow:       0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
    --figma-card-blur:         none;
    --figma-card-border-style: solid;
    --figma-card-bg:           rgba(255, 255, 255, 0.9);

    /* ===== RESOURCE CARDS ===== */
    --figma-resource-card-bg:            radial-gradient(61.27% 128.85% at 100% 0%, rgba(164,32,13,0.06) 0%, rgba(255,255,255,0) 100%), #ffffff;
    --figma-resource-card-border:        rgba(0, 0, 0, 0.12);
    --figma-resource-card-footer-bg:     radial-gradient(42.6% 353.85% at 100% 0%, rgba(164,32,13,0.05) 0%, rgba(255,255,255,0) 100%), rgba(248,246,244,0.9);
    --figma-resource-card-footer-border: rgba(164, 32, 13, 0.20);

    /* ===== INPUTS ===== */
    --figma-input-bg:           #ffffff;
    --figma-input-border:       rgba(0, 0, 0, 0.18);
    --figma-input-text:         #111111;
    --figma-input-placeholder:  rgba(17, 17, 17, 0.38);
    --figma-input-focus-border: rgba(164, 32, 13, 0.60);
    --figma-input-focus-shadow: rgba(164, 32, 13, 0.10);

    /* ===== TYPOGRAPHY ===== */
    --figma-heading-weight:  700;
    --figma-heading-spacing: 0em;

    /* ===== BORDER RADIUS — same as default ===== */
    --figma-radius-sm:    6px;
    --figma-radius-md:   12px;
    --figma-radius-lg:   12px;
    --figma-radius-xl:   16px;
    --figma-radius-full: 1000px;

    /* ===== EFFECTS ===== */
    --figma-shadow-icon:         drop-shadow(0px 0px 8px rgba(164, 32, 13, 0.18));
    --figma-backdrop-blur:       blur(24px);
    --figma-backdrop-blur-light: blur(7.2px);

    /* ===== NAVBAR ===== */
    --figma-navbar-bg:               rgba(255, 255, 255, 0.88);
    --figma-navbar-backdrop:         blur(24px) saturate(180%);
    --figma-navbar-border-bottom:    1px solid rgba(0, 0, 0, 0.10);
    --figma-navbar-border-thickness: 1px;
    --figma-navbar-border-color:     rgba(0, 0, 0, 0.10);
    --figma-navbar-top-stripe:       none;
    --figma-navbar-top-color:        transparent;
    --figma-navbar-link-color:       rgba(17, 17, 17, 0.80);
    --figma-navbar-link-hover-bg:    rgba(164, 32, 13, 0.07);
    --figma-navbar-link-hover-color: #A4200D;
    --figma-navbar-link-active-bg:   rgba(164, 32, 13, 0.10);
    --figma-navbar-link-active-color: #A4200D;
    --figma-navbar-active-indicator: #A4200D;
    --figma-navbar-dropdown-bg:      rgba(255, 255, 255, 0.98);
    --figma-navbar-dropdown-border:  rgba(0, 0, 0, 0.10);
    --figma-navbar-dropdown-item-hover-bg:    rgba(164, 32, 13, 0.07);
    --figma-navbar-dropdown-item-hover-color: #A4200D;
    --figma-navbar-toggler-bg:       rgba(0, 0, 0, 0.04);
    --figma-navbar-toggler-border:   rgba(0, 0, 0, 0.15);
    --figma-navbar-toggler-icon:     rgba(17, 17, 17, 0.85);
    --figma-navbar-mobile-bg:        rgba(255, 255, 255, 0.99);
    --figma-navbar-mobile-border:    rgba(164, 32, 13, 0.20);
    --figma-navbar-mobile-shadow:    0 12px 40px rgba(0, 0, 0, 0.12);
    --figma-navbar-seg-bg:           rgba(0, 0, 0, 0.05);
    --figma-navbar-seg-border:       rgba(0, 0, 0, 0.10);
    --figma-navbar-seg-active-bg:    #A4200D;
    --figma-navbar-seg-active-color: #ffffff;
    --figma-navbar-social-bg:        rgba(0, 0, 0, 0.05);
    --figma-navbar-social-border:    rgba(0, 0, 0, 0.12);
    --figma-navbar-social-hover-bg:  #A4200D;
    --figma-navbar-join-bg:          #A4200D;
    --figma-navbar-join-color:       #ffffff;
    --figma-navbar-join-border:      transparent;
    --figma-navbar-join-shadow:      0 2px 12px rgba(164, 32, 13, 0.25);

    /* ===== HOMEPAGE TOKENS ===== */
    --figma-home-header-bg:              #ffffff;
    --figma-home-header-border:          rgba(164, 32, 13, 0.70);
    --figma-home-header-shine:           rgba(212, 160, 23, 0.40);
    --figma-home-title-gradient:         linear-gradient(135deg, rgba(164,32,13,0.85) 0%, rgba(196,60,60,1) 25%, rgba(116,23,9,0.9) 50%, rgba(196,60,60,1) 75%, rgba(164,32,13,0.85) 100%);
    --figma-home-title-glow:             rgba(164, 32, 13, 0.25);
    --figma-home-stats-bg:               rgba(248, 246, 244, 0.97);
    --figma-home-stats-dark-bg:          rgba(240, 237, 234, 0.99);
    --figma-home-stats-border:           rgba(0, 0, 0, 0.08);
    --figma-home-stat-number-color:      #111111;
    --figma-home-stat-menu-bg:           rgba(255, 255, 255, 0.99);
    --figma-home-stat-menu-border:       rgba(0, 0, 0, 0.10);
    --figma-home-stat-menu-hover:        rgba(164, 32, 13, 0.06);
    --figma-home-stat-menu-accent:       rgba(154, 114, 0, 0.9);
    --figma-home-quicklinks-bg:          rgba(248, 246, 244, 0.90);
    --figma-home-quicklinks-border:      rgba(0, 0, 0, 0.08);
    --figma-home-quicklink-bg:           rgba(0, 0, 0, 0.03);
    --figma-home-quicklink-border:       rgba(0, 0, 0, 0.10);
    --figma-home-quicklink-hover-bg:     rgba(164, 32, 13, 0.07);
    --figma-home-quicklink-hover-border: rgba(164, 32, 13, 0.30);
    --figma-home-quicklink-count-bg:     rgba(154, 114, 0, 0.12);
    --figma-home-quicklink-count-color:  rgba(154, 114, 0, 1);
    --figma-home-quicklink-primary-bg:   rgba(154, 114, 0, 0.08);
    --figma-home-quicklink-primary-border: rgba(154, 114, 0, 0.25);
    --figma-home-rotating-bg:            rgba(139, 92, 246, 0.07);
    --figma-home-rotating-border:        rgba(139, 92, 246, 0.22);
    --figma-home-rotating-shimmer:       rgba(139, 92, 246, 0.18);
    --figma-home-slideshow-bg:           radial-gradient(61.27% 128.85% at 100% 0%, rgba(164,32,13,0.05) 0%, rgba(255,255,255,0) 100%), rgba(248,246,244,0.70);
    --figma-home-cta-bg:                 rgba(255, 255, 255, 0.97);
    --figma-home-cta-border:             rgba(164, 32, 13, 0.35);

    /* ===== STATUS TOKENS ===== */
    --figma-status-success-bg:     rgba(37,  99, 235, 0.08);
    --figma-status-success-border: rgba(37,  99, 235, 0.25);
    --figma-status-success-text:   #1d4ed8;
    --figma-status-warning-bg:     rgba(180, 95,   0, 0.08);
    --figma-status-warning-border: rgba(180, 95,   0, 0.25);
    --figma-status-warning-text:   #92400e;
    --figma-status-danger-bg:      rgba(164, 32,  13, 0.08);
    --figma-status-danger-border:  rgba(164, 32,  13, 0.25);
    --figma-status-danger-text:    #A4200D;
    --figma-status-info-bg:        rgba(8,  145, 178, 0.08);
    --figma-status-info-border:    rgba(8,  145, 178, 0.25);
    --figma-status-info-text:      #0e7490;
}

/* ── Light: force light surface on body and cards ── */
html[data-theme="light"] body.figma-theme {
    background-color: #f5f4f2;
    color: #111111 !important;
}

html[data-theme="light"] body.figma-theme .figma-card,
html[data-theme="light"] body.figma-theme .figma-resource-card,
html[data-theme="light"] body.figma-theme .card {
    background:      #ffffff !important;
    border-color:    rgba(0, 0, 0, 0.10) !important;
    box-shadow:      0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
}

html[data-theme="light"] body.figma-theme .figma-card:hover,
html[data-theme="light"] body.figma-theme .figma-resource-card:hover,
html[data-theme="light"] body.figma-theme .card:hover {
    border-color: rgba(164, 32, 13, 0.25) !important;
    box-shadow:   0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(164, 32, 13, 0.15) !important;
}

html[data-theme="light"] body.figma-theme .figma-card-footer {
    background:   rgba(248, 246, 244, 0.9) !important;
    border-color: rgba(164, 32, 13, 0.15) !important;
}

html[data-theme="light"] body.figma-theme .gold-foil-text {
    background:              linear-gradient(135deg, rgba(164,32,13,0.85) 0%, rgba(196,60,60,1) 25%, rgba(116,23,9,0.9) 50%, rgba(196,60,60,1) 75%, rgba(164,32,13,0.85) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip:         text !important;
    -webkit-text-fill-color: transparent !important;
    filter:                  drop-shadow(0 0 8px rgba(164, 32, 13, 0.20)) !important;
}

html[data-theme="light"] body.figma-theme h1,
html[data-theme="light"] body.figma-theme h2,
html[data-theme="light"] body.figma-theme h3,
html[data-theme="light"] body.figma-theme h4,
html[data-theme="light"] body.figma-theme h5 {
    color: #111111 !important;
}

html[data-theme="light"] body.figma-theme p,
html[data-theme="light"] body.figma-theme li,
html[data-theme="light"] body.figma-theme span,
html[data-theme="light"] body.figma-theme td,
html[data-theme="light"] body.figma-theme th {
    color: #111111;
}

html[data-theme="light"] body.figma-theme .text-muted {
    color: rgba(17, 17, 17, 0.55) !important;
}

html[data-theme="light"] body.figma-theme input.form-control,
html[data-theme="light"] body.figma-theme textarea.form-control,
html[data-theme="light"] body.figma-theme select.form-select {
    background:   #ffffff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    color:        #111111 !important;
}

html[data-theme="light"] body.figma-theme input::placeholder,
html[data-theme="light"] body.figma-theme textarea::placeholder {
    color: rgba(17, 17, 17, 0.38) !important;
}

/* ── Light: status/badge colors — fix hardcoded light-text-on-dark patterns ── */
html[data-theme="light"] body.figma-theme .badge-submitted,
html[data-theme="light"] body.figma-theme .figma-badge-info {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.25);
    color: #1d4ed8;
}

html[data-theme="light"] body.figma-theme .badge-under-review,
html[data-theme="light"] body.figma-theme .figma-badge-warning {
    background: rgba(180, 95, 0, 0.10);
    border-color: rgba(180, 95, 0, 0.25);
    color: #92400e;
}

html[data-theme="light"] body.figma-theme .badge-approved,
html[data-theme="light"] body.figma-theme .badge-fulfilled,
html[data-theme="light"] body.figma-theme .figma-badge-success {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.25);
    color: #15803d;
}

html[data-theme="light"] body.figma-theme .badge-denied {
    background: rgba(164, 32, 13, 0.10);
    border-color: rgba(164, 32, 13, 0.25);
    color: #A4200D;
}

html[data-theme="light"] body.figma-theme .badge-default,
html[data-theme="light"] body.figma-theme .figma-badge-secondary,
html[data-theme="light"] body.figma-theme .badge-unassigned {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(17, 17, 17, 0.55);
}

html[data-theme="light"] body.figma-theme .badge-company {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.25);
    color: #1d4ed8;
}

html[data-theme="light"] body.figma-theme .badge-dept {
    background: rgba(164, 32, 13, 0.10);
    border-color: rgba(164, 32, 13, 0.25);
    color: #A4200D;
}

/* ── Light: table row dividers and hover — fix white-rgba-on-white ── */
html[data-theme="light"] body.figma-theme .figma-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] body.figma-theme .figma-table tbody tr {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

/* ── Light: empty state text — was rgba(255,255,255,0.5) ── */
html[data-theme="light"] body.figma-theme .empty-state {
    color: rgba(17, 17, 17, 0.45) !important;
}

/* ── Light: image fallback placeholder — was rgba(255,255,255,0.02) ── */
html[data-theme="light"] body.figma-theme .figma-card-image-fallback {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ===================================================================
   LIGHT THEME — GLOBAL INLINE STYLE OVERRIDES
   These !important rules beat hardcoded inline style="" attributes
   that contain rgba(255,255,255,...) or #111/#1a1a1a colors.
   =================================================================== */

/* ── Text elements: force dark text on all normal prose ── */
html[data-theme="light"] body.figma-theme p,
html[data-theme="light"] body.figma-theme li,
html[data-theme="light"] body.figma-theme small,
html[data-theme="light"] body.figma-theme strong,
html[data-theme="light"] body.figma-theme dt,
html[data-theme="light"] body.figma-theme dd,
html[data-theme="light"] body.figma-theme dl,
html[data-theme="light"] body.figma-theme h6,
html[data-theme="light"] body.figma-theme summary {
    color: #111111 !important;
}

/* td/th text */
html[data-theme="light"] body.figma-theme td,
html[data-theme="light"] body.figma-theme th {
    color: #111111 !important;
}

/* spans — override white-on-white, but restore Bootstrap badge colours below */
html[data-theme="light"] body.figma-theme span {
    color: #111111 !important;
}

/* labels */
html[data-theme="light"] body.figma-theme label {
    color: #111111 !important;
}

/* ── Bootstrap badge colour restoration ── */
html[data-theme="light"] body.figma-theme .badge.bg-primary   { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.bg-secondary { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.bg-success   { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.bg-danger    { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.bg-warning   { color: #212529 !important; }
html[data-theme="light"] body.figma-theme .badge.bg-info      { color: #212529 !important; }
html[data-theme="light"] body.figma-theme .badge.bg-dark      { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.bg-light     { color: #212529 !important; }
html[data-theme="light"] body.figma-theme .badge.text-bg-primary   { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.text-bg-success   { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.text-bg-danger    { color: #fff !important; }
html[data-theme="light"] body.figma-theme .badge.text-bg-secondary { color: #fff !important; }

/* ── Primary/danger button text stays white ── */
html[data-theme="light"] body.figma-theme .btn-primary,
html[data-theme="light"] body.figma-theme .btn-danger,
html[data-theme="light"] body.figma-theme .btn-success,
html[data-theme="light"] body.figma-theme .figma-btn-primary { color: #fff !important; }

/* ── figma-btn ghost: text + border adapt, bg keeps its value ── */
html[data-theme="light"] body.figma-theme .figma-btn:not(.figma-btn-primary):not(.btn-danger):not(.btn-success) {
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* ── Bootstrap .btn (non-primary variants) text ── */
html[data-theme="light"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* ── HR / dividers ── */
html[data-theme="light"] body.figma-theme hr {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* ── Table row borders ── */
html[data-theme="light"] body.figma-theme tr {
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── code and pre blocks: dark bg → light surface ── */
html[data-theme="light"] body.figma-theme pre,
html[data-theme="light"] body.figma-theme code {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #111111 !important;
}

/* ── .alert with inline white text ── */
html[data-theme="light"] body.figma-theme .alert {
    color: #111111 !important;
}
/* preserve success/danger/info alert Bootstrap colours */
html[data-theme="light"] body.figma-theme .alert-success { color: #0f5132 !important; }
html[data-theme="light"] body.figma-theme .alert-danger  { color: #842029 !important; }
html[data-theme="light"] body.figma-theme .alert-warning { color: #664d03 !important; }
html[data-theme="light"] body.figma-theme .alert-info    { color: #055160 !important; }

/* ── i.bi icons: muted dark instead of white ── */
html[data-theme="light"] body.figma-theme i.bi {
    color: rgba(17, 17, 17, 0.60) !important;
}
/* icons inside buttons/anchors stay the button colour */
html[data-theme="light"] body.figma-theme .btn-primary i.bi,
html[data-theme="light"] body.figma-theme .btn-danger i.bi,
html[data-theme="light"] body.figma-theme .btn-success i.bi,
html[data-theme="light"] body.figma-theme .figma-btn-primary i.bi { color: #fff !important; }
html[data-theme="light"] body.figma-theme .figma-btn:not(.figma-btn-primary) i.bi { color: inherit !important; }

/* ── Form controls: light bg + dark text (all figma-theme pages) ── */
html[data-theme="light"] body.figma-theme .form-label,
html[data-theme="light"] body.figma-theme .col-form-label { color: #111111 !important; font-weight: 500 !important; }

html[data-theme="light"] body.figma-theme .form-check-label { color: #111111 !important; }

html[data-theme="light"] body.figma-theme .form-text,
html[data-theme="light"] body.figma-theme small.form-text { color: rgba(17, 17, 17, 0.60) !important; }

html[data-theme="light"] body.figma-theme input.form-control,
html[data-theme="light"] body.figma-theme textarea.form-control,
html[data-theme="light"] body.figma-theme select.form-select {
    background:   #ffffff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    color:        #111111 !important;
}

html[data-theme="light"] body.figma-theme input.form-control::placeholder,
html[data-theme="light"] body.figma-theme textarea.form-control::placeholder {
    color: rgba(17, 17, 17, 0.38) !important;
}

html[data-theme="light"] body.figma-theme .form-check-input {
    background-color: #ffffff !important;
    border-color:     rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="light"] body.figma-theme .form-check-input:checked {
    background-color: var(--brand) !important;
    border-color:     var(--brand) !important;
}

/* ── Summary (accordion/details) ── */
html[data-theme="light"] body.figma-theme summary {
    color: #111111 !important;
}

/* ── modal-content background ── */
html[data-theme="light"] body.figma-theme .modal-content {
    background: #ffffff !important;
    color:      #111111 !important;
}
html[data-theme="light"] body.figma-theme .modal-header,
html[data-theme="light"] body.figma-theme .modal-footer {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* ── Delete buttons/confirm forms (red bg keeps white text) ── */
html[data-theme="light"] body.figma-theme button[style*="background:#dc3545"] span,
html[data-theme="light"] body.figma-theme button[style*="background:rgba(239,68,68"] span { color: #fff !important; }

/* ── Empty-state placeholder containers (dark bg → light) ── */
html[data-theme="light"] body.figma-theme [style*="background:rgba(255,255,255,0.03)"],
html[data-theme="light"] body.figma-theme [style*="background:rgba(255,255,255,.03)"],
html[data-theme="light"] body.figma-theme [style*="background:rgba(255,255,255,0.04)"],
html[data-theme="light"] body.figma-theme [style*="background:rgba(255,255,255,.04)"] {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ── table-responsive wrappers with hardcoded dark bg ── */
html[data-theme="light"] body.figma-theme [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] body.figma-theme [style*="background:rgba(0,0,0,.3)"],
html[data-theme="light"] body.figma-theme [style*="background:rgba(0,0,0,0.2)"],
html[data-theme="light"] body.figma-theme [style*="background:rgba(0,0,0,.2)"] {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ── Inline search/filter form containers with dark bg ── */
html[data-theme="light"] body.figma-theme form[style*="background:rgba(255,255,255,0.03)"],
html[data-theme="light"] body.figma-theme form[style*="background:rgba(255,255,255,.03)"],
html[data-theme="light"] body.figma-theme div[style*="background:rgba(255,255,255,0.03)"],
html[data-theme="light"] body.figma-theme div[style*="background:rgba(255,255,255,.03)"],
html[data-theme="light"] body.figma-theme div[style*="background:#111"],
html[data-theme="light"] body.figma-theme div[style*="background: #111"] {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
}

/* ── progress bar track (white-rgba → light grey) ── */
html[data-theme="light"] body.figma-theme [style*="background:rgba(255,255,255,0.08)"].progress,
html[data-theme="light"] body.figma-theme .progress[style*="background:rgba(255,255,255"] {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* ── dl.row color: white → dark ── */
html[data-theme="light"] body.figma-theme dl.row { color: #111111 !important; }

/* ===================================================================
   LIGHT THEME — .figma-* CLASS OVERRIDES
   Per-view <style> blocks redefine .figma-input / .figma-textarea /
   .figma-btn etc. with hardcoded dark colors and win by source order.
   These !important rules restore correct light-theme rendering for
   all ~82 affected views without editing each file individually.
   =================================================================== */

/* ── figma-input / figma-textarea / figma-input-file ── */
html[data-theme="light"] body.figma-theme .figma-input,
html[data-theme="light"] body.figma-theme .figma-textarea,
html[data-theme="light"] body.figma-theme .figma-input-file {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.18);
    color: #111111;
}

html[data-theme="light"] body.figma-theme .figma-input::placeholder,
html[data-theme="light"] body.figma-theme .figma-textarea::placeholder {
    color: rgba(17, 17, 17, 0.38);
}

html[data-theme="light"] body.figma-theme .figma-input:focus,
html[data-theme="light"] body.figma-theme .figma-textarea:focus {
    
    box-shadow: 0 0 0 3px rgba(164, 32, 13, 0.10);
    
}

/* ── figma-resource headings / subtitles ── */
html[data-theme="light"] body.figma-theme .figma-resource-title,
html[data-theme="light"] body.figma-theme .figma-card-title,
html[data-theme="light"] body.figma-theme .figma-section-title {
    color: #111111 !important;
}

html[data-theme="light"] body.figma-theme .figma-resource-subtitle {
    color: rgba(17, 17, 17, 0.60) !important;
}

/* ── figma-card surfaces ── */
html[data-theme="light"] body.figma-theme .figma-card-content {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ── figma-btn overrides (ghost variant already covered above;
       ensure bg:transparent doesn't inherit inline dark bg) ── */
html[data-theme="light"] body.figma-theme .figma-btn {
    background:   transparent !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    color:        #111111 !important;
}
html[data-theme="light"] body.figma-theme .figma-btn.figma-btn-primary {
    background:   #A4200D !important;
    border-color: #A4200D !important;
    color:        #ffffff !important;
}

/* ── figma-status-badge (generic) ── */
html[data-theme="light"] body.figma-theme .figma-status-badge {
    color: #111111;
}

/* ── figma-section-header / figma-table-header text ── */
html[data-theme="light"] body.figma-theme .figma-table th,
html[data-theme="light"] body.figma-theme .figma-table td {
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── figma-label / figma-form-label (per-view override of form-label) ── */
html[data-theme="light"] body.figma-theme .figma-form-label,
html[data-theme="light"] body.figma-theme .figma-label {
    color: #111111;
}

/* ── figma-form-text / helper text ── */
html[data-theme="light"] body.figma-theme .figma-form-text {
    color: rgba(17, 17, 17, 0.60);
}

/* ===================================================================
   LIGHT THEME — HOME PAGE HERO STATS BANNER
   The banner overlays a hero image so stat text must always be white.
   The outer items use rgba(255,255,255,0.08) background which becomes
   invisible on a white/light page bg — replace with a solid dark tint.
   =================================================================== */
html[data-theme="light"] body.figma-theme .hero-stats-banner {
    background: linear-gradient(to right,
        rgba(30, 30, 30, 0.82) 0%,
        rgba(30, 30, 30, 0.97) 33%,
        rgba(30, 30, 30, 0.97) 67%,
        rgba(30, 30, 30, 0.82) 100%) !important;
}

html[data-theme="light"] body.figma-theme .hero-stat-item.dark-bg {
    background: transparent !important;
}

html[data-theme="light"] body.figma-theme .hero-stat-number {
    color: rgba(255, 255, 255, 0.98) !important;
}

html[data-theme="light"] body.figma-theme .hero-stat-label {
    color: rgba(255, 255, 255, 0.80);
}

html[data-theme="light"] body.figma-theme a.hero-stat-link,
html[data-theme="light"] body.figma-theme a.hero-stat-link:hover {
    color: #ffffff !important;
}

/* ===================================================================
   LIGHT THEME — SHARED VIEW-LEVEL CLASS OVERRIDES
   Covers hardcoded dark-mode rgba(255,255,255,...) colours used in
   per-view <style> blocks across Announcements, AnnouncementFeed,
   AdminSettings, InformationRequest, IncidentsAdmin, and Donate pages.
   =================================================================== */

/* ── Election / Admin index badges ── */
html[data-theme="light"] body.figma-theme .active-badge {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #15803d !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
}
html[data-theme="light"] body.figma-theme .ended-badge {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.30);
}
html[data-theme="light"] body.figma-theme .synced-badge {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.25);
}

/* ── Delete page: status-badge variants ── */
html[data-theme="light"] body.figma-theme .status-badge.active {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.30);
}
html[data-theme="light"] body.figma-theme .status-badge.inactive {
    background: rgba(100, 116, 139, 0.10);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.25);
}

/* ── Delete page: warning banner (yellow → amber for light) ── */
html[data-theme="light"] body.figma-theme .delete-warning-banner {
    background: rgba(161, 98, 7, 0.10);
    border-color: rgba(161, 98, 7, 0.30);
    color: #92400e;
}

/* ── Delete page: delete-btn (red tint, keep readable) ── */
html[data-theme="light"] body.figma-theme .delete-btn {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.35);
    color: #b91c1c;
}
html[data-theme="light"] body.figma-theme .delete-btn:hover {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(220, 38, 38, 0.50);
}

/* ── Import result: action-badge variants ── */
html[data-theme="light"] body.figma-theme .action-badge.imported {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.30);
}
html[data-theme="light"] body.figma-theme .action-badge.updated {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.25);
}
html[data-theme="light"] body.figma-theme .action-badge.skipped {
    background: rgba(161, 98, 7, 0.10);
    color: #92400e;
    border-color: rgba(161, 98, 7, 0.25);
}

/* ── Announcements / AnnouncementFeed details ── */
html[data-theme="light"] body.figma-theme .figma-detail-header {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .figma-breadcrumb {
    color: rgba(17, 17, 17, 0.60) !important;
}
html[data-theme="light"] body.figma-theme .figma-breadcrumb:hover {
    color: #111111 !important;
}
html[data-theme="light"] body.figma-theme .figma-detail-title {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .figma-meta-item {
    color: rgba(17, 17, 17, 0.60);
}
html[data-theme="light"] body.figma-theme .figma-detail-content {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] body.figma-theme .figma-date-range {
    background: rgba(0, 0, 0, 0.04);
    color: #111111;
    border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] body.figma-theme .figma-text-content {
    color: rgba(17, 17, 17, 0.80);
}
html[data-theme="light"] body.figma-theme .figma-meta-badge-info {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
}
html[data-theme="light"] body.figma-theme .figma-meta-badge-warning {
    background: rgba(161, 98, 7, 0.10);
    color: #92400e;
}
html[data-theme="light"] body.figma-theme .figma-meta-badge-success {
    background: rgba(22, 163, 74, 0.10);
    color: #15803d;
}

/* ── AdminSettings: card header/body + form overrides ── */
html[data-theme="light"] body.figma-theme .card-header {
    color: #111111 !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] body.figma-theme .card-body {
    background: rgba(0, 0, 0, 0.01) !important;
}
html[data-theme="light"] body.figma-theme .figma-toggle-label {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .figma-toggle-slider {
    background-color: rgba(0, 0, 0, 0.18);
}

/* ── InformationRequest: page header, filter bar, table ── */
html[data-theme="light"] body.figma-theme .page-header {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .page-title {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .filter-bar {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] body.figma-theme .filter-label {
    color: rgba(17, 17, 17, 0.70);
}
html[data-theme="light"] body.figma-theme .checkbox-filters .form-check-input {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="light"] body.figma-theme .checkbox-filters .form-check-label {
    color: #111111 !important;
}
html[data-theme="light"] body.figma-theme .search-input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.18);
    color: #111111;
}
html[data-theme="light"] body.figma-theme .search-input::placeholder {
    color: rgba(17, 17, 17, 0.38);
}
html[data-theme="light"] body.figma-theme .search-input:focus {
    background: #ffffff;
    color: #111111;
}
html[data-theme="light"] body.figma-theme .info-requests-table {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .info-requests-table thead th {
    color: #111111 !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .info-requests-table thead tr {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

/* ── IncidentsAdmin Import: loading overlay + history table ── */
html[data-theme="light"] body.figma-theme .import-loading-content {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .import-loading-spinner {
    border-color: rgba(0, 0, 0, 0.10);
    border-top-color: #A4200D;
}
html[data-theme="light"] body.figma-theme .import-loading-text {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .import-loading-subtext {
    color: rgba(17, 17, 17, 0.60);
}
html[data-theme="light"] body.figma-theme .incident-import-history {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .incident-import-history thead th {
    color: #111111 !important;
    border-bottom-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .incident-import-history thead tr {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .incident-import-history tbody tr {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] body.figma-theme .incident-import-history tbody tr:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* ── Donate page ── */
html[data-theme="light"] body.figma-theme .donate-subtitle {
    color: rgba(17, 17, 17, 0.65);
}
html[data-theme="light"] body.figma-theme .donate-badge {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.15);
    color: #111111;
}
html[data-theme="light"] body.figma-theme .donate-form-card,
html[data-theme="light"] body.figma-theme .donate-payment-card,
html[data-theme="light"] body.figma-theme .donate-impact-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .donate-form-title,
html[data-theme="light"] body.figma-theme .donate-payment-title,
html[data-theme="light"] body.figma-theme .donate-impact-title {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .donate-form-subtitle {
    color: rgba(17, 17, 17, 0.60);
}
html[data-theme="light"] body.figma-theme .donate-input-label {
    color: rgba(17, 17, 17, 0.80);
}
html[data-theme="light"] body.figma-theme .donate-input,
html[data-theme="light"] body.figma-theme .donate-select,
html[data-theme="light"] body.figma-theme .donate-textarea {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.18);
    color: #111111;
}
html[data-theme="light"] body.figma-theme .donate-input::placeholder,
html[data-theme="light"] body.figma-theme .donate-textarea::placeholder {
    color: rgba(17, 17, 17, 0.38);
}
html[data-theme="light"] body.figma-theme .donate-input:focus,
html[data-theme="light"] body.figma-theme .donate-select:focus,
html[data-theme="light"] body.figma-theme .donate-textarea:focus {
    background: #ffffff;
    color: #111111;
}
html[data-theme="light"] body.figma-theme .donate-currency {
    color: rgba(17, 17, 17, 0.55);
}
html[data-theme="light"] body.figma-theme .donate-input-hint,
html[data-theme="light"] body.figma-theme .donate-payment-note {
    color: rgba(17, 17, 17, 0.50);
}
html[data-theme="light"] body.figma-theme .donate-divider {
    color: rgba(17, 17, 17, 0.40);
}
html[data-theme="light"] body.figma-theme .donate-divider::before,
html[data-theme="light"] body.figma-theme .donate-divider::after {
    background: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] body.figma-theme .donate-impact-item {
    color: rgba(17, 17, 17, 0.80);
}
html[data-theme="light"] body.figma-theme .donate-alert-success {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.30);
    color: #15803d;
}
html[data-theme="light"] body.figma-theme .donate-alert-warning {
    background: rgba(161, 98, 7, 0.10);
    border-color: rgba(161, 98, 7, 0.30);
    color: #92400e;
}
html[data-theme="light"] body.figma-theme .donate-alert-info {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.25);
    color: #1d4ed8;
}

/* ===================================================================
   LIGHT THEME — HOMEPAGE SECTION BANDS
   Replaces dark rgba overlays with a subtle alternating white / warm-gray
   rhythm. Difference is intentionally small (~8 L units) for a
   professional, Duxbury-Fire-style banded layout.
   =================================================================== */

/* ─── Section background rhythm ─────────────────────────────────── */
/* "White" bands — slightly elevated, cards blend into section */
html[data-theme="light"] body.figma-theme .hp-info-cards-section,
html[data-theme="light"] body.figma-theme .hp-stats-section,
html[data-theme="light"] body.figma-theme .hp-announcements-section,
html[data-theme="light"] body.figma-theme .hp-admin-section {
    background:      #ffffff !important;
    backdrop-filter: none    !important;
    border-top:    1px solid rgba(0,0,0,0.07) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

/* The announcements band sits directly under the navbar/header chrome —
   drop its borders so it blends into them and the header below instead
   of forming a strip */
html[data-theme="light"] body.figma-theme .hp-announcements-section {
    border-top: none !important;
    border-bottom: none !important;
}

/* "Tint" bands — same warm-gray as body; cards pop white against it */
html[data-theme="light"] body.figma-theme .hp-about-section,
html[data-theme="light"] body.figma-theme .hp-companies-section,
html[data-theme="light"] body.figma-theme .hp-safety-section,
html[data-theme="light"] body.figma-theme .hp-news-section {
    background: #f5f4f2;
    
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* dept-tiles already uses var(--bg-surface)=#ffffff; just fix border */
html[data-theme="light"] body.figma-theme .hp-dept-tiles-section {
    border-top-color: rgba(0,0,0,0.07);
}

/* Spotlight feature bands */
html[data-theme="light"] body.figma-theme .hp-spotlight-band {
    background: #f5f4f2;
    
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
html[data-theme="light"] body.figma-theme .hp-spotlight-band-alt {
    background: #ffffff;
}

/* ─── Shared section typography ──────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-section-title {
    color: #1a1a1a;
}
html[data-theme="light"] body.figma-theme .hp-section-eyebrow {
    color: #A4200D;
}

/* ─── Announcements alert strip (sticky, under navbar) ───────────── */
/* Light theme: flip the dark slate strip to a light surface so the
   announcement text is readable, and match the navbar/header band so
   the top of the homepage reads as one continuous surface. */
html[data-theme="light"] body.figma-theme .hp-ann-alert-strip {
    --ann-strip-bg:          rgba(255, 255, 255, 0.96);
    --ann-strip-text:        #1a1a1a;
    --ann-strip-text-hover:  #000000;
    --ann-strip-muted:       rgba(17, 17, 17, 0.50);
    --ann-strip-hover-bg:    rgba(0, 0, 0, 0.04);
    --ann-strip-border:      rgba(0, 0, 0, 0.14);
    --ann-strip-shadow:      0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.10);
    --ann-strip-dot:         rgba(0, 0, 0, 0.25);
    --ann-strip-dot-active:  rgba(0, 0, 0, 0.75);
}
/* richer accent colours read better on white */
html[data-theme="light"] body.figma-theme .hp-ann-alert-slide-warning  { --ann-accent: #b45309; }
html[data-theme="light"] body.figma-theme .hp-ann-alert-slide-exciting { --ann-accent: #6d28d9; }

/* ─── Announcements stack ────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-ann-stack {
    border-color: rgba(0,0,0,0.09);
}
html[data-theme="light"] body.figma-theme .hp-ann-band {
    border-bottom-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] body.figma-theme .hp-ann-band-title {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-ann-band-body {
    color: rgba(17,17,17,0.60);
}
html[data-theme="light"] body.figma-theme .hp-ann-band-chevron {
    color: rgba(17,17,17,0.30);
}
html[data-theme="light"] body.figma-theme .hp-ann-band:hover .hp-ann-band-chevron {
    color: rgba(17,17,17,0.65);
}

/* ─── Announcement Spotlight light-theme overrides ───────────────── */
html[data-theme="light"] body.figma-theme .hp-ann-spotlight {
    border-bottom-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] body.figma-theme .hp-ann-spotlight-media {
    background: rgba(164,32,13,0.05);
}
html[data-theme="light"] body.figma-theme .hp-ann-spotlight-body {
    color: rgba(17,17,17,0.68);
}
html[data-theme="light"] body.figma-theme .hp-ann-spotlight-cta {
    color: rgba(17,17,17,0.50);
}
html[data-theme="light"] body.figma-theme .hp-ann-spotlight:hover .hp-ann-spotlight-cta {
    color: #111111;
}
/* type pills — keep vibrant colours, just slightly richer for light bg */
html[data-theme="light"] body.figma-theme .hp-ann-type-info     { color: #0369a1 !important; background: rgba(14,165,233,0.12) !important; }
html[data-theme="light"] body.figma-theme .hp-ann-type-warning  { color: #92400e; background: rgba(245,158,11,0.12); }
html[data-theme="light"] body.figma-theme .hp-ann-type-exciting { color: #5b21b6; background: rgba(139,92,246,0.12); }
html[data-theme="light"] body.figma-theme .hp-ann-type-success  { color: #14532d; background: rgba(34,197,94,0.12); }
html[data-theme="light"] body.figma-theme .hp-ann-type-sad      { color: #334155; background: rgba(148,163,184,0.14); }

/* ─── Info cards ─────────────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-info-card {
    background: #f8f7f5;
    border-color: rgba(0,0,0,0.09);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    
}
html[data-theme="light"] body.figma-theme .hp-info-card:hover {
    background: rgba(164,32,13,0.04);
    border-color: rgba(164,32,13,0.22);
    
}
html[data-theme="light"] body.figma-theme .hp-info-card-body {
    color: rgba(17,17,17,0.62);
}
html[data-theme="light"] body.figma-theme .hp-info-card-link {
    color: #A4200D;
}
html[data-theme="light"] body.figma-theme .hp-info-card:hover .hp-info-card-link {
    color: #741709;
}

/* ─── About section ──────────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-about-body {
    color: rgba(17,17,17,0.72);
}
html[data-theme="light"] body.figma-theme .hp-about-link {
    color: #A4200D;
}
html[data-theme="light"] body.figma-theme .hp-about-link:hover {
    color: #741709;
}
html[data-theme="light"] body.figma-theme .hp-about-image-placeholder {
    background: rgba(0,0,0,0.04);
    border-color: rgba(164,32,13,0.18);
    color: rgba(164,32,13,0.40);
}

/* ─── Company cards (station spotlight rows) ─────────────────────── */
html[data-theme="light"] body.figma-theme .hp-company-card {
    border-bottom-color: rgba(0,0,0,0.07);
    
}
html[data-theme="light"] body.figma-theme .hp-company-address {
    color: rgba(17,17,17,0.52);
}
html[data-theme="light"] body.figma-theme .hp-company-desc {
    color: rgba(17,17,17,0.62);
}
html[data-theme="light"] body.figma-theme .hp-company-cta {
    color: rgba(17,17,17,0.50);
}
html[data-theme="light"] body.figma-theme .hp-company-card:hover .hp-company-cta {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-company-img {
    background: rgba(164,32,13,0.05);
}
html[data-theme="light"] body.figma-theme .hp-company-img-placeholder {
    background: rgba(164,32,13,0.05);
}

/* ─── Stats section ──────────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-stat-block {
    border-right-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] body.figma-theme .hp-stat-number {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-stat-block-current .hp-stat-number {
    color: #A4200D;
}
html[data-theme="light"] body.figma-theme .hp-stat-year {
    color: rgba(17,17,17,0.48);
}
html[data-theme="light"] body.figma-theme .hp-stat-block:hover {
    background: rgba(0,0,0,0.025);
}
html[data-theme="light"] body.figma-theme .hp-stat-link {
    color: inherit;
}

/* ─── Safety tiles ───────────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-safety-tile {
    background: #ffffff;
    border-color: rgba(0,0,0,0.09);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-safety-tile:hover {
    background: rgba(164,32,13,0.03);
    border-color: rgba(164,32,13,0.22);
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-safety-tile-title {
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-safety-tile-body {
    color: rgba(17,17,17,0.60);
}

/* ─── Administration band ────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-admin-body {
    color: rgba(17,17,17,0.62);
}
html[data-theme="light"] body.figma-theme .hp-admin-link-item {
    color: #A4200D;
}
html[data-theme="light"] body.figma-theme .hp-admin-link-item:hover {
    color: #741709;
    text-decoration: underline;
}
html[data-theme="light"] body.figma-theme .hp-admin-link-item + .hp-admin-link-item::before {
    color: rgba(17,17,17,0.28);
}

/* ─── News cards ─────────────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-news-card {
    background: #ffffff;
    border-color: rgba(0,0,0,0.09);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    
}
html[data-theme="light"] body.figma-theme .hp-news-card:hover {
    background: rgba(164,32,13,0.03);
    border-color: rgba(164,32,13,0.22);
    
}

/* ─── Event list inside cards ────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-event-item {
    border-bottom-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] body.figma-theme .hp-event-name {
    color: rgba(17,17,17,0.82);
}

/* ─── Spotlight content ──────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-spotlight-body {
    color: rgba(17,17,17,0.68);
}
html[data-theme="light"] body.figma-theme .hp-spotlight-media {
    background: rgba(164,32,13,0.05);
}
html[data-theme="light"] body.figma-theme .hp-spotlight-icon-placeholder {
    color: rgba(164,32,13,0.32);
}

/* ─── "View all / Read more" buttons ────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-read-more-btn {
    color: #A4200D;
    border-color: rgba(164,32,13,0.30);
    background: transparent;
}
html[data-theme="light"] body.figma-theme .hp-read-more-btn:hover {
    background: rgba(164,32,13,0.06);
    border-color: rgba(164,32,13,0.50);
    color: #741709;
}
html[data-theme="light"] body.figma-theme .hp-news-excerpt {
    color: rgba(17,17,17,0.60);
}
html[data-theme="light"] body.figma-theme .hp-news-date {
    color: rgba(17,17,17,0.50);
}
html[data-theme="light"] body.figma-theme .hp-news-tag {
    background: rgba(164,32,13,0.08);
    color: rgba(164,32,13,0.85);
    border-color: rgba(164,32,13,0.20);
}
html[data-theme="light"] body.figma-theme .hp-news-tag-featured {
    background: rgba(212,160,23,0.10);
    color: rgba(154,110,5,0.90);
    border-color: rgba(212,160,23,0.25);
}
html[data-theme="light"] body.figma-theme .hp-news-thumb-placeholder {
    color: rgba(164,32,13,0.28);
}

/* ─── Dept tiles ─────────────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-dept-tile {
    background: #f8f7f5;
    border-color: rgba(0,0,0,0.09);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-dept-tile:hover {
    background: rgba(164,32,13,0.04);
    border-color: rgba(164,32,13,0.22);
    color: #111111;
}
html[data-theme="light"] body.figma-theme .hp-dept-tile-sub {
    color: rgba(17,17,17,0.52);
}

/* ─── Fund drive section ─────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .fund-drive-section {
    background: transparent;
    backdrop-filter: none;
    border-top: none;
    border-bottom: none;
}

/* ─── Recruitment video section ──────────────────────────────────── */
html[data-theme="light"] body.figma-theme .hp-recruit-section {
    background: #ffffff;
    
    border-top-color: rgba(0,0,0,0.07);
}
html[data-theme="light"] body.figma-theme .hp-recruit-video-wrap {
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* ─── Slideshow / photo section ──────────────────────────────────── */
html[data-theme="light"] body.figma-theme .slideshow-section {
    background:      #f5f4f2 !important;
    
}

/* ===================================================================
   >>> SECTION: figma-layout
   =================================================================== */

/* ===================================================================
   FIGMA LAYOUT
   =================================================================== */

/* ===== GLOBAL OVERRIDES ===== */
body.figma-theme {
    margin-top: 0;
    background: var(--bg-body) !important;
    font-family: var(--figma-font-primary) !important;
    color: var(--text) !important;
    --chrome-bg: var(--bg-surface);
    --chrome-fg: var(--text);
    --chrome-bg-soft: var(--bg-surface);
    --chrome-fg-soft: var(--text);
    --chrome-bg-unified: var(--bg-surface);
    --chrome-fg-unified: var(--text);
    --header-bg: var(--bg-surface);
    --header-fg: var(--text);
}

/* ===== CONTENT ===== */
body.figma-theme .content {
    background: var(--bg-body);
    padding: 2rem !important;
    transition: padding-top 0.3s ease, margin-left 0.3s ease;
}

/* Non-homepage pages: banner now scrolls with the page, only need standard content padding */
body.figma-theme main.content:not(.with-banner) {
    padding-top: 2rem;
}

/* Homepage: no padding — sections handle their own horizontal padding */
body.figma-theme main.content.with-banner {
    padding: 0;
}

/* Ensure content is above banner */
body.figma-theme main.content > * {
    position: relative;
    z-index: 1;
}

/* ===== HERO SECTION ===== */
.figma-hero {
    width: 100%;
    min-height: 1080px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.72) 38.96%, rgba(0,0,0,0.24) 100%),
        var(--hero-bg, url('/images/hero-banner.jpg'));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
}

.figma-hero[data-bg] {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.72) 38.96%, rgba(0,0,0,0.24) 100%),
        var(--hero-bg);
}

/* ── Hero slideshow (multiple images) ─────────────────────────────── */
.hero-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slideshow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.72) 38.96%, rgba(0,0,0,0.24) 100%);
    pointer-events: none;
}

/* ── Hero slideshow admin management panel ────────────────────────── */
.hero-manage-panel {
    position: absolute;
    right: 1rem;
    bottom: 10rem;
    z-index: 1001;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(20, 20, 24, 0.96);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 16px;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    display: none;
}

.hero-manage-panel.open {
    display: block;
}

.hero-manage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 4px;
}

.hero-manage-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.hero-manage-hint {
    font-size: 12px;
    opacity: 0.7;
    margin: 0 0 12px;
}

.hero-manage-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-manage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px;
    cursor: grab;
}

.hero-manage-item.dragging {
    opacity: 0.5;
}

.hero-manage-grip {
    color: rgba(255,255,255,0.5);
    cursor: grab;
}

.hero-manage-thumb {
    width: 64px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
}

.hero-manage-delete-form {
    margin: 0 0 0 auto;
}

.hero-manage-delete {
    background: rgba(220, 53, 69, 0.85);
    border: none;
    color: #fff;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-manage-delete:hover {
    background: #dc3545;
}

.hero-manage-save {
    width: 100%;
    background: var(--fa-gold, #c8a951);
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
}

.hero-manage-save:hover {
    filter: brightness(1.05);
}

.hero-manage-add-form {
    margin: 0 0 10px;
}

.hero-manage-add {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: var(--fa-gold, #c8a951);
    border: 1px dashed var(--fa-gold, #c8a951);
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
    cursor: pointer;
}

.hero-manage-add:hover {
    background: rgba(200, 169, 81, 0.12);
}

.hero-manage-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: var(--fa-gold, #c8a951);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}

.hero-manage-primary-form {
    margin: 0 0 0 auto;
}

.hero-manage-primary {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--fa-gold, #c8a951);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-manage-primary:hover {
    background: rgba(200, 169, 81, 0.25);
}

/* ── Homepage toast (TempData messages) ───────────────────────────── */
.hp-toast {
    position: fixed;
    top: 84px;
    right: 20px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 360px;
    background: rgba(20, 20, 24, 0.96);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-left: 4px solid var(--fa-gold, #c8a951);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: hp-toast-in 0.25s ease-out;
}

.hp-toast-text {
    font-size: 14px;
    line-height: 1.35;
}

.hp-toast-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.7;
}

.hp-toast-close:hover {
    opacity: 1;
}

.hp-toast-out {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

@keyframes hp-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.figma-hero-content {
    position: relative;
    z-index: 1;
}

.figma-hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px;
    gap: 48px;
    max-width: 1824px;
    width: 100%;
}

.figma-hero-title {
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-medium);
    font-size: var(--figma-fs-hero);
    line-height: var(--figma-lh-hero);
    text-align: center;
    color: var(--text);
    max-width: 1614px;
    margin: 0;
}

.figma-hero-card {
    max-width: 896px;
    width: 100%;
    margin: 0 auto;
}

/* ===== CAROUSEL INDICATORS ===== */
.figma-carousel-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin: 0 auto;
}

.figma-carousel-indicator {
    width: 90px;
    height: 4px;
    background: var(--brand);
    border: none;
    padding: 0;
    border-radius: 0;
}

.figma-carousel-indicator.inactive {
    width: 24px;
    background: var(--text);
}

/* ===== SECTIONS ===== */
.figma-section {
    width: 100%;
    background: var(--bg-body);
    padding: 48px;
}

.figma-section-title {
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-medium);
    font-size: var(--figma-fs-h2);
    line-height: var(--figma-lh-h2);
    color: var(--text);
    margin-bottom: 32px;
}

.figma-section-content {
    max-width: 1824px;
    margin: 0 auto;
}

/* ===== FOOTER ===== */
.figma-footer {
    width: 100%;
    background: var(--bg-body);
    border-top: 1px solid var(--border);
    padding: 48px;
    backdrop-filter: var(--figma-backdrop-blur);
}

.figma-footer-content {
    max-width: 1824px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 72px;
}

.figma-footer-brand {
    font-family: var(--figma-font-heading);
    font-weight: var(--figma-fw-extrabold);
    font-size: 32px;
    line-height: 44px;
    color: var(--text);
}

.figma-footer-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.figma-footer-heading {
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-semibold);
    font-size: var(--figma-fs-h5);
    line-height: var(--figma-lh-h5);
    color: var(--text);
}

.figma-footer-text {
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-medium);
    font-size: var(--figma-fs-body);
    line-height: var(--figma-lh-body);
    color: var(--text-disabled);
}

    /* ===== NAVBAR — structural rules only, no colors ===== */
.figma-navbar {
    position: fixed !important;
    top: var(--ribbon-h, 30px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030;
    padding: 16px 48px 6px 48px !important; /* Reduced padding to make navbar thinner */
    min-height: calc(var(--navbar-h, 72px) + 22px) !important; /* navbar-h + top(16px) + bottom(6px) */
    /* Colors/backdrop come from _FigmaNavbar.cshtml <style> via tokens */
    background: var(--figma-navbar-bg, var(--figma-bg-navbar)) !important;
    backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important;
    -webkit-backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important;
    border-bottom: none !important;
}

.figma-navbar .container-fluid {
    max-width: 1920px;
    padding: 0;
}

.figma-navbar .navbar-brand {
    position: absolute;
    left: 2px;
    top: 0;
    height: calc(var(--navbar-h, 72px) + 22px);
    display: flex;
    align-items: stretch;
    gap: 0;
}

.figma-navbar .navbar-brand img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

.figma-navbar .navbar-nav {
    gap: 0;
}

/* These are fallback-only — token-driven rules in _FigmaNavbar override them */
.figma-navbar .nav-link {
    font-family: var(--figma-font-primary) !important;
    font-weight: var(--figma-fw-medium) !important;
    font-size: var(--figma-fs-nav) !important;
    line-height: var(--figma-lh-nav);
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: var(--figma-navbar-link-color, var(--text)) !important;
    padding: 8px;
    border-radius: var(--figma-radius-sm) !important;
    transition: background-color var(--figma-transition-fast);
}

.figma-navbar .nav-link:hover {
    background: var(--figma-navbar-link-hover-bg, rgba(255,255,255,0.1)) !important;
    text-decoration: none;
}

.figma-navbar .nav-link.active {
    background: var(--figma-navbar-link-active-bg, rgba(255,255,255,0.1)) !important;
}

.figma-navbar .btn-join {
    background: var(--figma-navbar-join-bg, var(--brand)) !important;
    border: none !important;
    border-radius: var(--figma-radius-md) !important;
    padding: 16px 48px;
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-semibold) !important;
    font-size: var(--figma-fs-body);
    line-height: var(--figma-lh-body);
    color: var(--figma-navbar-join-color, var(--text)) !important;
}

.figma-navbar .btn-menu {
    background: rgba(242, 242, 242, 0.15);
    backdrop-filter: var(--figma-backdrop-blur-light);
    border: none;
    border-radius: var(--figma-radius-md);
    padding: 16px;
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-semibold);
    font-size: var(--figma-fs-body);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dropdown */
.figma-navbar .dropdown-menu {
    background: var(--figma-navbar-dropdown-bg, rgba(0,0,0,0.95)) !important;
    border: 1px solid var(--figma-navbar-dropdown-border, var(--border)) !important;
    border-radius: var(--figma-radius-lg) !important;
    backdrop-filter: var(--figma-backdrop-blur) !important;
    padding: 8px;
    margin-top: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.figma-navbar .dropdown-item {
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-medium);
    font-size: var(--figma-fs-nav) !important;
    color: var(--text) !important;
    padding: 10px 16px;
    border-radius: var(--figma-radius-sm) !important;
    transition: background-color var(--figma-transition-fast);
}

.figma-navbar .dropdown-item:hover {
    background: var(--figma-navbar-dropdown-item-hover-bg, rgba(255,255,255,0.1)) !important;
    color: var(--figma-navbar-dropdown-item-hover-color, var(--text)) !important;
}

.figma-navbar .dropdown-item i {
    margin-right: 8px;
    opacity: 0.7;
}

.figma-navbar .dropdown-divider {
    border-color: var(--border);
    margin: 8px 0;
}

.figma-navbar .dropdown-item-text {
    font-family: var(--figma-font-primary);
    font-size: 14px;
    color: var(--text-muted);
    padding: 8px 16px;
}

.figma-navbar .form-check-label {
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-medium) !important;
    font-size: 14px !important;
    color: var(--text) !important;
    cursor: pointer;
    user-select: none;
}

.figma-navbar .form-check-input {
    cursor: pointer;
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid var(--border);
    transition: all var(--figma-transition-fast);
}

.figma-navbar .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.figma-navbar .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(164, 32, 13, 0.3);
}

.figma-navbar #logoutForm .btn {
    font-family: var(--figma-font-primary) !important;
    font-weight: var(--figma-fw-semibold) !important;
    font-size: 14px;
}

/* User avatar */
.figma-navbar .nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: transform var(--figma-transition-fast);
}

.figma-navbar .dropdown-toggle:hover .nav-avatar {
    transform: scale(1.1);
    border-color: var(--text);
}

.figma-navbar .bi-person-circle {
    font-size: 32px;
    color: var(--text);
}

/* ===== BANNER ===== */
.banner-wrap {
    position: relative;
    top: auto;
    left: 0;
    right: 0;
    height: 20vh;
    z-index: 1;
    overflow: hidden;
    margin-top: calc(var(--ribbon-h, 30px) + var(--navbar-h) + 22px) !important;
}

.banner-wrap .banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.admin-mode-on .banner-wrap {
    transition: margin-left 0.3s ease;
}

/* Banner upload FAB (admin only) */
.banner-wrap .banner-fab {
    position: absolute !important;
    left: 1rem;
    top: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    opacity: 0.85;
    transition: all 0.2s ease;
    z-index: 10 !important;
}

.banner-wrap .banner-fab:hover {
    opacity: 1;
    transform: scale(1.1) translateY(-2px);
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.banner-wrap .banner-fab svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Banner preview (admin feature) */
.banner-preview-inline {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-rows: 1fr;
    align-items: stretch;
    background: color-mix(in oklab, var(--bg-surface) 12%, transparent);
    backdrop-filter: saturate(140%) blur(2px);
    padding: 0;
}

.banner-preview-inline img#bannerPreviewImg {
    inline-size: 100%;
    block-size: 100%;
    object-fit: fill !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none;
}

.banner-preview-inline .banner-preview-actions {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    z-index: 6;
    display: inline-flex;
    gap: .5rem;
    background: color-mix(in oklab, var(--bg-surface) 85%, transparent 15%);
    border: 1px solid var(--border);
    padding: .25rem .5rem;
    border-radius: var(--figma-radius-md);
    box-shadow: var(--shadow-sm);
}

header.banner-wrap .banner.is-fading-out {
    opacity: .25;
    filter: blur(1px);
    transition: opacity 240ms ease, filter 240ms ease;
}

/* ===== SIDEBAR ===== */
/* Theme/font properties — apply at all breakpoints */
.sidebar-figma,
#appSidebar.sidebar-figma,
nav.sidebar-figma {
    background: var(--bg-surface) !important;
    background-image: none;
    border-right: 1px solid var(--border) !important;
    padding: 24px 16px;
    font-family: var(--figma-font-primary);
    font-size: 14px;
    text-align: left;
    color: var(--text);
    animation: none;
}

/* ═════════════════════════════════════════════════════════════════════════════
   REMOVED: Admin sidebar CSS (sidebar-figma, #appSidebar) 
   Admin navigation is now integrated into the navbar as a three-state toggle.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Sidebar logo */
.sidebar-figma img {
    max-width: 120px !important;
    border-radius: var(--figma-radius-md);
    padding: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border) !important;
    transition: all var(--figma-transition-fast);
    animation: none;
}

.sidebar-figma img:hover {
    background: rgba(255,255,255,0.06) !important;
    transform: scale(1.02);
}

/* Sidebar nav links */
.sidebar-figma .nav-link,
#appSidebar.sidebar-figma .nav-link,
nav.sidebar-figma .nav-link,
body.figma-theme .sidebar-figma .nav-link {
    font-family: var(--figma-font-primary) !important;
    font-weight: var(--figma-fw-medium) !important;
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    padding: 10px 12px;
    margin: 0;
    border-radius: var(--figma-radius-sm) !important;
    transition: all var(--figma-transition-fast);
    display: flex;
    align-items: center;
    text-align: left;
    text-decoration: none;
}

.sidebar-figma .nav-link:hover,
body.figma-theme .sidebar-figma .nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
    transform: translateX(2px);
}

.sidebar-figma .nav-link.active,
body.figma-theme .sidebar-figma .nav-link.active {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
    font-weight: var(--figma-fw-semibold);
    border-left: 3px solid var(--brand);
    padding-left: 9px;
}

.sidebar-figma .nav-subtoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--figma-fw-semibold);
    font-size: 15px;
    color: var(--text);
}

.sidebar-figma .nav-subtoggle .chev {
    font-size: 12px;
    transition: transform var(--figma-transition-fast);
    margin-left: auto;
}

.sidebar-figma .nav-subtoggle:not(.collapsed) .chev {
    transform: rotate(90deg);
}

.sidebar-figma .nav-subtoggle.collapsed {
    color: var(--text-secondary) !important;
}

.sidebar-figma .nav-subheading {
    font-family: var(--figma-font-primary);
    font-weight: var(--figma-fw-semibold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 16px 0 8px;
    padding-left: 12px;
}

.sidebar-figma .sub-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 12px 0;
    opacity: 0.5;
}

.sidebar-figma .sidebar-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 20px 0;
    opacity: 0.7;
}

.sidebar-figma .collapse {
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.06);
}

.sidebar-figma .collapse .nav-link {
    font-size: 13px !important;
    padding: 8px 12px;
}

.sidebar-figma .list-unstyled { margin-bottom: 0; padding-left: 0; }
.sidebar-figma .nav-section { margin-bottom: 0; }

.sidebar-figma .nav-link svg,
.sidebar-figma .nav-link i { margin-right: 8px; opacity: 0.7; }

.sidebar-figma .nav-link:hover svg,
.sidebar-figma .nav-link:hover i { opacity: 1; }

.sidebar-figma .badge {
    background: var(--brand);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: var(--figma-fw-semibold);
}

/* ===== HOMEPAGE CAROUSEL (no gap between navbar and slideshow) ===== */
body.figma-theme.homepage .layout,
body.figma-theme.homepage .content,
body.figma-theme.homepage main.content {
    padding: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    /* margin-left is intentionally omitted — sidebar offset controls it */
}

body.figma-theme.homepage #featuredSlideshow,
body.figma-theme.homepage .featured-hero,
body.figma-theme.homepage .carousel,
body.figma-theme.homepage .carousel-slide,
body.figma-theme.homepage .carousel-inner,
body.figma-theme.homepage .carousel-item,
body.figma-theme.homepage .carousel-hero-image {
    margin-top: 0;
    padding-top: 0;
}

/* ===== MOBILE / TABLET (< 992px): Bootstrap offcanvas-lg takes over ===== */
/* Do NOT set position, transform, display, width, or height here —
   offcanvas-lg manages all of those.  Only reset layout side-effects. */
@media (max-width: 991.98px) {
    /* Ensure the offcanvas drawer appears above the backdrop (1040) and navbar */
    #appSidebar.sidebar-figma {
        z-index: 1045;
    }

    /* Cancel the desktop content offset — no sidebar pushing content on mobile */
    html.admin-mode-on body.figma-theme .layout {
        margin-left: 0;
        width: 100%;
    }

    html.admin-mode-on body.figma-theme .content,
    html.admin-mode-on body.figma-theme .content:not(.figma-hero) {
        margin-left: 0;
    }

    html.admin-mode-on .banner-wrap {
        left: 0;
    }
}

/* ── Tablet: clamp the banner top-padding formula so it doesn't dominate portrait tablets ── */
@media (max-width: 1024px) {
    /* ── Clamp the banner top-padding formula so it doesn't dominate portrait tablets ── */
    body.figma-theme main.content:not(.with-banner) {
        padding-top: calc(56px + min(20vh, 140px) + 2rem); /* Updated navbar height */
    }
}

/* ===== THEME-AWARE SIDEBAR OVERRIDES ===== */
html[data-theme="dark"] .sidebar-figma {
    background: var(--bg-surface) !important;
    border-right-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sidebar-figma .nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .sidebar-figma .nav-link.active {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ===== MODALS: ensure Bootstrap modal-content uses theme surface/text colors ===== */
/* Without this, .modal-content falls back to Bootstrap's --bs-modal-bg (white),
   while figma-theme text stays white, causing white-on-white content. */
body.figma-theme .modal-content {
    background-color: var(--bg-surface) !important;
    color:             var(--text) !important;
    border-color:      var(--border) !important;
}

body.figma-theme .modal-header,
body.figma-theme .modal-footer {
    border-color: var(--border) !important;
}

/* ===== FORM CONTROLS: wire up dedicated input tokens ===== */
/* These tokens were defined in figma-tokens.css but never applied. */
body.figma-theme .form-control,
body.figma-theme .form-select {
    color:            var(--figma-input-text) !important;
    background-color: var(--figma-input-bg) !important;
    border-color:     var(--figma-input-border) !important;
}

body.figma-theme .form-control::placeholder,
body.figma-theme .form-select::placeholder {
    color:   var(--figma-input-placeholder) !important;
    opacity: 1 !important;
}

body.figma-theme .form-control:focus,
body.figma-theme .form-select:focus {
    color:            var(--figma-input-text) !important;
    background-color: var(--figma-input-bg) !important;
    border-color:     var(--figma-input-focus-border) !important;
    box-shadow:       0 0 0 3px var(--figma-input-focus-shadow) !important;
    outline: none;
}

/* Override: .gov-form is a light-on-white paper document — keep dark text regardless of theme */
body.figma-theme .gov-form .form-control,
body.figma-theme .gov-form .form-select {
    color:            #111827 !important;
    background-color: #fff !important;
}

body.figma-theme .gov-form .form-control::placeholder,
body.figma-theme .gov-form .form-select::placeholder {
    color: rgba(0,0,0,.45) !important;
}

body.figma-theme .gov-form .form-control:focus,
body.figma-theme .gov-form .form-select:focus {
    color:            #111827 !important;
    background-color: #fff !important;
}

/* ===== GOV-FORM: lock to light-paper context regardless of data-layout mode ===== */
/*
   Style-mode rules (glass, brutalist, hero) have specificity (0,3,2).
   Using html[data-layout] raises ours to (0,4,2) to override them.
   The base rule (0,3,1) handles pages where data-layout is absent.
*/
body.figma-theme .gov-form,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form {
    color: #111827 !important;
    background: #fff !important;
}

body.figma-theme .gov-form .form-control,
body.figma-theme .gov-form .form-select,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .form-control,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .form-select {
    color: #111827 !important;
    background-color: #fff !important;
    transform: none !important; /* cancel glass scale-on-focus animation */
}

body.figma-theme .gov-form .form-control::placeholder,
body.figma-theme .gov-form .form-select::placeholder,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .form-control::placeholder,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .form-select::placeholder {
    color: rgba(0, 0, 0, .45) !important;
    opacity: 1 !important;
}

body.figma-theme .gov-form .form-control:focus,
body.figma-theme .gov-form .form-select:focus,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .form-control:focus,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .form-select:focus {
    color: #111827 !important;
    background-color: #fff !important;
    border-color: var(--brand, #A4200D) !important;
    box-shadow: 0 0 0 3px rgba(164, 32, 13, .15) !important;
    transform: none !important;
}

body.figma-theme .gov-form .btn-primary,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .btn-primary {
    background-color: var(--brand, #A4200D) !important;
    border-color: var(--brand, #A4200D) !important;
    border-width: 1px !important;
    border-radius: .5rem !important; /* reset brutalist 0px / glass pill */
    color: #fff !important;
    padding: .5rem 1.25rem !important; /* reset hero's 16px 48px */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important;
    transform: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: none !important; /* reset brutalist/hero uppercase */
    letter-spacing: normal !important;
}

body.figma-theme .gov-form .btn-primary:hover,
body.figma-theme .gov-form .btn-primary:focus-visible,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .btn-primary:hover,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .btn-primary:focus-visible {
    background-color: color-mix(in oklab, var(--brand, #A4200D) 82%, #000) !important;
    border-color: color-mix(in oklab, var(--brand, #A4200D) 82%, #000) !important;
    color: #fff !important;
    transform: none !important;
}

body.figma-theme .gov-form .btn-outline-secondary,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .btn-outline-secondary {
    color: #374151 !important;
    border-color: #9ca3af !important;
    background-color: transparent !important;
    border-width: 1px !important;
    border-radius: .5rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body.figma-theme .gov-form .btn-outline-secondary:hover,
html:is([data-layout],[data-theme="municipal"],[data-theme="simple"]) body.figma-theme .gov-form .btn-outline-secondary:hover {
    background-color: rgba(0, 0, 0, .06) !important;
    color: #111827 !important;
}

/* === SCROLL-DRIVEN ENTRANCES — add after existing content block === */

@keyframes figmaFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes figmaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opt-in via class — use on .figma-card, .figma-stats-container, section headers, etc. */
.figma-reveal {
    animation: figmaFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.figma-reveal-fade {
    animation: figmaFadeIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
}

/* Stagger children inside a grid or flex container */
.figma-reveal-stagger > *:nth-child(1) { animation-delay: 0ms;   }
.figma-reveal-stagger > *:nth-child(2) { animation-delay: 80ms;  }
.figma-reveal-stagger > *:nth-child(3) { animation-delay: 160ms; }
.figma-reveal-stagger > *:nth-child(4) { animation-delay: 240ms; }
.figma-reveal-stagger > *:nth-child(5) { animation-delay: 320ms; }
.figma-reveal-stagger > *:nth-child(6) { animation-delay: 400ms; }

.figma-reveal-stagger > * {
    animation: figmaFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .figma-reveal,
    .figma-reveal-fade,
    .figma-reveal-stagger > * {
        animation: none;
    }
}

/* ===================================================================
   COMPANY / ABOUT PAGE  (CompanyPublic, DepartmentAbout/Index)
   =================================================================== */

/* ── Page wrapper ── */
.about-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    padding: 3.5rem 2rem 3rem;
    background: linear-gradient(160deg, rgba(164,32,13,.13) 0%, rgba(0,0,0,0) 55%);
    border-radius: var(--figma-radius-lg, 12px);
    border: 1px solid var(--border);
    margin-bottom: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 32px rgba(0,0,0,.3);
}

/* Plaqued patch/logo */
.about-patch {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 50%;
    border: 4px solid var(--brand, #A4200D);
    box-shadow:
        0 0 0 7px rgba(164,32,13,.18),
        0 0 0 8px rgba(var(--fg-rgb), .06),
        0 12px 40px rgba(0,0,0,.55);
    background: var(--glass-bg);
    flex-shrink: 0;
}

.about-patch-placeholder {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 4px solid var(--brand, #A4200D);
    box-shadow:
        0 0 0 7px rgba(164,32,13,.18),
        0 0 0 8px rgba(var(--fg-rgb), .06),
        0 12px 40px rgba(0,0,0,.55);
    background: rgba(164,32,13,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--brand, #A4200D);
    flex-shrink: 0;
}

.about-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.about-dept-name {
    font-family: var(--figma-font-heading, 'Manrope', system-ui, sans-serif);
    font-size: clamp(1.75rem, 4.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 .5rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.about-dept-meta {
    font-size: .9rem;
    color: var(--text-secondary);
    margin: .2rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

.about-dept-meta a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .15s ease;
}

.about-dept-meta a:hover {
    color: var(--text);
}

/* ── Back link / body ── */
.about-body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ─────────────────────────────────────────────
   SECTIONS
   ───────────────────────────────────────────── */
.about-section {
    background: var(--bg-card, rgba(0,0,0,.28));
    border: 1px solid var(--border);
    border-radius: var(--figma-radius-lg, 12px);
    padding: 2rem 2.25rem;
    box-shadow: 0 2px 18px rgba(0,0,0,.22);
}

.about-section-title {
    font-family: var(--figma-font-heading, 'Manrope', system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--brand, #A4200D);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}

/* Red accent underline */
.about-section-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 44px;
    height: 2px;
    background: var(--brand, #A4200D);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────
   MISSION
   ───────────────────────────────────────────── */
.about-mission-text {
    font-family: var(--figma-font-heading, 'Manrope', system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--text);
    text-align: center;
    font-style: italic;
    padding: .75rem 3rem;
    position: relative;
}

.about-mission-text::before {
    content: '\201C';
    font-size: 4rem;
    color: var(--brand, #A4200D);
    opacity: .22;
    position: absolute;
    top: -.75rem;
    left: .5rem;
    line-height: 1;
    font-style: normal;
    font-family: Georgia, serif;
}

.about-mission-text::after {
    content: '\201D';
    font-size: 4rem;
    color: var(--brand, #A4200D);
    opacity: .22;
    position: absolute;
    bottom: -1.5rem;
    right: .5rem;
    line-height: 1;
    font-style: normal;
    font-family: Georgia, serif;
}

/* ─────────────────────────────────────────────
   HISTORY  (enhances existing site.css rules)
   ───────────────────────────────────────────── */
.about-chief-message {
    background: rgba(164,32,13,.06) !important;
    border-left: 4px solid var(--brand, #A4200D);
    border-radius: .75rem;
    padding: 1.75rem 2rem;
}

html[data-theme="light"] .about-chief-message {
    background: rgba(164,32,13,.05) !important;
}

.about-chief-blockquote {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-secondary);
}

/* ─────────────────────────────────────────────
   APPARATUS  —  plaqued image cards
   ───────────────────────────────────────────── */
.about-apparatus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.5rem;
}

.about-apparatus-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--bg-surface, #0D0D0D);
    border: 1px solid var(--border);
    border-radius: var(--figma-radius-md, 12px);
    overflow: hidden;
    box-shadow:
        0 4px 0 rgba(164,32,13,.35),   /* bottom "plaque ledge" */
        0 6px 24px rgba(0,0,0,.4);
    transition: transform .22s ease, box-shadow .22s ease;
}

.about-apparatus-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 4px 0 rgba(164,32,13,.5),
        0 14px 40px rgba(0,0,0,.55);
    color: inherit;
    text-decoration: none;
    border-color: rgba(164,32,13,.4);
}

/* Inner image frame — the plaque face */
.about-apparatus-img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--surface-inverse);
    border-bottom: 3px solid var(--brand, #A4200D);
}

/* Subtle inset border overlay */
.about-apparatus-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px rgba(var(--fg-rgb), .07);
    pointer-events: none;
    z-index: 1;
}

.about-apparatus-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.about-apparatus-card:hover .about-apparatus-img-wrap img {
    transform: scale(1.05);
}

/* Nameplate */
.about-apparatus-info {
    padding: .85rem 1rem .9rem;
    background: linear-gradient(to bottom, rgba(164,32,13,.09) 0%, transparent 100%);
}

.about-apparatus-name {
    font-family: var(--figma-font-heading, 'Manrope', system-ui, sans-serif);
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text);
    margin: 0 0 .2rem;
}

.about-apparatus-meta {
    font-size: .78rem;
    color: var(--text-muted);
    margin: 0 0 .1rem;
}

.about-apparatus-status {
    display: inline-block;
    margin-top: .35rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand, #A4200D);
    border: 1px solid rgba(164,32,13,.4);
    border-radius: var(--radius-pill);
    padding: .1rem .55rem;
}

/* ─────────────────────────────────────────────
   PERSONNEL  —  plaqued portrait cards
   ───────────────────────────────────────────── */
.about-personnel-group {
    margin-bottom: 2rem;
}
.about-personnel-group:last-child { margin-bottom: 0; }

.about-group-label {
    font-family: var(--figma-font-heading, 'Manrope', system-ui, sans-serif);
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
}

.about-group-count {
    font-size: .68rem;
    background: var(--brand, #A4200D);
    color: var(--text);
    border-radius: var(--radius-pill);
    padding: .15rem .6rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.about-personnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.25rem;
}

/* Plaqued portrait card */
.about-member-card {
    background: var(--bg-card, rgba(0,0,0,.28));
    border: 1px solid var(--border);
    border-radius: var(--figma-radius-md, 12px);
    overflow: hidden;
    text-align: center;
    box-shadow:
        0 3px 0 rgba(164,32,13,.3),
        0 6px 20px rgba(0,0,0,.32);
    transition: transform .2s ease, box-shadow .2s ease;
}

.about-member-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 3px 0 rgba(164,32,13,.5),
        0 10px 30px rgba(0,0,0,.45);
}

/* Avatar override — fill card, no rounded corners inside card */
.about-member-card .about-member-avatar {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    display: block;
}

/* Nameplate */
.about-member-info {
    padding: .6rem .75rem .7rem;
    border-top: 2px solid var(--brand, #A4200D);
    background: linear-gradient(to bottom, rgba(164,32,13,.09) 0%, transparent 100%);
}

.about-member-name {
    font-family: var(--figma-font-heading, 'Manrope', system-ui, sans-serif);
    font-size: .825rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .15rem;
    letter-spacing: .01em;
}

.about-member-title {
    font-size: .7rem;
    color: var(--text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ─────────────────────────────────────────────
   LIGHT THEME OVERRIDES
   ───────────────────────────────────────────── */
html[data-theme="light"] body.figma-theme .about-hero {
    background: linear-gradient(160deg, rgba(164,32,13,.07) 0%, rgba(255,255,255,0) 55%);
    border-color: rgba(0,0,0,.1);
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
}

html[data-theme="light"] body.figma-theme .about-section {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.1);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

html[data-theme="light"] body.figma-theme .about-apparatus-card {
    
    border-color: rgba(0,0,0,.12);
}

html[data-theme="light"] body.figma-theme .about-apparatus-img-wrap {
    background: #f0f0f0;
}

html[data-theme="light"] body.figma-theme .about-member-card {
    background: #ffffff;
    border-color: rgba(0,0,0,.12);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .about-page { padding: 0 1rem 3rem; }
    .about-hero { padding: 2.25rem 1.25rem 2rem; gap: 1.25rem; }
    .about-patch, .about-patch-placeholder { width: 110px; height: 110px; }
    .about-section { padding: 1.5rem 1.25rem; }
    .about-mission-text { font-size: 1.05rem; padding: .5rem 1.5rem; }
    .about-apparatus-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1rem; }
    .about-personnel-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
}

@media (max-width: 480px) {
    .about-dept-name { font-size: 1.5rem; }
    .about-apparatus-grid { grid-template-columns: 1fr 1fr; }
    .about-personnel-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
    .about-mission-text { padding: .5rem .75rem; }
}

/* (Sidebar offset rules are defined earlier in this file under the SIDEBAR section) */
}