/**
 * FAQ section jump nav — the configurator steps bar, repurposed as page
 * navigation. Same vocabulary as core-stepper.css `.steps-bar`: an equal-column
 * track of 13px medium labels told apart by colour alone (muted upcoming,
 * soft-ink passed, accent current, ink on hover), over a single 3px line along
 * the bottom edge that fills with the accent — there per completed step, here
 * per scroll position (faq-nav.js drives --steps-progress).
 *
 * Reduced motion: no local block — the theme's global reduced-motion reset in
 * main.css is the single guarantee (inconsistency #104).
 */

@property --steps-progress {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.faq-nav {
    position: sticky;
    top: var(--mm-header-h);
    z-index: var(--z-sticky);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background-color: var(--paper);
    background-image: linear-gradient(
        to right,
        var(--accent) 0 var(--steps-progress, 0%),
        var(--rule) var(--steps-progress, 0%) 100%
    );
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 3px;
    border-top: 1px solid var(--rule);
    transition: --steps-progress var(--dur-slow) var(--ease);
}

.faq-nav__link {
    display: block;
    padding: 0.9375rem 1rem 0.875rem;
    font-size: var(--fs-13);
    font-weight: var(--fw-regular);
    line-height: 1.3;
    color: var(--ink-muted);            /* upcoming — faint */
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: color var(--dur-fast) var(--ease);
}

.faq-nav__link.is-done {
    color: var(--ink-soft);             /* passed — soft ink */
}

.faq-nav__link[aria-current] {
    color: var(--accent);               /* current — the delivered accent, at every size (§3.5) */
}

/* Clickable affordance with no background fill: darken a non-current label. */
.faq-nav__link:hover:not([aria-current]) {
    color: var(--ink);
}

.faq-nav__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}

/* Anchor jumps land clear of the site header + the bar. faq-nav.js keeps the
   value honest against the real header height. Applies equally to editor-set
   HTML anchors — the id sits on the same block wrapper either way. */
.page-faq .wp-block-makemy-accordion {
    scroll-margin-top: var(--faq-scroll-margin, 140px);
}

/* The accordion's --container-narrow prose measure reads as a thin strip on a
   wide monitor when the whole page is accordions. Widen it here, on the FAQ
   template only — elsewhere (the Contact page) the block keeps its documented
   alignment with .entry-content copy beside it. 1200px, not the full
   --container-max: question rows carry a summary + icon so they wear the
   width, and illustrated answers split into text + figure columns. */
.page-faq .accordion__wrap {
    max-width: 1200px;
}

/* Narrow screens: the stepper's overflow answer — a scroll-snap row. */
@media (max-width: 640px) {
    .faq-nav {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .faq-nav::-webkit-scrollbar {
        display: none;
    }
    .faq-nav__link {
        flex: 0 0 auto;
        min-width: 128px;
        max-width: 170px;
        scroll-snap-align: start;
        padding: 0.75rem 0.75rem 0.6875rem;
    }
}