/* Liquid glass navigation pill (owner request, 17 Sep 2026).
   Loaded after site.css; only affects .site-header nav.nav-glass. */
.site-header nav.nav-glass {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  isolation: isolate;
  overflow: hidden;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .07));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 12px 32px -12px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* Soft sheen that follows the pointer across the glass. */
.site-header nav.nav-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(150px 60px at var(--glass-x, 50%) var(--glass-y, 0%), rgba(255, 255, 255, .17), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
.site-header nav.nav-glass:hover::before { opacity: 1; }

.site-header nav.nav-glass a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #eee8dc;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .25s ease;
}
.site-header nav.nav-glass a:hover,
.site-header nav.nav-glass a:focus-visible,
.site-header nav.nav-glass a[aria-current] { color: #fff; }
.site-header nav.nav-glass a:focus-visible { outline: none; }

/* Before the script is ready (or without JavaScript), each link gets its own glass hover state. */
.site-header nav.nav-glass:not(.is-ready) a:hover,
.site-header nav.nav-glass:not(.is-ready) a[aria-current] { background: rgba(255, 255, 255, .14); }
.site-header nav.nav-glass:not(.is-ready) a:focus-visible { outline: 2px solid #c8a66b; outline-offset: 2px; }

/* The moving selection. */
.nav-glass-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, width;
  background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .10) 60%, rgba(200, 166, 107, .16));
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .65),
    inset 0 -8px 14px -8px rgba(200, 166, 107, .45),
    0 6px 16px -6px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(4px) brightness(1.18) saturate(140%);
  backdrop-filter: blur(4px) brightness(1.18) saturate(140%);
  transition: opacity .3s ease, box-shadow .2s ease;
}
/* Specular highlight on the top edge. */
.nav-glass-pill::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 1px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  opacity: .55;
}
.nav-glass-pill.is-visible { opacity: 1; }
.nav-glass-pill.is-focus {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .65),
    inset 0 -8px 14px -8px rgba(200, 166, 107, .45),
    0 0 0 2px #c8a66b;
}

@media (max-width: 1100px) {
  .site-header nav.nav-glass { gap: 0; }
  .site-header nav.nav-glass a { padding: 0 13px; }
}
.site-header nav.nav-glass { flex-shrink: 0; }
@media (max-width: 1050px) {
  .site-header nav.nav-glass a { padding: 0 11px; }
}
/* Tablets and phones: the header keeps the logo and the Register button only. */
@media (max-width: 900px) {
  .site-header nav.nav-glass { display: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header nav.nav-glass { background: rgba(28, 26, 22, .82); }
  .nav-glass-pill { background: rgba(255, 255, 255, .2); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header nav.nav-glass { background: rgba(28, 26, 22, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-glass-pill { background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-glass-pill { transition: opacity .01s linear; }
  .site-header nav.nav-glass::before { display: none; }
}
@media (forced-colors: active) {
  .nav-glass-pill { display: none; }
  .site-header nav.nav-glass a:hover,
  .site-header nav.nav-glass a:focus-visible { text-decoration: underline; outline: 2px solid; }
}