/* Unified site nav for all username.md pages.
   Canonical markup lives in the repo README ("username.md nav" section);
   every page links this file and uses that markup verbatim, marking its own
   link with aria-current="page". Do not restyle nav inline per page. */
nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem; background: var(--nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
nav .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
nav .logo a { color: inherit; text-decoration: none; }
nav .logo span { color: var(--accent); }
nav ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
nav ul a { color: var(--muted); text-decoration: none; font-size: .9rem; transition: color .2s; }
nav ul a:hover { color: var(--text); }
nav ul a[aria-current="page"] { color: var(--text); font-weight: 600; }
nav .cta-nav {
  padding: .5rem 1.25rem; border-radius: 8px; font-size: .85rem;
  background: var(--accent); color: var(--btn-text, #fff); text-decoration: none;
  font-weight: 600; transition: box-shadow .2s;
}
nav .cta-nav:hover { box-shadow: 0 0 20px var(--accent-glow); }

/* Mobile: CSS-only hamburger. The checkbox must precede the <ul> in the
   markup (sibling selectors below depend on source order). */
nav .nav-toggle, nav .nav-burger { display: none; }
@media (max-width: 640px) {
  nav { flex-wrap: wrap; }
  nav ul { display: none; }
  nav .cta-nav { margin-left: auto; }
  nav .nav-burger {
    display: block; order: 3; position: relative;
    width: 22px; height: 16px; margin-left: 1rem; cursor: pointer;
  }
  nav .nav-burger span,
  nav .nav-burger::before,
  nav .nav-burger::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 2px;
    background: var(--text); border-radius: 1px; transition: transform .2s, opacity .2s;
  }
  nav .nav-burger::before { top: 0; }
  nav .nav-burger span { top: 7px; }
  nav .nav-burger::after { bottom: 0; }
  nav .nav-toggle:checked ~ .nav-burger::before { transform: translateY(7px) rotate(45deg); }
  nav .nav-toggle:checked ~ .nav-burger span { opacity: 0; }
  nav .nav-toggle:checked ~ .nav-burger::after { transform: translateY(-7px) rotate(-45deg); }
  nav .nav-toggle:checked ~ ul {
    display: flex; flex-direction: column; gap: 1.1rem;
    order: 4; flex-basis: 100%; margin-top: 1rem;
    padding-bottom: .5rem;
  }
  nav .nav-toggle:checked ~ ul a { font-size: 1rem; }
}