/* Block CSS files are served raw (not processed by PostCSS), so BEM
   selectors must be written flat — &__wrapper-style nesting does not work
   natively. Only descendant / pseudo / compound nesting works here. */

.b-anchor-nav {
    display: block;
    width: 100%;
    border-block-start: 1px solid var(--color-grey--light);
    border-block-end: 1px solid var(--color-grey--light);
    background: var(--color-white);
    /* Stick just under the fixed site header. `position: sticky` preserves
       the element's space in flow, so there is no layout shift when it
       starts pinning — unlike `fixed` / `absolute`. The block can be
       dropped anywhere in Gutenberg and will pin at the right scroll
       position without any JS. z-index sits below the header
       (--zindex--navigation = 50) so the header always wins if they
       happen to overlap during transient layout passes. */
    position: sticky;
    top: calc(var(--height--header, 0rem) + var(--wp-admin--admin-bar--height, 0rem));
    z-index: 40;
}

/* Max-width column matching the page's content. Everything (list + controls)
   lives inside, and `overflow: hidden` prevents items from spilling past the
   column edges (the host stays full-width for the background/borders). */
.b-anchor-nav__inner {
    position: relative;
    max-width: var(--max-width--block);
    margin-inline: auto;
    overflow: hidden;
}

.b-anchor-nav__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    /* Tells the browser to treat the rightmost 140px of the scroll viewport
       as "off-limits" — `scrollIntoView` and any future scroll-snap will
       compensate, so items land BEFORE the opaque controls instead of
       behind them. This is the spec-blessed way to handle fixed-side
       toolbars over a scroll container. */
    scroll-padding-inline-end: calc(140/16*1rem);
}

.b-anchor-nav__scroll.is-dragging {
    cursor: grabbing;
}

.b-anchor-nav__scroll::-webkit-scrollbar {
    display: none;
}

.b-anchor-nav__list {
    display: inline-flex;
    align-items: center;
    gap: calc(30/16*1rem);
    margin: 0;
    list-style: none;
    padding-block: calc(20/16*1rem);
    padding-inline-start: calc(24/16*1rem);
    padding-inline-end: calc(24/16*1rem);
    width: max-content;
}

.b-anchor-nav__item {
    flex-shrink: 0;
}

.b-anchor-nav__link {
    font: var(--typo--mobile-headline-05);
    color: var(--color-black);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.b-anchor-nav__link:hover,
.b-anchor-nav__link:focus-visible {
    color: var(--color-primary--green);
}

.b-anchor-nav__link.is-active {
    font: var(--typo--mobile-headline-04);
    color: var(--color-primary--green);
}

/* Prev/next controls overlay. Hidden on mobile (touch users swipe the list
   natively); shown on desktop where there is no swipe affordance with a
   mouse. The host's `position: sticky` is what anchors the absolute
   positioning here. */
.b-anchor-nav__controls {
    --color--active: var(--color-black);
    --color--disabled: var(--color-grey--medium);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.b-anchor-nav__controls[hidden] {
    display: none;
}

.b-anchor-nav__controls-gradient {
    width: calc(120/16*1rem);
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-white) 60%, var(--color-white) 100%);
    pointer-events: none;
}

.b-anchor-nav__controls-gradient[hidden] {
    display: none;
}

.b-anchor-nav__controls-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline-end: 0;
    background: var(--color-white);
    pointer-events: auto;
}

@media all and (min-width: 65em) {
    .b-anchor-nav__controls {
        display: flex;
    }

    /* End-of-list runway so the final link can scroll fully past the
       opaque arrow controls instead of getting permanently masked by
       them — same trick as the `__categories-carousel-spacer` div in
       hero-works, expressed as padding here. ~140px ≈ width of the
       controls' opaque content area (two 40px buttons + gaps + side
       padding). The gradient still overlaps a little, which is the
       intended cosmetic fade. */
    .b-anchor-nav__list {
        padding-inline-end: calc(140/16*1rem);
    }
}

/* 1180px (≈75em) is where --max-width--block kicks in and `__inner`
   actually starts being centered with whitespace on both sides — at that
   point the responsive 24px start padding is no longer needed because
   the items naturally align with the content column's left edge. */
@media all and (min-width: 75em) {
    .b-anchor-nav__list {
        padding-inline-start: 0;
    }
}