/*
 * Publication filters bar — .pub-filters
 * Wraps GridBuilder facet blocks in a single-row flex layout.
 * Stacks on mobile, inline on desktop.
 */

.pub-filters {
    margin-bottom: 0;
}

/* Hide the filter row until JS hydrates the drawer wrapper and WPGB starts to
 * settle. Facets are non-functional without JS (WPGB is AJAX-only) and the
 * half-rendered state flashes a low-contrast loading dim plus a layout shift.
 * pub-filters-toggle.js adds .pub-filters--ready at the end of its IIFE. */
.pub-filters:not(.pub-filters--ready) {
    visibility: hidden;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .pub-filters {
        transition: opacity var(--transition-slow);
    }
}

.pub-filters .wpgb-facet {
    margin-block-start: 0;
}

/* Make the facet's primary label visible — target only the label span
   directly inside the search/select label wrapper, not deeper sr-only elements */
.pub-filters .wpgb-search-facet > label > .wpgb-sr-only,
.pub-filters .wpgb-select-facet > label > .wpgb-sr-only {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    display: block;
    opacity: 1;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-dark);
    margin: 0 0 var(--space-1);
}

/* Search facet: label wraps span + input + icon.
   Use grid so the label text sits on its own row, input area below.
   Extra .wpgb-facet in selector beats GridBuilder's own specificity. */
.pub-filters .wpgb-facet .wpgb-search-facet {
    position: relative;
}

.pub-filters .wpgb-facet .wpgb-search-facet > .wpgb-clear-button:not([hidden]) {
    top: auto;
    bottom: 0;
    height: var(--filter-height);
    display: flex;
    align-items: center;
}

.pub-filters .wpgb-facet .wpgb-search-facet > label {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto var(--filter-height);
}

.pub-filters .wpgb-facet .wpgb-search-facet > label > .wpgb-sr-only {
    grid-column: 1;
}

.pub-filters .wpgb-facet .wpgb-search-facet > label > .wpgb-input {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    padding-left: var(--space-2);
}

.pub-filters .wpgb-facet .wpgb-search-facet > label > .wpgb-input-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--filter-height);
    display: flex;
    align-items: center;
    transform: translateY(-2px);
    pointer-events: none;
    z-index: 1;
}

/* Uniform height for all inputs, selects, and button */
.pub-filters {
    --filter-height: 44px;
    --wpgb-border-radius: 0;
}

/* Extra .wpgb-facet beats GridBuilder's `.wpgb-facet .wpgb-input { height: unset }` */
.pub-filters .wpgb-facet .wpgb-input,
.pub-filters .wpgb-facet .wpgb-select {
    height: var(--filter-height);
    background-color: var(--color-white);
}

.pub-filters .wpgb-facet button.wpgb-apply {
    height: var(--filter-height);
    margin: 0;
    background-color: var(--color-neutral-warm-dark);
    color: var(--color-white);
}

/* Disabled (idle) state — GridBuilder's default opacity: 0.6 blends the button
 * to ~#9A9894, dropping white text to 2.89:1. Use an explicit lighter-but-legible
 * background instead (white on #6b6560 = 5.74:1) so the idle button still passes. */
.pub-filters .wpgb-facet button.wpgb-apply[disabled] {
    opacity: 1;
    background-color: var(--color-neutral-warm-dark-hover);
}

/* Loading state — GridBuilder applies `.wpgb-loading{opacity:.6!important}` to
 * every facet wrapper during init. That dims the entire row (labels + inputs +
 * Search button) below SiteImprove's contrast threshold for ~1s before JS
 * settles. Override the opacity so contrast holds; pointer-events:none from
 * WPGB stays in effect, so facets remain non-interactive until ready. */
.pub-filters .wpgb-facet.wpgb-loading {
    opacity: 1 !important;
}

.pub-filters .wpgb-facet .wpgb-select {
    display: flex;
    align-items: center;
}

/* Keyboard focus on the JS-hydrated combobox. WPGB darkens .wpgb-input on
 * :focus (the keyword field), but its matching rule for selects
 * (.wpgb-select.wpgb-select-focused) is attached to the native <select> —
 * after hydration the focus lives on the inner input of the placeholder div,
 * so nothing in WPGB's CSS reacts. Use :focus-within on the .wpgb-select
 * wrapper to match the keyword field's darker border. */
.pub-filters .wpgb-facet .wpgb-select:focus-within {
    border-color: var(--wpgb-grey-900);
}

/* --- Toggle button (mobile only) --- */

.pub-filters__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-dark);
    background: var(--color-neutral-warm-light);
    border: none;
    cursor: pointer;
}

.pub-filters__toggle:hover {
    background: var(--color-neutral-warm-medium);
}

.pub-filters__icon {
    flex-shrink: 0;
    color: var(--color-blue-dark);
    transform-origin: center;
}

.pub-filters__toggle[aria-expanded="true"] .pub-filters__icon {
    transform: rotate(135deg);
}

/* --- Drawer (collapsible on mobile) --- */

.pub-filters__drawer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    margin-block-start: 0;
}

.pub-filters__drawer-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

.pub-filters__drawer--open {
    grid-template-rows: 1fr;
    margin-block-start: var(--space-4);
}

@media (prefers-reduced-motion: no-preference) {
    .pub-filters__drawer {
        transition: grid-template-rows var(--transition-slow);
    }

    .pub-filters__icon {
        transition: transform var(--transition-base);
    }
}

/* Stack facets on mobile */
@media (max-width: 600px) {
    .pub-filters__drawer-inner > .wpgb-facet {
        flex: 1 1 100%;
    }
}

/* --- Tablet: no toggle, two-column grid --- */

@media (min-width: 601px) {
    .pub-filters__toggle {
        display: none;
    }

    .pub-filters__drawer {
        grid-template-rows: 1fr;
        overflow: visible;
    }

    .pub-filters__drawer-inner > .wpgb-facet {
        flex: 1 1 calc(33.333% - var(--space-3));
        min-width: 0;
    }

    .pub-filters__drawer-inner > .wpgb-facet:has(.wpgb-apply) {
        flex: 0 0 auto;
        align-self: flex-end;
        margin-inline-start: auto;
    }
}

/* --- Desktop: two rows (4 top, 4 + button bottom) --- */

@media (min-width: 1000px) {
    /* Row 1: 4 equal-width facets */
    .pub-filters__drawer-inner > .wpgb-facet:nth-child(-n+4) {
        flex: 0 0 calc(25% - var(--space-3) * 3 / 4);
    }

    /* Row 2: 4 facets share remaining space, button auto-sized */
    .pub-filters__drawer-inner > .wpgb-facet:nth-child(n+5):not(:has(.wpgb-apply)) {
        flex: 1 1 0;
    }

    .pub-filters__drawer-inner > .wpgb-facet:has(.wpgb-apply) {
        flex: 0 0 auto;
        margin-inline-start: 0;
    }

    /* Single-row variant (fewer facets, e.g. blog) */
    .pub-filters--single-row .pub-filters__drawer-inner > .wpgb-facet {
        flex: 1 1 0;
    }

    .pub-filters--single-row .pub-filters__drawer-inner > .wpgb-facet:has(.wpgb-apply) {
        flex: 0 0 auto;
    }

    /* 3-top variant (3 on row 1, rest + button on row 2) */
    .pub-filters--3-top .pub-filters__drawer-inner > .wpgb-facet:nth-child(-n+3) {
        flex: 0 0 calc(33.333% - var(--space-3) * 2 / 3);
    }

    .pub-filters--3-top .pub-filters__drawer-inner > .wpgb-facet:nth-child(n+4):not(:has(.wpgb-apply)) {
        flex: 1 1 0;
    }
}