/* Shared site chrome: navigation drawer + footer.
   Loaded by every page; the HTML fragments live in /partials/ and are
   injected at runtime by /js/site-chrome.js.

   Design ties to the existing tumbler-lock aesthetic:
   - JetBrains Mono for chrome text (same as the .prompt line in the tool)
   - --bg-0 / --ink / --dim / --accent variables shared with the site
     (defined on :root in index.html; fallbacks provided here for pages
     that do not yet define them). */

:root {
  /* Top reserve space for the floating hamburger button. Content
     pages use this for body padding-top so their H1 isn't tucked
     underneath the hamburger. The homepage's fixed title bar sits at
     top:0 and the hamburger overlays it, so the homepage doesn't
     need to reserve this space. */
  --nav-h: 48px;
  /* Bottom reserve space for the fixed footer. Pages should set their
     body padding-bottom to at least this value so scrollable content
     isn't hidden behind the footer. */
  --footer-h: 52px;
}

/* ---------- Top bar (504px wide, centred, solid black) ---------- */

/* The bar is fixed at the top of the viewport, centred horizontally,
   and only as wide as the rest of the site's content (504px). The
   hamburger button sits inside it on the left edge. */
/* ---------- Hamburger toggle (standalone, fixed top-left) ---------- */

/* Floats over whatever is behind it — the fixed title bar on the
   homepage, the page gradient on content pages. Sits above backdrop
   (45) and drawer (46) so the hamburger/X button remains accessible
   while the drawer is open. */
.site-nav__toggle {
  position: fixed;
  top: 8px;
  left: 10px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink, #f4efe6);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.site-nav__toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.site-nav__toggle:focus-visible {
  outline: 2px solid var(--accent, #ffd36b);
  outline-offset: 2px;
}

/* The three bars (pseudo-elements on a central span). When the menu
   is open, the top + bottom bars rotate into an X and the middle bar
   fades, without changing the button's hit area. */
.site-nav__hamburger,
.site-nav__hamburger::before,
.site-nav__hamburger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.site-nav__hamburger { position: relative; }
.site-nav__hamburger::before,
.site-nav__hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-nav__hamburger::before { top: -6px; }
.site-nav__hamburger::after  { top:  6px; }

.site-nav__toggle[aria-expanded="true"] .site-nav__hamburger {
  background: transparent;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---------- Backdrop (dims the page while drawer is open) ---------- */

.site-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.site-nav__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Drawer (slides in from the left) ---------- */

.site-nav__drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  z-index: 46;
  background: rgba(14, 13, 16, 0.98);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 72px 20px 24px;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  overflow-y: auto;
  /* Hide from AT when closed — JS flips aria-hidden in sync. */
}

.site-nav__drawer.is-open {
  transform: translateX(0);
}

/* ---------- Menu list (inside the drawer) ---------- */

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.site-nav__list a {
  display: block;
  padding: 14px 14px;
  color: var(--dim, #8a8490);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--ink, #f4efe6);
  background: rgba(255, 255, 255, 0.03);
  outline: none;
}

.site-nav__list a.is-current {
  color: var(--accent, #ffd36b);
  border-left-color: var(--accent, #ffd36b);
  background: rgba(255, 211, 107, 0.04);
}

/* ---------- Body scroll lock while drawer is open ---------- */

html.is-drawer-open,
body.is-drawer-open {
  overflow: hidden;
}

/* ---------- Footer (fixed to the bottom of the viewport) ---------- */

/* Pinned so it's always visible regardless of scroll position. Each
   page's body should reserve padding-bottom: var(--footer-h) or more
   so scrollable content isn't hidden behind it.
   Typography matches the homepage's .prompt element ("SELECT A
   FOUR-DIGIT NUMBER / THEN SOLVE") so the whole UI reads as one voice. */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  height: var(--footer-h);
  padding: 8px 16px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim, #8a8490);
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__inner {
  max-width: 720px;
  margin: 0 auto;
}

.site-footer__line {
  margin: 1px 0;
  line-height: 1.3;
}

.site-footer__line--sub {
  color: rgba(138, 132, 144, 0.7);
}

.site-footer a {
  color: var(--dim, #8a8490);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--ink, #f4efe6);
  outline: none;
}

/* ---------- Fallback nav for non-JS crawlers ---------- */

/* Every page's #site-nav-mount contains a <nav class="site-nav-fallback">
   with the full link list before JS runs. /js/site-chrome.js replaces the
   mount's content at runtime with the drawer. Users with JS never see this
   fallback; crawlers that parse raw HTML (including AI scrapers that
   don't execute JS) read the links here so the site has a discoverable
   internal-link graph even without JS. display:none keeps users from
   seeing a flash; the <a> elements remain in the HTML source regardless. */
.site-nav-fallback { display: none; }