/* ============================================================================
   Home-flight navigation overlay. Injected at the edge by functions/_middleware.js
   — index.html is never edited. See docs/README-integration.md.
   ========================================================================== */

/* 1. Retire the engine's scene tabs and route dots. They stay in the DOM
      (display:none, not removed) because app.js's mobile menu proxies "fly to
      scene" clicks onto .sw-nav__item buttons. */
.sw-root .sw-nav,
.sw-root .sw-route { display: none !important; }

/* 2. Resort links, slotted into .sw-topbar between the brand and the CTA. */
.ovl-links { flex: 1; min-width: 0; }
.ovl-links ul {
  display: flex; justify-content: center; flex-wrap: nowrap;
  gap: clamp(10px, 1.4vw, 22px); list-style: none; margin: 0; padding: 0;
}
.ovl-links a {
  display: inline-block; padding: 8px 2px; white-space: nowrap;
  font-family: var(--font-body, Inter, sans-serif); font-size: .82rem; font-weight: 500; letter-spacing: .02em;
  color: var(--zav-ink, #0B1B2B); text-decoration: none;
  border-bottom: 2px solid transparent;
  text-shadow: 0 1px 12px color-mix(in srgb, #fff 70%, transparent);
}
.ovl-links a:hover { border-bottom-color: var(--zav-brass, #B08D57); }
.ovl-links a:focus-visible { outline: 2px solid var(--zav-brass, #B08D57); outline-offset: 4px; border-radius: 3px; }

/* 3. Below the width the links fit, the existing <dialog id="menu"> hamburger
      (#menu-open, native Esc / focus trap / backdrop) takes over. site.css only
      shows it at ≤860px; the overlay needs it from 1240px down. */
@media (max-width: 1240px) {
  .ovl-links { display: none; }
  .menu-open { display: flex !important; }
  .sw-root .sw-topbar { padding-right: 76px; } /* keep the CTA clear of the burger */
}

/* 4. The look arrows the engine puts on every 360 scene. Their right-hand one is
      offset to clear the engine's route dots, which rule 1 retires here — so it
      can sit as far in as its twin. */
.sw-root .sw-look__btn--right { right: clamp(12px, 3vw, 34px); }