/*
 * Anchor Navigation module — SD-27
 * Figma: content modules / anchorNav (node 6361-114347)
 * Sticky in-page jump navigation. Sticky state switches the background to
 * Secondary 01. The nav list scrolls horizontally when it overflows.
 * Module-level layout only — the nav itself is the anchor-nav component (SD-50).
 *
 * `position: sticky` is unreliable here because `html, body` use
 * `overflow-x: clip` (basic.css) — same constraint as the site header
 * (nav-bar.css). Stuck state therefore uses `position: fixed` (toggled via JS).
 * The slot keeps the in-flow height so taking the nav out of flow cannot
 * collapse following content (first stick after reload).
 */

.dk-anchornav__slot {
  min-block-size: 8.75rem; /* 140px — L/M, match .dk-anchornav */
  overflow-anchor: none;
}

.dk-anchornav {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 8.75rem; /* 140px — L/M */
  padding-inline: var(--dk-space-page-inline);
  background-color: var(--dk-color-white);
  opacity: 1;
  visibility: visible;
  transition: background-color 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s;
}

/* Hidden once its own content area (last jump target) has been scrolled
   past — shown again when scrolling back up into it. */
.dk-anchornav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background-color 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* Fixed at the top once the sentinel scrolls out of view */
.dk-anchornav.is-stuck {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  padding-block-start: var(--dk-space-03);
  background-color: var(--dk-color-brand-secondary-01);
}

/* 1px marker just before the nav (scroll-spy / stuck trigger).
   Negative margin keeps it from adding to the slot height. */
.dk-anchornav__sentinel {
  display: block;
  block-size: 1px;
  margin: 0;
  margin-block-end: -1px;
  overflow-anchor: none;
}

/* Horizontal scroll / swipe when the items overflow */
.dk-anchornav .dk-anchor-nav-list::-webkit-scrollbar { display: none; }
.dk-anchornav .dk-anchor-nav-list {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline-end: var(--dk-space-08); /* room to scroll last item into view */
}

/* In stuck state: extend list to full bar width so overflow scrolls to viewport edges,
   not clipped by the parent's padding-inline */
.dk-anchornav.is-stuck .dk-anchor-nav-list {
  margin-inline: calc(-1 * var(--dk-space-page-inline));
  padding-inline: var(--dk-space-page-inline);
}

@media (max-width: 63.9375rem) {
  .dk-anchornav__slot,
  .dk-anchornav {
    min-block-size: 7.5rem; /* 120px — S */
  }
}

@media (prefers-reduced-motion: reduce) {
  .dk-anchornav,
  .dk-anchornav.is-hidden {
    transition: none;
  }
}