/* Studio Profile V2 -- Section Navigation (sticky tab bar)
 * @task , (pill pattern align with Master canonical)
 *
 * Sticky horizontal tab bar below the hero/CTA.
 * Mirrors .mp-section-nav pill pattern: DS-style rounded pills with
 * gold-filled active state. Scrollable on mobile, no glass background.
 * Works with IntersectionObserver in core.js for auto-highlight.
 */

/* ── Nav wrapper (sticky) ──────────────────────────────────── */
.sp-section-nav {
    position: sticky;
    top: var(--header-h);
    z-index: calc(var(--z-sticky) - 1);
    background: var(--color-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--color-border);
    height: 52px;
}

/* ── Tab list ──────────────────────────────────────────────── */
.sp-section-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--gutter);
    height: 100%;
    min-width: max-content;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.sp-section-nav__list::-webkit-scrollbar {
    display: none;
}

/* ── Individual tab item (pill) ──────────────────────────────
 * Visual styling (padding, radius, border, typography, active/hover)
 * provided by DS .btn.btn--pill. Markup now uses
 * `class="btn btn--pill sp-section-nav__item"` — this rule only keeps
 * structural layout bits for the horizontal scrolling tab bar.
 * @task pill unification
 */
.sp-section-nav__li {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    display: flex;
}

/* Items are now <a> anchors: keyboard-focusable, no underline.
 * MP25 final pattern: the LINK box is the 44px tap target (in-box —
 * a pseudo extending outside the box gets clipped by the overflow-x
 * scroll container); the compact pill is drawn by an ::before underlay. */
.sp-section-nav__item {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
    border: none;
}

.sp-section-nav__item::before {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 28px;
    transform: translateY(-50%);
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    z-index: -1;
}

.sp-section-nav__item.active {
    background: transparent;
    border-color: transparent;
}

.sp-section-nav__item.active::before {
    background: var(--color-brand-accent);
    border-color: transparent;
}

.sp-section-nav__item:focus-visible {
    outline: 2px solid var(--accent, #d4af37);
    outline-offset: 2px;
}