/* The tab row is the lintel under either hero: every sibling page, one line. */
.section-tabs {
    position: sticky;
    top: 89px;
    z-index: 40;
    background: var(--trim-white);
    border-bottom: 1px solid var(--rule);
}

.section-tabs .container {
    position: relative;
}

.section-tabs ul {
    display: flex;
    gap: clamp(20px, 2.6vw, 36px);
    padding: 0;
    list-style: none;
}

.section-tabs a {
    display: block;
    margin-bottom: -1px;
    padding-block: 15px 13px;
    border-bottom: 2px solid transparent;
    color: var(--umber-soft);
    font-size: var(--type-ui);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease-out, border-color 160ms ease-out;
}

.section-tabs a:hover {
    border-bottom-color: var(--rule);
    color: var(--umber-ink);
}

.section-tabs a[aria-current="page"] {
    border-bottom-color: var(--door-juniper);
    color: var(--umber-ink);
}

.section-tabs a:focus-visible {
    outline-offset: -2px;
}

html:has(.section-tabs) {
    scroll-padding-top: 160px;
}

@media (max-width: 960px) {
    /* Two sticky bars eat a phone screen: the tab row scrolls with the page,
       and sideways when the tabs outrun the width. */
    .section-tabs {
        position: static;
    }

    html:has(.section-tabs) {
        scroll-padding-top: 108px;
    }

    .section-tabs .container {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .section-tabs .container::-webkit-scrollbar {
        display: none;
    }

    .section-tabs ul {
        width: max-content;
    }

    .section-tabs li > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 720px) {
    .section-tabs a {
        min-width: 44px;
        padding-inline: 4px;
        text-align: center;
    }
}

/* Section tabs on a phone. Seven tabs do not fit a 390px row, and a row that
   scrolls sideways hides the ones off the edge. Under 720px the row folds
   behind one control that says where you are and opens into a list. It is drawn
   as a select, boxed with a chevron, because a bare line of text read as a
   caption rather than something to tap.

   The fold is plain CSS, so the page never paints the row first and then
   swaps it. It is gated on scripting because the button needs JavaScript to
   open: with scripting off, or in a browser too old to know the query, the
   block does not apply and the scrolling row shows instead. */
.section-tabs-toggle {
    display: none;
}

@media (max-width: 720px) and (scripting: enabled) {
    .section-tabs {
        padding: 12px var(--gutter);
        border-bottom: 0;
        background: var(--clapboard-putty);
    }

    .section-tabs .section-tabs-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
        border: 1px solid var(--umber-soft);
        border-radius: 3px;
        background: var(--trim-white);
        color: var(--umber-soft);
        font: inherit;
        font-size: var(--type-ui);
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
    }

    .section-tabs-where strong {
        color: var(--umber-ink);
        font-weight: 500;
    }

    .section-tabs-toggle::after {
        content: "";
        flex: none;
        width: 9px;
        height: 9px;
        margin: -4px 3px 0;
        border-right: 2px solid var(--door-juniper);
        border-bottom: 2px solid var(--door-juniper);
        transform: rotate(45deg);
        transition: transform 160ms ease-out;
    }

    .section-tabs.is-open .section-tabs-toggle {
        border-bottom-color: var(--rule);
        border-radius: 3px 3px 0 0;
    }

    .section-tabs.is-open .section-tabs-toggle::after {
        margin-top: 4px;
        transform: rotate(-135deg);
    }

    .section-tabs-toggle:focus-visible {
        outline-offset: 2px;
    }

    .section-tabs:not(.is-open) .container {
        display: none;
    }

    /* The open list hangs off the control as one box. */
    .section-tabs .container {
        overflow: visible;
        padding: 0 16px;
        border: 1px solid var(--umber-soft);
        border-top: 0;
        border-radius: 0 0 3px 3px;
        background: var(--trim-white);
        box-shadow: 0 10px 20px -14px rgba(43, 38, 34, 0.5);
    }

    .section-tabs ul {
        flex-direction: column;
        gap: 0;
        width: auto;
    }

    .section-tabs li + li {
        border-top: 1px solid var(--rule);
    }

    .section-tabs li > a {
        display: flex;
        min-height: 46px;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: var(--type-body);
        text-align: left;
    }

    .section-tabs a[aria-current="page"] {
        text-decoration: underline;
        text-decoration-color: var(--door-juniper);
        text-decoration-thickness: 2px;
        text-underline-offset: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-tabs-toggle::after {
        transition: none;
    }
}