/* =============================================================
   HZL Microsite — Arc Section Navigator
   Fixed bottom strip, VAIL VR-style curved gauge
   ============================================================= */

/* ── CSS custom property — single source of truth ──────────── */
:root {
  --arc-nav-h: 88px;
}

/* ── Arc container ──────────────────────────────────────────── */
#arc-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--arc-nav-h);
  pointer-events: none;   /* container passes through — only SVG catches */
  z-index: 20;
  overflow: visible;
  background: transparent;
}

#arc-nav-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  pointer-events: auto;   /* SVG itself is interactive */
  cursor: default;
}

/* Pointer cursor on clickable hit-areas (added via JS) */
#arc-nav-svg .arc-hit {
  cursor: pointer;
  pointer-events: all;
  fill: transparent;
}

/* ── Section layout adjustment ────────────────────────────────
   Every section gets bottom breathing room equal to the arc
   height so content never hides underneath the navigator.
   ──────────────────────────────────────────────────────────── */
main > section,
.site-main > section,
body > section {
  padding-bottom: calc(var(--arc-nav-h) + 16px) !important;
}

/* Anchor / smooth-scroll offset so linked headings aren't
   hidden behind the navigator when jumped to via #id links  */
html {
  scroll-padding-bottom: var(--arc-nav-h);
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Slightly shorter on phones to save vertical real estate */
@media (max-width: 768px) {
  :root { --arc-nav-h: 72px; }
}

/* Hide in landscape on short screens */
@media (max-height: 480px) {
  #arc-nav { display: none; }
  :root    { --arc-nav-h: 0px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #arc-nav { display: none; }
  :root    { --arc-nav-h: 0px; }
}
/* ── Fix: only reserve bottom space when the arc navigator is actually
   rendered. Inner pages load this CSS but have no #arc-nav element, so the
   reserved --arc-nav-h showed as an empty gap below the footer. ── */
body:not(:has(#arc-nav)) {
  padding-bottom: 0 !important;
}