/* Bottom-centre navigation pill.
 *
 * The glass material itself lives in liquid-glass.css and is composed via
 * the .liquid-glass class; this file only adds placement, the sliding
 * indicator and the items. Only transform/opacity animate, so nothing
 * hits layout.
 */

.nav-pill {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-nav);

  /* Persist across page navigations — see the view-transition rules in
     base.css. Without a name the pill would fade out and back in. */
  view-transition-name: nav-pill;

  display: flex;
  align-items: center;
  gap: var(--s-1);

  /* One inset for the whole component: the padding here and the indicator's
     offset below must always agree, or the active chip sits off-centre
     against the glass edge. Declared once so they cannot drift. */
  --pill-inset: 6px;
  padding: var(--pill-inset);

  border-radius: var(--r-pill);
}

/* --- Sliding active indicator ---------------------------------------- */

.nav-pill__thumb {
  position: absolute;
  top: var(--pill-inset);
  left: 0;
  height: calc(100% - var(--pill-inset) * 2);
  width: var(--thumb-w, 0px);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  pointer-events: none;
  /* Above the three glass layers (0–2), below the labels. */
  z-index: 3;
  transform: translateX(var(--thumb-x, 0px));
  opacity: var(--thumb-o, 0);
  transition:
    transform var(--d-base) var(--ease-glass),
    width var(--d-base) var(--ease-glass),
    opacity var(--d-fast) linear;
}

/* Before the first measurement, don't animate in from the left edge. */
.nav-pill--init .nav-pill__thumb {
  transition: none;
}

/* --- Items ------------------------------------------------------------ */

.nav-pill__link {
  position: relative;
  z-index: 4; /* above the sliding indicator */
  display: block;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--c-ink);
  transition:
    opacity var(--d-fast) var(--ease-out),
    color var(--d-base) var(--ease-glass);
}

/* Dim on hover. A colour shift between two dark greens was near-invisible;
   dropping opacity reads clearly and works over both tones. */
.nav-pill__link:hover {
  opacity: 0.45;
}

.nav-pill__link[aria-current='page']:hover {
  opacity: 0.75;
}

.nav-pill__link[aria-current='page'] {
  color: var(--c-on-dark);
}

/* --- Locale toggle ---------------------------------------------------- */

.nav-pill__sep {
  position: relative;
  z-index: 4;
  width: 1px;
  height: 18px;
  margin-inline: var(--s-1);
  background: currentColor;
  opacity: 0.15;
}

.nav-pill__locale {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--s-1);
}

.nav-pill__locale-btn {
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.45;
  transition: opacity var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}

.nav-pill__locale-btn:hover {
  opacity: 0.8;
}

.nav-pill__locale-btn[aria-pressed='true'] {
  opacity: 1;
  background: rgb(22 44 37 / 0.08);
}

/* --- Social ------------------------------------------------------------ */

.nav-pill__social {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-2);
}

.nav-pill__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-1);
  border-radius: var(--r-pill);
  opacity: 0.75;
  transition: opacity var(--d-fast) var(--ease-out);
}

.nav-pill__social-link:hover {
  opacity: 0.4;
}

.nav-pill__social-link img {
  width: 24px;
  height: 24px;
}

.nav-pill[data-tone='dark'] .nav-pill__social-link img {
  filter: brightness(0) invert(1);
}

/* --- Dark tone -------------------------------------------------------- */
/* Set data-tone="dark" on the pill when it sits over dark imagery. */

.nav-pill[data-tone='dark'] .nav-pill__link,
.nav-pill[data-tone='dark'] .nav-pill__locale-btn {
  color: var(--c-on-dark);
}

/* Inactive links need more presence over busy photography than they do
   over paper — the glass alone doesn't carry enough contrast. */
.nav-pill[data-tone='dark'] .nav-pill__link:not([aria-current='page']) {
  opacity: 0.82;
}

/* Dim on hover here too — the light-tone rule would otherwise be cancelled
   by the higher-specificity opacity above. */
.nav-pill[data-tone='dark'] .nav-pill__link:hover {
  opacity: 0.45;
}

.nav-pill[data-tone='dark'] .nav-pill__locale-btn {
  opacity: 0.55;
}

.nav-pill[data-tone='dark'] .nav-pill__locale-btn[aria-pressed='true'] {
  opacity: 1;
}

.nav-pill[data-tone='dark'] .nav-pill__thumb {
  background: rgb(var(--c-paper-rgb) / 0.92);
}

.nav-pill[data-tone='dark'] .nav-pill__link[aria-current='page'] {
  color: var(--c-ink);
}

.nav-pill[data-tone='dark'] .nav-pill__locale-btn[aria-pressed='true'] {
  background: rgb(255 255 255 / 0.16);
}

/* The no-backdrop-filter fallback lives in liquid-glass.css, with the material. */

/* Below this width the horizontal pill (~430px wide) no longer fits; the
   drawer menu (nav-menu.css) takes over instead — see the matching rule there
   that reveals it. Kept in sync with nav.js. */
@media (max-width: 600px) {
  .nav-pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill__thumb,
  .nav-pill::before {
    transition: none;
  }
}