/*
 * sitenav.css - the one definition of the site's top navigation bar.
 *
 * SINGLE SOURCE OF TRUTH, consumed twice:
 *   - Quartz pages: copied to _quartz/quartz/components/styles/sitenav.scss and
 *     imported by SiteNav.tsx (plain CSS is valid SCSS).
 *   - Lab pages:    copied to /lab/shared/nav.css by build-lab.mjs.
 * Both copies happen at build time, so the two halves of the site cannot drift.
 *
 * The two contexts have completely different colour systems (Quartz's --light/
 * --dark vs the lab's --bg/--text), so this file styles against its own
 * --nav-* variables. Each context maps its palette onto them:
 *   Quartz -> quartz-site/custom.scss
 *   Lab    -> quartz-site/lab/shared/lab.css
 */

.sitenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height, 46px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line);
  font-family: var(--nav-font, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
}

/* Progressive enhancement: translucency only where the blur is supported, so
   the bar never renders semi-transparent over scrolling text without it. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sitenav {
    background: color-mix(in srgb, var(--nav-bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
}

.sitenav-inner {
  /* Follows the content width of whichever context it sits in, so the bar
     lines up with the column beneath it rather than floating free. */
  max-width: var(--nav-width, 1180px);
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
}

.sitenav-home {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nav-text);
  text-decoration: none;
  white-space: nowrap;
}

.sitenav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sitenav-links::-webkit-scrollbar {
  display: none;
}

.sitenav-links a {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--nav-muted);
  text-decoration: none;
  background: none;
  transition: background 0.15s, color 0.15s;
}

.sitenav-links a:hover {
  background: var(--nav-hover);
  color: var(--nav-text);
}

.sitenav-links a[aria-current="page"] {
  background: var(--nav-accent-soft);
  color: var(--nav-accent);
  font-weight: 500;
}

/* Second row, lab pages only: which experiment you are looking at. */
.sitenav-sub {
  position: fixed;
  top: var(--nav-height, 46px);
  left: 0;
  right: 0;
  z-index: 99;
  height: var(--nav-sub-height, 38px);
  background: var(--nav-sub-bg, var(--nav-bg));
  border-bottom: 1px solid var(--nav-line);
}

.sitenav-sub .sitenav-inner {
  gap: 4px;
}

/* The primary row pushes its links right, away from the wordmark. The sub row
   has no wordmark, so its links sit left, next to the "Lab" label. */
.sitenav-sub .sitenav-links {
  margin-left: 0;
}

.sitenav-sub .sitenav-label {
  font-family: var(--nav-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-faint, var(--nav-muted));
  margin-right: 8px;
}

.sitenav-sub a {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--nav-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.sitenav-sub a:hover {
  background: var(--nav-hover);
  color: var(--nav-text);
}

.sitenav-sub a[aria-current="page"] {
  background: var(--nav-accent-soft);
  color: var(--nav-accent);
  font-weight: 500;
}

@media (max-width: 800px) {
  .sitenav-inner {
    padding: 0 1rem;
    gap: 10px;
  }
  .sitenav-home {
    font-size: 14px;
  }
  .sitenav-links a {
    padding: 5px 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav-links a,
  .sitenav-sub a {
    transition: none;
  }
}