/* /css/darkmode.css */
/* ====== Bulletproof Dark Mode Overrides ====== */

body.dark {
  background: #1a1b22 !important;
  color: #f4f6fb !important;
}

body.dark header,
body.dark footer {
  background: #232439 !important;
  border-color: #31334b !important;
  color: #b8bad4 !important;
}

body.dark nav a {
  color: #e2e6f5 !important;
}

/* Hover/focus for nav links in dark mode → GOLD (replaces aqua) */
body.dark nav a:hover,
body.dark nav a:focus {
  color: var(--lux-accent) !important;
}

body.dark #darkModeToggle {
  color: #f4f6fb !important;
  background: none !important;
  box-shadow: none !important;
}

body.dark #darkModeToggle:hover,
body.dark #darkModeToggle:focus {
  background: none !important;
  box-shadow: none !important;
  color: #aad2ff !important;
}

/* Product card defaults (note: apparel.css may override with transparent) */
body.dark .product-card {
  background: #24253b !important;
  color: #f4f6fb !important;
  box-shadow: 0 3px 18px rgba(30,30,40,0.13) !important;
}

body.dark .product-card p {
  color: #f4f6fb !important;
}

body.dark .buy-button {
  background: linear-gradient(90deg, #7ed6df 60%, #4b7bec 100%) !important;
  color: #191c28 !important;
}

body.dark .buy-button:hover,
body.dark .buy-button:focus {
  background: linear-gradient(90deg, #22a6b3 70%, #3867d6 100%) !important;
  color: #fff !important;
}

body.dark .apparel-showcase h2,
body.dark .intro h1 {
  color: #aad2ff !important;
}

body.dark .intro p {
  color: #b8bad4 !important;
}

body.dark .privacy-policy h1,
body.dark .privacy-policy h2 {
  color: #aad2ff !important;
}

/* Final lock: ensure gold hover wins for header nav in dark mode */
body.dark .z-nav > .z-nav-list > .z-nav-item > a:hover,
body.dark .z-nav > .z-nav-list > .z-nav-item > a:focus,
body.dark .z-nav > .z-nav-list > .z-nav-item > .dropbtn:hover,
body.dark .z-nav > .z-nav-list > .z-nav-item > .dropbtn:focus,
body.dark .dropdown:hover > .dropbtn,
body.dark .dropdown:focus-within > .dropbtn {
  color: var(--lux-accent) !important;
}
