/* nav.css
 *
 * The site nav, in one file rather than four. index.html, cv.html and the essay each carry
 * their own inline <style>; the generated notes use note.css. Putting the nav in any one of
 * those means maintaining it in the others, and a nav that drifts between pages is worse
 * than no nav at all, because it looks deliberate.
 *
 * It defines no colour, size or spacing of its own. Every value is a token those four
 * stylesheets already declare with the same names, so dark mode and the theme toggle are
 * inherited rather than repeated here.
 */

/* The wordmark line above the nav carries a large bottom margin in note.css, sized for a
   masthead where it was the only thing above the title. With a nav under it that reads as
   a gap rather than as spacing, so it is tightened here. This file must therefore be the
   LAST stylesheet linked on every page, after the inline <style> on index, cv and the
   essay, or the cascade puts the old value back. */
header.masthead .meta {
  margin-bottom: calc(var(--unit) * 1.5);
}

.sitenav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--unit) * 3);
  margin: calc(var(--unit) * 1.5) 0 calc(var(--unit) * 3.5);
  padding-bottom: calc(var(--unit) * 1.25);
  border-bottom: var(--hair) solid var(--line);
}

.sitenav a {
  font-size: var(--fs-sm);
  color: var(--slate);
  text-decoration: none;
  letter-spacing: .03em;
  padding: calc(var(--unit) * .5) 0;
  /* Reserved on every tab, not only the current one, so marking a tab does not shift the
     row by two pixels. A nav that moves when you look at it reads as a bug. */
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.sitenav a:hover,
.sitenav a:focus-visible {
  color: var(--ink);
}

.sitenav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--marine);
}

/* At narrow widths the four tabs wrap to two rows; the row gap has to come back, because
   the shorthand above sets it to zero for the single-row case. */
@media (max-width: 34rem) {
  .sitenav {
    gap: calc(var(--unit) * 1) calc(var(--unit) * 2.5);
  }
  /* Taller tap targets on a phone. At the desktop padding these come out around 33px,
     which is under what a thumb wants; this brings them to roughly 42. */
  .sitenav a {
    padding: calc(var(--unit) * 1.25) 0;
  }
}