/* ==========================================================
   JUMP NAVIGATION (Sprungmarken)
   A row of anchor buttons that sticks to the top while the section after it is scrolled through.

     .jump-nav-sticky-shell   the full-width group that sticks
       .jump-nav              the group around the row
         .jump-nav-track      its Buttons block: scrolls sideways when the buttons do not fit
   Those three are Von Block composite classes, and what styles each of them on its own is in its
   definition (Von Block settings → Composite Classes). Here: what they do to their children, and
   what script.js adds — the scope the bar sticks in (.jump-nav-sticky-scope), the button of the
   section in view (.is-active), the arrows (.jump-nav__prev, __next) and the fades
   (.can-scroll-left, -right) when the row overflows.
   The buttons are outlined pills, not the site's CTA button. An !important is only where another
   rule wins otherwise (checked rule by rule, 2026-10-16).
   ========================================================== */

.jump-nav-sticky-scope {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.jump-nav .jump-nav-track::-webkit-scrollbar {
  display: none;
}

.jump-nav.has-overflow .jump-nav-track {
  padding-right: 58px;
}

.jump-nav .jump-nav-track > .wp-block-button {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* The transparent border keeps the size when the outline shows */
.jump-nav .jump-nav-track .wp-block-button__link {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 42px;
  margin: 0;
  padding: 8px 26px;
  box-sizing: border-box;
  background: transparent;
  color: var(--jump-nav-ink);
  border: 2px solid transparent;
  border-radius: 9999px;
  box-shadow: none;
  outline: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: 1.15;
  letter-spacing: inherit;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  word-break: normal;
  cursor: pointer;
  opacity: 1;
  filter: none;
  transition:
    border-color 220ms ease,
    color 220ms ease,
    background-color 220ms ease;
}

/* No CTA arrow */
.jump-nav .jump-nav-track .wp-block-button__link::before,
.jump-nav .jump-nav-track .wp-block-button__link::after {
  content: none;
}

.jump-nav .jump-nav-track > .wp-block-button.is-active > .wp-block-button__link,
.jump-nav .jump-nav-track .wp-block-button__link.is-active,
.jump-nav .jump-nav-track .wp-block-button__link[aria-current="location"] {
  border-color: var(--jump-nav-ink) !important;
}

@media (hover: hover) and (pointer: fine) {
  .jump-nav .jump-nav-track .wp-block-button__link:is(:hover, :focus-visible) {
    border-color: var(--jump-nav-ink) !important;
  }
}

/* The fade on the side where there are more buttons */
.jump-nav.can-scroll-left::before,
.jump-nav.can-scroll-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 76px;
  pointer-events: none;
}

.jump-nav.can-scroll-left::before {
  left: 0;
  background: linear-gradient(to left, transparent 0%, var(--jump-nav-bg) 42%, var(--jump-nav-bg) 100%);
}

.jump-nav.can-scroll-right::after {
  right: 0;
  background: linear-gradient(to right, transparent 0%, var(--jump-nav-bg) 42%, var(--jump-nav-bg) 100%);
}

/* The arrows: round, with a chevron */
.jump-nav .jump-nav__prev,
.jump-nav .jump-nav__next {
  all: unset;
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  background-color: var(--jump-nav-bg);
  color: var(--jump-nav-ink);
  border: 2px solid var(--jump-nav-ink);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

.jump-nav .jump-nav__prev {
  left: 20px;
}

.jump-nav .jump-nav__next {
  right: 20px;
}

.jump-nav .jump-nav__prev[hidden],
.jump-nav .jump-nav__next[hidden] {
  display: none !important;
}

.jump-nav .jump-nav__prev::before,
.jump-nav .jump-nav__next::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transition: transform 180ms ease;
}

.jump-nav .jump-nav__prev::before {
  margin-right: -3px;
  transform: rotate(-135deg);
}

.jump-nav .jump-nav__next::before {
  margin-left: -3px;
  transform: rotate(45deg);
}

.jump-nav .jump-nav__prev::after,
.jump-nav .jump-nav__next::after {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  .jump-nav .jump-nav__prev:is(:hover, :focus-visible)::before {
    transform: translateX(-2px) rotate(-135deg) !important;
  }

  .jump-nav .jump-nav__next:is(:hover, :focus-visible)::before {
    transform: translateX(2px) rotate(45deg) !important;
  }
}