/**
 * Anchor nav: an in-page table of contents for a long page (service page,
 * landing page). A low band of links to the page's sections and a small CTA
 * button; it sticks to the top of the viewport while the reader scrolls, and
 * the link of the section in view is highlighted (js/blocks/anchor-nav.js).
 * On narrow screens the links scroll sideways and the button is hidden.
 *
 * globalClass: anchor-nav   (the band)
 *
 * Variants:
 *   (none yet)
 *
 * Structure:
 *   .anchor-nav.gb-container.alignfull        NOT a color-section (see below),
 *                                            a direct child of the page content
 *                                            so position: sticky has room
 *     .anchor-nav-inner.gb-container          useGlobalMaxWidth, margins auto
 *       .anchor-nav-links.gb-container        the links, scroll sideways
 *         a.gb-button.anchor-nav-link         href="#<section anchor>"
 *       a.gb-button.anchor-nav-cta            optional, a normal button
 *   The target sections carry the anchor (GB container "HTML Anchor").
 *
 * The band is not a color-section: base.css would drop the top padding of a
 * same-palette section that follows it, and the band paints its own
 * background (--bg-clr of the surrounding palette) so content scrolls under it.
 *
 * Without JavaScript the links are plain anchors and the band still sticks;
 * the script only adds the active state (aria-current="true", is-active).
 *
 * Tuning: --anchor-nav-top (offset from the viewport top, follows the WP
 *         admin bar; add a sticky header's height in a project),
 *         --anchor-nav-height (used as the sections' scroll-margin-top),
 *         --anchor-nav-gap
 *
 * Chain animations: none. The band is navigation and is visible at once.
 *
 * Editor: the same rules apply in the canvas (the band sticks there too);
 * the links row keeps its flex layout through the block-list selectors.
 */

:root {
    --anchor-nav-top: var(--wp-admin--admin-bar--height, 0px);
    --anchor-nav-height: 64px;
    --anchor-nav-gap: 4px;
}

/* Sections that a nav link points to stop below the band */
:root:has(.anchor-nav) [id] {
    scroll-margin-top: calc(var(--anchor-nav-top) + var(--anchor-nav-height) + 16px);
}

/* Band */
.gb-container.anchor-nav {
    position: sticky;
    top: var(--anchor-nav-top);
    z-index: 50;
    background-color: var(--bg-clr);
    border-top: 1px solid var(--border-clr);
    border-bottom: 1px solid var(--border-clr);
}

.anchor-nav-inner,
.anchor-nav-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    align-items: center;
    gap: 16px;
}

.anchor-nav-inner > .block-editor-inner-blocks {
    width: 100%;
}

/* Links: one row that scrolls sideways; the right edge fades out on mobile
   to show there is more */
.anchor-nav-links,
.anchor-nav-links > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--anchor-nav-gap);
}

.anchor-nav-links {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, currentColor 85%, transparent);
}

.anchor-nav-links::-webkit-scrollbar {
    display: none;
}

.anchor-nav-links > .block-editor-inner-blocks {
    width: 100%;
}

.anchor-nav .gb-button.anchor-nav-link {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 40px;
    background-color: transparent;
    color: var(--font-clr);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-speed) var(--transition-timing-function),
                color var(--transition-speed) var(--transition-timing-function);
}

.anchor-nav .gb-button.anchor-nav-link:hover,
.anchor-nav .gb-button.anchor-nav-link:focus-visible {
    background-color: var(--neutral-clr);
    color: var(--font-clr);
}

.anchor-nav .gb-button.anchor-nav-link.is-active {
    background-color: var(--accent-soft-clr);
    color: var(--link-clr);
}

/* CTA: a normal theme button, smaller; hidden on phones where space is short */
.anchor-nav .gb-button.anchor-nav-cta {
    display: none;
    flex: 0 0 auto;
    padding: 9px 16px;
    font-size: 13px;
}

@media only screen and (min-width: 768px) {
    .anchor-nav-links {
        mask-image: none;
    }

    .anchor-nav .gb-button.anchor-nav-cta {
        display: inline-flex;
    }
}