/* ==========================================================================
   section-nav — reference-page wayfinding component (spec §6.3)

   Built exclusively from _tokens/tokens.css values (type scale, spacing
   scale) plus existing styles.css semantic colour custom properties
   (--grey, --text, --border, --gold, --table-alt) which already resolve on
   every page via styles.css's own :root — not redefined here, per §6.2's
   hard constraint against new hardcoded values.

   Two variants:
   .section-nav            — grouped: label + sibling links + current page
   .section-nav--standalone — no peers: just a current-page label
   Both always carry a "Browse everything" link to the structured index —
   the guaranteed fallback per §6.3.2's Option C design, most relevant to
   a compliance-focused evaluator per the family-office panel's input.
   ========================================================================== */

.section-nav {
  background: var(--table-bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.section-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--site-pad);
  max-width: var(--max-w);
  margin: 0 auto;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.section-nav__label {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}

.section-nav__link {
  color: #999999; /* 6.33:1 on --table-bg, up from --grey's 5.09:1 (tight). Scoped
                     here deliberately, not a --grey change -- that token has 84
                     other uses site-wide, unchecked in their own contexts. */
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: 3px; /* WEB-74: radius tokens deferred, this predates that decision */
}
.section-nav__link:hover {
  color: var(--text);
  background: var(--table-alt);
}
.section-nav__link[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.section-nav__sep {
  color: var(--border);
}

.section-nav__current {
  color: var(--text);
  font-weight: 600;
}

.section-nav__index-link {
  margin-left: auto;
  color: var(--gold) !important;
  text-decoration: none;
  flex-shrink: 0;
  padding-left: var(--space-3);
}
.section-nav__index-link:hover {
  text-decoration: underline;
}

/* Mobile: found by panel review (3 Aug 2026) — on multi-sibling clusters, the
   whole bar (label + siblings + index link) didn't fit a narrow viewport, and
   overflow-x:auto gave no visible signal there was more to scroll to. The
   "Browse everything" link — the guaranteed fallback the family-office panel
   specifically asked for — could go undiscovered entirely on mobile. Fix:
   wrap instead of scroll, and give the index link its own always-visible
   full-width row rather than letting it ride off the scrollable end. */
@media (max-width: 768px) {
  .section-nav {
    overflow-x: visible;
  }
  .section-nav__inner {
    flex-wrap: wrap;
    white-space: normal;
  }
  .section-nav__label,
  .section-nav__link,
  .section-nav__sep,
  .section-nav__current {
    white-space: nowrap;
  }
  .section-nav__index-link {
    margin-left: 0;
    padding-left: 0;
    padding-top: var(--space-2);
    width: 100%;
    border-top: 1px solid var(--border);
  }
}