/*
 * nav.css
 * The one top menu shared by every pfp-tools page.
 * Each page writes the same ten links in its HTML (so the menu works with
 * scripts off) and loads this file for the look. Colors come from the
 * page's own :root tokens.
 */
.site-menu {
  display: flex;
  /* Ten links do not fit the 560px tool pages on one row, so the menu
     wraps there instead of running past the page (brief 1320). */
  flex-wrap: wrap;
  /* 6px between links (8px between rows) so ten links fit one row on
     /get-graded/ from about 752px up; 720 to 751px wraps (brief 1338). */
  gap: 8px 6px;
  margin: 0 -8px 12px;
}
/* Every link is a 44px tap target. */
.site-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.site-menu a:hover { color: var(--text); background: var(--card-2); }
/* The pixel moon that goes with the word Tonight (brief 1392). */
.site-menu a .moon { display: block; width: 13px; height: 13px; margin-right: 5px; flex: none; image-rendering: pixelated; }
.site-menu a:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
.site-menu a[aria-current] { color: var(--purple); background: var(--purple-bg); }
/* Pages on the PFP brand (body class "pfp") set the menu in the label face:
   mono, uppercase, wide tracking. Other pages keep their own type. */
/* Consolas (the Windows fallback) is about 9% narrower than JetBrains Mono, so
   the menu re-wrapped on phones when the web font arrived. Sized to match. */
@font-face {
  font-family: "PFP Mono Fallback";
  src: local("Consolas");
  size-adjust: 109%;
}
body.pfp .site-menu a {
  font-family: "JetBrains Mono", "PFP Mono Fallback", Menlo, "Courier New", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 6px sides: THE BOARD and the moon added about 30px, and the ten links
     still have to fit one row on /get-graded/ (brief 1392). */
  padding: 0 6px;
}
/* Phones and small tablets: ten links do not fit on one row, so the menu
   wraps to two rows with 20px between links, as the website does. Below
   720px, the same switch the pixel-forge pages make (brief 1319). */
@media (max-width: 719px) {
  .site-menu { flex-wrap: wrap; column-gap: 20px; row-gap: 0; margin: 0 -6px 12px; }
  .site-menu a,
  body.pfp .site-menu a { padding: 0 6px; }
}