/*
 * Block Name:  Block Filter
 * Description: Sticky search bar that filters .col elements in blocks below it on the page.
 *              Non-matching columns fade + scale out via CSS transitions triggered by JS.
 */


/* ============================================================
   SECTION WRAPPER
   The <section> output by the_block_head() gets the class
   .block-block-filter. We use this to scope all styles so
   they don't bleed into other blocks.
============================================================ */

.block-block-filter {
    z-index: 50; /* Sit above content blocks below */
}

/*
 * When the sticky ACF option is enabled, the PHP adds the class
 * .is-sticky to the .block-filter-bar. The section itself needs
 * position:sticky - we use a CSS variable for the top offset so
 * it can be overridden per-instance via an inline style on the container.
 */
.block-block-filter .is-sticky {
    position: sticky;
    top: 0; /* Overridden by inline style from PHP if sticky_offset is set */
    z-index: 50;
}

/*
 * Drop shadow that the JS adds when the bar is stuck (i.e. user has
 * scrolled past the bar's natural position). Class added via JS.
 */
.block-block-filter .block-filter-bar.is-stuck {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   FILTER BAR INNER LAYOUT
   Flex row: label | input | counter
============================================================ */

.block-filter-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    transition: box-shadow 0.25s ease;
}

.block-filter-label {
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}


/* ============================================================
   INPUT WRAPPER
   Positions the search icon and clear button absolutely inside
   the relative wrapper, so they sit over the input.
============================================================ */

.block-filter-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 100%;
}

/* Search icon - purely decorative SVG */
.block-filter-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    color: var(--brand-1);
    pointer-events: none; /* Don't intercept clicks */
    display: flex;
    align-items: center;
}

.block-filter-icon svg {
    width: 100%;
    height: 100%;
}

/* The text input */
.block-filter-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 1px solid var(--brand-1);
    border-radius: var(--border-radius, 4px);
    font-size: 2rem;
    font-family: inherit;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    /* Remove the browser's built-in clear button on search inputs -
       we have our own. */
    -webkit-appearance: none;
    appearance: none;
}

.block-filter-input::-webkit-search-cancel-button,
.block-filter-input::-webkit-search-decoration {
    -webkit-appearance: none;
}

.block-filter-input:focus {
    border-color: var(--brand-1);
    box-shadow: 0 0 0 3px rgba(var(--brand-1-rgb, 0,0,0), 0.1);
}

/* Clear (×) button */
.block-filter-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    padding: 0.2rem;
    display: none; /* Shown by JS when input has a value */
    line-height: 1;
    transition: color 0.15s;
}

.block-filter-clear svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.block-filter-clear:hover {
    color: #333;
}


/* ============================================================
   RESULTS COUNTER
============================================================ */

.block-filter-count {
    font-size: 1.75rem;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 8rem; /* Prevents layout jump as text changes */
}

.block-filter-count strong {
    color: var(--brand-1);
}


/* ============================================================
   FILTERED ELEMENTS - TRANSITIONS
   These classes are applied to .col elements (and their parent
   <section> blocks) by the JS as it processes the search results.

   Two-step approach:
     Step 1 - .is-hiding  →  CSS transition plays (fade + scale)
     Step 2 - .is-hidden  →  display:none fires after transition ends
                              (set by JS via setTimeout matching the duration)

   This lets us animate OUT smoothly without the element jumping to
   display:none instantly, which would be jarring.

   On SHOW: JS removes both classes simultaneously. The base .col
   transition property then handles fading back in.
============================================================ */

/*
 * Individual columns (.col) inside existing blocks below the filter.
 * The transition lives on the base element so it applies in both directions.
 */
.block-filter-transition {
    /* No transition - columns hide instantly to avoid flex layout gaps */
}

.block-filter-transition.is-hiding {
    display: none !important;
}

.block-filter-transition.is-hidden {
    display: none !important;
    opacity: 1;
    transform: none;
}

.block-filter-transition.is-hiding,
.block-filter-transition.is-hidden {
    display: none !important;
}


/*
 * Parent sections get a gentler opacity-only fade rather than the
 * scale + fade used on individual columns. The slightly longer duration
 * means the section fade finishes after its children are already hidden.
 */
.block-filter-section-transition {
    transition: opacity 0.3s ease;
}

.block-filter-section-transition.is-hiding {
    opacity: 0;
    pointer-events: none;
}

.block-filter-section-transition.is-hidden {
    display: none !important;
    opacity: 1; /* Reset for fade-in */
}


.block-filter-active {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--grid-gap, 2rem);
}

.block-filter-active > .col {
    flex: 0 0 var(--filter-col-basis, calc(33.333% - var(--grid-gap, 2rem)));
    max-width: var(--filter-col-basis, calc(33.333% - var(--grid-gap, 2rem)));
    box-sizing: border-box;
}




/* ============================================================
   SEARCH HIGHLIGHT
   <mark> tags are injected by the JS around matched text.
============================================================ */

h4  mark.block-filter-highlight {
    background: var(--brand-1);
    color: #fff;
    border-radius: 2px;
    padding: 0 2px;
}

mark.block-filter-highlight {
    background: var(--brand-1);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
}


/* ============================================================
   NO RESULTS MESSAGE
   A <p> injected into the DOM by JS when every section is hidden.
============================================================ */

.block-filter-no-results {
    display: none; /* Shown by JS */
    text-align: center;
    padding: 4rem 2rem;
    color: #666;
}

.block-filter-no-results strong {
    color: var(--brand-1);
}


/* ============================================================
   RESPONSIVE
   Standard Toast breakpoints: 1024px / 768px / 576px
============================================================ */

@media (max-width: 768px) {

    .block-filter-bar {
        gap: 1rem;
    }

    .block-filter-input-wrap {
        max-width: 100%;
        flex-basis: 100%; /* Full width on tablet/mobile */
    }

    .block-filter-count {
        min-width: auto;
    }

}

@media (max-width: 576px) {

    .block-filter-label {
        width: 100%;
    }

}


/* ============================================================
   EDITOR STYLES (wp-admin only)
   Give the block a visible outline in the Gutenberg editor so
   editors know where the filter bar sits.
============================================================ */

body.wp-admin .block-block-filter {
    border: 1px dashed #ccc;
}