/* Mobile menu for the site header (below 980px).
   The header's desktop layout lives in inline styles on each page, so the
   overrides here need !important. js/site-nav.js only toggles html.nav-open. */

@media (max-width: 979.98px) {
  #site-nav > div { height: 64px !important; padding: 0 16px 0 20px !important; }

  /* Burger: three lines that turn into a cross */
  #site-nav-burger {
    display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 !important; margin-right: -6px;
    background: none !important; box-shadow: none !important; border-radius: 10px !important;
    -webkit-tap-highlight-color: transparent;
  }
  #site-nav-burger:active { background: rgba(255,255,255,0.08) !important; }
  #site-nav-burger span {
    display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform 220ms cubic-bezier(0.4,0,0.2,1), opacity 150ms linear;
  }
  .nav-open #site-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open #site-nav-burger span:nth-child(2) { opacity: 0; }
  .nav-open #site-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Panel: full screen under the header */
  #site-nav-links {
    position: fixed !important; top: 64px; left: 0; right: 0; bottom: 0;
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 8px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    background: var(--runa-shell-bg) !important; overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), visibility 0s linear 200ms;
  }
  .nav-open #site-nav-links {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1);
  }
  .nav-open body { overflow: hidden; }

  /* Page links: full-width rows with a chevron */
  #site-nav-links a[data-key] {
    position: relative; min-height: 60px; margin: 0 !important; padding: 0 4px !important;
    justify-content: flex-start; font: 600 20px/1.2 var(--runa-font-ui) !important;
    border-bottom: 0 !important; box-shadow: inset 0 -1px 0 var(--runa-shell-border);
    background: none !important; -webkit-tap-highlight-color: transparent;
  }
  #site-nav-links a[data-key]:active { background: rgba(255,255,255,0.05) !important; }
  #site-nav-links a[data-key]::after {
    content: ""; width: 8px; height: 8px; margin: 0 4px 0 auto; flex: none;
    border: solid rgba(255,255,255,0.4); border-width: 2px 2px 0 0; transform: rotate(45deg);
  }
  /* Current page: a short accent bar in that page's colour */
  #site-nav-links a[aria-current="page"]::before {
    content: ""; position: absolute; left: -20px; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--runa-purple-mark);
  }
  #site-nav-links a[aria-current="page"][data-key="check"]::before { background: var(--colors-indigo-400); }
  #site-nav-links a[aria-current="page"][data-key="train"]::before { background: var(--colors-orange-400); }

  /* Log in and Join the beta: full-width buttons at the bottom */
  #site-nav-links a:not([data-key]) {
    align-self: stretch !important; justify-content: center; display: flex; align-items: center;
    min-height: 50px; margin: 12px 0 0 !important; border-radius: 10px !important; font-size: 16px !important;
  }
  #site-nav-links a:not([data-key]):nth-last-child(2) {
    margin-top: auto !important; color: var(--colors-base-white) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  }
}

@media (max-width: 979.98px) and (prefers-reduced-motion: reduce) {
  #site-nav-links, .nav-open #site-nav-links { transition: none; transform: none; }
  #site-nav-burger span { transition: none; }
}