/* Sticky "On this page" section nav (shared component).

   Emitted by ofo_section_nav() (lib/nav.php), driven by js/section-nav.js.
   A thin sticky bar that appears once the header scrolls past, jumps to any
   section, and highlights the one you are in. Underline-tab styling on
   purpose: it must NOT read like the .mode-btn filter pills, so a section
   click is never mistaken for a data filter. Layout-neutral - no negative
   margins (page padding varies: body 20px vs .container 30px), and the jump
   offset (scroll-margin-top) is set per-target in JS so it adapts to the bar
   height and the fixed env-banner on any page.

   @author Sander Tamaela
   @created 2026-08-18
   @modified 2026-08-18 */

.ofo-secnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 4px;
  align-items: stretch;
  margin: 0 0 20px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  overflow-x: auto;
  scrollbar-width: none;
}
.ofo-secnav::-webkit-scrollbar { display: none; }

.ofo-secnav-link {
  flex: 0 0 auto;
  padding: 11px 12px 9px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.ofo-secnav-link:hover { color: #111827; text-decoration: none; }
.ofo-secnav-link.is-active { color: #111827; border-bottom-color: #2563eb; }

/* Clear the fixed env-banner (26px) when it is present. The per-target
   scroll-margin-top is set in JS; this only shifts the sticky stop point. */
body:has(.env-banner) .ofo-secnav { top: 26px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}