/* KHUBZ shared navigation — one compact route system for every public page. */
:root {
  --kh-nav-gap: 0.75rem;
  --kh-nav-height: 3.25rem;
  --kh-nav-control: 2.75rem;
  --kh-nav-shell-pad: 0.1875rem;
  --kh-nav-item-gap: 0.125rem;
  --kh-nav-radius: 999px;
  --kh-nav-panel-radius: 0.625rem;
  --kh-nav-paper: rgba(252, 253, 252, 0.82);
  --kh-nav-paper-solid: #fff;
  --kh-nav-panel-paper: rgba(252, 253, 252, 0.975);
  --kh-nav-quiet: rgba(17, 19, 18, 0.045);
  --kh-nav-quiet-strong: rgba(17, 19, 18, 0.08);
  --kh-nav-ink: #111312;
  --kh-nav-muted: #626864;
  --kh-nav-line: rgba(17, 19, 18, 0.1);
  --kh-nav-edge: rgba(255, 255, 255, 0.78);
  --kh-nav-focus: #13754a;
  --kh-nav-shadow: 0 0 0 1px rgba(17, 19, 18, 0.055), 0 0.625rem 2rem rgba(7, 24, 16, 0.11);
  --kh-nav-panel-shadow: 0 0 0 1px rgba(17, 19, 18, 0.075), 0 1rem 2.75rem rgba(7, 24, 16, 0.13);
  --kh-nav-blur: 0.875rem;
  --kh-nav-shine-x: 0%;
  --kh-nav-fast: 120ms;
  --kh-nav-base: 240ms;
  --kh-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-padding-bottom: calc(var(--kh-nav-height) + var(--kh-nav-gap) + var(--kh-nav-gap) + env(safe-area-inset-bottom, 0px));
}

.kh-nav {
  position: fixed;
  z-index: 1200;
  right: auto;
  bottom: var(--kh-nav-gap);
  bottom: calc(var(--kh-nav-gap) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  color: var(--kh-nav-ink);
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 1rem;
  line-height: 1.5;
  transform: translateX(-50%);
  isolation: isolate;
  pointer-events: none;
}

.kh-nav__shell {
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  min-height: var(--kh-nav-height);
  display: flex;
  align-items: center;
  gap: var(--kh-nav-item-gap);
  padding: var(--kh-nav-shell-pad);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--kh-nav-edge);
  border-radius: var(--kh-nav-radius);
  background: transparent;
  box-shadow: var(--kh-nav-shadow);
  clip-path: inset(0 round var(--kh-nav-radius));
  pointer-events: auto;
  animation: kh-nav-arrive 420ms var(--kh-nav-ease) both;
}

.kh-nav__filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.kh-nav__optics,
.kh-nav__lens,
.kh-nav__tint,
.kh-nav__specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.kh-nav__optics {
  z-index: 0;
  overflow: hidden;
}

.kh-nav__lens {
  z-index: 0;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(var(--kh-nav-blur)) saturate(1.16);
  backdrop-filter: blur(var(--kh-nav-blur)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--kh-nav-blur)) saturate(1.16) url(#kh-nav-lens);
  backdrop-filter: blur(var(--kh-nav-blur)) saturate(1.16) url(#kh-nav-lens);
}

.kh-nav__tint {
  z-index: 1;
  background: var(--kh-nav-paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(17, 19, 18, 0.055);
}

.kh-nav__specular {
  z-index: 2;
  inset: -65% -20%;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.54) 49%, transparent 64%);
  opacity: 0.52;
  transform: translate3d(var(--kh-nav-shine-x), 0, 0);
  transition: transform var(--kh-nav-base) var(--kh-nav-ease);
}

.kh-nav__icon,
.kh-nav__link,
.kh-nav__language button {
  position: relative;
  z-index: 4;
  min-width: var(--kh-nav-control);
  min-height: var(--kh-nav-control);
  border: 0;
  border-radius: var(--kh-nav-radius);
  color: inherit;
  background: transparent;
  font: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.kh-nav__icon {
  width: var(--kh-nav-control);
  height: var(--kh-nav-control);
  display: grid;
  flex: 0 0 var(--kh-nav-control);
  place-items: center;
  padding: 0;
  background: var(--kh-nav-quiet);
  cursor: pointer;
  transition: background-color var(--kh-nav-fast) ease-out, transform var(--kh-nav-fast) ease-out;
}

.kh-nav__icon:hover,
.kh-nav__icon[aria-expanded="true"] {
  background: var(--kh-nav-quiet-strong);
}

.kh-nav__icon:active,
.kh-nav__link:active,
.kh-nav__language button:active {
  transform: scale(0.97);
}

.kh-nav__menu-glyph {
  position: relative;
  width: 1rem;
  height: 0.75rem;
  display: block;
}

.kh-nav__menu-glyph span {
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--kh-nav-base) var(--kh-nav-ease), opacity var(--kh-nav-fast) ease-out;
}

.kh-nav__menu-glyph span:nth-child(1) { top: 0.0625rem; }
.kh-nav__menu-glyph span:nth-child(2) { top: 0.375rem; }
.kh-nav__menu-glyph span:nth-child(3) { top: 0.6875rem; }
.kh-nav__more[aria-expanded="true"] .kh-nav__menu-glyph span:nth-child(1) { transform: translateY(0.3125rem) rotate(45deg); }
.kh-nav__more[aria-expanded="true"] .kh-nav__menu-glyph span:nth-child(2) { opacity: 0; transform: scaleX(0.35); }
.kh-nav__more[aria-expanded="true"] .kh-nav__menu-glyph span:nth-child(3) { transform: translateY(-0.3125rem) rotate(-45deg); }

.kh-nav__clock-svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kh-nav__links {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--kh-nav-item-gap);
}

.kh-nav__link {
  min-width: var(--kh-nav-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--kh-nav-fast) ease-out, background-color var(--kh-nav-fast) ease-out, transform var(--kh-nav-fast) ease-out;
}

.kh-nav__link:hover { background: var(--kh-nav-quiet); }

.kh-nav__link[aria-current] { background: var(--kh-nav-quiet-strong); }
.kh-nav__link[aria-current]:hover { background: rgba(17, 19, 18, 0.11); }

.kh-nav__backdrop {
  position: fixed;
  z-index: 1;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease-out, visibility 0s linear 180ms;
}

.kh-nav[data-open="true"] .kh-nav__backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.kh-nav__popover {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 0.625rem);
  left: 0;
  width: min(16.25rem, calc(100vw - 1.5rem));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--kh-nav-panel-radius);
  background: var(--kh-nav-panel-paper);
  box-shadow: var(--kh-nav-panel-shadow);
  -webkit-backdrop-filter: blur(var(--kh-nav-blur)) saturate(1.12);
  backdrop-filter: blur(var(--kh-nav-blur)) saturate(1.12);
  color: var(--kh-nav-ink);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0.55rem, 0) scale(0.975);
  transform-origin: bottom left;
  pointer-events: none;
  transition:
    opacity 170ms ease-out,
    transform var(--kh-nav-base) var(--kh-nav-ease),
    visibility 0s linear var(--kh-nav-base);
}

.kh-nav__popover[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  transition-delay: 0s;
}

.kh-nav__panel-head {
  margin: 0;
  padding: 1rem 1rem 0.55rem;
  color: var(--kh-nav-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.kh-nav__panel-link,
.kh-nav__soon {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0.35rem;
  padding: 0 0.75rem;
  border-top: 1px solid var(--kh-nav-line);
  color: var(--kh-nav-ink);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.kh-nav__panel-link::after {
  content: "↗";
  color: var(--kh-nav-muted);
  font-size: 0.82rem;
  transform: rotate(45deg);
  transition: transform var(--kh-nav-base) var(--kh-nav-ease);
}

.kh-nav__panel-link:hover::after { transform: rotate(45deg) translateX(0.14rem); }
.kh-nav__panel-link:hover { color: #000; }

.kh-nav__soon {
  color: var(--kh-nav-muted);
  cursor: default;
}

.kh-nav__soon-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 0.55rem;
  border-radius: var(--kh-nav-radius);
  background: var(--kh-nav-quiet);
  color: var(--kh-nav-ink);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kh-nav__language {
  position: relative;
  z-index: 4;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-top: 1px solid var(--kh-nav-line);
  color: var(--kh-nav-ink);
  font: 400 1rem/1.5 "Spline Sans Mono", ui-monospace, monospace;
}

.kh-nav__language-label {
  margin-right: auto;
  color: var(--kh-nav-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kh-nav__language button {
  min-width: var(--kh-nav-control);
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--kh-nav-muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.kh-nav__language button[aria-pressed="true"] {
  color: #fff;
  background: var(--kh-nav-ink);
}

.kh-nav__hours-card { padding: 1rem; }

.kh-nav__hours-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.kh-nav__status-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  border-radius: 50%;
  background: #9aa09c;
}

.kh-nav__hours-card[data-store-open="true"] .kh-nav__status-dot {
  background: #16804f;
  box-shadow: 0 0 0 0.22rem rgba(22, 128, 79, 0.12);
}

.kh-nav__hours-status {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.kh-nav__hours-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem 1rem;
  padding: 0.85rem 0;
  border-block: 1px solid var(--kh-nav-line);
  font-size: 0.72rem;
  line-height: 1.35;
}

.kh-nav__hours-grid span:nth-child(odd) { color: var(--kh-nav-muted); }

.kh-nav__address {
  margin: 0.9rem 0 0;
  color: var(--kh-nav-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.kh-nav__directions {
  min-height: var(--kh-nav-control);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.8rem;
  border-radius: var(--kh-nav-radius);
  color: #fff;
  background: var(--kh-nav-ink);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.kh-nav__icon:focus-visible,
.kh-nav__link:focus-visible,
.kh-nav__panel-link:focus-visible,
.kh-nav__directions:focus-visible,
.kh-nav__language button:focus-visible {
  outline: 2px solid var(--kh-nav-focus);
  outline-offset: -3px;
}

@media (max-width: 36rem) {
  .kh-nav__link {
    padding-inline: 0.5rem;
    font-size: 0.59rem;
    letter-spacing: 0.035em;
  }
  .kh-nav__popover { width: min(16.25rem, calc(100vw - 1rem)); }
}

@media (min-width: 61rem) {
  :root { --kh-nav-gap: 1.5rem; }
}

@media (max-width: 21rem) {
  :root {
    --kh-nav-item-gap: 0.0625rem;
  }
  .kh-nav__link {
    padding-inline: 0.375rem;
    font-size: 0.55rem;
    letter-spacing: 0;
  }
}

@media (prefers-contrast: more) {
  .kh-nav__shell,
  .kh-nav__popover { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kh-nav__shell,
  .kh-nav__popover {
    background: var(--kh-nav-paper-solid);
  }

  .kh-nav__optics { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .kh-nav__shell,
  .kh-nav__popover {
    background: var(--kh-nav-paper-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .kh-nav__optics { display: none; }
}

@media (forced-colors: active) {
  .kh-nav__shell,
  .kh-nav__popover {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kh-nav__optics { display: none; }
  .kh-nav__link[aria-current],
  .kh-nav__language button[aria-pressed="true"] { background: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .kh-nav__shell { animation: none; }
  .kh-nav__popover,
  .kh-nav__backdrop,
  .kh-nav__icon,
  .kh-nav__link,
  .kh-nav__menu-glyph span { transition: none; }
  .kh-nav__specular { transform: none; transition: none; }
}

html:not(.js) .kh-nav__more,
html:not(.js) .kh-nav__backdrop { display: none; }

html:not(.js) .kh-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media print {
  .kh-nav { display: none !important; }
}

@keyframes kh-nav-arrive {
  from { opacity: 0; transform: translate3d(0, 0.45rem, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}