/* ============================================================
   THEME VARIABLES — LIGHT MODE (DEFAULT)
   ============================================================ */
:root {
    /* Brand + primary civic blue */
    --color-primary: #1F4E79;
    /* Text colors */
    --color-text: #2A2A2A;
    --color-text-light: #ffffff;
    /* Backgrounds */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    /* Cards */
    --color-card-bg: #ffffff;
    --color-card-border: #d0d7df;
    --card-title-color: #1F6FB2;
    /* Footer (high-contrast, fixed tone) */
    --color-footer-bg: #F5F6F7;
    --color-footer-text: #2A2A2A;
}

/* ============================================================
   THEME VARIABLES — DARK MODE
   ============================================================ */
.page.dark {
    /* Keep navbar/hero civic blue for brand consistency */
    --color-primary: #1F4E79;
    /* Softer, readable body text */
    --color-text: #e0e6ed;
    --color-text-light: #ffffff;
    /* Dark surfaces */
    --color-bg: #0f172a;
    --color-surface: #0f172a;
    /* Cards */
    --color-card-bg: #1e293b;
    --color-card-border: #334155;
    --card-title-color: #5FA8E8;
    /* Footer stays high-contrast and light */
    --color-footer-bg: #F5F6F7;
    --color-footer-text: #2A2A2A;
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */
.text-primary-theme {
    color: var(--color-primary) !important;
}

.text-body-theme {
    color: var(--color-text) !important;
    margin-top: 1rem !important;
}

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

/* ============================================================
   BACKGROUND + SURFACE UTILITIES
   ============================================================ */
.bg-surface-theme {
    background-color: var(--color-surface) !important;
}

/* ============================================================
   NAVIGATION BAR
   ============================================================ */
.navbar-theme {
    background-color: var(--color-primary) !important;
}

.nav-link-theme {
    color: var(--color-text-light) !important;
}

.navbar-brand-theme {
    color: var(--color-text-light) !important;
}

/* Theme toggle icon */
#themeIcon {
    color: var(--color-text-light) !important;
}
#themeToggle {
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
}
#themeToggle:hover #themeIcon {
    opacity: 0.8;
}

/* ============================================================
   CARDS
   ============================================================ */
.card-theme {
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    color: var(--color-text) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-theme {
    background-color: var(--color-footer-bg) !important;
    color: var(--color-footer-text) !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-theme {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: 12px;
}

/* Default: light mode uses normal text */
.text-hero-light {
    color: var(--color-text) !important;
}

/* Dark mode override: force light text */
.page.dark .text-hero-light {
    color: var(--color-text-light) !important;
}

/* ---------------------------------------------------------
   Make the modal close button visible in dark mode
   --------------------------------------------------------- */
.page.dark .btn-close {
    /* Flip Bootstrap's black SVG to white */
    filter: invert(1) brightness(1.8);
    opacity: 0.9;
}

    /* Optional: hover refinement */
    .page.dark .btn-close:hover {
        opacity: 1;
    }