/* --- mobile-first.css --- */
/* WSU Navigators Mobile-First Framework */

/* ==========================================
   MOBILE-FIRST BASE STYLES
   ========================================== */

/* Reset and base mobile styles */
* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================
   DARK MODE VARIABLES & BASE STYLES
   ========================================== */

:root {
    /* Light theme colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.25);
    
    /* Brand colors */
    --color-primary: #0A4C95;
    --color-secondary: #F6C949;
    --color-accent: #10b981;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-error: #dc2626;
}

/* Dark theme colors */
html.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;    
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-primary: #334155;
    --border-secondary: #475569;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.6);
    
    /* Adjusted brand colors for dark mode */
    --color-primary: #3b82f6;
    --color-secondary: #fbbf24;
    --color-accent: #34d399;
}

/* Apply theme colors to body */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ==========================================
   NAVIGATION STYLES
   ========================================== */

/* Desktop dropdown styles */
.desktop-nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px var(--shadow-medium);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.desktop-nav-dropdown:hover .dropdown-menu,
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--color-primary);
}

/* Mobile menu section styles */
.mobile-menu-section-title {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-menu-sub-item {
    padding-left: 2.5rem !important;
    font-size: 0.9rem;
    opacity: 0.9;
}

.mobile-menu-divider {
    height: 1px;
    background-color: var(--border-primary);
    margin: 0.5rem 0;
}

/* ==========================================
   MOBILE TYPOGRAPHY
   ========================================== */

/* Mobile-first typography scale */
/* text-wrap: balance evens out line lengths on headings instead of
   leaving a lonely word or two on the last line — the exact "weird
   wrapping" fix already hand-applied to the home hero subtitle, made
   global here so every heading/subtitle on every page gets it instead
   of needing a one-off per page. Both properties are progressive
   enhancement: unsupported browsers just fall back to normal wrapping,
   so this can't regress anything. balance suits short blocks (headings,
   1-6 lines); pretty is the paragraph-appropriate variant (avoids
   orphans without balance's line-count limit/perf cost on long text). */
h1 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.3s ease;
    text-wrap: balance;
}

h2 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.3;
    margin-bottom: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.3s ease;
    text-wrap: balance;
}

h3 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.4;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.3s ease;
    text-wrap: balance;
}

h4 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
    margin-bottom: 0.625rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.3s ease;
    text-wrap: balance;
}

p {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--text-primary);
    transition: color 0.3s ease;
    text-wrap: pretty;
}

/* Hero subtitles are short (1-3 lines), where text-wrap: balance gives a
   much better result than pretty. pretty only rescues a single-word
   orphan on the last line — with 2+ words left over (e.g. "State
   University.") it doesn't intervene at all, so a phrase like "Wichita
   State University" can still get awkwardly split across lines. balance
   actively equalizes line lengths instead, which naturally keeps short
   phrases like that together. Longer body copy still uses pretty above,
   since balance is only well-suited to short blocks.

   The same short-centered-subtitle pattern (text-lg/xl/2xl + text-center
   + max-w-*xl mx-auto) repeats under section headings site-wide, not
   just in hero blocks — e.g. "Whether you are a college student or
   barely even college-adjacent, we want to hear from you." on the home
   Connect section had the identical awkward split. Centered paragraphs
   are, on this site, always this short-intro pattern rather than
   long-form justified body copy (which is left-aligned), so targeting
   centered paragraphs generalizes the fix everywhere it applies
   without needing a per-page/per-section selector.

   Centering is applied two different ways across the codebase: some
   paragraphs carry text-center directly, others inherit it from a
   wrapper div (e.g. <div class="text-center mb-12"><h2>...</h2><p>...
   </p></div>) — text-align inherits, so the child <p> renders centered
   either way even without the class itself. Both selectors are needed
   to catch both patterns. */
.mobile-hero h1,
.mobile-hero p,
p.text-center,
.text-center p {
    text-wrap: balance;
}

/* Small text for mobile */
.text-small {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
}

/* Large text for mobile emphasis */
.text-large {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5;
}

/* ==========================================
   MOBILE SPACING SYSTEM
   ========================================== */

/* Mobile-first spacing utilities */
.mobile-container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.mobile-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.mobile-card {
    background: var(--bg-primary);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px var(--shadow-light);
    border: 1px solid var(--border-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================
   MOBILE NAVIGATION
   ========================================== */

.mobile-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000 !important;
    height: 81px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    display: block;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
}

/* Compensate for the fixed mobile-nav when the browser hash-scrolls
   (e.g. visiting /#connect directly). Without this, the section lands
   at the top of the viewport behind the nav and reads as "didn't
   scroll" on mobile where the nav takes a larger % of screen height.
   Also fixes the programmatic scrollIntoView({block:'start'}) path. */
html {
    scroll-padding-top: 81px;
}
@media (min-width: 1280px) {
    html { scroll-padding-top: 96px; }
}

/* Home page specific styles - transparent initially */
body.home-page .mobile-nav {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}

/* When scrolled, show navigation background */
body.home-page .mobile-nav.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Dark mode support for transparent navigation */
.dark body.home-page .mobile-nav {
    background: transparent !important;
}

.dark body.home-page .mobile-nav.scrolled {
    background: rgba(17, 24, 39, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hide logo initially, show on scroll */
.mobile-nav .mobile-nav-logo {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease-in-out;
}

.mobile-nav.scrolled .mobile-nav-logo {
    opacity: 1;
    transform: translateX(0);
}

/* Always show hamburger menu (override Tailwind lg:hidden between 1024-1279px) */
.mobile-menu-button {
    opacity: 1 !important;
    display: flex !important;
    visibility: visible !important;
}

/* Override Tailwind lg:hidden - keep hamburger visible until xl breakpoint */
@media (min-width: 1024px) and (max-width: 1279px) {
    .mobile-menu-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

.mobile-main-content {
    padding-top: 70px !important;
    min-height: 100vh;
    transition: padding-top 0.3s ease-in-out;
}

/* Remove padding initially, add when scrolled */
@media (max-width: 1279px) {
    .mobile-main-content {
        padding-top: 70px !important;
    }
}

/* Add padding when navigation logo is visible */
.mobile-main-content.nav-scrolled {
    padding-top: 70px !important;
}

/* Override any conflicting navigation styles */
.universal-nav,
.universal-nav *,
[class*="universal-"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide desktop navigation elements on mobile/tablet */
@media (max-width: 1279px) {
    .desktop-nav-menu,
    .desktop-nav-item,
    .desktop-nav-actions {
        display: none !important;
    }
}

/* Show mobile navigation only on mobile/tablet */
@media (max-width: 1279px) {
    .mobile-nav {
        display: block !important;
    }
}

/* Desktop navigation styles */
@media (min-width: 1280px) {
    .mobile-nav {
        display: flex !important;
        height: auto;
        border-bottom: none;
        box-shadow: none;
    }

    .mobile-nav-content {
        justify-content: space-between;
        width: 100%;
        padding: 0 3rem;
    }
    
    /* Logo section */
    .mobile-nav .mobile-nav-logo {
        opacity: 1 !important;
        transform: none !important;
        height: auto;
        max-height: 55px;
        transition: all 0.2s ease;
    }
    
    /* Hide hamburger menu on desktop */
    .mobile-menu-button {
        display: none !important;
    }
    
    /* Desktop navigation menu */
    .desktop-nav-menu {
        display: flex !important;
        align-items: center;
        gap: 0.25rem;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Force desktop menu visibility with stronger selectors */
    .mobile-nav .desktop-nav-menu,
    nav .desktop-nav-menu,
    body .desktop-nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .desktop-nav-item {
        text-decoration: none;
        color: #ffffff !important;
        font-weight: 500;
        font-size: 0.95rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        transition: all 0.2s ease;
        display: flex !important;
        align-items: center;
        gap: 0.4rem;
        white-space: nowrap;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Force desktop nav items visibility with stronger selectors */
    .mobile-nav .desktop-nav-item,
    nav .desktop-nav-item,
    body .desktop-nav-item,
    .desktop-nav-menu .desktop-nav-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #ffffff !important;
    }
    
    .desktop-nav-item:hover {
        background: transparent;
        color: var(--wsu-brand-orange, #e16b2a) !important;
    }
    
    .desktop-nav-item svg {
        width: 16px;
        height: 16px;
    }
    
    /* Right side actions */
    .desktop-nav-actions {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Desktop theme toggle */
    .desktop-theme-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: #f3f4f6;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .desktop-theme-toggle:hover {
        background: #e5e7eb;
    }
    
    .desktop-theme-toggle svg {
        width: 18px;
        height: 18px;
        color: #6b7280;
    }
    
    /* Hide mobile elements on desktop */
    .floating-theme-toggle {
        display: none !important;
    }
    
    .mobile-main-content {
        padding-top: 70px !important;
    }
    
    /* Desktop dark mode styles */
    .dark .mobile-nav {
        background: rgba(15, 23, 42, 0.98) !important;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    
    .dark .desktop-nav-item {
        color: #ffffff !important;
    }

    .dark .desktop-nav-item:hover {
        background: transparent;
        color: var(--wsu-brand-orange, #e16b2a) !important;
    }
    
    .dark .desktop-theme-toggle {
        background: #334155;
    }
    
    .dark .desktop-theme-toggle:hover {
        background: #475569;
    }
    
    .dark .desktop-theme-toggle svg {
        color: #cbd5e1;
    }
}

.mobile-nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

.mobile-nav-logo {
    height: auto;
    max-height: 60px;
    width: auto;
}


/* Menu title color */
.mobile-menu-title {
    color: #1f2937;
}

.dark .mobile-menu-title {
    color: #f1f5f9;
}

.mobile-menu-button {
    width: 44px;
    height: 44px;
    border: none;
    background: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-menu-button:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    transform: scale(1.05);
}

/* Dark mode mobile menu button */
html.dark .mobile-menu-button,
.dark .mobile-menu-button {
    color: #f1f5f9 !important;
    background: none !important;
}

html.dark .mobile-menu-button:hover,
.dark .mobile-menu-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.05);
}

/* Hamburger icon */
.hamburger {
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #374151 !important;
    border-radius: 1px;
    position: absolute;
    transition: all 0.3s ease;
}

/* Dark mode hamburger */
html.dark .hamburger span,
.dark .hamburger span {
    background: #f1f5f9 !important;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }

/* Override brand theme colors for hamburger visibility */
html:not(.dark) .hamburger span,
body:not(.dark) .hamburger span,
.light .hamburger span {
    background: #374151 !important;
}

html.dark .hamburger span,
.dark .hamburger span {
    background: #f1f5f9 !important;
}

/* Mobile menu button overrides for all themes */
html:not(.dark) .mobile-menu-button,
body:not(.dark) .mobile-menu-button,
.light .mobile-menu-button {
    background: none !important;
    color: #374151 !important;
}

/* Desktop navigation overrides for visibility - only on desktop */
@media (min-width: 1280px) {
    html:not(.dark) .desktop-nav-item,
    body:not(.dark) .desktop-nav-item,
    .light .desktop-nav-item {
        color: #ffffff !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
    }

    html:not(.dark) .desktop-nav-item:hover,
    body:not(.dark) .desktop-nav-item:hover,
    .light .desktop-nav-item:hover {
        background: transparent !important;
        color: var(--wsu-brand-orange, #e16b2a) !important;
    }

    html:not(.dark) .desktop-nav-menu,
    body:not(.dark) .desktop-nav-menu,
    .light .desktop-nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    display: none;
    /* Allow vertical pan inside the open menu so long content can scroll;
       horizontal pan and pinch are still suppressed. The JS overlay
       touchmove handler already prevents bubbling scroll into the page. */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    will-change: opacity;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease, background-color 0.3s ease;
    overflow-y: auto;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.mobile-menu-overlay.active .mobile-menu-panel {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(248, 250, 252, 0.9);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mobile-menu-close-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: #6b7280;
}

.mobile-menu-close-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: scale(1.05);
}

/* Dark mode close button */
html.dark .mobile-menu-close-btn {
    color: #9ca3af;
}

html.dark .mobile-menu-close-btn:hover {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    transform: scale(1.05);
}

.mobile-menu-content {
    padding: 1.5rem 0;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    margin: 0 0.5rem;
    gap: 0.75rem;
}

.mobile-menu-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    transform: translateX(4px);
}

/* Dark mode menu items */
html.dark .mobile-menu-item:hover {
    background-color: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    transform: translateX(4px);
}

.mobile-menu-item svg {
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 0.5rem 1.25rem;
    transition: background-color 0.3s ease;
}

/* ==========================================
   MOBILE BUTTONS & INTERACTIONS
   ========================================== */

/* Mobile-optimized buttons */
.mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: 44px; /* Apple's minimum touch target */
    min-width: 44px;
    border: none;
    cursor: pointer;
}

.mobile-btn-primary {
    background: var(--color-primary);
    color: white;
}

.mobile-btn-primary:hover {
    background: var(--color-primary);
    transform: translateY(-1px);
    opacity: 0.9;
}

.mobile-btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.mobile-btn-secondary:hover {
    background: var(--color-primary);
    color: white;
}

/* Full-width mobile buttons */
.mobile-btn-full {
    width: 100%;
    margin-bottom: 0.75rem;
}

/* ==========================================
   MOBILE CARDS & CONTENT
   ========================================== */

.mobile-hero {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    background: #0A2240;
    transition: background 0.3s ease;
}

.mobile-hero-content {
    max-width: 100%;
}

.mobile-hero h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.mobile-hero p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

/* Mobile content sections */
.mobile-content-section {
    padding: 2rem 0;
}

.mobile-feature-card {
    background: var(--bg-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px var(--shadow-light);
    border: 1px solid var(--border-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mobile-feature-icon {
    width: 48px;
    height: 48px;
    background: #e0f2fe;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* ==========================================
   MOBILE FORMS
   ========================================== */

.mobile-form-group {
    margin-bottom: 1.25rem;
}

.mobile-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.mobile-form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: white;
    transition: all 0.2s ease;
    min-height: 44px;
}

.mobile-form-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.mobile-form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* ==========================================
   MOBILE UTILITIES
   ========================================== */

/* Hide on mobile */
.mobile-hidden {
    display: none;
}

/* Show only on mobile */
.mobile-only {
    display: block;
}

/* Mobile spacing utilities */
.mobile-mt-1 { margin-top: 0.5rem; }
.mobile-mt-2 { margin-top: 1rem; }
.mobile-mt-3 { margin-top: 1.5rem; }
.mobile-mt-4 { margin-top: 2rem; }

.mobile-mb-1 { margin-bottom: 0.5rem; }
.mobile-mb-2 { margin-bottom: 1rem; }
.mobile-mb-3 { margin-bottom: 1.5rem; }
.mobile-mb-4 { margin-bottom: 2rem; }

.mobile-px-2 { padding-left: 1rem; padding-right: 1rem; }
.mobile-py-2 { padding-top: 1rem; padding-bottom: 1rem; }

/* Mobile text alignment */
.mobile-text-center { text-align: center; }
.mobile-text-left { text-align: left; }

/* ==========================================
   FLOATING THEME TOGGLE
   ========================================== */

.floating-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: #1f2937;
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.floating-theme-toggle:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.floating-theme-toggle:active {
    transform: scale(1.05) translateY(-1px);
}

.floating-theme-toggle svg {
    width: 24px;
    height: 24px;
    color: #fbbf24;
    transition: all 0.3s ease;
}

/* Theme toggle icon visibility — CSS handles initial state instantly
   (theme-init.js sets .dark on <html> in <head> before body renders) */
#floating-theme-toggle .sun-icon { display: none; }
#floating-theme-toggle .moon-icon { display: block; }
.dark #floating-theme-toggle .sun-icon { display: block; }
.dark #floating-theme-toggle .moon-icon { display: none; }

/* Light mode styles */
.light .floating-theme-toggle {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.light .floating-theme-toggle svg {
    color: #f59e0b;
}

/* Dark mode styles */
.dark .floating-theme-toggle {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .floating-theme-toggle svg {
    color: #fbbf24;
}

/* Theme toggle animation */
.theme-toggle-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-icon svg {
    position: absolute;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-icon .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle-icon .moon-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0.8);
}

.dark .theme-toggle-icon .sun-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0.8);
}

.dark .theme-toggle-icon .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .floating-theme-toggle {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
    }
    
    .floating-theme-toggle svg {
        width: 22px;
        height: 22px;
    }
}

/* ==========================================
   ENHANCED DARK MODE SUPPORT
   ========================================== */

/* Light mode (default) */
body {
    background-color: #ffffff;
    color: #1f2937;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode */
.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}

.dark .mobile-nav {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .mobile-card, 
.dark .mobile-feature-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.dark .mobile-hero {
    background: #333333;
}

.dark .mobile-hero h1 {
    color: #60a5fa !important;
}

.dark .mobile-hero p {
    color: #cbd5e1 !important;
}

.dark .hamburger span {
    background: #f1f5f9;
}

.dark .mobile-form-input {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

.dark .mobile-form-label {
    color: #cbd5e1;
}

.dark .mobile-btn-primary {
    background: #3b82f6;
    color: white;
}

.dark .mobile-btn-primary:hover {
    background: #2563eb;
}

.dark .mobile-btn-secondary {
    background: transparent;
    color: #60a5fa;
    border-color: #3b82f6;
}

.dark .mobile-btn-secondary:hover {
    background: #3b82f6;
    color: white;
}

/* Mobile menu dark mode */
.dark .mobile-menu-panel {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
}

.dark .mobile-menu-header {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark .mobile-menu-item {
    color: #cbd5e1;
}

.dark .mobile-menu-item:hover {
    background-color: #334155;
    color: #60a5fa;
}

.dark .mobile-menu-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Content sections dark mode */
.dark .mobile-content-section {
    background: #0f172a !important;
}

/* Feature icons dark mode */
.dark .mobile-feature-icon {
    background: rgba(59, 130, 246, 0.2) !important;
}

/* Special background cards in dark mode */
.dark .mobile-feature-card[style*="background: #f0f9ff"],
.dark .mobile-feature-card[style*="background: #fef3c7"],
.dark .mobile-feature-card[style*="background: #dcfce7"],
.dark .mobile-feature-card[style*="background: #f3e8ff"],
.dark .mobile-card[style*="background: white"],
.dark .mobile-content-section[style*="background: white"],
.dark *[style*="background: white"],
.dark *[style*="background: #ffffff"],
.dark *[style*="background:#ffffff"],
.dark *[style*="background: #fff"],
.dark *[style*="background:#fff"] {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark .mobile-feature-card[style*="background: #f0f9ff"] h3,
.dark .mobile-feature-card[style*="background: #fef3c7"] h3,
.dark .mobile-feature-card[style*="background: #dcfce7"] h3,
.dark .mobile-feature-card[style*="background: #f3e8ff"] h3,
.dark .mobile-card[style*="background: white"] h3,
.dark .mobile-content-section[style*="background: white"] h3,
.dark *[style*="background: white"] h3,
.dark *[style*="background: #ffffff"] h3,
.dark *[style*="background:#ffffff"] h3,
.dark *[style*="background: #fff"] h3,
.dark *[style*="background:#fff"] h3 {
    color: #60a5fa !important;
}

.dark .mobile-feature-card[style*="background: #f0f9ff"] p,
.dark .mobile-feature-card[style*="background: #fef3c7"] p,
.dark .mobile-feature-card[style*="background: #dcfce7"] p,
.dark .mobile-feature-card[style*="background: #f3e8ff"] p,
.dark .mobile-card[style*="background: white"] p,
.dark .mobile-content-section[style*="background: white"] p,
.dark *[style*="background: white"] p,
.dark *[style*="background: #ffffff"] p,
.dark *[style*="background:#ffffff"] p,
.dark *[style*="background: #fff"] p,
.dark *[style*="background:#fff"] p {
    color: #cbd5e1 !important;
}

/* Fix white text on white backgrounds */
.dark *[style*="color: white"],
.dark *[style*="color:#ffffff"],
.dark *[style*="color: #ffffff"],
.dark *[style*="color:#fff"],
.dark *[style*="color: #fff"] {
    color: #f1f5f9 !important;
}

/* System dark mode preference */
@media (prefers-color-scheme: dark) {
    :root:not(.light) body {
        background-color: #0f172a;
        color: #f1f5f9;
    }
}

/* ==========================================
   TABLET STYLES (768px+)
   ========================================== */

@media (min-width: 768px) {
    .mobile-container {
        max-width: 768px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .mobile-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    
    h1 {
        font-size: 2.25rem; /* 36px */
    }
    
    h2 {
        font-size: 1.875rem; /* 30px */
    }
    
    .mobile-hero h1 {
        font-size: 2.5rem;
    }
    
    .mobile-hero p {
        font-size: 1.25rem;
    }
    
    .mobile-nav {
        height: auto;
    }

    .mobile-hero {
        min-height: calc(100vh - 70px);
    }
    
    /* Hide mobile-only elements on tablet+ */
    .mobile-only {
        display: none;
    }
    
    /* Show tablet+ elements */
    .tablet-up {
        display: block;
    }
}

/* ==========================================
   DESKTOP STYLES (1024px+)
   ========================================== */

@media (min-width: 1024px) {
    .mobile-container {
        max-width: 1024px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    
    .mobile-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    h1 {
        font-size: 3rem; /* 48px */
    }
    
    h2 {
        font-size: 2.25rem; /* 36px */
    }
    
    .mobile-hero h1 {
        font-size: 3.5rem;
    }
    
    .mobile-nav {
        height: auto;
    }

    .mobile-hero {
        min-height: calc(100vh - 80px);
    }
    
    /* Hide mobile elements on desktop */
    .mobile-hidden {
        display: block;
    }
}

/* ==========================================
   SMALL MOBILE STYLES (480px and below)
   ========================================== */

@media (max-width: 480px) {
    /* Smaller mobile navigation adjustments */
    .mobile-nav {
        height: 60px !important;
        padding: 0;
    }
    
    .mobile-nav-content {
        padding: 0 1rem !important;
        height: 60px;
    }
    
    .mobile-nav .mobile-nav-logo {
        height: 40px !important;
        max-height: 40px !important;
    }
    
    .mobile-menu-button {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
    }
    
    .mobile-menu-panel {
        width: 280px !important;
        max-width: 90vw !important;
    }
    
    .mobile-menu-item {
        padding: 1rem 1rem !important;
        font-size: 1rem !important;
    }
    
    .mobile-menu-header {
        padding: 0.75rem 1rem !important;
    }
    
    .mobile-menu-title {
        font-size: 1rem !important;
    }
    
    /* Ensure main content doesn't get covered */
    .mobile-main-content {
        margin-top: 60px !important;
    }
    
    /* Home page specific adjustments */
    body.home-page .mobile-main-content {
        margin-top: 0 !important;
        padding-top: 80px !important;
    }
    
    body.home-page .mobile-nav.scrolled ~ .mobile-main-content {
        /* Keep the hero's geometry stable while the nav changes appearance. */
        margin-top: 0 !important;
        padding-top: 80px !important;
    }
    
    /* Keep the home hero tucked beneath the fixed navigation instead of
       vertically centering its logo's transparent canvas. */
    body.home-page #home.mobile-hero[data-component-id="home-hero"] {
        align-items: flex-start;
        min-height: 100svh !important;
        padding: 4rem 1rem 2rem;
    }

    body.home-page #home.mobile-hero[data-component-id="home-hero"] .mobile-hero-content {
        padding-top: 0 !important;
    }

    /* A reload should present the hero already settled, not animate separate
       pieces of it into place after the mobile browser has sized the page. */
    body.home-page #home.mobile-hero[data-component-id="home-hero"] .animate-fade-in-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* The logo file includes generous transparent bounds. Let it keep its
       natural aspect ratio on phones, give the visible mark a little more
       presence, then reclaim its invisible lower canvas below. */
    body.home-page #home.mobile-hero[data-component-id="home-hero"] #hero-logo {
        height: auto !important;
        width: calc(100% + 0.75rem) !important;
        max-width: 26rem !important;
        margin-left: -0.375rem;
        aspect-ratio: 2.14 / 1;
    }

    body.home-page #home.mobile-hero[data-component-id="home-hero"] .mobile-hero-content > div:first-child {
        margin-bottom: -0.5rem !important;
    }

    body.home-page #home.mobile-hero[data-component-id="home-hero"] h1 {
        margin-bottom: 1.25rem !important;
    }

    /* Bring the mission and supporting copy down toward the already-placed
       actions, without shifting the buttons back up. */
    body.home-page #home.mobile-hero[data-component-id="home-hero"] h1,
    body.home-page #home.mobile-hero[data-component-id="home-hero"] .mobile-hero-content > div:has([data-key="subtitle"]) {
        position: relative;
        top: 1.5rem;
    }

    /* Preserve the three-part mission headline on compact phones while
       keeping its final thought together. */
    body.home-page #home.mobile-hero[data-component-id="home-hero"] [data-key="title3"] {
        font-size: clamp(1.05rem, 5vw, 1.25rem) !important;
        line-height: 1.2 !important;
        letter-spacing: -0.025em;
        white-space: nowrap;
    }

    /* Let the supporting paragraph read as supporting copy rather than a
       second headline. */
    body.home-page #home.mobile-hero[data-component-id="home-hero"] [data-key="subtitle"] {
        max-width: 24rem;
        margin-inline: auto;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        text-wrap: balance;
    }

    body.home-page #home.mobile-hero[data-component-id="home-hero"] .mobile-hero-content > div:has([data-key="subtitle"]) {
        margin-bottom: 1.25rem !important;
    }

    /* Keep the actions in their own calmer zone beneath the supporting copy. */
    body.home-page #home.mobile-hero[data-component-id="home-hero"] .mobile-hero-content > .flex.flex-col {
        margin-top: 5.5rem !important;
    }
    
    /* Better touch targets */
    .floating-theme-toggle {
        width: 52px !important;
        height: 52px !important;
        bottom: 1rem !important;
        right: 1rem !important;
    }
    
    /* Improve hamburger button visibility */
    .mobile-menu-button .hamburger span {
        height: 3px !important;
        margin-bottom: 4px !important;
    }
    
    /* Better menu transitions on mobile */
    .mobile-menu-panel {
        transition: transform 0.25s ease-out !important;
    }
    
    .mobile-menu-overlay {
        transition: opacity 0.25s ease-out !important;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1 !important;
    }
}

/* ==========================================
   VERY SMALL MOBILE STYLES (360px and below)
   ========================================== */

@media (max-width: 360px) {
    .mobile-nav {
        height: 56px !important;
    }
    
    .mobile-nav-content {
        padding: 0 0.75rem !important;
        height: 56px;
    }
    
    .mobile-nav .mobile-nav-logo {
        height: 36px !important;
        max-height: 36px !important;
    }
    
    .mobile-menu-button {
        width: 40px !important;
        height: 40px !important;
    }
    
    .mobile-menu-panel {
        width: 260px !important;
        max-width: 95vw !important;
    }
    
    .mobile-menu-item {
        padding: 0.875rem 0.75rem !important;
        font-size: 0.95rem !important;
    }
    
    .mobile-menu-header {
        padding: 0.625rem 0.75rem !important;
    }
    
    /* Ensure main content doesn't get covered */
    .mobile-main-content {
        margin-top: 56px !important;
    }
    
    /* Home page specific adjustments */
    body.home-page .mobile-main-content {
        margin-top: 0 !important;
        padding-top: 70px !important;
    }
    
    body.home-page .mobile-nav.scrolled ~ .mobile-main-content {
        margin-top: 0 !important;
        padding-top: 70px !important;
    }
    
    /* The home hero's tighter mobile spacing above also covers this size. */
}

/* ==========================================
   ACCESSIBILITY & PERFORMANCE
   ========================================== */

/* High contrast support */
@media (prefers-contrast: high) {
    .mobile-btn-primary {
        border: 2px solid #000;
    }
    
    .mobile-card, .mobile-feature-card {
        border: 2px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
.mobile-btn:focus,
.mobile-form-input:focus,
.mobile-menu-button:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * CTA widget — background variants
 *
 * Variants are selected via `data-bg-variant` on the root `[data-cta-root]`
 * element emitted by the client renderer and the server generator. Styling
 * MUST live here (not in inline `style=` attrs) so the builder can switch
 * variants without re-rendering the whole component. `!important` preserves
 * the page's color contracts when hand-crafted HTML sets conflicting inline
 * styles on descendants.
 * ------------------------------------------------------------------------ */
[data-cta-root][data-bg-variant="default"] {
    background: #008c95 !important;
    color: #ffffff !important;
}
[data-cta-root][data-bg-variant="solid-dark"] {
    background: #475569 !important;
    color: #ffffff !important;
}
[data-cta-root][data-bg-variant="gradient-teal"] {
    background: linear-gradient(135deg, #008c95 0%, #006b75 100%) !important;
    color: #ffffff !important;
}
[data-cta-root][data-bg-variant="gradient-dark"] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
    color: #ffffff !important;
}
[data-cta-root] h1,
[data-cta-root] h2,
[data-cta-root] h3 {
    color: #ffffff !important;
}
[data-cta-root] p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ===== image-text-row widget =====
 *
 * Canonical class is .itr-row. Legacy .ff-row (femme-fideles) and .gi-row
 * (get-involved) are aliased to preserve the !important contract captured
 * in important-contracts.json before those pages were migrated off
 * custom-code (see scripts/inventory/important-contracts.json —
 * `.ff-row__half img` / `.gi-row__half img` height: auto !important).
 *
 * Mobile default: flex column-reverse so the image renders on top and the
 * text below, regardless of DOM order. Desktop switches to row and honors
 * data-image-left="1" (image first) or "0" (image last).
 */
.itr-row, .ff-row, .gi-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2rem;
}
.itr-row[data-image-left="1"],
.ff-row[data-image-left="1"],
.gi-row[data-image-left="1"] {
    flex-direction: column;
}
.itr-half, .ff-row__half, .gi-row__half {
    width: 100%;
    min-width: 0;
}
.itr-text, .ff-row__text, .gi-row__text {
    text-align: center;
}
/* On mobile, let images size to their natural aspect ratio instead of
 * being cropped by the inline height:420px set by the renderer. This is
 * the !important contract captured from staging — must apply to all three
 * class names. */
@media (max-width: 1023px) {
    .itr-half img,
    .ff-row__half img,
    .gi-row__half img {
        height: auto !important;
    }
}
@media (min-width: 1024px) {
    .itr-row, .ff-row, .gi-row {
        flex-direction: row;
        gap: 4rem;
    }
    .itr-row[data-image-left="1"],
    .ff-row[data-image-left="1"],
    .gi-row[data-image-left="1"] {
        flex-direction: row;
    }
    .itr-half, .ff-row__half, .gi-row__half {
        flex: 1 1 0%;
    }
    .itr-text, .ff-row__text, .gi-row__text {
        text-align: left;
    }
}

/* ===== step-sticky-header widget =====
 *
 * Thin sticky bar demarcating a process step. Canonical class is
 * `.ssh-sticky`. Legacy `.gi-step-sticky` (get-involved) is aliased so the
 * !important rule captured from staging (58px mobile offset) keeps working
 * after the sections are migrated off custom-code.
 *
 * The inline top offset (from stickyOffset) is applied via `style="top:Npx"`
 * on the section. The mobile !important rule overrides that for viewports
 * under 640px to match the site's mobile fixed-nav height.
 */
.ssh-sticky, .gi-step-sticky { position: sticky; z-index: 30; }
@media (max-width: 639px) {
    .ssh-sticky, .gi-step-sticky { top: 58px !important; }
}

/* ===== scroll-polish (progressive enhancement) =====
 *
 * Paired with client/js/scroll-polish.js. The JS attaches
 * `data-scroll-fade` to opt-in elements and flips
 * `data-scroll-state="visible"` once they're in view; if the JS doesn't
 * run, neither attribute is set and these rules don't apply, so the
 * page renders exactly as before.
 *
 * Sticky-stuck shadow: the JS adds `data-stuck` to .gi-step-sticky and
 * .ssh-sticky bars only while they're actually pinned to the viewport
 * top. The shadow is intentionally subtle — it's a state cue, not a
 * decoration.
 */
[data-scroll-fade] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
[data-scroll-fade][data-scroll-stagger="1"] {
    transition-delay: 80ms;
}
[data-scroll-fade][data-scroll-state="visible"] {
    opacity: 1;
    transform: none;
}
.ssh-sticky, .gi-step-sticky {
    transition: box-shadow 220ms ease-out;
}
.ssh-sticky[data-stuck], .gi-step-sticky[data-stuck] {
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.28);
}
.dark .ssh-sticky[data-stuck], .dark .gi-step-sticky[data-stuck] {
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: reduce) {
    [data-scroll-fade] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ssh-sticky, .gi-step-sticky { transition: none; }
}

/* Image loading polish — paired with initImageFade() in scroll-polish.js.
 * The JS only opts in images that aren't yet decoded at script time, so
 * above-the-fold and cached images bypass these rules entirely.
 *
 * While an opted-in image is still downloading, its box shows a softly
 * pulsing placeholder shade instead of empty space — on slow connections
 * the layout reads as "designed and waiting" rather than half-empty.
 * When the load event fires the shade drops and the image fades in.
 * The shade MUST drop at load: logos and other transparent PNGs would
 * otherwise keep a gray box behind them forever. */
[data-img-fade] {
    background-color: rgba(100, 116, 139, 0.10);
    animation: img-placeholder-pulse 1.6s ease-in-out infinite;
}
.dark [data-img-fade] {
    background-color: rgba(148, 163, 184, 0.08);
}
[data-img-fade][data-img-fade-state="loaded"] {
    background-color: transparent;
    animation: img-reveal 300ms ease-out;
}
@keyframes img-placeholder-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@keyframes img-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    /* Static shade is fine (it's a state cue, not motion) — just no
     * pulsing or fading. */
    [data-img-fade] { animation: none; }
    [data-img-fade][data-img-fade-state="loaded"] { animation: none; }
}

/* Give the in-card CTA buttons (e.g., "Learn About NavNight",
 * "Find a Community Group") more breathing room from the paragraph
 * above. The page builder bakes Tailwind's `mb-6` (24px) onto the <p>;
 * adding margin-top here boosts the gap without editing stored HTML. */
.gi-row__text > a {
    margin-top: 1.5rem;
}

/* --- theme.css --- */
/* WSU Navigators Theme System */
:root {
  /* Primary Theme Colors */
  --color-primary: #0A4C95;
  --color-primary-light: #1560B3;
  --color-primary-dark: #083A78;
  
  /* Secondary Theme Colors */
  --color-secondary: #F6C949;
  --color-secondary-light: #F8D56B;
  --color-secondary-dark: #E5B632;
  
  /* Accent Colors */
  --color-accent: #10b981;
  --color-accent-light: #34d399;
  --color-accent-dark: #059669;
  
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  --color-bg-soft: #F8F9FA;
  
  /* Text Colors */
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #adb5bd;
  
  /* Border Colors */
  --color-border-light: #e9ecef;
  --color-border-medium: #ced4da;
  --color-border-dark: #adb5bd;
  
  /* Status Colors */
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #0dcaf0;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-base: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  
  /* Typography */
  --font-family-sans: 'Montserrat', Arial, sans-serif;
  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Dark Theme */
[data-theme="dark"], .dark {
  /* Background Colors */
  --color-bg-primary: #0E1117;
  --color-bg-secondary: #161b22;
  --color-bg-tertiary: #21262d;
  --color-bg-soft: #0E1117;
  
  /* Text Colors */
  --color-text-primary: #f0f6fc;
  --color-text-secondary: #8b949e;
  --color-text-muted: #6e7681;
  
  /* Border Colors */
  --color-border-light: #30363d;
  --color-border-medium: #21262d;
  --color-border-dark: #6e7681;
  
  /* Adjust primary colors for dark theme */
  --color-primary-light: #2670d9;
  --color-primary-dark: #0550ae;
  
  /* Shadows for dark theme */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

/* Theme Utility Classes */
.theme-primary { color: var(--color-primary); }
.theme-secondary { color: var(--color-secondary); }
.theme-accent { color: var(--color-accent); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }

/* Theme-aware components */
.btn {
  background-color: var(--color-primary);
  color: var(--color-bg-primary);
  border: 1px solid var(--color-primary);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

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

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-secondary);
}

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

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

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

.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

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

.input {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgb(10 76 149 / 0.1);
}

/* Theme toggle animations */
.theme-transition {
  transition: background-color var(--transition-base), 
              color var(--transition-base), 
              border-color var(--transition-base);
}

/* Responsive design helpers */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  :root {
    --color-bg-primary: #ffffff;
    --color-text-primary: #000000;
    --shadow-base: none;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border-light: #000000;
    --color-border-medium: #000000;
    --color-text-secondary: #000000;
  }
  
  [data-theme="dark"], .dark {
    --color-border-light: #ffffff;
    --color-border-medium: #ffffff;
    --color-text-secondary: #ffffff;
  }
}
/* --- brand-theme.css --- */
/* WSU Navigators Brand Theme System */

/* ==========================================
   BRAND COLORS & DESIGN TOKENS
   ========================================== */

/* WSU Navigators Brand Colors - Work WITH existing mobile-first.css system */

:root {
  /* Brand Colors Only - Let mobile-first.css handle the rest */
  --wsu-brand-orange: #df6a2a;       /* Primary brand color - orange */
  --wsu-brand-teal: #008c95;         /* Secondary brand color - teal */
  --wsu-brand-menu: #61514e;         /* Menu color - brown/gray */
  --wsu-brand-footer: #392f2c;       /* Footer color */
}

/* Dark mode uses same colors */
html.dark {
  --wsu-brand-orange: #df6a2a;       /* Same orange in dark mode */
  --wsu-brand-teal: #008c95;         /* Same teal in dark mode */
}

/* ==========================================
   BASIC BRAND ELEMENTS ONLY
   ========================================== */

/* Let mobile-first.css handle all base styles */

/* Mission Statement Styling */
.mission-statement {
  color: var(--wsu-brand-orange) !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(223, 106, 42, 0.1);
  letter-spacing: -0.02em;
}

.mission-statement-accent {
  color: var(--wsu-brand-teal) !important;
}

/* ==========================================
   SIMPLE BUTTON STYLES WITH BRAND COLORS
   ========================================== */

/* Primary button - Orange */
.btn-primary {
  background: var(--wsu-brand-orange) !important;
  color: white !important;
  border: 2px solid var(--wsu-brand-orange) !important;
}

.btn-primary:hover {
  background: #bf4a0a !important;
  border-color: #bf4a0a !important;
}

/* Secondary button - Teal */
.btn-secondary {
  background: var(--wsu-brand-teal) !important;
  color: white !important;
  border: 2px solid var(--wsu-brand-teal) !important;
}

.btn-secondary:hover {
  background: #006b75 !important;
  border-color: #006b75 !important;
}

/* ==========================================
   SIMPLE EVENT CARD BRAND COLORS
   ========================================== */

/* Fix Chrome backdrop-filter rendering glitch — cards can appear blank until
   hovered because backdrop-filter doesn't trigger an initial paint.  Forcing
   GPU compositing with will-change/translateZ ensures they render immediately. */
.event-card {
  will-change: transform;
  transform: translateZ(0);
  /* Equal-height cards: flex column so the button pins to the bottom */
  display: flex;
  flex-direction: column;
}

/* Content area grows to fill the card, pushing button to the bottom */
.event-card > div[class*="p-"] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Inline elements (badges, buttons) shouldn't stretch full width in the flex column */
.event-card > div[class*="p-"] > span,
.event-card > div[class*="p-"] > a {
  align-self: flex-start;
}

/* Last element (button/link) in the content area sticks to the bottom */
.event-card > div[class*="p-"] > a:last-child,
.event-card > div[class*="p-"] > span:last-child,
.event-card > div[class*="p-"] > div:last-child {
  margin-top: auto;
}

/* Event card image placeholders */
.event-card-image {
  background: linear-gradient(135deg, var(--wsu-brand-teal), var(--wsu-brand-orange));
}

/* Event date badges */
.event-card-date {
  background: var(--wsu-brand-orange);
  color: white;
}

/* Event filter badges */
.event-filter-badge {
  background: var(--wsu-brand-teal);
  color: white;
}

/* ==========================================
   NAVIGATION WITH BRAND COLORS
   ========================================== */

/* Fix duplicate navigation - JavaScript now removes duplicates */

/* IMMEDIATE FLASH PREVENTION - Load first to prevent white flash */
nav, .mobile-nav, .mobile-nav-content, .desktop-nav-menu {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* FORCE ALL NAVIGATION TO ALWAYS BE BROWN - NEVER CHANGES WITH THEME */
html:not(.dark) nav,
html:not(.dark) .mobile-nav,
html:not(.dark) .mobile-nav-content,
html:not(.dark) .desktop-nav-menu,
html.light nav,
html.light .mobile-nav,
html.light .mobile-nav-content,
html.light .desktop-nav-menu,
body:not(.dark) nav,
body:not(.dark) .mobile-nav,
body:not(.dark) .mobile-nav-content,
body:not(.dark) .desktop-nav-menu,
body.light nav,
body.light .mobile-nav,
body.light .mobile-nav-content,
body.light .desktop-nav-menu {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

.desktop-nav-item {
  background: none !important;
  background-color: transparent !important;
  color: white !important;
}

/* FORCE DESKTOP NAVIGATION TEXT TO ALWAYS BE WHITE - NEVER CHANGES WITH THEME */
html:not(.dark) .desktop-nav-item,
html.light .desktop-nav-item,
body:not(.dark) .desktop-nav-item,
body.light .desktop-nav-item,
.desktop-nav-item {
  color: white !important;
  background: none !important;
  background-color: transparent !important;
}

/* Change existing top navigation color to Menu Color (brown) */

/* LIGHT MODE: Colored navigation background (Menu Color var(--wsu-brand-menu)) */
*[class*="mobile-nav"]:not([class*="logo"]):not([class*="button"]):not([class*="item"]),
.mobile-nav,
nav.mobile-nav,
.mobile-nav-content,
body .mobile-nav,
body nav.mobile-nav,
body .mobile-nav-content,
body.home-page .mobile-nav,
body.home-page .mobile-nav.scrolled {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* DARK MODE: Menu Color (var(--wsu-brand-menu)) brown background */
.dark .mobile-nav,
.dark nav.mobile-nav, 
.dark .mobile-nav-content,
.dark body.home-page .mobile-nav,
.dark body.home-page .mobile-nav.scrolled,
html.dark .mobile-nav,
html.dark nav.mobile-nav,
html.dark .mobile-nav-content,
html.dark body .mobile-nav,
html.dark body nav.mobile-nav,
html.dark body .mobile-nav-content,
html.dark body.home-page .mobile-nav,
html.dark body.home-page .mobile-nav.scrolled,
html.dark *[class*="mobile-nav"]:not([class*="logo"]):not([class*="button"]):not([class*="item"]) {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* MOBILE MENU ALWAYS USES DARK MODE APPEARANCE - BROWN BACKGROUND */
#mobile-menu-overlay,
#mobile-menu-panel,
div#mobile-menu-overlay,
div#mobile-menu-panel,
.mobile-menu-panel,
.mobile-menu-overlay,
.light .mobile-menu-panel,
.light .mobile-menu-overlay,
.light #mobile-menu-overlay,
.light #mobile-menu-panel,
html.light .mobile-menu-panel,
html.light .mobile-menu-overlay,
html.light #mobile-menu-overlay,
html.light #mobile-menu-panel,
html:not(.dark) .mobile-menu-panel,
html:not(.dark) .mobile-menu-overlay,
html:not(.dark) #mobile-menu-overlay,
html:not(.dark) #mobile-menu-panel,
body:not(.dark) .mobile-menu-panel,
body:not(.dark) .mobile-menu-overlay,
body:not(.dark) #mobile-menu-overlay,
body:not(.dark) #mobile-menu-panel,
.dark .mobile-menu-panel,
.dark .mobile-menu-overlay,
.dark #mobile-menu-overlay,
.dark #mobile-menu-panel,
html.dark .mobile-menu-panel,
html.dark .mobile-menu-overlay,
html.dark #mobile-menu-overlay,
html.dark #mobile-menu-panel {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* Ensure overlay spans full viewport edge-to-edge - SIMPLIFIED */
#mobile-menu-overlay,
div#mobile-menu-overlay,
.mobile-menu-overlay,
.light #mobile-menu-overlay,
html.light #mobile-menu-overlay,
html:not(.dark) #mobile-menu-overlay,
body:not(.dark) #mobile-menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

/* Panel should fill the overlay  */
#mobile-menu-panel,
div#mobile-menu-panel,
.mobile-menu-panel,
.light #mobile-menu-panel,
html.light #mobile-menu-panel,
html:not(.dark) #mobile-menu-panel,
body:not(.dark) #mobile-menu-panel {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Prevent any white gaps from showing */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Default background for light mode */
html:not(.dark),
html.light,
body:not(.dark),
body.light {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* When menu is open, force brown background on EVERYTHING */
html.menu-open,
html:not(.dark).menu-open,
html.light.menu-open,
body.menu-open,
body:not(.dark).menu-open,
body.light.menu-open {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Mobile menu header background */
.mobile-menu-header,
.light .mobile-menu-header,
html.light .mobile-menu-header,
html:not(.dark) .mobile-menu-header,
body:not(.dark) .mobile-menu-header,
.dark .mobile-menu-header,
html.dark .mobile-menu-header {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* NUCLEAR FORCE LIGHT MODE: Override everything */

/* CRITICAL: Override mobile-first.css CSS variables that cause dark colors in light mode */
html:not(.dark), 
html:not(.dark):root, 
:root:not(.dark),
html.light,
html.light:root,
:root.light {
  /* Override the problematic mobile-first.css variables */
  --bg-primary: #ffffff !important;
  --bg-secondary: #f4f4f4 !important; 
  --bg-tertiary: #f4f4f4 !important;
  --text-primary: var(--wsu-brand-menu) !important;
  --text-secondary: var(--wsu-brand-menu) !important;
  --text-tertiary: var(--wsu-brand-menu) !important;
  --border-primary: #e2e8f0 !important;
  --border-secondary: #cbd5e1 !important;
  
  /* Block the specific dark colors that appear in light mode */
  --color-bg-secondary: #f4f4f4 !important;
  --color-bg-tertiary: #f4f4f4 !important;
  --color-text-primary: var(--wsu-brand-menu) !important;
}

/* Force override of any remaining CSS variables from mobile-first.css */
html:not(.dark) * {
  --bg-primary: #ffffff !important;
  --bg-secondary: #f4f4f4 !important; 
  --bg-tertiary: #f4f4f4 !important;
}

/* ==========================================
   UNIFORM THEME TRANSITIONS
   ========================================== */

/* Universal uniform transition - all elements change together */
html,
body,
.mobile-nav,
.mobile-nav-content,
.mobile-menu-panel,
.mobile-menu-header,
.mobile-card,
.mobile-content-section,
section,
.mobile-feature-card,
h1, h2, h3, h4, h5, h6, p, span, div,
input, textarea, select,
.desktop-nav-item,
button:not(.theme-toggle),
a,
* {
  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              stroke 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Logo transitions - same timing for consistency */
img[src*="logo"] {
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Footer logo always stays white (dark mode state) */
#footer-logo,
.footer-logo {
  content: url('../logo-white.png') !important;
}

/* Menu logo always stays white (dark mode state) with no background */
#mobile-nav-logo,
#mobile-menu-logo,
.mobile-nav-logo,
.logo-responsive {
  content: url('../logo-white.png') !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================
   RESPONSIVE LOGO SIZING - Match index.html exactly
   ========================================== */

/* PRACTICAL NAVIGATION SIZING - TIGHT FIT FOR LOGO */
.mobile-nav-logo,
.logo-responsive,
#mobile-nav-logo {
    height: auto !important;
    max-height: 126px !important; /* Another 30% larger: 97px * 1.3 = 126px */
    width: auto !important;
}

/* Responsive navigation heights - no top cushioning */
@media (max-width: 640px) {
    .mobile-nav-logo,
    .logo-responsive,
    #mobile-nav-logo {
        max-height: 94px !important; /* Another 30% larger: 72px * 1.3 = 94px */
    }
}

@media (max-width: 480px) {
    .mobile-nav-logo,
    .logo-responsive,
    #mobile-nav-logo {
        max-height: 77px !important; /* Another 30% larger: 59px * 1.3 = 77px */
    }
}

@media (min-width: 1200px) {
    .mobile-nav-logo,
    .logo-responsive,
    #mobile-nav-logo {
        max-height: 126px !important; /* Another 30% larger: 97px * 1.3 = 126px */
    }
}

/* Navigation text should be white on colored background */
html:not(.dark) .desktop-nav-item,
html:not(.dark) .mobile-nav-content,
html:not(.dark) .mobile-nav {
  color: white !important;
}

html:not(.dark) .desktop-nav-item:hover,
html.light .desktop-nav-item:hover,
body:not(.dark) .desktop-nav-item:hover,
body.light .desktop-nav-item:hover {
  color: var(--wsu-brand-orange) !important;
  border-bottom-color: var(--wsu-brand-orange) !important;
}

/* Loading screen smooth fade out */
#loading-screen {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#loading-screen.fade-out {
  opacity: 0 !important;
  transform: scale(0.95) !important;
  pointer-events: none !important;
}

/* Override any inline styles JavaScript might set - comprehensive approach */
*[class*="mobile-nav"][style*="background"] {
  background: #f4f4f4 !important;
}

html:not(.dark) *[class*="mobile-nav"][style*="background"] {
  background: var(--wsu-brand-menu) !important;
}

html:not(.dark) *[class*="mobile-menu"][style*="background"] {
  background: #ffffff !important;
}

/* Override specific mobile-first.css rgba backgrounds */
html:not(.dark) .mobile-nav[style*="rgba(255, 255, 255, 0.95)"],
html:not(.dark) .mobile-nav[style*="rgba(17, 24, 39, 0.95)"],
html:not(.dark) .mobile-nav[style*="background: transparent"] {
  background: var(--wsu-brand-menu) !important;
}

/* Override backdrop-filter elements that might have wrong backgrounds */
html:not(.dark) *[style*="backdrop-filter"],
html:not(.dark) *[style*="-webkit-backdrop-filter"] {
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
}

/* BLOCK SPECIFIC DARK COLORS FROM LIGHT MODE */
html:not(.dark) *[style*="#334155"],
html:not(.dark) *[style*="#1e293b"],
body:not(.dark) *[style*="#334155"], 
body:not(.dark) *[style*="#1e293b"],
html.light *[style*="#334155"],
html.light *[style*="#1e293b"],
body.light *[style*="#334155"],
body.light *[style*="#1e293b"] {
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
}

/* Block any elements that have these dark colors */
html:not(.dark) [style*="background-color: #334155"],
html:not(.dark) [style*="background-color: #1e293b"],
html:not(.dark) [style*="background: #334155"],
html:not(.dark) [style*="background: #1e293b"] {
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
}

/* FORCE LIGHT MODE: Override any dark mode that might persist */
html:not(.dark) .mobile-nav,
html:not(.dark) nav.mobile-nav,
html:not(.dark) .mobile-nav-content,
html:not(.dark) body .mobile-nav,
html:not(.dark) body nav.mobile-nav,
html:not(.dark) body .mobile-nav-content,
body:not(.dark) .mobile-nav,
body:not(.dark) nav.mobile-nav,
body:not(.dark) .mobile-nav-content {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

html:not(.dark) .mobile-menu-panel,
html:not(.dark) .mobile-menu-header,
html:not(.dark) .mobile-menu-overlay,
body:not(.dark) .mobile-menu-panel,
body:not(.dark) .mobile-menu-header,
body:not(.dark) .mobile-menu-overlay {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* COMPREHENSIVE navigation override - target all possible navigation elements */

/* Light mode navigation bar - should be colored (var(--wsu-brand-menu)) */
/* NOTE: Do NOT use *[id*="nav"] or *[class*="nav"] — they match navnight cards, etc. */
html:not(.dark) nav.mobile-nav,
html:not(.dark) .mobile-nav,
html:not(.dark) .mobile-nav-content,
html:not(.dark) .desktop-nav-menu,
body:not(.dark) nav.mobile-nav,
body:not(.dark) .mobile-nav,
body:not(.dark) .mobile-nav-content,
body:not(.dark) .desktop-nav-menu {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* Mobile menu panels - always brown (var(--wsu-brand-menu)) in all modes */
html:not(.dark) .mobile-menu-panel,
html:not(.dark) .mobile-menu-header,
html:not(.dark) .mobile-menu-overlay,
html:not(.dark) #mobile-menu-overlay,
html:not(.dark) #mobile-menu-panel,
body:not(.dark) .mobile-menu-panel,
body:not(.dark) .mobile-menu-header,
body:not(.dark) .mobile-menu-overlay,
body:not(.dark) #mobile-menu-overlay,
body:not(.dark) #mobile-menu-panel {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* Override any CSS variable usage in navigation elements */
html:not(.dark) .mobile-nav,
html:not(.dark) .mobile-nav-content {
  background: var(--bg-secondary, var(--wsu-brand-menu)) !important;
  background-color: var(--bg-secondary, var(--wsu-brand-menu)) !important;
}

html:not(.dark) .mobile-menu-panel,
html:not(.dark) .mobile-menu-header {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

html:not(.dark) nav.mobile-nav *[style*="#334155"],
html:not(.dark) nav.mobile-nav *[style*="#1e293b"],
html:not(.dark) .mobile-nav *[style*="#334155"],
html:not(.dark) .mobile-nav *[style*="#1e293b"],
html:not(.dark) .mobile-menu-panel *[style*="#334155"],
html:not(.dark) .mobile-menu-panel *[style*="#1e293b"] {
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
}

/* Override any CSS custom properties that use dark colors */
html:not(.dark) {
  --slate-700: #f4f4f4 !important;
  --slate-800: #f4f4f4 !important;
  --slate-900: var(--wsu-brand-footer) !important;
  --gray-700: #f4f4f4 !important;
  --gray-800: #f4f4f4 !important;
  --gray-900: var(--wsu-brand-footer) !important;
}

/* CORRECT LIGHT MODE TEXT COLORS - Navigation should be WHITE on brown background */
html:not(.dark) .desktop-nav-item,
body:not(.dark) .desktop-nav-item,
html.light .desktop-nav-item,
body.light .desktop-nav-item {
  color: white !important;
  background: none !important;
  background-color: transparent !important;
}

html:not(.dark) .mobile-menu-item,
body:not(.dark) .mobile-menu-item {
  color: white !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html:not(.dark) .mobile-menu-button,
body:not(.dark) .mobile-menu-button {
  color: white !important;
}

html:not(.dark) .mobile-menu-button .hamburger-line,
body:not(.dark) .mobile-menu-button .hamburger-line {
  background-color: white !important;
}

html:not(.dark) .mobile-menu-title,
body:not(.dark) .mobile-menu-title {
  color: white !important;
}

/* MOBILE MENU SHOULD NEVER CHANGE - ALWAYS BROWN WITH WHITE TEXT */
html.light .mobile-nav,
html.light nav.mobile-nav,
html.light .mobile-nav-content,
body.light .mobile-nav,
body.light nav.mobile-nav,
body.light .mobile-nav-content {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

html.light .mobile-menu-panel,
html.light .mobile-menu-header,
html.light .mobile-menu-overlay,
body.light .mobile-menu-panel,
body.light .mobile-menu-header,
body.light .mobile-menu-overlay {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

html.light .desktop-nav-item,
html.light .mobile-menu-button,
body.light .desktop-nav-item,
body.light .mobile-menu-button {
  color: white !important;
  background: none !important;
  background-color: transparent !important;
}

html.light .mobile-menu-item,
html.light .mobile-menu-title,
body.light .mobile-menu-item,
body.light .mobile-menu-title {
  color: white !important;
}

html.light .mobile-menu-button .hamburger-line,
body.light .mobile-menu-button .hamburger-line {
  background-color: white !important;
}

/* ==========================================
   MOBILE RESPONSIVE FIXES
   ========================================== */

/* Remove padding-top from main content on mobile/tablet for all pages except home page */
/* This makes the hero banner touch the nav bar */
@media (max-width: 1279px) {
  body:not(.home-page) main#main-content,
  body:not(.home-page) main.mobile-main-content,
  body:not(.home-page) main,
  body:not(.home-page) main[style*="padding-top"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Also ensure hero section has no top margin and pulls up to nav */
  body:not(.home-page) main section:first-child,
  body:not(.home-page) main > section:first-of-type {
    margin-top: 0 !important;
  }
}

/* Force desktop navigation to be hidden on mobile/tablet - OVERRIDE TAILWIND */
@media (max-width: 1279px) {
  .desktop-nav-menu,
  div.desktop-nav-menu,
  .desktop-nav-menu.hidden,
  .desktop-nav-menu.lg\\:flex,
  .desktop-nav-menu.hidden.lg\\:flex,
  div.desktop-nav-menu.hidden,
  div.desktop-nav-menu.lg\\:flex,
  div.desktop-nav-menu.hidden.lg\\:flex,
  .desktop-nav-item,
  a.desktop-nav-item,
  .desktop-nav-menu a,
  div.desktop-nav-menu a,
  html .desktop-nav-menu,
  html div.desktop-nav-menu,
  html:not(.dark) .desktop-nav-menu,
  html:not(.dark) .desktop-nav-item,
  html.light .desktop-nav-menu,
  html.light .desktop-nav-item,
  body:not(.dark) .desktop-nav-menu,
  body:not(.dark) .desktop-nav-item,
  body .desktop-nav-menu,
  body div.desktop-nav-menu,
  [data-theme="light"] .desktop-nav-menu,
  [data-theme="light"] .desktop-nav-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Ensure mobile menu button is visible */
  .mobile-menu-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Also add non-media query version for extra safety */
.desktop-nav-menu {
  display: none;
}

@media (min-width: 1280px) {
  .desktop-nav-menu {
    display: flex !important;
  }
}

/* Force mobile menu items to always have brown background with white text */
.mobile-menu-item,
html.light .mobile-menu-item,
html:not(.dark) .mobile-menu-item,
body:not(.dark) .mobile-menu-item,
body.light .mobile-menu-item {
  background: transparent !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  padding: 1.25rem 2rem !important;
  margin: 0.5rem 0 !important;
}

.mobile-menu-item:hover,
html.light .mobile-menu-item:hover,
html:not(.dark) .mobile-menu-item:hover,
body:not(.dark) .mobile-menu-item:hover,
body.light .mobile-menu-item:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================
   MODERN DESKTOP NAVIGATION STYLING
   ========================================== */

/* Override mobile-first.css button-like styling */
@media (min-width: 1280px) {
  .desktop-nav-item,
  html:not(.dark) .desktop-nav-item,
  html.light .desktop-nav-item,
  body:not(.dark) .desktop-nav-item,
  body.light .desktop-nav-item {
    color: white !important;
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.5rem !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    border-bottom: 2px solid transparent !important;
    display: inline-block !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: none !important;
  }

  .desktop-nav-item:hover,
  html:not(.dark) .desktop-nav-item:hover,
  html.light .desktop-nav-item:hover,
  body:not(.dark) .desktop-nav-item:hover,
  body.light .desktop-nav-item:hover {
    color: var(--wsu-brand-orange) !important;
    background: transparent !important;
    border-bottom-color: var(--wsu-brand-orange) !important;
  }

  /* Active/current page styling */
  .desktop-nav-item.active,
  html:not(.dark) .desktop-nav-item.active,
  html.light .desktop-nav-item.active,
  body:not(.dark) .desktop-nav-item.active,
  body.light .desktop-nav-item.active {
    color: var(--wsu-brand-orange) !important;
    background: none !important;
    background-color: transparent !important;
    border-bottom-color: var(--wsu-brand-orange) !important;
  }

  /* Dark mode navigation */
  .dark .desktop-nav-item,
  html.dark .desktop-nav-item {
    color: white !important;
    background: transparent !important;
  }

  .dark .desktop-nav-item:hover,
  html.dark .desktop-nav-item:hover {
    color: var(--wsu-brand-orange) !important;
    background: transparent !important;
    border-bottom-color: var(--wsu-brand-orange) !important;
  }

  .dark .desktop-nav-item.active,
  html.dark .desktop-nav-item.active {
    color: var(--wsu-brand-orange) !important;
    border-bottom-color: var(--wsu-brand-orange) !important;
  }

  /* Modern navigation menu layout */
  .desktop-nav-menu,
  html:not(.dark) .desktop-nav-menu,
  html.light .desktop-nav-menu,
  body:not(.dark) .desktop-nav-menu,
  body.light .desktop-nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: var(--wsu-brand-menu) !important;
    background-color: var(--wsu-brand-menu) !important;
  }

  /* Remove SVG icons for cleaner look */
  .desktop-nav-item svg {
    display: none !important;
  }
}

/* MOBILE MENU ALWAYS DARK MODE STATE - NEVER CHANGES */
.mobile-menu-item,
html:not(.dark) .mobile-menu-item,
html.light .mobile-menu-item,
body:not(.dark) .mobile-menu-item,
body.light .mobile-menu-item {
  color: white !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.mobile-menu-item:hover,
html:not(.dark) .mobile-menu-item:hover,
html.light .mobile-menu-item:hover,
body:not(.dark) .mobile-menu-item:hover,
body.light .mobile-menu-item:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* DARK MODE: Mobile menu items - white text */
.dark .mobile-menu-item,
html.dark .mobile-menu-item {
  color: white !important;
}

.dark .mobile-menu-item:hover,
html.dark .mobile-menu-item:hover {
  background-color: var(--wsu-brand-orange) !important;
  color: white !important;
}

/* ==========================================
   FORCE NAVIGATION TO ALWAYS USE DARK MODE APPEARANCE
   Both desktop and mobile navigation always look the same
   ========================================== */

/* DESKTOP NAVIGATION - Always dark mode appearance (no backgrounds, white text) */
.desktop-nav-item,
.light .desktop-nav-item,
.dark .desktop-nav-item,
html.light .desktop-nav-item,
html.dark .desktop-nav-item,
html:not(.dark) .desktop-nav-item,
body:not(.dark) .desktop-nav-item,
[data-theme="light"] .desktop-nav-item,
[data-theme="dark"] .desktop-nav-item {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  box-shadow: none !important;
  color: white !important;
}

.desktop-nav-item:hover,
.light .desktop-nav-item:hover,
.dark .desktop-nav-item:hover,
html.light .desktop-nav-item:hover,
html.dark .desktop-nav-item:hover,
html:not(.dark) .desktop-nav-item:hover,
body:not(.dark) .desktop-nav-item:hover,
[data-theme="light"] .desktop-nav-item:hover,
[data-theme="dark"] .desktop-nav-item:hover {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--wsu-brand-orange) !important;
}

/* MOBILE MENU PANEL - Always brown background */
#mobile-menu-overlay,
#mobile-menu-panel,
.mobile-menu-panel,
.mobile-menu-header,
.light #mobile-menu-overlay,
.light #mobile-menu-panel,
.dark #mobile-menu-overlay,
.dark #mobile-menu-panel,
html.light #mobile-menu-overlay,
html.light #mobile-menu-panel,
html.dark #mobile-menu-overlay,
html.dark #mobile-menu-panel,
html:not(.dark) #mobile-menu-overlay,
html:not(.dark) #mobile-menu-panel,
body:not(.dark) #mobile-menu-overlay,
body:not(.dark) #mobile-menu-panel {
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
}

/* Ensure overlay spans full viewport with no white gaps - DO NOT USE VW/VH! */
#mobile-menu-overlay,
div#mobile-menu-overlay,
.mobile-menu-overlay,
.light #mobile-menu-overlay,
html.light #mobile-menu-overlay,
html:not(.dark) #mobile-menu-overlay,
body:not(.dark) #mobile-menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure panel spans full viewport with no white gaps - DO NOT USE VW/VH! */
#mobile-menu-panel,
div#mobile-menu-panel,
.mobile-menu-panel,
.light #mobile-menu-panel,
html.light #mobile-menu-panel,
html:not(.dark) #mobile-menu-panel,
body:not(.dark) #mobile-menu-panel {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* MOBILE MENU ITEMS - Always dark mode appearance (transparent bg, white text, white borders) */
#mobile-menu-panel a.group,
#mobile-menu-panel a,
.mobile-menu-item,
.light #mobile-menu-panel a.group,
.light #mobile-menu-panel a,
.dark #mobile-menu-panel a.group,
.dark #mobile-menu-panel a,
html.light #mobile-menu-panel a.group,
html.dark #mobile-menu-panel a.group,
html:not(.dark) #mobile-menu-panel a.group,
html:not(.dark) #mobile-menu-panel a,
body:not(.dark) #mobile-menu-panel a.group,
body:not(.dark) #mobile-menu-panel a {
  background: transparent !important;
  background-color: transparent !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  padding: 1.25rem 2rem !important;
  margin: 0.5rem 0 !important;
}

#mobile-menu-panel a.group:hover,
#mobile-menu-panel a.group:focus,
#mobile-menu-panel a:hover,
#mobile-menu-panel a:focus,
.mobile-menu-item:hover,
.mobile-menu-item:focus,
.light #mobile-menu-panel a.group:hover,
.light #mobile-menu-panel a.group:focus,
.dark #mobile-menu-panel a.group:hover,
.dark #mobile-menu-panel a.group:focus,
html.light #mobile-menu-panel a.group:hover,
html.light #mobile-menu-panel a.group:focus,
html.dark #mobile-menu-panel a.group:hover,
html.dark #mobile-menu-panel a.group:focus,
html:not(.dark) #mobile-menu-panel a.group:hover,
html:not(.dark) #mobile-menu-panel a.group:focus,
body:not(.dark) #mobile-menu-panel a.group:hover,
body:not(.dark) #mobile-menu-panel a.group:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: white !important;
}

/* Mobile menu icons and text - always white */
#mobile-menu-panel a.group svg,
#mobile-menu-panel a svg,
.mobile-menu-item svg,
.light #mobile-menu-panel a.group svg,
.dark #mobile-menu-panel a.group svg,
html.light #mobile-menu-panel a.group svg,
html.dark #mobile-menu-panel a.group svg,
html:not(.dark) #mobile-menu-panel a.group svg,
body:not(.dark) #mobile-menu-panel a.group svg {
  color: white !important;
  stroke: white !important;
}

/* LIGHT MODE: Modern hamburger menu button - no background box */
.mobile-menu-button,
html:not(.dark) .mobile-menu-button,
body:not(.dark) .mobile-menu-button,
.light .mobile-menu-button,
html.light .mobile-menu-button,
body.light .mobile-menu-button {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px !important;
  color: white !important;
  box-shadow: none !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Hide hamburger menu on desktop - show desktop nav instead */
@media (min-width: 1280px) {
  .mobile-menu-button,
  #mobile-menu-toggle,
  .hamburger-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.mobile-menu-button:hover,
.mobile-menu-button:focus,
html:not(.dark) .mobile-menu-button:hover,
html:not(.dark) .mobile-menu-button:focus,
body:not(.dark) .mobile-menu-button:hover,
body:not(.dark) .mobile-menu-button:focus {
  background: none !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* HAMBURGER ICON STYLING - ALWAYS WHITE LINES */
.hamburger-icon {
  width: 24px !important;
  height: 24px !important;
  position: relative !important;
  display: block !important;
}

.hamburger-line {
  display: block !important;
  height: 2px !important;
  width: 24px !important;
  background-color: white !important;
  border-radius: 1px !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  /* All lines positioned relative to vertical center */
  top: 50% !important;
  transform-origin: center center !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease-in-out !important;
}

/* Initial hamburger positions - spread from center */
.hamburger-line:nth-child(1) {
  transform: translateY(-8px) !important;
}
.hamburger-line:nth-child(2) {
  transform: translateY(-50%) !important;
}
.hamburger-line:nth-child(3) {
  transform: translateY(6px) !important;
}

/* Hamburger to X animation - when menu is active */
/* All lines converge to center and rotate */
.mobile-menu-button.active .hamburger-line:nth-child(1),
#mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(-50%) rotate(45deg) !important;
}

.mobile-menu-button.active .hamburger-line:nth-child(2),
#mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0 !important;
  transform: translateY(-50%) scaleX(0) !important;
}

.mobile-menu-button.active .hamburger-line:nth-child(3),
#mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg) !important;
}

/* DARK MODE: Modern hamburger menu button - no background box */
.dark .mobile-menu-button,
html.dark .mobile-menu-button {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: white !important;
}

.dark .mobile-menu-button:hover,
.dark .mobile-menu-button:focus,
html.dark .mobile-menu-button:hover,
html.dark .mobile-menu-button:focus {
  background: none !important;
  background-color: transparent !important;
  outline: none !important;
}

/* Force hamburger lines to always be white in all themes */
.dark .hamburger-line,
html.dark .hamburger-line,
.light .hamburger-line,
html.light .hamburger-line,
html:not(.dark) .hamburger-line,
body:not(.dark) .hamburger-line {
  background-color: white !important;
}

/* MOBILE MENU CLOSE BUTTON AND TITLE ALWAYS DARK MODE STATE */
.mobile-menu-close-btn,
html:not(.dark) .mobile-menu-close-btn,
html.light .mobile-menu-close-btn,
body:not(.dark) .mobile-menu-close-btn,
body.light .mobile-menu-close-btn {
  color: white !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.mobile-menu-title,
html:not(.dark) .mobile-menu-title,
html.light .mobile-menu-title,
body:not(.dark) .mobile-menu-title,
body.light .mobile-menu-title {
  color: white !important;
}

/* DARK MODE: Mobile menu close button and title */
.dark .mobile-menu-close-btn,
html.dark .mobile-menu-close-btn {
  color: white !important;
}

.dark .mobile-menu-title,
html.dark .mobile-menu-title {
  color: white !important;
}

/* Style the floating theme toggle */
.floating-theme-toggle {
  background: var(--wsu-brand-menu) !important;
  color: white !important;
}



/* Footer with brand colors */
.footer {
  background: var(--wsu-brand-footer) !important;
}

.footer h3, .footer h4 {
  color: var(--wsu-brand-orange);
}

.footer a:hover {
  color: var(--wsu-brand-orange);
}


/* Force immediate light mode color application */
html:not(.dark), html.light {
  color-scheme: light !important;
}

/* Block specific problematic colors with highest specificity */
html:not(.dark) *[style*="334155"],
html:not(.dark) *[style*="1e293b"],
body:not(.dark) *[style*="334155"],
body:not(.dark) *[style*="1e293b"],
html.light *[style*="334155"],
html.light *[style*="1e293b"],
body.light *[style*="334155"],
body.light *[style*="1e293b"] {
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
  color: var(--wsu-brand-menu) !important;
}

/* ==========================================
   MOBILE-FIRST INTEGRATION
   ========================================== */

/* Ensure mobile-content-section alternates properly */
.mobile-content-section:nth-child(even) {
  background: #ffffff !important;
}

.mobile-content-section:nth-child(odd) {
  background: #f4f4f4 !important;
}

/* Dark mode content sections */
.dark .mobile-content-section:nth-child(even) {
  background: #1e293b !important;
}

.dark .mobile-content-section:nth-child(odd) {
  background: #0f172a !important;
}

/* Ensure mobile-card uses proper light mode background and text */
html:not(.dark) .mobile-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Special styling for campus ministry card */
html:not(.dark) .campus-ministry-card {
  background: #f0feff !important;
  background-color: #f0feff !important;
}

.dark .campus-ministry-card {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
}

html:not(.dark) .mobile-card h1,
html:not(.dark) .mobile-card h2,
html:not(.dark) .mobile-card h3,
html:not(.dark) .mobile-card h4,
html:not(.dark) .mobile-card h5,
html:not(.dark) .mobile-card h6 {
  color: #1f2937 !important;
}

html:not(.dark) .mobile-card p,
html:not(.dark) .mobile-card span,
html:not(.dark) .mobile-card div {
  color: #374151 !important;
}

/* Override specific Tailwind text color classes that cause readability issues */
html:not(.dark) .text-gray-600 {
  color: #374151 !important;
}

html:not(.dark) .text-gray-700 {
  color: #1f2937 !important;
}

html:not(.dark) .text-gray-900 {
  color: #111827 !important;
}

html:not(.dark) .text-gray-500 {
  color: #6b7280 !important;
}

html:not(.dark) .text-gray-400 {
  color: #9ca3af !important;
}

/* ==========================================
   FORM INPUTS & EVENT CARDS FIXES
   ========================================== */

/* Fix input boxes in light mode */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
}

html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  border-color: var(--wsu-brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(223, 106, 42, 0.1) !important;
}

/* Fix event card placeholders */
html:not(.dark) .bg-gray-200 {
  background: #e5e7eb !important;
  background-color: #e5e7eb !important;
}

html:not(.dark) .h-48.bg-gray-200 {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
}

/* Fix loading screen in light mode */
html:not(.dark) #loading-screen {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html:not(.dark) #loading-screen p {
  color: #374151 !important;
}

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

/* Force white text regardless of theme - for colored background sections */
/* Only target headings and paragraphs, not buttons/links with their own backgrounds */
.text-always-white > div > h1,
.text-always-white > div > h2,
.text-always-white > div > h3,
.text-always-white > div > h4,
.text-always-white > div > p,
.text-always-white > div > div > h4,
.text-always-white > div > div > div > h4,
.text-always-white > div > div > div > p,
html:not(.dark) .text-always-white > div > h1,
html:not(.dark) .text-always-white > div > h2,
html:not(.dark) .text-always-white > div > h3,
html:not(.dark) .text-always-white > div > h4,
html:not(.dark) .text-always-white > div > p,
html:not(.dark) .text-always-white > div > div > h4,
html:not(.dark) .text-always-white > div > div > div > h4,
html:not(.dark) .text-always-white > div > div > div > p,
html.light .text-always-white > div > h1,
html.light .text-always-white > div > h2,
html.light .text-always-white > div > h3,
html.light .text-always-white > div > h4,
html.light .text-always-white > div > p,
html.light .text-always-white > div > div > h4,
html.light .text-always-white > div > div > div > h4,
html.light .text-always-white > div > div > div > p,
body:not(.dark) .text-always-white > div > h1,
body:not(.dark) .text-always-white > div > h2,
body:not(.dark) .text-always-white > div > h3,
body:not(.dark) .text-always-white > div > h4,
body:not(.dark) .text-always-white > div > p,
body:not(.dark) .text-always-white > div > div > h4,
body:not(.dark) .text-always-white > div > div > div > h4,
body:not(.dark) .text-always-white > div > div > div > p,
body.light .text-always-white > div > h1,
body.light .text-always-white > div > h2,
body.light .text-always-white > div > h3,
body.light .text-always-white > div > h4,
body.light .text-always-white > div > p,
body.light .text-always-white > div > div > h4,
body.light .text-always-white > div > div > div > h4,
body.light .text-always-white > div > div > div > p {
  color: white !important;
}

/* Brand Color Text */
.text-brand-orange { color: var(--wsu-brand-orange) !important; }
.text-brand-teal { color: var(--wsu-brand-teal) !important; }

/* Brand Backgrounds */
.bg-brand-orange { background-color: var(--wsu-brand-orange) !important; }
.bg-brand-teal { background-color: var(--wsu-brand-teal) !important; }
.bg-brand-footer { background-color: var(--wsu-brand-footer) !important; }

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

/* Hero section with teal background */
.hero-clean {
  background: var(--wsu-brand-teal) !important;
  color: white !important;
}

/* Force white text in hero sections regardless of theme */
.mobile-hero-content,
.mobile-hero-content h1,
.mobile-hero-content h2,
.mobile-hero-content h3,
.mobile-hero-content p,
.mobile-hero-content span,
.hero-clean .mobile-hero-content,
.hero-clean .mobile-hero-content h1,
.hero-clean .mobile-hero-content h2,
.hero-clean .mobile-hero-content h3,
.hero-clean .mobile-hero-content p,
.hero-clean .mobile-hero-content span,
html:not(.dark) .mobile-hero-content,
html:not(.dark) .mobile-hero-content h1,
html:not(.dark) .mobile-hero-content h2,
html:not(.dark) .mobile-hero-content h3,
html:not(.dark) .mobile-hero-content p,
html:not(.dark) .mobile-hero-content span,
html:not(.dark) .hero-clean .mobile-hero-content,
html:not(.dark) .hero-clean .mobile-hero-content h1,
html:not(.dark) .hero-clean .mobile-hero-content h2,
html:not(.dark) .hero-clean .mobile-hero-content h3,
html:not(.dark) .hero-clean .mobile-hero-content p,
html:not(.dark) .hero-clean .mobile-hero-content span,
html.light .mobile-hero-content,
html.light .mobile-hero-content h1,
html.light .mobile-hero-content h2,
html.light .mobile-hero-content h3,
html.light .mobile-hero-content p,
html.light .mobile-hero-content span,
html.light .hero-clean .mobile-hero-content,
html.light .hero-clean .mobile-hero-content h1,
html.light .hero-clean .mobile-hero-content h2,
html.light .hero-clean .mobile-hero-content h3,
html.light .hero-clean .mobile-hero-content p,
html.light .hero-clean .mobile-hero-content span,
body:not(.dark) .mobile-hero-content,
body:not(.dark) .mobile-hero-content h1,
body:not(.dark) .mobile-hero-content h2,
body:not(.dark) .mobile-hero-content h3,
body:not(.dark) .mobile-hero-content p,
body:not(.dark) .mobile-hero-content span,
body.light .mobile-hero-content,
body.light .mobile-hero-content h1,
body.light .mobile-hero-content h2,
body.light .mobile-hero-content h3,
body.light .mobile-hero-content p,
body.light .mobile-hero-content span {
  color: white !important;
}

/* ==========================================
   NUCLEAR OVERRIDE - MUST BE LAST
   Overrides mobile-first.css for menu-open state
   ========================================== */

/* CRITICAL: Ensure html fills viewport when menu open */
html.menu-open,
html.menu-open:root,
html:not(.dark).menu-open,
html.light.menu-open {
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.menu-open body,
html:not(.dark).menu-open body,
html.light.menu-open body,
body.menu-open,
body:not(.dark).menu-open,
body.light.menu-open {
  height: 100% !important;
  min-height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: var(--wsu-brand-menu) !important;
  background-color: var(--wsu-brand-menu) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
    /* CRITICAL: Prevent transform/filter from creating new containing block */
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}

/* Hide the separate close button - hamburger transforms to X instead */
#mobile-menu-close,
button#mobile-menu-close {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   HAMBURGER BUTTON POSITIONING WHEN MENU OPEN
   Ensure it stays in place and is clickable above overlay
   ========================================== */

/* Nav bar stays above overlay when menu is open */
html.menu-open .mobile-nav,
html.menu-open nav.mobile-nav,
body.menu-open .mobile-nav,
body.menu-open nav.mobile-nav {
  z-index: 1000000 !important;
  position: fixed !important;
}

/* Hamburger button stays clickable above overlay */
html.menu-open .mobile-menu-button,
html.menu-open #mobile-menu-toggle,
body.menu-open .mobile-menu-button,
body.menu-open #mobile-menu-toggle {
  z-index: 1000001 !important;
  position: relative !important;
  pointer-events: auto !important;
}


/* --- brand-theme-dynamic.css --- */
/* Auto-generated brand theme - DO NOT EDIT MANUALLY */
/* Updated: 2026-07-30T04:12:11.910Z */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/montserrat-latin-variable.woff2') format('woff2-variations');
}

:root {
    /* Active site colors */
    --wsu-brand-orange: #df6a2a;
    --wsu-brand-teal: #008c95;
    --wsu-brand-menu: #61514e;
    --wsu-brand-footer: #392f2c;

    /* Full brand palette */
    --brand-teal: #008c95;
    --brand-gold: #d19f2a;
    --brand-sage: #8e9c9c;
    --brand-cool-grey: #dad9d7;
    --brand-dark-brown: #392f2c;
    --brand-brown: #61514e;
    --brand-orange: #e16b2a;
    --brand-yellow: #fdb714;
    --brand-blue: #228cc0;
    --brand-purple: #7f4182;

    /* Typography */
    --brand-font-heading: 'Montserrat', Arial, sans-serif;
    --brand-font-body: 'Montserrat', Arial, sans-serif;
}

/* Apply brand fonts globally */
body {
    font-family: var(--brand-font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-font-heading) !important;
}

/* Navigation background */
.mobile-nav,
nav.mobile-nav {
    background-color: var(--wsu-brand-menu) !important;
}

/* Footer background */
.footer,
footer,
.global-footer {
    background-color: var(--wsu-brand-footer) !important;
}

/* --- global-footer.css --- */
/**
 * Global Footer Styles
 *
 * Styles for the global footer component used across all pages
 */

/* Footer base styles */
.footer {
    background: var(--wsu-brand-footer, #392f2c) !important;
    color: white;
}

/* Footer logo styling */
.footer-logo {
    height: 6rem; /* h-24 equivalent — bumped so max-height in bigger-logos.css is the effective cap */
    width: auto;
    margin: 0 auto;
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 0.8;
}

/* Footer social icon styles - Simple monochrome */
footer a[href*="instagram.com"],
footer a[href*="facebook.com"] {
    background: none !important;
    border: none !important;
    color: #9ca3af !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
}

footer a[href*="instagram.com"]:hover,
footer a[href*="facebook.com"]:hover {
    background: none !important;
    border: none !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Email link styling */
footer a[href^="mailto:"] {
    color: #9ca3af;
    transition: color 0.2s ease;
}

footer a[href^="mailto:"]:hover {
    color: white;
}

/* Focus ring for accessibility */
.focus-ring:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Footer brand colors */
.brand-footer {
    background-color: var(--wsu-brand-footer, #392f2c);
}

.brand-footer-50 { background-color: #f7f6f6; }
.brand-footer-100 { background-color: #efeded; }
.brand-footer-200 { background-color: #dedada; }
.brand-footer-300 { background-color: #cec8c7; }
.brand-footer-400 { background-color: #bdb5b4; }
.brand-footer-500 { background-color: var(--wsu-brand-footer, #392f2c); }
.brand-footer-600 { background-color: #2a1f1c; }
.brand-footer-700 { background-color: #221816; }
.brand-footer-800 { background-color: #1a1210; }
.brand-footer-900 { background-color: #120c0a; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .footer-logo {
        height: 5rem; /* Bumped from 4rem — mobile max-height in bigger-logos.css caps it */
    }

    footer .flex.justify-center.space-x-6 {
        gap: 1rem; /* Reduce spacing on mobile */
    }

    footer .grid.grid-cols-1.gap-8 {
        gap: 1.5rem; /* Reduce gap on mobile */
    }
}

@media (max-width: 480px) {
    footer .text-gray-300.mb-6 {
        font-size: 0.875rem; /* Smaller text on very small screens */
        line-height: 1.5;
    }

    footer .w-8.h-8 {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* Dark theme adjustments (if needed) */
@media (prefers-color-scheme: dark) {
    .footer {
        background: var(--wsu-brand-footer, #392f2c) !important;
    }
}

/* Loading state styles */
.footer-loading {
    background: var(--wsu-brand-footer, #392f2c);
    color: white;
    padding: 2rem 1rem;
    text-align: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-loading::after {
    content: "Loading footer...";
    opacity: 0.6;
    font-size: 0.875rem;
}

/* Fallback footer styles */
.footer-fallback {
    background: var(--wsu-brand-footer, #392f2c);
    color: white;
    padding: 2rem 1rem;
    text-align: center;
    border-top: 1px solid #4a4a4a;
}

/* Animation for footer injection */
.footer {
    animation: fadeInFooter 0.5s ease-in;
}

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

/* Ensure footer stays at bottom */
#footer-container,
#global-footer,
.footer-placeholder {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* Social media hover effects */
footer a[href*="instagram.com"] svg,
footer a[href*="facebook.com"] svg,
footer a[href^="mailto:"] svg {
    transition: transform 0.2s ease;
}

footer a[href*="instagram.com"]:hover svg,
footer a[href*="facebook.com"]:hover svg,
footer a[href^="mailto:"]:hover svg {
    transform: scale(1.1);
}

/* Print styles */
@media print {
    .footer {
        background: white !important;
        color: black !important;
        border-top: 2px solid #000;
    }

    footer a[href*="instagram.com"],
    footer a[href*="facebook.com"],
    footer a[href^="mailto:"] {
        color: black !important;
    }

    footer svg {
        display: none;
    }

    footer a[href*="instagram.com"]::after {
        content: " (Instagram)";
    }

    footer a[href*="facebook.com"]::after {
        content: " (Facebook)";
    }

    footer a[href^="mailto:"]::after {
        content: " (Email)";
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .footer {
        background: #000 !important;
        color: #fff !important;
        border-top: 3px solid #fff;
    }

    footer a[href*="instagram.com"],
    footer a[href*="facebook.com"],
    footer a[href^="mailto:"] {
        color: #fff !important;
        border: 1px solid #fff;
        padding: 0.25rem;
    }

    footer a[href*="instagram.com"]:hover,
    footer a[href*="facebook.com"]:hover,
    footer a[href^="mailto:"]:hover {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .footer {
        animation: none;
    }

    footer a[href*="instagram.com"] svg,
    footer a[href*="facebook.com"] svg,
    footer a[href^="mailto:"] svg {
        transition: none;
    }

    footer a[href*="instagram.com"]:hover svg,
    footer a[href*="facebook.com"]:hover svg,
    footer a[href^="mailto:"]:hover svg {
        transform: none;
    }

    .footer-logo {
        transition: none;
    }
}
/* --- logo-sizes-v2.css --- */
/* WSU Navigators - BIGGER LOGOS */

/* Navigation logo - Slightly bigger */
.logo-responsive {
    height: auto;
    max-height: 75px !important; /* A bit bigger as requested */
    width: auto;
    transition: all 0.3s ease;
}

/* Hero logo - Reasonable size */
.hero-logo {
    height: auto;
    max-height: 180px !important; /* Reduced to reasonable size */
    width: auto;
}

/* Footer logo - Bigger. Forces explicit height (not just max-height) because:
   1. brand-theme.css applies `content: url(...)` to #footer-logo which
      substitutes the rendered image and can destabilize height: auto on some
      browsers (notably iOS Safari).
   2. Tailwind utility `.h-NN` on the element wins size duel if not overridden
      at higher specificity; using #footer-logo (specificity 100) + !important
      on height forces the size regardless of any class-level competitor. */
.footer-logo,
#footer-logo {
    height: 96px !important;     /* Default/desktop — forced, not capped */
    max-height: 96px !important;
    width: auto !important;
}

/* Mobile responsive - Reasonable sizes */
@media (max-width: 640px) {
    .logo-responsive {
        max-height: 60px !important; /* Slightly bigger on mobile */
    }
    .hero-logo {
        max-height: 140px !important; /* Reasonable mobile size */
    }
    .footer-logo,
    #footer-logo {
        height: 76px !important;        /* Mobile ≤640px — forced */
        max-height: 76px !important;
    }
}

@media (max-width: 480px) {
    .logo-responsive {
        max-height: 45px !important; /* Smaller for small phones */
    }
    .hero-logo {
        max-height: 120px !important; /* Smaller for small phones */
    }
    .footer-logo,
    #footer-logo {
        height: 58px !important;        /* Small phones ≤480px — forced */
        max-height: 58px !important;
    }
}

/* Tablet sizes */
@media (min-width: 641px) and (max-width: 1024px) {
    .logo-responsive {
        max-height: 55px !important; /* Reasonable tablet size */
    }
    .hero-logo {
        max-height: 160px !important; /* Reasonable tablet size */
    }
}

/* Large screens - Reasonable sizes */
@media (min-width: 1200px) {
    .logo-responsive {
        max-height: 85px !important; /* Slightly bigger on large screens */
    }
    .hero-logo {
        max-height: 200px !important; /* Reasonable large screen size */
    }
    .footer-logo,
    #footer-logo {
        height: 118px !important;       /* Wide desktop ≥1200px — forced */
        max-height: 118px !important;
    }
}

/* Navigation container adjustments for bigger logo */
.navbar .container,
.nav-container {
    height: auto;
    min-height: 80px;
    padding: 1rem 0;
}

@media (max-width: 640px) {
    .navbar .container,
    .nav-container {
        min-height: 70px;
        padding: 0.75rem 0;
    }
}

/* Hover effects for bigger logos */
.logo-hover:hover {
    transform: scale(1.05);
}

/* Ensure logos don't break layout */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero section spacing adjustment for bigger logo */
.hero-content {
    padding-top: 2rem;
}

@media (max-width: 640px) {
    .hero-content {
        padding-top: 1.5rem;
    }
}