/* The one site-wide top bar. Every page uses identical <header class="sitenav"> markup and
   loads this file last, so the bar never changes between pages. Colours are scoped here
   (same values as the :root palette) because pages define their own variables. */
header.sitenav {
  --sn-teal: #1D9E75; --sn-teal-bright: #28c294;
  --sn-text: #e6edf5; --sn-dim: #9fb0c3; --sn-line: #1e2c3d;
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 22px; box-sizing: border-box;
  background: rgba(7,11,19,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sn-line);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.sitenav a { text-decoration: none; }
.sitenav .sn-brand {
  display: flex; align-items: center; gap: 11px; flex: none;
  font-weight: 700; font-size: 1.08rem; line-height: 1.6; letter-spacing: -.02em; color: var(--sn-text);
}
.sitenav .sn-brand svg { display: block; }
.sitenav .sn-brand b { color: var(--sn-teal-bright); font-weight: 700; }
.sitenav .sn-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sitenav .sn-links a {
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  font-size: .9rem; font-weight: 500; line-height: 1.4; color: var(--sn-dim);
  transition: color .15s, background .15s;
}
.sitenav .sn-links a:hover { color: var(--sn-text); background: rgba(255,255,255,.05); }
.sitenav .sn-links a[aria-current="page"] { color: var(--sn-teal-bright); }
.sitenav .sn-cta {
  flex: none; padding: 8px 16px; border-radius: 8px; white-space: nowrap;
  font-size: .9rem; font-weight: 600; line-height: 1.4; color: #03110b;
  background: linear-gradient(135deg, var(--sn-teal) 0%, #168a64 100%);
}
.sitenav .sn-cta:hover { background: linear-gradient(135deg, var(--sn-teal-bright) 0%, var(--sn-teal) 100%); }
.sitenav a:focus-visible { outline: 2px solid var(--sn-teal-bright); outline-offset: 2px; }

/* Phones: brand + button on the first row, the links on a second, swipeable row. */
@media (max-width: 860px) {
  :root { --nav-h: 108px; }
  header.sitenav { flex-wrap: wrap; height: 108px; padding: 0 16px; gap: 0 12px; align-content: center; }
  .sitenav .sn-brand { height: 56px; }
  .sitenav .sn-cta { margin-left: auto; order: 2; }
  /* Docs only: the sidebar button sits after Request Access so the brand never moves */
  .sitenav .menu-btn { order: 3; margin-left: 8px; }
  .sitenav .sn-links {
    order: 3; flex-basis: 100%; margin: 0 -16px; padding: 0 12px 8px;
    overflow-x: auto; scrollbar-width: none;
  }
  .sitenav .sn-links::-webkit-scrollbar { display: none; }
}