/* site-nav.css — the shared responsive header for every tomsparkbox.com page.
 * Pairs with site-nav.js (which adds the Menu button, the panel and the
 * site-nav-* hook classes at runtime). Site audit W01, 2026-09-14.
 *
 * WHY: each page hand-writes its own <nav> and each one simply hid its link
 * cluster below some width (700 / 800 / 900 / 1000px) with nothing in its
 * place. On a phone the header was logo + CTA and Apps / Docs / Support were
 * unreachable; at 768px the homepage logo collided with "Apps" and the CTA
 * sat off-screen. This sheet collapses every variant at ONE breakpoint, keeps
 * the page's own primary CTA in the bar, and shows the Menu button that
 * site-nav.js wires up. Above the breakpoint nothing here applies, so the
 * desktop look of each page is unchanged.
 *
 * site-nav.js decides WHEN to collapse: always at or below 1000px (where
 * style.css already collapsed its own pages), and above that whenever the
 * bar's content would overflow or wrap (the docs bar, with its search and
 * theme buttons, needs ~1150px). It sets .site-nav-collapsed on the <nav>;
 * every rule below keys on that class, so a page that never overflows keeps
 * its desktop bar at any width. */

.site-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-bright, var(--line, rgba(127, 127, 160, 0.4)));
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
}
.site-menu-btn svg { width: 18px; height: 18px; display: block; }
.site-menu-btn .site-menu-btn-x { display: none; }
.site-menu-btn[aria-expanded="true"] .site-menu-btn-bars { display: none; }
.site-menu-btn[aria-expanded="true"] .site-menu-btn-x { display: block; }
.site-menu-btn:hover { border-color: currentColor; }
.site-menu-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

.site-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1000;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 10px 16px 18px;
  background: var(--bg, var(--surface, #0b0b10));
  color: var(--text, #f8fafc);
  border-bottom: 1px solid var(--border-bright, var(--line, rgba(255, 255, 255, 0.12)));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.site-menu[hidden] { display: none; }
.site-menu ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; }
.site-menu li { margin: 0; }
.site-menu a,
.site-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-menu a:hover,
.site-menu button:hover { background: rgba(127, 127, 160, 0.14); }
.site-menu a:focus-visible,
.site-menu button:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; }
.site-menu-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--border-bright, var(--line, rgba(255, 255, 255, 0.12)));
}
.site-menu-hint {
  display: block;
  padding: 2px 8px 8px;
  font-size: 12px;
  opacity: 0.7;
}

/* Pages with no CTA of their own (projects, changelog, most guides) get a
   "Get started" link in the bar, but only once the links are collapsed. */
.site-nav-cta-injected { display: none; }

nav.site-nav-collapsed .site-menu-btn { display: inline-flex; }
nav.site-nav-collapsed .site-nav-row { gap: 10px !important; }
nav.site-nav-collapsed .site-nav-row > :first-child { margin-right: auto; }
/* Collapse the page's desktop link cluster. The homepage / affiliate /
   pricing CTAs sit next to their cluster and stay; the style.css pages keep
   their CTA inside .nav-links, so that box stays open with only the CTA
   showing (site-nav.js marks it). */
nav.site-nav-collapsed .nav-links > :not(.nav-cta),
nav.site-nav-collapsed .nav-text,
nav.site-nav-collapsed .nav__links,
nav.site-nav-collapsed .nav-more,
nav.site-nav-collapsed .hamburger,
nav.site-nav-collapsed .lnk { display: none !important; }
nav.site-nav-collapsed .nav-links.site-nav-has-cta { display: flex !important; gap: 0 !important; }
nav.site-nav-collapsed .nav-links:not(.site-nav-has-cta) { display: none !important; }
nav.site-nav-collapsed .site-nav-cta-injected {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent, var(--violet, #7c3aed));
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* Phones: brand + CTA + Menu is ~400px of content on the pages whose
     brand is a wordmark; drop the button's label (aria-label keeps its
     name) and tighten the gaps so nothing leaves the viewport. */
  nav.site-nav-collapsed .site-menu-btn-label { display: none; }
  nav.site-nav-collapsed .site-menu-btn { padding: 0 8px; }
}
@media (max-width: 380px) {
  nav.site-nav-collapsed .site-nav-row { gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; }
  nav.site-nav-collapsed .site-nav-row .nav-cta,
  nav.site-nav-collapsed .site-nav-row .site-nav-cta-injected,
  nav.site-nav-collapsed .site-nav-row .btn { padding-left: 10px !important; padding-right: 10px !important; }
}