/*
 * ng-toc.css - Shared "table of contents" component for NomadGear blog posts.
 *
 * Writers embed the markup per post:
 *   <nav class="ng-toc" aria-label="Table of contents">
 *     <p class="ng-toc__title">On this page</p>
 *     <ol class="ng-toc__list">
 *       <li><a href="#some-heading-id">Some heading</a></li>
 *     </ol>
 *   </nav>
 *
 * Styling reuses the Port of Entry design tokens already defined in
 * nomadgear/port-of-entry.css (:root) so the card matches the site's
 * listing-card (.chit) look: var(--card) bg, var(--concrete) hairline
 * border, square corners, var(--green) accent. No hardcoded hex/px where
 * a token fits. Enqueued only on single blog posts (bricks-child/functions.php).
 */

:root {
  /*
   * Sticky-header scroll offset used by in-page anchor links (both the CSS
   * scroll-padding-top below and ng-toc.js's IntersectionObserver rootMargin).
   * Based on --head-h (66px, set in port-of-entry.css) plus breathing room.
   * Retune this once the final header height is confirmed across breakpoints.
   */
  --ng-header-offset: calc(var(--head-h, 66px) + 1.5rem);
}

/* Smooth in-page scrolling with a sticky-header-aware landing offset. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--ng-header-offset, 6rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Card: matches .chit (bg var(--card), 1px var(--concrete) hairline, square corners). */
.ng-toc {
  background: var(--card, #FBFAF7);
  border: var(--hairline, 1px solid var(--concrete, #DEDDD6));
  border-radius: 0;
  padding: 22px 20px;
  font-family: var(--font-text, system-ui, sans-serif);
}

.ng-toc__title {
  margin: 0 0 14px;
  font-family: var(--font-mono, monospace);
  font-size: var(--micro-s, 13px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #6E6D66);
}

.ng-toc__list {
  list-style: none;
  counter-reset: ng-toc-item;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ng-toc__list li {
  counter-increment: ng-toc-item;
}

.ng-toc a {
  display: flex;
  align-items: baseline;
  gap: .6em;
  color: var(--muted, #6E6D66);
  text-decoration: none;
  line-height: 1.35;
  transition: color .15s ease;
}

/* Mono index number ahead of each link, echoing .chit-top .idx's stamp-label style. */
.ng-toc a::before {
  content: counter(ng-toc-item, decimal-leading-zero) '.';
  flex: none;
  font-family: var(--font-mono, monospace);
  font-size: var(--micro-xs, 12px);
  color: var(--muted, #6E6D66);
  opacity: .7;
}

.ng-toc a:hover,
.ng-toc a:focus-visible {
  color: var(--green, #2E7D5B);
}

.ng-toc a:focus-visible {
  outline: 2px solid var(--green, #2E7D5B);
  outline-offset: 3px;
}

/* Marks the section currently in view (toggled by ng-toc.js). */
.ng-toc a.is-active {
  color: var(--green, #2E7D5B);
  font-weight: 700;
}

.ng-toc a.is-active::before {
  color: var(--green, #2E7D5B);
  opacity: 1;
}