/*
 * nav.css
 * The one top menu shared by every pfp-tools page.
 * Each page writes the same seven 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;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 -8px 12px;
}
/* Every link is a 40px tap target. */
.site-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  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); }
.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. */
body.pfp .site-menu a {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Phones: seven links do not fit on one row, so the menu wraps to two rows
   with 20px between links, as the website does. */
@media (max-width: 639px) {
  .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; }
}