/* v2-nav-fix-v20260508d.css — header & theme-toggle bug fixes
 *
 * Two production bugs fixed here, additive over the v2-motion + dark-parity
 * sheets so we don't have to reissue those.
 *
 * Bug 1 — Theme toggle invisible on mobile
 *   The legacy `style.css:3057` rule `@media (max-width:640px){.theme-toggle{display:none}}`
 *   was overridden in v2-dark-parity but the override could be lost depending
 *   on cascade order in some browser cache states. We pin it here last-loaded
 *   with explicit visibility + a 44px tap target (WCAG 2.5.5).
 *
 * Bug 2 — Header glitches on scroll
 *   The v2-motion sheet uses `animation-timeline: scroll(root)` to drive
 *   `--nav-scrolled` from 0 → 1 over the first 64px of scroll. WITHOUT a
 *   matching `@property` registration, `--nav-scrolled` defaults to type
 *   CSSUnparsedValue and CANNOT be interpolated — the value jumps directly
 *   from 0 to 1, which makes the backdrop-filter blur snap on/off as you
 *   scroll. That's the "glitch" the user reported.
 *
 *   Fix: register `--nav-scrolled` as a typed `<number>` so interpolation
 *   actually works. Plus drop the dynamic blur entirely on touch screens
 *   (mobile GPUs paint backdrop-filter at variable cost; the static cream
 *   nav already looks fine and has zero risk of dropped frames).
 */

/* ─── Bug 2 fix: typed @property registration ──────────────────────────── */
@property --nav-scrolled {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ─── Bug 2 fix: kill the scroll-driven nav effect on mobile + tablet ──── */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Static cream nav — already legible, no glitch. */
    background-color: var(--ds-bg, #faf9f5) !important;
  }
  :root[data-theme="dark"] nav {
    background-color: var(--ds-bg, #1a1614) !important;
  }
}

/* ─── Bug 2 hardening: prefer-reduced-motion already kills it; double down */
@media (prefers-reduced-motion: reduce) {
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--ds-bg, #faf9f5) !important;
    transition: none !important;
  }
}

/* ─── Bug 1 fix: theme toggle visible + tappable on every screen size ──── */
.theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: rgba(201, 97, 63, 0.20);
  touch-action: manipulation;  /* avoid 300ms double-tap delay */
  transition: background-color 160ms cubic-bezier(0.45, 0, 0.55, 1);
}
.theme-toggle:hover {
  background-color: rgba(201, 97, 63, 0.08);
}
.theme-toggle:active {
  background-color: rgba(201, 97, 63, 0.16);
}
.theme-toggle:focus-visible {
  outline: 2px solid #c9613f;
  outline-offset: 3px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  pointer-events: none;  /* clicks bubble to the button, not the svg */
}

/* The hamburger-panel cloned toggle has a "Switch theme" text label appended
 * by nav-mobile.js. Layout the label cleanly. */
.deskrune-mobile-nav .theme-toggle {
  width: 100%;
  min-height: 48px;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.deskrune-mobile-nav .theme-toggle span {
  pointer-events: none;
}

/* Dark mode parity for the toggle hover/active surfaces */
:root[data-theme="dark"] .theme-toggle:hover {
  background-color: rgba(201, 97, 63, 0.16);
}
:root[data-theme="dark"] .theme-toggle:active {
  background-color: rgba(201, 97, 63, 0.24);
}

/* Belt-and-suspenders: kill any remaining mobile-specific display:none from
 * older stylesheets that might cascade in below this file. */
@media (max-width: 640px) {
  .theme-toggle,
  nav .theme-toggle,
  nav .links .theme-toggle {
    display: inline-flex !important;
  }
}