/* Site-wide top navigation. Sized in px so it renders identically on pages that scale
   their root font (patch.html uses 150%). Pages offset their own sticky bars and anchor
   targets with --nav-h. */
:root { --nav-h: 56px; }

.site-nav {
  position: sticky; top: 0; z-index: 30;
  /* Full bleed: cancel the body's side padding (same expression on every page). */
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-top: env(safe-area-inset-top, 0px);
  background: #121212;
  border-bottom: 1px solid #242424;
  font: 500 15px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal;
  text-align: left;
}
.site-nav-in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1120px; height: var(--nav-h); margin: 0 auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
.site-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #f4f1ee; text-decoration: none; font-weight: 700; font-size: 16px; white-space: nowrap;
}
.site-brand svg { width: 26px; height: 26px; flex: none; }
.site-brand b { font-weight: 700; }
.site-brand span { color: #8d8a87; font-weight: 500; }
.site-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-links a {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: 8px;
  color: #a5a2a0; text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
.site-links a:hover, .site-links a:focus-visible { color: #fff; background: rgba(255,255,255,.06); }
.site-links a[aria-current] { color: #fff; }
.site-links a[aria-current]::after {
  content: ""; position: absolute; z-index: 1; left: 14px; right: 14px; bottom: -8px; height: 2px;
  border-radius: 2px; background: #ff3b30; box-shadow: 0 0 10px rgba(255,59,48,.7);
}
.site-ext { width: 12px; height: 12px; margin-left: -3px; opacity: .7; }
/* Red "live" dot on tracked 0-days */
.site-live {
  width: 7px; height: 7px; border-radius: 50%; background: #ff3b30;
  animation: site-live 2s infinite;
}
@keyframes site-live {
  0% { box-shadow: 0 0 0 0 rgba(255,59,48,.6); }
  70% { box-shadow: 0 0 0 7px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
@media (prefers-reduced-motion: reduce) { .site-live { animation: none; } }
/* PHP2Shell dropdown (animated by nav.js with GSAP) */
.site-dd { position: relative; display: flex; align-items: center; }
.site-links .site-dd > a { padding-right: 6px; }
.site-links .site-dd > a[aria-current]::after { right: 6px; }
.site-dd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 40px; padding: 0; margin: 0;
  border: 0; border-radius: 8px; background: none; color: #a5a2a0; cursor: pointer;
  transition: color .15s, background .15s;
}
.site-dd-btn:hover, .site-dd-btn:focus-visible, .site-dd.open .site-dd-btn { color: #fff; background: rgba(255,255,255,.06); }
.site-dd-btn svg { width: 16px; height: 16px; }
.site-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  width: 270px; max-width: calc(100vw - 32px); padding: 6px;
  background: #121212; border: 1px solid #2a2a2a; border-top: 0; border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 30px rgba(255,59,48,.1);
}
.site-dd-menu[hidden] { display: none; }
.site-links .site-dd-menu a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 0; padding: 10px 12px; white-space: normal; color: #f4f1ee;
}
.site-links .site-dd-menu a::after { content: none; }
.site-links .site-dd-menu a[aria-current] { background: rgba(255,59,48,.1); box-shadow: inset 2px 0 0 #ff3b30; }
.site-dd-menu b { font-size: 15px; font-weight: 600; }
.site-dd-menu span { color: #8d8a87; font-size: 13px; font-weight: 400; line-height: 1.35; }
/* Thin bars a page pins to the bottom edge of the nav (countdown, reading progress). */
.site-nav .nav-bar { position: absolute; left: 0; right: 0; bottom: -1px; padding: 0; }

@media (max-width: 480px) {
  .site-brand b { display: none; }   /* logo only, so three links fit on phones */
  /* Dropdown spans the screen under the nav instead of hanging off its link */
  .site-dd-menu {
    position: fixed; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    left: 12px; right: 12px; width: auto; max-width: none;
  }
  .site-links a { padding: 0 11px; }
  .site-links a[aria-current]::after { left: 11px; right: 11px; }
}