/* =============================================================
   PCL Plugin Sub-navigation — shared pill-tab bar
   Used by: pcl_badges, pcl_books, pcl_scavenger_hunt, pcl_winners
   and any future local_pcl_* plugin with intra-plugin tab navigation.

   Markup contract:
     <div class="pcl-subnav">
       <ul class="pcl-subnav__list">
         <li class="pcl-subnav__item [pcl-subnav__item--active]">
           <a class="pcl-subnav__link" href="...">Label</a>
         </li>
       </ul>
     </div>
   ============================================================= */

.pcl-subnav {
    margin: 0 0 1.25rem 0;
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: center;
}

.pcl-subnav__list {
    list-style: none;
    padding: 6px;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    border: 2px solid var(--pcl-primary, #30aed1);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pcl-primary, #30aed1) 8%, white);
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start;
}

.pcl-subnav__item {
    margin: 0;
    flex: 0 0 auto;
}

.pcl-subnav__link {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid transparent;
    color: color-mix(in srgb, var(--pcl-primary-dark, #258ab6) 92%, black);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pcl-subnav__item--active .pcl-subnav__link {
    background: linear-gradient(
        135deg,
        var(--pcl-primary, #30aed1),
        var(--pcl-primary-dark, #258ab6)
    );
    color: #fff;
    border-color: var(--pcl-primary, #30aed1);
}

.pcl-subnav__item:not(.pcl-subnav__item--active) .pcl-subnav__link:hover {
    background: color-mix(in srgb, var(--pcl-primary, #30aed1) 14%, white);
    border-color: color-mix(in srgb, var(--pcl-primary, #30aed1) 45%, white);
    color: color-mix(in srgb, var(--pcl-primary-dark, #258ab6) 92%, black);
    text-decoration: none;
}

/* Mobile: keep the pill bar on one row and scale it down to fit */
@media (max-width: 575.98px) {
    .pcl-subnav {
        overflow-x: hidden;
        justify-content: flex-start;
    }
    .pcl-subnav__list {
        flex-wrap: nowrap;
        justify-content: space-between;
        border-radius: 18px;
        width: 100%;
        min-width: 0;
        gap: 4px;
    }
    .pcl-subnav__item {
        flex: 1 1 0;
        min-width: 0;
    }
    .pcl-subnav__link {
        width: 100%;
        text-align: center;
        padding: 6px 4px;
        font-size: 0.78rem;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}