/* ============================================================
   MODERN.CSS — 2026 refresh layer (loaded after base/page CSS)
   dark mode, glass nav, focus states, mobile nav, motion safety
   ============================================================ */

:root { color-scheme: light dark; }

/* Countdown */
#cd { font-variant-numeric: tabular-nums; min-width: 12ch; display: inline-block; text-align: left; }

/* Glass nav */
#nav { backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }

/* Keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--peach); outline-offset: 3px; border-radius: 4px;
}

/* Smooth card lift */
.cat, .acard, .chcard, .wrow { will-change: transform; }
.acard:hover, .cat:hover { transform: translateY(-3px); }

/* Mobile: home page has no burger, so expose links as a scrollable strip */
@media (max-width: 960px) {
  #nav:not(:has(.nav-burger)) .nav-links {
    display: flex !important; position: fixed; top: 66px; left: 0; right: 0; z-index: 99;
    gap: 22px; padding: 0 22px; height: 40px; align-items: center; list-style: none;
    overflow-x: auto; white-space: nowrap; scrollbar-width: none;
    background: var(--white); border-bottom: 1px solid var(--border);
  }
  #nav:not(:has(.nav-burger)) .nav-links::-webkit-scrollbar { display: none; }
  #nav:not(:has(.nav-burger)) ~ .trailer-now { margin-top: 106px; }
  .hero-stats { flex-wrap: wrap; row-gap: 18px; }
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --white: #140e10; --off: #1a1214; --surface: #221719;
    --border: #33282a; --border2: #4d3f41;
    --text: #f5eeee; --text2: #d3c5c6; --muted: #a8979a;
    --coral-tx: #eca17a; --lavender: #bf9ccb;
  }
  #nav { background: rgba(20,14,16,.82) !important; }
  .trailer-now { background: #0b0708; }
  .hero-bg { opacity: .9; }
  .hero-illu img, .chphoto, .mbox-mapimg { filter: brightness(.92); }
  .hsearch input, .sbig input, .search-modal-inner input { color: var(--text); background: transparent; }
  .wpreview, .hsearch, .cat, .acard { box-shadow: none; }
  .ticker { background: #0b0708; }
  footer { background: #0b0708; }
  .btn-s { color: var(--text); }
  img { color-scheme: dark; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ticker-t { animation: none !important; }
}