/*
  navContainer — the floating glass pill that holds the nav items (component.json navContainer, 10 tokens).

  Structure (revised in build step 3, approved by Vivek 2026-09-26):
  the <nav> landmark is a plain fixed wrapper; inside it, the pill; inside the pill,
  the items, with the Work menu panel right after the Work button, so the keyboard
  goes Work -> menu rows -> email -> LinkedIn.
  The pill's glass (fill + blur) is drawn on a layer BEHIND the items (::after), not on
  the pill itself. Reason: an element with a backdrop blur stops anything inside it from
  blurring the page, so the pill itself must carry no blur, or the panel's glass breaks.
  Measured in Chromium: the panel blurs the page exactly as strongly as before.
*/

/* The plain wrapper: no fill, no blur, no styling. Hugs the pill. */
.site-nav {
  position: fixed;
  z-index: 100; /* one stacking need on the whole site: the nav and its panel stay above the page */
  top: var(--nav-container-offset-top-all);
  /* Always centered. The side gaps are whatever room is left, split evenly: at least
     navContainer.offsetSide (16px) on every screen 330px and wider; below that (only the
     400% zoom case) both gaps shrink evenly, e.g. 11px each at 320px.
     Decided by Vivek, build step 5. No new number: nothing here is set, it's leftover room. */
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
}

.nav-container {
  --rim-image: var(--nav-container-border-all);
  --rim-width: var(--nav-container-border-width-all);
  display: flex;
  align-items: center;
  gap: var(--nav-container-gap-all);
  padding: var(--nav-container-padding-all);
  border-radius: var(--nav-container-radius-all);
  box-shadow: var(--nav-container-shadow-all);
  list-style: none;
  margin: 0;
}

/* The glass: fill and backdrop blur on a layer behind the items (see the note at the top).
   Never move these onto .nav-container itself. */
.nav-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--nav-container-fill-all);
  -webkit-backdrop-filter: blur(var(--nav-container-backdrop-blur-all));
  backdrop-filter: blur(var(--nav-container-backdrop-blur-all));
  pointer-events: none;
}