/* ==========================================================================
   Section Nav Block — Smith 2.0
   Gold anchor bar; sticky under the header. Centered Hoefler serif links
   in a 90px band (Figma insights spec 10774:81330).
   ========================================================================== */

.smith-section-nav {
    position: sticky;
    /* Sit below the sticky site header (72px on small screens) instead of at
       top:0, where it was hiding behind the header once the header was made
       sticky. Header grows to 122px at the lg breakpoint (see below). */
    top: 72px;
    z-index: 190; /* under the header ($z-sticky: 200), above page content */
    background-color: var(--color-selective-yellow, #f0b200);
}

@media (min-width: 992px) {
    .smith-section-nav {
        top: 122px; /* header height at lg and up */
    }
}

.smith-section-nav__list {
    list-style: none;
    margin: 0 auto;
    padding: 0 4rem;
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
    justify-content: center; /* Figma 10774:81330: links centered in the band */
    min-height: 90px; /* Figma: 90px-tall yellow band */
}

.smith-section-nav__link {
    display: inline-block;
    padding: 0.5rem 0;
    /* Figma 10774:81330: serif (Hoefler) links, not the Barlow utility style */
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    /* Figma Secondary Navigation (10773:71133): Hoefler 24px, tracking -0.24px */
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-blue-zodiac, #0e1b44);
    text-decoration: none;
}

.smith-section-nav__link:hover,
.smith-section-nav__link:focus {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 768px) {
    .smith-section-nav__list {
        padding: 0 1.5rem;
        gap: 1.25rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .smith-section-nav__link { white-space: nowrap; }
}

/* ==========================================================================
   BugZap #90 — floating pill variant (Insights)

   Meeky, #mm 2026-08-03: "#90 from bugzapper is not addressed. Refer to
   .../designs/v1-original/insights/index.html". The reference ships the
   section nav as <nav class="smith-section-nav smith-section-nav--floating">
   — a navy pill fixed to the bottom-centre of the viewport, floating OVER the
   page content — not the sticky gold band above.

   Every declaration below is taken from the reference build's computed rules.
   Two additions that are ours, both forced by the base styles in this file:
     * the selectors are doubled (.smith-section-nav.smith-section-nav--floating)
       so they out-rank the (0,1,0) base rules; block CSS loads last, but a
       plain modifier would only tie and lose to source order inside this file.
     * font-size is stated explicitly. The base link is Hoefler 1.5rem/24px;
       the reference measures 18px Barlow. The reference gets 18px from a
       global it does not restate in the modifier, so we restate it here.

   Verified against the reference at 1440px: nav 499.5x60.8, link 96.4x44.8,
   18px / weight 500 / Barlow / letter-spacing normal / line-height 28.8px /
   colour rgb(249,248,245).
   ========================================================================== */

.smith-section-nav.smith-section-nav--floating {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1000;
    width: auto;
    max-width: calc(100% - 2rem);
    height: auto;
    border-radius: 9999px;
    box-shadow: rgba(0, 0, 0, 0.18) 0 12px 30px;
    background-color: var(--color-blue-zodiac, #0e1b44);
    right: auto !important;
    top: auto !important;
}

.smith-section-nav--floating .smith-section-nav__list {
    max-width: none;
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.smith-section-nav--floating .smith-section-nav__list::-webkit-scrollbar {
    display: none;
}

.smith-section-nav--floating .smith-section-nav__link {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: background-color 0.2s, color 0.2s;
    font-family: Barlow, system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;   /* 18px — see header note */
    line-height: 1.6;      /* 28.8px */
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    color: var(--color-pampas, #f9f8f5);
}

.smith-section-nav--floating .smith-section-nav__link:hover,
.smith-section-nav--floating .smith-section-nav__link:focus {
    background-color: var(--color-pampas, #f9f8f5);
    color: var(--color-blue-zodiac, #0e1b44);
    text-decoration: none;
}

@media (max-width: 768px) {
    .smith-section-nav.smith-section-nav--floating {
        bottom: 1rem;
        max-width: calc(100% - 1.5rem);
    }
    .smith-section-nav--floating .smith-section-nav__list {
        padding: 0.375rem 0.5rem;
        min-height: 48px;
        /* figma-mobile-v4.css:982 forces justify-content:flex-start !important
           on the base list; the pill is content-width so it makes no visible
           difference, but restate the reference's scroll behaviour here. */
        overflow-x: auto;
    }
    .smith-section-nav--floating .smith-section-nav__link {
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
    }
}