/* ==========================================================================
   voyage-bar.css — the "page as a voyage" for phones and tablets.
   A slim strip attached under the navy header: a dashed gold route with a
   dot for each section, and a small ship that sails left → right as the
   visitor scrolls, leaving a blue trail. Built by js/voyage-bar.js.
   Only on screens up to 1024px wide (phones and tablets); computers keep
   the winding left-margin route (style.css "Voyage route", ≥1320px) and
   screens in between show neither, exactly as before.
   ========================================================================== */
.voyage-bar { display: none; }
@media (max-width: 1024px) {
  .voyage-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0; /* set by JS to sit just under the header */
    height: 30px;
    z-index: 999;
    background: rgba(10, 31, 51, 0.96);
    border-top: 1px solid rgba(227, 199, 107, 0.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .voyage-bar.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  /* While the bar shows, the header's own shadow would sit on top of it. */
  body.voyage-bar-on .site-header.scrolled { box-shadow: none; }
  /* Jumps to a section stop below the header AND this bar. */
  html { scroll-padding-top: 116px; }
}
.vb-track { position: absolute; left: 22px; right: 22px; top: 15px; height: 0; }
.vb-route { position: absolute; left: 0; right: 0; top: -1px; border-top: 2px dashed rgba(227, 199, 107, 0.55); }
.vb-trail { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: #32a0dc; transform-origin: left; transform: scaleX(0); }
.vb-port {
  position: absolute;
  top: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.vb-port::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #0a1f33;
  border: 2px solid rgba(227, 199, 107, 0.8);
  transition: background-color 0.3s, border-color 0.3s;
}
.vb-port.is-reached::before { background: #32a0dc; border-color: #fff; }
.vb-port:focus-visible { outline: 2px solid #32a0dc; outline-offset: 0; border-radius: 50%; }
.vb-ship {
  position: absolute;
  top: -15px;
  left: 0;
  width: 24px;
  height: 18px;
  margin-left: -12px;
  pointer-events: none;
  will-change: transform;
}
/* Bigger invisible tap area for each section dot (26px → 40px). */
.vb-port::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .voyage-bar, .vb-port::before { transition: none; }
}