/* Phone and tablet navigation for the public pages: the homepage, the blog index,
   every blog post and the 404 page. Below 981px the desktop links collapse behind
   a Menu button, and the page's own <nav class="nav-links"> opens as a panel under
   the sticky header, so every page keeps a single list of links. public-nav.js
   opens and closes it. Selectors start at .nav so they outrank each page's own
   nav rules (the homepage keeps those inline). Cloudflare keeps /assets for 24
   hours: bump ?v= on every page that links this file when it changes. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
.nav-toggle[aria-expanded="true"] { background: var(--bg-2); }
.nav-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.nav-toggle .nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline; }
.nav-toggle-label { display: none; }
.nav-links .nav-menu-only { display: none; }

@media (max-width: 980px) {
  .nav .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav .nav-toggle[aria-expanded="true"] + .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    max-height: calc(100vh - var(--nav-h, 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 16px 10px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow);
  }
  .nav .nav-links a {
    display: flex;
    align-items: center;
    min-height: 50px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 16px;
    font-weight: 680;
  }
  .nav .nav-links a:last-child { border-bottom: 0; }
  .nav .nav-links a:hover { color: var(--accent); }
  .nav .nav-links a[aria-current="page"] { color: var(--accent); }
  .nav .nav-links .nav-menu-only { display: flex; }
}

/* One row: the button sits just before the theme toggle, and the gaps tighten
   so the row still fits at 641px. */
@media (min-width: 641px) and (max-width: 980px) {
  .nav .nav-inner { gap: 12px; }
  .nav .nav-actions { gap: 10px; }
}

/* Two rows: the logo and the Menu button share the first, the actions keep the second.
   That header is about 110px tall, more than the top padding of the sections the menu
   jumps to, so a jump stops short of the header instead of under it. */
@media (max-width: 640px) {
  html { scroll-padding-top: 72px; }
  .nav .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav .nav-toggle { grid-column: 2; grid-row: 1; align-self: center; margin-left: 0; }
  .nav .nav-actions { grid-column: 1 / -1; }
  .nav .nav-toggle-label { display: inline; }
  .nav .nav-toggle[aria-expanded="true"] + .nav-links { padding-inline: 12px; }
}

@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .nav .nav-toggle[aria-expanded="true"] + .nav-links { animation: nav-menu-in .16s ease-out; }
}

@keyframes nav-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}