/* ============================================================
   Site nav: the fixed "liquid glass" pill, shared by every page.
   Markup and behaviour come from nav.js (window.SiteNav).

   .navbar__glass is the only element with a backdrop-filter. It's an absolutely positioned
   layer behind the bar; on phones it grows to cover the open menu panel too, so the panel
   gets the same material without a second (nested) backdrop-filter.
   ============================================================ */
.navbar {
  /* clear enough that what's behind stays visible and bends at the edges (that's what reads as
     glass on a light page); a heavy blur + white tint over white just looks like a white pill */
  --glass-tint: rgba(255,255,255,0.1);
  --glass-sheen-top: rgba(255,255,255,0.14);
  --glass-blur: 10px;                   /* plain-blur fallback (Safari/Firefox) */
  --glass-soft: 0.8px;                  /* blur on top of the refraction (Chromium) */
  --glass-bright: 1;
  --nav-ink: rgba(0,0,0,0.64);
  --nav-halo: 0 0 6px rgba(255,255,255,0.75);
  --nav-ink-strong: var(--color-text);
  --nav-active: var(--color-accent);
  --nav-rim-a: rgba(255,255,255,0.95);
  --nav-rim-b: rgba(255,255,255,0.12);
  --nav-blob: rgba(255,255,255,0.55);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.3, 1.3, 0.6, 1);
  position: fixed;
  top: 20px;
  left: 50%;
  width: min(1100px, 92%);
  z-index: 100;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  transition: transform 0.45s var(--spring-soft);
  pointer-events: none;                 /* only the bar (and the open panel) take the pointer */
}
/* scrolled: the bar tucks up and shrinks a little, with a denser, blurrier glass */
.navbar--compact {
  transform: translateX(-50%) translateY(-6px) scale(0.965);
  --glass-tint: rgba(255,255,255,0.2);
  --glass-blur: 12px;
  --glass-soft: 2px;
}
/* over a partly dark area (e.g. the terminal card): denser tint, stronger ink */
.navbar--dense {
  --glass-tint: rgba(255,255,255,0.6);
  --glass-soft: 8px;
  --nav-ink: rgba(0,0,0,0.75);
}
/* phone menu open: the panel's links need a calmer surface than the clear bar */
.navbar.is-open:not(.navbar--dark) {
  --glass-tint: rgba(255,255,255,0.58);
  --glass-blur: 16px;
  --glass-soft: 10px;
}
.navbar--dark.is-open { --glass-tint: rgba(20,20,26,0.74); --glass-soft: 10px; }
/* mostly over something dark (the footer panel, the expanded About Us frame): dark glass */
.navbar--dark {
  --glass-tint: rgba(20,20,26,0.5);
  --glass-soft: 6px;
  --nav-ink: rgba(247,245,241,0.78);
  --nav-halo: 0 0 10px rgba(0,0,0,0.6);
  --nav-ink-strong: #fff;
  --nav-active: var(--color-accent-on-dark, #7070ff);   /* the site blue, lifted to read on dark glass */
  --nav-rim-a: rgba(255,255,255,0.4);
  --nav-rim-b: rgba(255,255,255,0.05);
  --nav-blob: rgba(255,255,255,0.13);
}

/* ---- the glass material ---- */
.navbar__glass {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-color: var(--glass-tint);
  /* a touch of body: brighter at the top, clearer toward the bottom */
  background-image: linear-gradient(to bottom, var(--glass-sheen-top), rgba(255,255,255,0) 60%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7) brightness(1.05);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.7) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),           /* specular highlight on the top edge */
    inset 0 10px 16px -12px rgba(255,255,255,0.9), /* ...softening into the surface */
    inset 0 -1px 0 rgba(255,255,255,0.35),         /* faint inner glow on the bottom edge */
    inset 0 -10px 18px -14px rgba(0,0,0,0.12),     /* a hint of thickness at the bottom */
    0 14px 40px -10px rgba(0,0,0,0.22),            /* soft, diffuse float */
    0 2px 8px rgba(0,0,0,0.05);
  transition: background-color 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease;
  overflow: hidden;
}
/* refraction (Chromium only; nav.js adds the class after a support check): an edge-lens
   displacement map sized to the bar bends what's behind it near the rim, then a light blur */
.glass-refract .navbar__glass {
  -webkit-backdrop-filter: url(#site-glass) blur(var(--glass-soft)) saturate(1.8) brightness(var(--glass-bright));
          backdrop-filter: url(#site-glass) blur(var(--glass-soft)) saturate(1.8) brightness(var(--glass-bright));
}
/* 1px gradient rim: bright at the top-left, fading toward the bottom-right */
.navbar__glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--nav-rim-a), var(--nav-rim-b) 55%, rgba(255,255,255,0.04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* pointer sheen: a soft highlight that follows the mouse across the bar */
.navbar__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px 90px at var(--sheen-x, 50%) 0%, rgba(255,255,255,0.5), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.navbar--dark .navbar__sheen { background: radial-gradient(160px 90px at var(--sheen-x, 50%) 0%, rgba(255,255,255,0.16), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .navbar.is-hovered .navbar__sheen { opacity: 1; }
}
.navbar--dark .navbar__glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 8px rgba(255,255,255,0.06),
    0 14px 40px -10px rgba(0,0,0,0.35),
    0 2px 8px rgba(0,0,0,0.1);
}

/* ---- the bar ---- */
.navbar__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 30px;
  pointer-events: auto;
}
.navbar__logo {
  display: block;
  flex: none;
  margin: -10px 0;                       /* taller than the old text logo; keep the bar's height */
  border-radius: 8px;
}
.navbar__logo-img { display: block; height: 50px; width: auto; }
.navbar__logo-img--on-dark { display: none; }
.navbar--dark .navbar__logo-img--on-light { display: none; }
.navbar--dark .navbar__logo-img--on-dark { display: block; }
.navbar__track { position: relative; }
.navbar__links {
  position: relative;
  display: flex;
  gap: 4px;                              /* + the links' 14px side padding = the old 32px gaps */
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar__link {
  display: block;
  padding: 6px 14px;
  margin: -6px 0;                        /* the padding is for the blob; keep the bar's height */
  border-radius: 999px;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 400;
  color: var(--nav-ink);
  text-decoration: none;
  text-shadow: var(--nav-halo);          /* keeps links legible over busy content under clear glass */
  transition: color 0.25s ease;
}
.navbar__link:hover { color: var(--nav-ink-strong); }
.navbar__link[aria-current="page"],
.navbar__link[aria-current="page"]:hover {
  color: var(--nav-active);
  font-style: normal;                    /* upright like the rest: colour + blob mark it */
  font-weight: 400;
}
.navbar__logo:focus-visible, .navbar__link:focus-visible, .navbar__menu:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 2px;
}

/* the liquid indicator: a glass highlight that slides and stretches between links */
.navbar__blob {
  position: absolute;
  left: 0;
  top: 50%;
  height: 34px;
  width: 0;
  margin-top: -17px;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.42s var(--spring),
    width 0.42s var(--spring-soft),
    opacity 0.25s ease;
}
.navbar__blob.is-on { opacity: 1; }
.navbar__blob-body {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--nav-blob);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 4px rgba(255,255,255,0.18),
    0 4px 12px -4px rgba(0,0,0,0.18);
  transition: background-color 0.35s ease;
}
.navbar--dark .navbar__blob-body { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 12px -4px rgba(0,0,0,0.4); }
.navbar__blob.is-squish .navbar__blob-body { animation: navbar-squish 0.42s var(--spring-soft); }
@keyframes navbar-squish {
  0%   { transform: none; }
  35%  { transform: scale(1.06, 0.82); }
  100% { transform: none; }
}
.navbar__blob.no-anim, .navbar__blob.no-anim .navbar__blob-body { transition: none; animation: none; }

/* ---- phones: compact pill with a menu button; the panel opens below it ---- */
.navbar__menu, .navbar__panel { display: none; }

@media (max-width: 819px) {
  .navbar { --bar-h: 56px; }
  .navbar__track { display: none; }
  .navbar__bar { height: var(--bar-h); padding: 0 8px 0 16px; }
  .navbar__logo { margin: 0; }
  .navbar__logo-img { height: 44px; }
  .navbar__glass {
    bottom: auto;
    height: var(--glass-h, var(--bar-h));
    border-radius: 28px;
    transition:
      height 0.45s var(--spring-soft),
      background-color 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease;
  }
  .navbar__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--nav-blob);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    font: inherit;
    font-size: 0.9rem;
    color: var(--nav-ink-strong);
    cursor: pointer;
  }
  .navbar__menu-icon { position: relative; width: 16px; height: 10px; }
  .navbar__menu-icon::before, .navbar__menu-icon::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.35s var(--spring-soft);
  }
  .navbar__menu-icon::before { top: 0; }
  .navbar__menu-icon::after { bottom: 0; }
  .navbar.is-open .navbar__menu-icon::before { transform: translateY(4.25px) rotate(45deg); }
  .navbar.is-open .navbar__menu-icon::after { transform: translateY(-4.25px) rotate(-45deg); }

  .navbar__panel {
    display: block;
    position: relative;
    padding: 4px 8px 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: 50% 0;
    transition: opacity 0.2s ease, transform 0.4s var(--spring-soft), visibility 0s linear 0.4s;
  }
  .navbar.is-open .navbar__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.25s ease 0.06s, transform 0.45s var(--spring-soft) 0.02s, visibility 0s;
  }
  .navbar__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .navbar__panel .navbar__link { margin: 0; padding: 12px 14px; border-radius: 16px; font-size: 1.05rem; }
  .navbar__panel .navbar__link[aria-current="page"] {
    background: var(--nav-blob);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px -4px rgba(0,0,0,0.15);
  }
  .navbar--compact { transform: translateX(-50%) translateY(-6px) scale(0.98); }
}

/* ---- preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .navbar, .navbar__glass, .navbar__blob, .navbar__blob-body, .navbar__panel, .navbar.is-open .navbar__panel,
  .navbar__menu-icon::before, .navbar__menu-icon::after { transition: none !important; }
  .navbar__blob.is-squish .navbar__blob-body { animation: none; }
  .navbar__sheen { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .navbar__glass, .glass-refract .navbar__glass {
    background: #f7f5f1;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .navbar--dark .navbar__glass { background: #17171c; }
}