/* ═══════════════════════════════════════════════════════════════════════════
   Lateral — shared site chrome: the nav pill and the footer.
   ───────────────────────────────────────────────────────────────────────────
   Before this file the site carried three different navigations — the glass
   pill on the homepage, a plain wordmark header on the product pages, and a
   third inline-styled one on jobs — and five different footers, two of which
   were missing entirely. A visitor crossing from /fleet/ to / went through
   what read as two different companies.

   Everything here is loaded by EVERY page, immediately after theme.css and
   before the page's own stylesheet, so a page can still override. It depends
   on nothing but theme.css tokens: the scene colours are declared locally with
   fallbacks so a page that never loads home.css still gets a correct pill.

   The markup that goes with it is stamped by build_chrome.py. Edit the
   generator, not the generated HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --glass-bg:  rgba(18, 20, 26, .58);
  --glass-brd: rgba(255, 255, 255, .14);
  --chrome-ink: #04060a;
  --chrome-txt: #f5f5f7;
  --chrome-dim: rgba(235, 235, 240, .55);
}

/* ── Liquid Glass primitive ──────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 34px rgba(0, 0, 0, .35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(18, 20, 26, .94); }
}

/* ── Floating glass nav (the app's tab bar, translated) ──────────────────── */
.nav-pill {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 100; border-radius: 999px;
  display: flex; align-items: center; gap: 4px;
  /* nowrap is load-bearing, not decoration: product.css styles the bare `nav`
     element with flex-wrap:wrap, which caught this pill and broke it onto two
     lines on a phone — and the over-wide pill then widened the whole document,
     so every product page scrolled sideways. */
  flex-wrap: nowrap;
  padding: 7px 10px;
  max-width: min(96vw, 840px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               Inter, system-ui, sans-serif;
}
.nav-pill a {
  color: rgba(245, 245, 247, .82); text-decoration: none;
  font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-pill a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-pill .brand { font-weight: 700; font-size: 15px; color: var(--amber); padding-right: 8px; }
/* the page you are already on, so the pill orients rather than just links */
.nav-pill a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-pill .cta { background: var(--amber); color: #100a02; font-weight: 600; }
.nav-pill .cta:hover, .nav-pill .cta[aria-current="page"] { background: #ffb845; color: #100a02; }

/* ── Overflow menu ────────────────────────────────────────────────────────
   Desktop shows every link inline and hides the button; a phone can only fit
   three, so below 860px the links collapse into the button instead of simply
   disappearing the way they used to. */
.nav-more { display: none; }
.nav-menu { display: none; }

@media (max-width: 860px) {
  .nav-pill { gap: 0; padding: 6px 8px; }
  .nav-pill a { padding: 7px 9px; font-size: 12.5px; }
  .nav-pill a.hide-sm { display: none; }
  .nav-more {
    display: grid; place-items: center; width: 34px; height: 30px;
    margin: 0 2px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .1); color: rgba(245, 245, 247, .92);
  }
  .nav-more svg { width: 16px; height: 11px; display: block; }
  .nav-more[aria-expanded="true"] { background: var(--amber); color: #100a02; }

  .nav-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    display: none; flex-direction: column; min-width: 214px; padding: 8px;
    border-radius: 20px; z-index: 120;
    /* opaque enough to read against a bright hero — the shared .glass tint is
       built for panels over imagery, not for text menus */
    background: rgba(16, 18, 23, .96);
    border: 1px solid rgba(235, 235, 240, .14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    max-height: calc(100svh - 90px); overflow-y: auto;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a {
    display: block; padding: 11px 14px; border-radius: 12px;
    font-size: 15px; font-weight: 500; color: var(--chrome-txt);
    text-decoration: none; white-space: nowrap;
  }
  .nav-menu a:active, .nav-menu a:hover { background: rgba(245, 245, 247, .12); }
  .nav-menu hr { border: 0; border-top: 1px solid rgba(235,235,240,.12); margin: 6px 10px; }
}

/* A phone fits the brand, the menu button and the CTA — nothing else. Map and
   Fleet stay inline on a tablet and fold into the menu below this. */
@media (max-width: 560px) {
  .nav-pill > a[href="/map/"], .nav-pill > a[href="/fleet/"] { display: none; }
  .nav-pill .brand { padding-right: 4px; }
}

/* Pages built on product.css / careers open their content at the very top of
   the document, where the fixed pill would sit on top of it. The homepage's
   hero is deliberately full-bleed underneath the pill, so this is opt-in. */
body.chrome-pad { padding-top: 82px; }

/* ── Footer ──────────────────────────────────────────────────────────────
   One footer, everywhere. It doubles as the site map: before this, /data,
   /hazard and /marketplace were reachable only by typing the URL or finding
   the one card that linked them. */
footer.soar-foot {
  background: var(--chrome-ink);
  border-top: 1px solid rgba(235, 235, 240, .12);
  /* Some pages centre their body with flex (support.html) — without this the
     footer shrink-wraps to its content and floats as an inset band. Both
     properties are inert in ordinary block flow, so this is safe everywhere. */
  align-self: stretch;
  margin-top: auto;
  color: var(--chrome-dim);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               Inter, system-ui, sans-serif;
  font-size: 14px; line-height: 1.6;
  padding: 54px 22px 46px;
}
.soar-foot-in {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 34px 26px;
  grid-template-columns: 1.5fr repeat(4, 1fr);
}
@media (max-width: 900px) { .soar-foot-in { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .soar-foot-in { grid-template-columns: 1fr 1fr; } }

.soar-foot .fbrand { grid-column: 1 / -1; }
@media (min-width: 901px) { .soar-foot .fbrand { grid-column: auto; } }
.soar-foot .fbrand .fmark {
  display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  color: var(--amber); margin-bottom: 10px; text-decoration: none;
}
.soar-foot .fbrand p { max-width: 30ch; color: rgba(235, 235, 240, .5); font-size: 13.5px; }

.soar-foot h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(235, 235, 240, .38); margin-bottom: 12px;
}
.soar-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.soar-foot a { color: rgba(235, 235, 240, .72); text-decoration: none; }
.soar-foot a:hover { color: #fff; }
.soar-foot .tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(235, 235, 240, .5); border: 1px solid rgba(235, 235, 240, .18);
  vertical-align: 1px;
}

.soar-foot-base {
  max-width: 1180px; margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(235, 235, 240, .1);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(235, 235, 240, .42);
}
.soar-foot-base .disclaim { max-width: 56ch; }

/* Light-theme pages (product.css honours the theme toggle) still get the
   dark footer — it is art-directed, the way the homepage's sections are. */