/* ==========================================================================
   Orbit Fast — shared site header (landing + blog).
   Loaded via <link href="/assets/header.css"> + <script src="/assets/header.js">.
   ========================================================================== */
:root {
  --header-h: 58px;
}

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.28s ease;
}

/* The header overlays content now, so pages start below it — except the
   landing page, where the hero is meant to run underneath it. */
body { padding-top: var(--header-h); }
body:has(.hero) { padding-top: 0; }
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: #ededed;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.site-header__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  /* measured against the source lockup rendered at the same icon height */
  gap: 11px;
  height: 52px;
  text-decoration: none;
}
/* the icon comes from the lockup itself — square, no shadow padding */
.site-header__icon { height: 45px; width: 45px; display: block; }
/* Real wordmark, drawn as a mask so it inherits the header's colour the way
   the text did — the supplied lockup is black and would vanish on the dark
   bar and the open mobile menu. The element keeps its text for assistive tech
   and copy/paste; font-size:0 renders the mark instead. */
.site-header__name {
  display: block;
  width: 118px;              /* 4.235 aspect from the artwork */
  height: 27.9px;
  font-size: 0;
  color: #000;
  background-color: currentColor;
  -webkit-mask: url("/assets/wordmark.svg") no-repeat center / contain;
  mask: url("/assets/wordmark.svg") no-repeat center / contain;
}

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-header .site-nav__link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.62);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 9px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-header .site-nav__link:hover { color: #000; background: rgba(0, 0, 0, 0.06); }
.site-header .site-nav__link--current { color: #000; }

/* primary CTA — the yellow poster pill ("FREE 3-DAY TRIAL") */
.site-header .site-nav__cta {
  margin-left: 8px;
  font-family: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 20px;
  color: #000;
  background: #fff700;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.site-header .site-nav__cta:hover { background: #e6e000; }

/* --- landing page (dark/poster) -------------------------------------------
   Base styles above are the light-page treatment, which is also correct over
   the landing's yellow hero. Only two things differ there:
   1. unscrolled, the yellow CTA would vanish on yellow -> black pill
   2. scrolled, the bar goes black, so its content flips to white          */
body:has(.hero) .site-header:not(.is-scrolled) .site-nav__cta { background: #000; color: #fff; }
body:has(.hero) .site-header:not(.is-scrolled) .site-nav__cta:hover { background: #1f1f1f; }

body:has(.hero) .site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.82);
  border-bottom-color: #1f1f1f;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
body:has(.hero) .site-header.is-scrolled .site-header__name { color: #fff; }
body:has(.hero) .site-header.is-scrolled .site-header__toggle span { background: #fff; }
body:has(.hero) .site-header.is-scrolled .site-nav__link { color: rgba(255, 255, 255, 0.62); }
body:has(.hero) .site-header.is-scrolled .site-nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
body:has(.hero) .site-header.is-scrolled .site-nav__link--current { color: #fff; }
@media screen and (max-width: 720px) {
  body:has(.hero) .site-header.is-open .site-nav__link { color: rgba(255, 255, 255, 0.62); }
  /* the open surface is dark even at the top of the hero, so the bar's own
     content has to flip with it — otherwise black-on-dark */
  body:has(.hero) .site-header.is-open .site-header__name { color: #fff; }
  body:has(.hero) .site-header.is-open .site-header__toggle span { background: #fff; }
  body:has(.hero) .site-header.is-open .site-nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
  /* the open panel is dark even at the top, so the black pill would sink into
     it — same yellow treatment as the scrolled bar */
  body:has(.hero) .site-header.is-open .site-nav__cta { background: var(--yellow); color: #000; }
  body:has(.hero) .site-header.is-open .site-nav__cta:hover { background: #e6e000; }
}

/* Slide the bar away while scrolling down (small screens only) — on mobile the
   header is a bigger share of the viewport, so reclaiming it matters more. */
@media screen and (max-width: 720px) {
  .site-header.is-hidden { transform: translateY(-100%); }

  /* Open menu: frost the bar too, so bar + panel read as one surface even at
     the top of the page where the bar is otherwise transparent. */
  /* One surface: the nav sits in the header's flow (below), so a single
     background + blur on the header covers the bar and the menu with no seam
     where two separately-blurred layers would meet. */
  .site-header.is-open,
  .site-header.is-open.is-scrolled {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom-color: #ededed;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.07);
  }
  body:has(.hero) .site-header.is-open,
  body:has(.hero) .site-header.is-open.is-scrolled {
    background: rgba(12, 12, 12, 0.72);
    border-bottom-color: #242424;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
  .site-header.is-hidden { transform: none; }
}

/* hamburger (mobile only) */
.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin: -8px -8px -8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}
.site-header__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #000;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.site-header.is-open .site-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .site-header__toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .site-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media screen and (max-width: 720px) {
  .site-header__toggle { display: flex; }
  .site-header__inner { flex-wrap: wrap; row-gap: 0; }
  .site-nav {
    order: 3;               /* after the toggle, so it wraps onto its own row */
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0;
    background: none;       /* the header is the surface */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease,
      visibility 0.28s ease;
  }
  .site-header.is-open .site-nav {
    max-height: 420px;
    opacity: 1;
    visibility: visible;
    padding: 6px 0 14px;
  }
  .site-header .site-nav__link { padding: 13px 12px; font-size: 1rem; border-radius: 10px; }
  .site-header .site-nav__cta { margin: 8px 0 0; text-align: center; padding: 14px; font-size: 1rem; }
}

/* --- sticky install bar (mobile only) --------------------------------------
   Apple's native Smart App Banner can't be pinned, so this is our own. */
.app-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid #ededed;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(110%);
  transition: transform 0.28s ease;
}
.app-bar.is-visible { transform: translateY(0); }
.app-bar__icon { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.app-bar__text { flex: 1 1 auto; min-width: 0; }
.app-bar__name {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-bar__meta {
  margin: 2px 0 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-bar .app-bar__btn {
  flex: 0 0 auto;
  font-family: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #000;
  background: #fff700;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
}
.app-bar__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: rgba(0, 0, 0, 0.45);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.app-bar__close:hover { color: #000; }

/* landing keeps the dark install bar to match its page */
body:has(.hero) .app-bar {
  background: rgba(12, 12, 12, 0.94);
  border-top-color: #262626;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
}
body:has(.hero) .app-bar__name { color: #fff; }
body:has(.hero) .app-bar__meta { color: rgba(255, 255, 255, 0.55); }
body:has(.hero) .app-bar__close { color: rgba(255, 255, 255, 0.45); }
body:has(.hero) .app-bar__close:hover { color: #fff; }

@media (max-width: 860px) {
  .app-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .app-bar { transition: none; }
}