/* ==========================================================================
   Blok: ankernavigatie (design.md §19.3). Witte balk met hairline; sticky onder de header vanaf 64em.
   Geen smooth scroll (gewone ankers). Touch targets ≥ 48 px. Geen prototype-equivalent.
   ========================================================================== */

.block-anchor-nav {
  position: relative;
  z-index: var(--z-base);
  background: var(--color-white);
  border-bottom: var(--border-hairline-w) solid var(--color-silver);
}

.block-anchor-nav__list {
  display: flex;
  gap: var(--sp-6);
  margin-inline: calc(-1 * var(--page-margin));
  padding-inline: var(--page-margin);
  overflow-x: auto;
}

.block-anchor-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  border-bottom: var(--stroke-thin) solid transparent;
  color: var(--color-black);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  font-stretch: calc(var(--wdth-heading) * 1%);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-ui) var(--ease-ui);
}

.block-anchor-nav__link:hover {
  border-bottom-color: var(--color-primary);
}

@media (min-width: 64em) {
  .block-anchor-nav {
    position: sticky;
    top: var(--header-h-compact);
    z-index: calc(var(--z-header) - 1);
  }

  .block-anchor-nav__list {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}