/* 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;
}