/* ══════════════════════════════════════════════════════════════════════════
   ITN global navigation — Phase 1 (Sep 18 2026)
   One stylesheet for every page. Written to sit ON TOP of each page's
   existing nav rules, not replace them: the <nav> bar, .nav-brand,
   .nav-logo-mark and .nav-name keep their per-page styling so the visual
   language does not shift. Everything new is namespaced .itn-*.

   Replaces a flat 8-item link list in which three labels pointed somewhere a
   reasonable person would not expect. Now three groups (Boards / Learn /
   Tools) and one CTA, identical markup on desktop and mobile, generated by
   scripts/build_nav.py so there is one source of truth instead of twelve
   hand-copied headers.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --itn-nav-ink:#b6bdc8;
  --itn-nav-bg:#0b0e13;
  --itn-nav-line:#232a36;
}

/* ── Desktop link row ─────────────────────────────────────────────────── */
.itn-links{
  display:flex; align-items:center; gap:22px; list-style:none;
  margin:0 0 0 auto; padding:0;
}
.itn-links > li{position:relative; list-style:none}

.itn-links a,
.itn-links .itn-top{
  color:var(--itn-nav-ink); text-decoration:none;
  font-family:inherit; font-size:13px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  background:none; border:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; line-height:1;
}
.itn-links a:hover,
.itn-links .itn-top:hover,
.itn-links .itn-top[aria-expanded="true"]{color:var(--green,#00d084)}

/* Current section gets a quiet underline, so the bar answers "where am I?"
   without a second breadcrumb doing the same job twice. */
.itn-links .itn-here{color:var(--white,#f0f2f5)}
.itn-links .itn-here:after{
  content:''; display:block; position:absolute; left:0; right:0; bottom:-19px;
  height:2px; background:var(--green,#00d084);
}

.itn-top .itn-chev{
  width:8px; height:8px; flex:0 0 8px; transition:transform .18s;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.itn-top[aria-expanded="true"] .itn-chev{transform:translateY(1px) rotate(-135deg)}

/* ── Desktop dropdown ─────────────────────────────────────────────────── */
.itn-menu{
  position:absolute; top:calc(100% + 2px); left:-16px; z-index:160;
  min-width:250px; margin:0; padding:8px; list-style:none;
  background:var(--itn-nav-bg); border:1px solid var(--itn-nav-line);
  border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.55);
}
/* Keep the pointer connected while it crosses the visual gap between the
   trigger and menu. Without this bridge, mouseleave closes the menu before a
   user can reach the first menu item. */
.itn-group:after{content:'';position:absolute;left:-16px;right:-16px;top:100%;height:2px}
.itn-menu[hidden]{display:none}
.itn-menu li{list-style:none}
/* Desktop hover is CSS-owned so a pointer crossing from the trigger into the
   menu cannot race the JavaScript disclosure timer and hide the menu. */
@media(min-width:901px){
  .itn-group:hover > .itn-menu,
  .itn-group:focus-within > .itn-menu{display:block}
}
.itn-menu a{
  display:block; padding:9px 12px; border-radius:7px;
  text-transform:none; letter-spacing:0; font-size:14px; font-weight:600;
  color:var(--white,#f0f2f5);
}
.itn-menu a:hover,.itn-menu a:focus-visible{background:rgba(255,255,255,.055); color:var(--green,#00d084)}
.itn-menu a[aria-current="page"]{color:var(--green,#00d084)}
.itn-menu .itn-sub{
  display:block; margin-top:2px; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; font-weight:400; letter-spacing:.03em;
  text-transform:none; color:var(--muted,#6b7280);
}
.itn-menu a:hover .itn-sub,.itn-menu a:focus-visible .itn-sub{color:var(--mid,#9ca3af)}

/* The one call to action. Green, and the only green item in the bar. */
.itn-links a.itn-cta{color:var(--green,#00d084); font-weight:600}

/* Keyboard users must be able to see where they are. */
.itn-links a:focus-visible,
.itn-links .itn-top:focus-visible,
.itn-menu a:focus-visible,
.itn-ctx a:focus-visible,
.itn-switch a:focus-visible,
.itn-mobile a:focus-visible{
  outline:2px solid var(--green,#00d084); outline-offset:3px; border-radius:4px;
}

/* ── Context navigation — Home > parent > current ─────────────────────── */
/* Shown at every width. On desktop it is the second way out of a page; on
   mobile it is often the only one the visitor sees without opening a menu.
   The logo is never the only way out. */
.itn-ctx{
  border-bottom:1px solid var(--border,var(--bd,#1c2129));
  background:rgba(8,10,14,.6);
}
.itn-ctx ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  max-width:1100px; margin:0 auto; padding:9px 24px; list-style:none;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase;
}
.itn-ctx li{list-style:none; display:inline-flex; align-items:center}
.itn-ctx li + li:before{
  content:'\203A'; margin:0 9px; color:var(--muted,#6b7280);
}
.itn-ctx a{color:var(--green,#00d084); text-decoration:none; font-weight:600}
.itn-ctx a:hover{text-decoration:underline}
.itn-ctx [aria-current="page"]{color:var(--mid,#9ca3af)}

/* ── Board switcher ───────────────────────────────────────────────────── */
/* Every board and every game detail carries this, so switching boards never
   requires the top menu, the logo, or the browser Back button. */
.itn-switch{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  max-width:1100px; margin:0 auto; padding:12px 24px 2px;
}
.itn-switch .itn-switch-lab{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted,#6b7280); margin-right:4px;
}
.itn-switch a{
  display:inline-block; padding:5px 11px; border-radius:999px;
  border:1px solid var(--itn-nav-line); background:rgba(255,255,255,.02);
  color:#c9cfd8; text-decoration:none;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
}
.itn-switch a:hover{color:var(--white,#f0f2f5); border-color:#39424f}
.itn-switch a[aria-current="page"]{
  color:var(--green,#00d084); border-color:rgba(0,208,132,.5);
  background:rgba(0,208,132,.07);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
.itn-mobile{
  position:fixed; inset:0; z-index:150; overflow-y:auto;
  background:rgba(5,6,8,.985); backdrop-filter:blur(20px);
  padding:78px 26px 48px;
  opacity:0; pointer-events:none; transform:translateY(-10px);
  transition:opacity .22s,transform .22s;
}
.itn-mobile.open{opacity:1; pointer-events:auto; transform:translateY(0)}
body.menu-open{overflow:hidden}

.itn-mobile .itn-m-group{
  max-width:420px; margin:0 auto 26px; padding-bottom:20px;
  border-bottom:1px solid var(--itn-nav-line);
}
.itn-mobile .itn-m-group:last-of-type{border-bottom:none}
.itn-mobile .itn-m-head{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted,#6b7280); margin-bottom:14px;
}
.itn-mobile a{
  display:block; margin-bottom:13px;
  font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--white,#f0f2f5); text-decoration:none;
}
.itn-mobile a[aria-current="page"]{color:var(--green,#00d084)}
.itn-mobile a .itn-sub{
  display:block; margin-top:1px; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; font-weight:400; letter-spacing:.03em;
  text-transform:none; color:var(--muted,#6b7280);
}
.itn-mobile .itn-m-cta{
  display:block; max-width:420px; margin:4px auto 0; padding:14px 18px;
  border:1px solid rgba(0,208,132,.4); border-radius:10px;
  background:rgba(0,208,132,.06); color:var(--green,#00d084);
  text-align:center; font-size:20px;
}

/* One shared breakpoint for the whole site: links collapse at 900px, which
   is the same place every page already switched to the hamburger. */
@media (max-width:900px){
  .itn-links{display:none !important}
  /* Two shells, two display values on purpose: .nav-hamburger stacks its
     three bars with flex-direction:column, while .menu-button relies on the
     bars being blocks. Forcing one value on both would lay one of them out
     sideways. */
  .nav-hamburger{display:flex !important}
  .compact-nav .menu-button{display:block !important}
  .itn-ctx ol{padding:8px 20px; font-size:10px; letter-spacing:.08em}
  .itn-ctx li + li:before{margin:0 7px}
  .itn-switch{padding:10px 20px 0; gap:7px}
  .itn-switch .itn-switch-lab{width:100%; margin:0 0 2px}
}

/* Very narrow phones: the crumb must wrap rather than push the page wide. */
@media (max-width:420px){
  .itn-ctx ol{padding:8px 16px}
  .itn-switch{padding:10px 16px 0}
  .itn-switch a{padding:5px 9px; font-size:10.5px}
}

/* No animation for visitors who asked for none. */
@media (prefers-reduced-motion:reduce){
  .itn-mobile,.itn-top .itn-chev{transition:none}
}