/* The public site's navigation, shared by the main page, /ask and /questions.
   Wide screens: the links sit in the header bar. Phones (720px and under): a menu button at the
   right of the title row opens a panel that drops down under the bar. Needs the page's own
   --gold, --ink-soft, --border and --bg-dark tokens. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(12, 14, 26, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.brand img { height: 34px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-weight: 700; font-size: 0.95em; }
.brand-text span { font-size: 0.74em; color: var(--ink-faint); }
/* With the links in the bar, keep the title whole rather than squeezing it. */
@media (min-width: 721px) {
  .brand { flex-shrink: 0; }
  .brand-text span { white-space: nowrap; }
}

nav.site-nav { display: flex; gap: 24px; }
nav.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9em;
}
nav.site-nav a:hover, nav.site-nav a[aria-current="page"] { color: var(--gold); }

/* Between a phone and a laptop the links and the title are close: a little less space between links. */
@media (max-width: 880px) {
  nav.site-nav { gap: 16px; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.07); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .i-close { display: none; }
.site-header.nav-open .nav-toggle .i-open { display: none; }
.site-header.nav-open .nav-toggle .i-close { display: block; }
.nav-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(5, 6, 12, 0.6); }
.nav-backdrop[hidden] { display: none; }

@media (max-width: 720px) {
  .site-header .wrap { padding: 10px 16px; }
  .nav-toggle { display: inline-flex; }

  nav.site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 14px;
    background: rgba(12, 14, 26, 0.98);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .site-header.nav-open nav.site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  nav.site-nav a {
    padding: 15px 14px;
    border-radius: 10px;
    font-size: 1.05rem;
  }
  nav.site-nav a:active { background: rgba(255, 255, 255, 0.08); }
}

/* The sticky bar would otherwise cover the top of a section jumped to from the menu. */
[id] { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: reduce) {
  nav.site-nav, .site-header.nav-open nav.site-nav { transition: none; }
}