/*
 * Horizontal resource filter bar (T28) — /freeresources-1.html.
 *
 * Markup: ResourcesView::renderResourceFilterBar(). Behaviour:
 * /js/resource-filters.js. Loaded by src/resource_search.php.
 *
 * Everything here is a small delta on Bootstrap 5.1.3 utilities; the pills
 * and panels are ordinary .dropdown components so all four site templates
 * (which already ship Popper + bootstrap.min.js for their ribbons) drive
 * them without any extra dependency.
 */

.resource-filter-bar .resource-filter-pill {
    font-weight: 500;
}

/* Selected category. Kept as an outline-with-tint rather than a solid fill so
   the muted per-option counts inside the panel stay readable, and so the bar
   does not fight the four sites' different primary colours. */
.resource-filter-bar .resource-filter-pill-active {
    border-color: #0d6efd;
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.08);
}

/* 21 topics will not fit on a screen. Cap the panel and let it scroll rather
   than pushing the grid down or running off the viewport. */
.resource-filter-bar .resource-filter-menu {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 16rem;
}

.resource-filter-bar .resource-filter-menu .dropdown-item {
    white-space: normal;
}

/* Phones: the pills stack full width, two rows, each opening its own panel.
   Bootstrap's width utilities are not responsive, so the stacking is done
   here. Every affordance stays a single tap — there is no hover-only path
   into the filters (Requirement 4). */
@media (max-width: 575.98px) {
    .resource-filter-bar .resource-filter-dropdown {
        width: 100%;
    }

    .resource-filter-bar .resource-filter-pill {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .resource-filter-bar .resource-filter-menu {
        width: 100%;
    }
}