/* The site-wide menu bar (Jasper, 2026-09-26): the design trial's navy bar, on every page.
 *
 * Linked from base.html right after site.css, so every page gets it. It styles the <nav>
 * and nothing else: page bodies keep site.css (Home and About add the trial's body look
 * through static/trial/ew.css). site.css's own nav rules were removed rather than fought with
 * specificity, so this file is the only thing that draws the menu.
 *
 * TWO RULES THAT KEEP IT CONTAINED (accounts/tests_design_trial.py pins both):
 *
 * 1. EVERY selector names the nav element. The markup is base.html's <nav>, which stays
 *    attribute-free because tests_navigation's crawler splits pages on the literal "<nav>".
 * 2. EVERY custom property is --mb-* and is defined ON the nav, never on :root. site.css keeps
 *    --bg, --accent, --muted and friends on :root; a menu token of the same name would
 *    restyle every page body.
 *
 * Dark mode uses the site's two doors with the same values in each: the account's choice
 * (:root[data-theme="dark"]) and the device's (prefers-color-scheme, unless the account chose
 * light). The bar stays navy in both themes; the green is the old logo's (#56F8CC), which
 * reads on navy in either.
 *
 * Fonts are self-hosted in static/fonts/ (OFL.txt beside them), by relative URL. They are
 * COPIES of reference/static/reference/fonts/, not links to it, on purpose (coordinator,
 * 2026-09-26): production gets this design as a backport onto a branch that has no reference
 * app, so nothing here may depend on it. All five faces are declared so Home and About can use
 * them too; a declared face that no rule on a page uses is never downloaded.
 */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* ---- tokens -------------------------------------------------------------- */

nav {
  --mb-bg: #14213D;
  --mb-ink: #FFFFFF;
  --mb-muted: #C3CBDA;
  --mb-rule: #34426A;
  --mb-accent: #56F8CC;
  --mb-cta: #56F8CC;
  --mb-cta-ink: #14213D;
  --mb-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --mb-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav {
    --mb-bg: #0A0F1A;
    --mb-ink: #E6EAF2;
    --mb-muted: #9AA4B8;
    --mb-rule: #2A3550;
    --mb-accent: #56F8CC;
    --mb-cta: #56F8CC;
    --mb-cta-ink: #0A0F1A;
  }
}
:root[data-theme="dark"] nav {
  --mb-bg: #0A0F1A;
  --mb-ink: #E6EAF2;
  --mb-muted: #9AA4B8;
  --mb-rule: #2A3550;
  --mb-accent: #56F8CC;
  --mb-cta: #56F8CC;
  --mb-cta-ink: #0A0F1A;
}

/* ---- the bar ------------------------------------------------------------- */

nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 16px;
  background: var(--mb-bg);
  color: var(--mb-muted);
  border-bottom: 4px solid var(--mb-accent);
  font-family: var(--mb-body);
  line-height: 1.55;
}

/* The logo sits inside the brand link, whose opening tag the tests pin byte for byte. */
nav .brand {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 0;
  line-height: 0;
  text-decoration: none;
}
nav .brand img { display: block; width: 156px; height: 44px; border-radius: 4px; }

nav a {
  color: var(--mb-muted);
  text-decoration: none;
  font: 500 17px/1.2 var(--mb-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 1px;
}
nav .nav-links a:hover {
  color: var(--mb-ink);
  text-decoration: underline;
  text-decoration-color: var(--mb-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}
nav a:focus-visible,
nav button:focus-visible,
nav .nav-burger:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 2px; }

nav .nav-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mb-muted);
}
nav form { display: inline; margin: 0; }

/* The account buttons and the signed-out links are chips. */
nav .nav-user a,
nav button {
  font: 600 14px/1.2 var(--mb-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mb-ink);
  background: transparent;
  border: 1px solid var(--mb-rule);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}
nav .nav-user a:hover,
nav button:hover { border-color: var(--mb-accent); color: var(--mb-ink); filter: none; }
/* Register is the one call to action in the menu, so it is the one filled chip. */
nav .nav-user a[href="/register/"] { background: var(--mb-cta); color: var(--mb-cta-ink); border-color: var(--mb-cta); }
nav .nav-user a[href="/register/"]:hover { color: var(--mb-cta-ink); filter: brightness(1.08); }

/* Hamburger: CSS-only. The checkbox lives right inside <nav>; the label is hidden on wide
 * screens and the menu collapses under it on small ones. The sibling selector is why the
 * checkbox must stay followed by .nav-links and .nav-user as siblings. */
nav #nav-toggle { display: none; }
nav .nav-burger {
  display: none;
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  color: var(--mb-ink);
  border: 1px solid var(--mb-rule);
  border-radius: 8px;
  padding: 4px 10px;
}

@media (max-width: 640px) {
  nav { padding: 8px 16px; }
  nav .nav-burger { display: block; }
  nav .nav-links,
  nav .nav-user {
    display: none;
    flex-basis: 100%;
    margin-left: 0;
  }
  nav #nav-toggle:checked ~ .nav-links,
  nav #nav-toggle:checked ~ .nav-user { display: flex; }
  nav .nav-links { flex-direction: column; align-items: stretch; gap: 0; padding-top: 6px; }
  nav .nav-links a {
    padding: 11px 2px;
    border-bottom: 1px solid var(--mb-rule);
    font-size: 20px;
  }
  nav .nav-user { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 6px; }
  nav .nav-user a { padding: 6px 14px; }
}
@media (min-width: 641px) {
  nav .nav-links { display: flex; gap: 10px; align-items: center; }
}