/* ==========================================================================
   Iguazu Noticias — Sticky section nav
   Frosted pill rail that tracks the reader down the page.
   ========================================================================== */

.ig-secnav {
    position: sticky;
    top: 0;
    z-index: 35;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--neutral-100);
}

/* Only one sticky bar per page. Two of them eat a third of a phone screen, so
   wherever a section nav exists the site header gives up its stickiness.

   Tied to the cause (a section nav is present) rather than to a body class,
   which would otherwise be a list every future page has to remember to join. */
body:has(.ig-secnav) .ig-navbar {
    position: static;
}

.ig-secnav__inner {
    display: flex;
    gap: 6px;
    padding-block: 10px;
    /* Too many pills for a phone: scroll them instead of wrapping, which would
       change the height of a sticky element as the reader moves. */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.ig-secnav__inner::-webkit-scrollbar {
    display: none;
}

.ig-secnav__item {
    flex: none;
}

.ig-secnav__pill {
    display: block;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
    font-size: 13.5px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: background var(--dur), color var(--dur);
}

.ig-secnav__pill:hover {
    color: var(--ink);
    background: var(--neutral-100);
}

.ig-secnav__pill.is-active {
    background: var(--green-100);
    color: var(--ink);
}