/* ═══════════════════════════════════════════════════════════
   TOPNAV — run 65 port of the run 61 contract (DESIGN-NOTES §4)
   Replaces the old bar, whose only responsive rule was
     @media (max-width:600px) { .topnav-links .nav-link { display:none } }
   i.e. it deleted the navigation on every phone rather than housing it.
═══════════════════════════════════════════════════════════ */
.topnav {
  background: var(--bg2, #0e2327);
  border-bottom: 1px solid var(--border, #22474e);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topnav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
  color: var(--text, #ecf5f5);
  text-decoration: none;
}
.topnav-brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px;
  background: linear-gradient(160deg, var(--gold3, #f0d38b) 0%, var(--gold, #e0bb63) 42%, var(--gold2, #c79a36) 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #000; letter-spacing: -.5px;
  box-shadow: 0 2px 10px rgba(224,187,99,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
/* brand | links | actions — margin-left:auto on the links absorbs the slack so
   brand stays hard-left and links+actions sit hard-right */
.topnav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topnav-actions { display: flex; align-items: center; gap: 6px; }
/* the bar is one line by contract; below 900px it becomes the drawer rather
   than wrapping, so nothing in it may break across two lines */
.topnav-brand, .nav-link, .nav-dl, .nav-sub-btn { white-space: nowrap; }
.nav-burger { display: none; }
.nav-drawer-dl { display: none; }
.nav-link {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text2, #b6c9cd);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--bg4, #173338); color: var(--text, #ecf5f5); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--gold, #e0bb63); }
.nav-dl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--gold, #e0bb63) 0%, var(--gold2, #c79a36) 100%);
  color: #241c0f;
  font-size: 13px; font-weight: 700;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 12px rgba(224,187,99,.22);
  transition: filter .15s, box-shadow .15s;
}
.nav-dl:hover { filter: brightness(1.07); text-decoration: none; }
.btn-ico { width: 16px; height: 16px; flex-shrink: 0; }
.nav-dl .btn-ico { width: 14px; height: 14px; }
:where(a, button):focus-visible {
  outline: 2px solid var(--gold, #e0bb63);
  outline-offset: 3px;
  border-radius: 6px;
}

.nav-burger {
  width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--edge, rgba(255,255,255,.07));
  border-radius: 9px;
  color: var(--text, #ecf5f5);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nav-burger:hover { background: var(--bg4, #173338); border-color: var(--edge2, rgba(255,255,255,.12)); }
.burger-box { position: relative; display: block; width: 18px; height: 12px; }
.burger-box span {
  position: absolute; left: 0; display: block;
  width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .26s cubic-bezier(.4,.01,.2,1), opacity .18s linear;
}
.burger-box span:nth-child(1) { top: 0; }
.burger-box span:nth-child(2) { top: 5px; }
.burger-box span:nth-child(3) { top: 10px; }
.nav-burger[aria-expanded="true"] .burger-box span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-box span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-burger[aria-expanded="true"] .burger-box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0;
  z-index: 90;                     /* .topnav is 100, so the bar stays lit */
  background: rgba(3,8,10,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .24s ease;
}
.nav-scrim.open { opacity: 1; }
body.nav-open { overflow: hidden; }

@media (max-width: 899px) {
  .nav-burger { display: inline-flex; }
  .topnav-actions { margin-left: auto; }   /* links leave the flow below */
  .nav-drawer-dl { display: flex; }
  .topnav-links {
    /* absolute against the sticky .topnav, not fixed against the viewport:
       position:sticky establishes a containing block in every browser, whereas
       fixed only lands right here because backdrop-filter happens to make one */
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 95;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg2, #0e2327);
    border-bottom: 1px solid var(--border, #22474e);
    box-shadow: var(--lift2, 0 12px 40px rgba(0,0,0,.45));
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s ease, transform .26s cubic-bezier(.4,.01,.2,1), visibility 0s linear .26s;
  }
  .topnav-links.open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s ease, transform .26s cubic-bezier(.4,.01,.2,1), visibility 0s;
  }
  .topnav-links .nav-link {
    padding: 13px 12px;
    font-size: 15.5px; font-weight: 500;
    color: var(--text, #ecf5f5);
    border-radius: 9px;
    border-bottom: 1px solid var(--edge, rgba(255,255,255,.07));
  }
  .topnav-links .nav-link:last-of-type { border-bottom: 0; }
  .nav-drawer-dl {
    align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; padding: 14px 16px;
    background: linear-gradient(180deg, var(--gold, #e0bb63) 0%, var(--gold2, #c79a36) 100%);
    color: #241c0f;
    font-size: 15px; font-weight: 700;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 12px rgba(224,187,99,.22);
  }
  .nav-drawer-dl:hover { text-decoration: none; filter: brightness(1.07); }
}
/* The narrow-phone ladder, ported VERBATIM from run 61's index.html. Run 65's
   first attempt paraphrased it — kept the 600/400/339 breakpoints but dropped
   `.nav-dl .btn-ico { display:none }`, the font-size steps and the
   `.topnav-actions` gap. That is ~40px of CTA, and the result measured
   brand->CTA 0px at 360px with the burger 20px off the right edge, hidden by
   `body { overflow-x:hidden }` rather than fixed by it: on the commonest phone
   width the only route to the navigation was off-screen. These numbers were
   measured, not chosen. Do not re-approximate them. */
@media (max-width: 600px) {
  .nav-dl { padding: 8px 12px; font-size: 12.5px; }
  .nav-dl .btn-ico { display: none; }
}
@media (max-width: 560px) { .topnav { padding: 0 16px; } }
/* The CTA keeps its "Free Download" label — measured, it fits at 360px once the
   brand steps down — because dropping a paid-attention CTA to a bare icon at
   the commonest phone width is a conversion cost, not a layout win. */
@media (max-width: 400px) {
  .topnav-brand { font-size: 14px; gap: 8px; }
  .brand-mark { width: 29px; height: 29px; border-radius: 7px; font-size: 11px; }
  .nav-dl { padding: 8px 10px; font-size: 12px; }
  .topnav-actions { gap: 5px; }
}
/* Below 360px the label goes and the icon carries it; the drawer's full-width
   "Download free for Windows" is the labelled fallback either way.
   360, not run 61's 339. Measured across the whole band rather than at the two
   round numbers: 320 cleared 47px and 360 cleared 20px, but every width from
   340 to 359 put the wordmark flush against the CTA at 0px, because that is
   exactly where the label comes back and the brand has not yet grown. Nothing
   reports those widths as a viewport, which is why it survived run 61 and four
   audits. 360 keeps its label — run 61 measured that and it still holds. */
@media (max-width: 359px) {
  .nav-dl { padding: 9px 11px; }
  .nav-dl .btn-ico { display: block; width: 15px; height: 15px; }
  .nav-dl-txt {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .burger-box span, .nav-scrim, .topnav-links { transition: none !important; }
}

/* ── Guides menu (run 65) ─────────────────────────────────────
   The nav names the five categories from ia.CATEGORIES and points each one at
   its PILLAR, so any pillar is one click from any page. Before this the static
   half offered one "Guides" link and every pillar was two clicks deep.
   Disclosure is a real <button aria-expanded>; the panel is plain <a> in the
   DOM at every width, so it is crawlable and it works with JS off (below 900px
   it is simply always open). */
.nav-sub { position: relative; display: flex; align-items: center; }
.nav-sub-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px;
  background: none; border: 0; cursor: pointer;
  color: var(--text2, #b6c9cd);
  padding: 6px 14px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-sub-btn:hover { background: var(--bg4, #173338); color: var(--text, #ecf5f5); }
.nav-caret { width: 10px; height: 6px; flex-shrink: 0; transition: transform .2s; }
.nav-sub[data-open="true"] > .nav-sub-btn { color: var(--text, #ecf5f5); }
.nav-sub-btn[aria-current="true"] { color: var(--gold, #e0bb63); }
.nav-sub[data-open="true"] .nav-caret { transform: rotate(180deg); }

.nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 9px); left: -10px;
  z-index: 99;
  width: 330px;
  padding: 8px;
  background: var(--bg2, #0e2327);
  border: 1px solid var(--border, #22474e);
  border-radius: 13px;
  box-shadow: var(--lift2, 0 12px 40px rgba(0,0,0,.45));
}
/* hover and focus-within open it without JS; the button's data-open is for
   click and for touch, where :hover is a trap */
.nav-sub:hover > .nav-panel,
.nav-sub:focus-within > .nav-panel,
.nav-sub[data-open="true"] > .nav-panel { display: block; }
/* the gap between button and panel would drop :hover mid-travel */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }

.nav-panel-row {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text, #ecf5f5);
  transition: background .14s;
}
.nav-panel-row:hover { background: var(--bg4, #173338); text-decoration: none; }
.npr-name {
  display: block;
  font-size: 13.5px; font-weight: 700;
  color: var(--text, #ecf5f5);
  margin-bottom: 1px;
}
.nav-panel-row:hover .npr-name { color: var(--gold, #e0bb63); }
.npr-line {
  display: block;
  font-size: 12px; line-height: 1.45;
  color: var(--text3, #93a9ae);
}
.npr-count { color: var(--text3, #93a9ae); font-weight: 600; }
.nav-panel-all {
  display: block;
  margin-top: 6px; padding: 10px 12px;
  border-top: 1px solid var(--edge, rgba(255,255,255,.07));
  font-size: 12.5px; font-weight: 700;
  color: var(--gold, #e0bb63);
}
.nav-panel-all:hover { text-decoration: none; background: var(--bg4, #173338); border-radius: 9px; }

/* Below the drawer breakpoint the panel is not a popover — it is a nested list
   inside the sheet, open by default. On a phone the drawer IS the navigation,
   and burying the five pillars behind a second tap is the two-click problem
   this run exists to remove. */
@media (max-width: 899px) {
  .nav-sub { display: block; }
  .nav-sub-btn {
    width: 100%; justify-content: space-between;
    padding: 13px 12px;
    font-size: 15.5px; font-weight: 500;
    color: var(--text, #ecf5f5);
    border-radius: 9px;
  }
  .nav-panel {
    position: static; width: auto;
    padding: 2px 0 8px 10px;
    margin: 2px 0 6px;
    background: none; border: 0; border-left: 2px solid var(--border, #22474e);
    border-radius: 0; box-shadow: none;
  }
  .nav-panel::before { display: none; }
  .nav-panel-row { padding: 10px 10px; }
  .npr-name { font-size: 14.5px; }
  .npr-line { font-size: 12.5px; }
  .nav-panel-all { padding: 11px 10px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-caret, .nav-panel-row, .nav-sub-btn { transition: none !important; }
}

/* ── footer pillar row (run 65) ─────────────────────────────── */
.footer-guides {
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--edge, rgba(255,255,255,.07));
  color: var(--text2, #b6c9cd);
  line-height: 1.9;
}
.footer-guides strong { color: var(--text, #ecf5f5); }
.footer-guides a { color: var(--text2, #b6c9cd); }
.footer-guides a:hover { color: var(--gold, #e0bb63); }