/* ========================================
   GLASS.CSS — the navigation pill and the theme toggle.

   Layout follows paulstamatiou.com: a small centred pill of square icon
   buttons at the top of the page, a sun/moon toggle at the right edge.
   Material is Apple Liquid Glass (regular variant), reduced to what the
   web can do:
     lensing        backdrop blur + saturate, a 1px top rim, a masked
                    edge-refraction ring on ::before
     adaptive tint  light and dark token sets, switched by
                    html[data-theme]
     specular       static rim; hover lifts its opacity. Nothing sweeps
     morphing       the active state is a white squircle that moves
                    with the page you are on
     control layer  this pill is the only glass element on the site

   The pill is fixed to the top on every device. nav.js only handles the
   theme toggle; the bar needs no JS to render.
   ======================================== */

:root {
  --glass-blur: 20px;
  --glass-sat: 180%;
  --glass-bg: rgba(230, 220, 203, .34);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-rim: rgba(255, 255, 255, .7);
  --glass-rim-hover: rgba(255, 255, 255, .95);
  --glass-shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 12px 32px -12px rgba(60, 40, 20, .22);
  --glass-solid: #ede6dc;
  --glass-ring-hi: rgba(255, 255, 255, .85);
  --glass-ring-lo: rgba(255, 255, 255, .15);

  --nav-item: rgba(181, 169, 143, .9);
  --nav-item-hover: #8a7f68;
  --nav-active-bg: #ffffff;
  --nav-active-ink: #4f6d1e;
  --nav-label: #78716c;

  /* Full pill: the bar's ends are semicircles and each item is a circle. */
  --nav-pill-radius: 999px;
  --nav-item-radius: 999px;
  --nav-item-size: 52px;
  --nav-icon: 20px;
}

html[data-theme="dark"] {
  --glass-bg: rgba(255, 255, 255, .06);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-rim: rgba(255, 255, 255, .22);
  --glass-rim-hover: rgba(255, 255, 255, .4);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --glass-solid: #262321;
  --glass-ring-hi: rgba(255, 255, 255, .35);
  --glass-ring-lo: rgba(255, 255, 255, .05);

  --nav-item: rgba(168, 160, 150, .8);
  --nav-item-hover: #d6d0c8;
  --nav-active-bg: rgba(255, 255, 255, .12);
  --nav-active-ink: #b5cf7a;
  --nav-label: #a8a29e;
}

/* ---- Header strip: fixed, transparent, lets clicks through except on the
   controls ---- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: calc(var(--nav-top) + env(safe-area-inset-top, 0px)) 20px 0;
  pointer-events: none;
}

/* ---- The pill ---- */
.kw-nav {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--nav-pill-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow);
  isolation: isolate;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .kw-nav:hover { box-shadow: inset 0 1px 0 var(--glass-rim-hover), var(--glass-shadow); }
}

/* Edge refraction: a gradient drawn only on the 1px rim. The ring sits 1px
   outside the pill, so its radius is the pill's plus 1px and the two
   outlines stay concentric. */
.kw-nav::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--nav-pill-radius) + 1px);
  padding: 1px;
  background: linear-gradient(135deg,
    var(--glass-ring-hi) 0%,
    var(--glass-ring-lo) 30%,
    rgba(255, 255, 255, 0) 52%,
    var(--glass-ring-lo) 74%,
    var(--glass-ring-hi) 100%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* ---- Items: square icon buttons ---- */
.kw-nav__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-item-size);
  height: var(--nav-item-size);
  border-radius: var(--nav-item-radius);
  color: var(--nav-item);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background-color .2s ease;
}
.kw-nav__item svg {
  width: var(--nav-icon);
  height: var(--nav-icon);
  display: block;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) {
  .kw-nav__item:hover { color: var(--nav-item-hover); }
  .kw-nav__item:hover svg { transform: scale(1.08); }
}
.kw-nav__item:active svg { transform: scale(.94); }

/* Current page: white squircle, olive icon. */
.kw-nav__item[aria-current="page"] {
  background: var(--nav-active-bg);
  color: var(--nav-active-ink);
  color: oklch(0.45 0.12 125);
  box-shadow: 0 1px 2px rgba(60, 40, 20, .08);
}
html[data-theme="dark"] .kw-nav__item[aria-current="page"] {
  color: var(--nav-active-ink);
  color: oklch(0.82 0.11 125);
  box-shadow: none;
}

/* Label: visually hidden, shown under the icon on hover (pointer only). */
.kw-nav__label {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  font: 500 15px/1 var(--font-ui, sans-serif);
  color: var(--nav-label);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
@media (hover: hover) {
  .kw-nav__item:hover .kw-nav__label,
  .kw-nav__item:focus-visible .kw-nav__label {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
}

/* ---- Theme toggle: right edge of the viewport, same height as the pill ---- */
.kw-theme {
  pointer-events: auto;
  position: absolute;
  right: 24px;
  top: calc(var(--nav-top) + env(safe-area-inset-top, 0px) + (var(--nav-h) - 32px) / 2);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-item);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}
.kw-theme svg { width: 18px; height: 18px; display: block; }
.kw-theme .kw-theme__moon { display: none; }
html[data-theme="dark"] .kw-theme .kw-theme__sun { display: none; }
html[data-theme="dark"] .kw-theme .kw-theme__moon { display: block; }
@media (hover: hover) {
  .kw-theme:hover { color: var(--nav-item-hover); }
}

.kw-nav a:focus-visible,
.kw-theme:focus-visible {
  outline: 2px solid var(--nav-item-hover);
  outline-offset: 2px;
}

/* ---- Phones ---- */
@media (max-width: 500px) {
  :root { --nav-item-size: 56px; --nav-icon: 22px; --nav-h: 58px; }
  .kw-theme { right: 16px; }
}

/* ---- Fallbacks ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kw-nav { background: var(--glass-solid); }
  .kw-nav::before { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .kw-nav {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kw-nav::before { display: none; }
}
@media (prefers-contrast: more) {
  :root, html[data-theme="dark"] {
    --glass-border: currentColor;
    --nav-item: var(--nav-label);
  }
  .kw-nav::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kw-nav, .kw-nav__item, .kw-nav__item svg, .kw-nav__label, .kw-theme { transition: none !important; }
}