/* Production additions on top of the design's inline styles. Fidelity-preserving:
   theme-icon toggle, hover states (the design used an authoring-only style-hover
   attribute), the mobile nav drawer (known-gap #1), reduced-motion, and focus rings. */

/* Theme-conditional icons (replaces the sc-if runtime). */
body[data-theme="dark"] .theme-light-only { display: none; }
body:not([data-theme="dark"]) .theme-dark-only { display: none; }

/* Hover states (design spec: cards lift 3px → shadow-lg; buttons brighten + lift). */
a[href^="#cta"], a[href^="#"][style*="background:var(--accent)"] { transition: transform .15s ease, filter .15s ease; }
a[style*="background:var(--accent)"]:hover,
button[style*="background:var(--accent)"]:hover { filter: brightness(1.08); transform: translateY(-1px); }
nav a:hover { color: var(--text) !important; }
#themeToggle:hover { color: var(--text) !important; border-color: var(--text3) !important; }

/* Focus-visible rings for keyboard users. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Mobile nav (< 820px): hamburger + slide-in drawer ── */
#navToggle { display: none; }
@media (max-width: 820px) {
  nav .nav-links { display: none !important; }
  #navToggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--card); color: var(--text);
    cursor: pointer; padding: 0;
  }
  #navDrawer {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    background: var(--card); border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg); z-index: 200;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
    display: flex; flex-direction: column; gap: 6px; padding: 78px 22px 22px;
  }
  #navDrawer.open { transform: translateX(0); }
  #navDrawer a { font-size: 18px; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--line); }
  #navScrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150;
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  #navScrim.open { opacity: 1; pointer-events: auto; }
}

/* ── Reduced motion: pause the decorative animation ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}