/**
 * Championship Tabs — reusable primitive
 *
 * Visual styling ported from .usau-results__tab (results.css:96-124) so
 * tabs across championship patterns share the same uppercase Futura,
 * blue-underline-on-active language as the schedule shortcode.
 *
 * No-JS fallback: panels are visible by default, tablist is hidden
 * (tabs don't work without JS, so we just show all content stacked).
 * The .js-active class is added by champ-tabs.js once a tablist is
 * wired up — at that point the tablist appears and inactive panels hide.
 *
 * @package Condor
 */

/* ==========================================================================
   Container & Panel Visibility
   ========================================================================== */

.champ-tabs {
    /* No-JS fallback: all panels visible, tablist hidden. */
    .champ-tabs__panel {
        display: block;
    }

    .champ-tabs__list {
        display: none;
    }

    /* JS active: show tablist, hide inactive panels. */
    &.js-active {
        .champ-tabs__list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--wp--preset--spacing--50);
            padding: 0;
            margin: 0 0 var(--wp--preset--spacing--40);
            border-bottom: 1px solid var(--wp--preset--color--light-gray);
        }

        .champ-tabs__panel:not(.is-active) {
            display: none;
        }
    }
}

/* ==========================================================================
   Tab Bar
   ========================================================================== */

.champ-tabs__tab {
    padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    color: var(--wp--preset--color--mid-gray);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
    white-space: nowrap;

    &:hover {
        color: var(--wp--preset--color--blue);
    }

    &:focus-visible {
        outline: 2px solid var(--wp--preset--color--blue);
        outline-offset: 2px;
    }

    &.is-active {
        color: var(--wp--preset--color--blue);
        border-bottom-color: var(--wp--preset--color--blue);
        font-weight: 700;
    }
}