/* ============================================================================
   QUERY-FILTERING.CSS
   Rocket Blocks: Query-Filtering Block Child Theme Overrides

   HINWEIS: Diese Datei überschreibt die Plugin-Stile durch die
   Ladereihenfolge (Child-Theme lädt nach Plugin). Auskommentierte
   Variablen zeigen die verfügbaren Tokens – zum Aktivieren Kommentar
   entfernen und Wert anpassen.
   ============================================================================ */

.wp-block-query-filters {

    /* === LAYOUT === */
    --query-filter-gap: var(--wp--preset--spacing--1);

    /* === WRAPPER – Vertikaler Aussenabstand (aus Theme-Spacing) === */
    --query-filter-margin-vertical: var(--theme-spacing-vertical-typography);

    /* === BUTTON – Basis === */
    --query-filter-btn-padding-y: var(--wp--preset--spacing--1);
    --query-filter-btn-padding-x: var(--wp--preset--spacing--2);
    --query-filter-btn-border-color: var(--button-border-color);
    --query-filter-btn-border-radius: var(--button-border-radius);
    --query-filter-btn-border-width: var(--button-border-width);
    --query-filter-btn-border-style: var(--button-border-style);
    --query-filter-btn-bg: var(--button-background-color);
    --query-filter-btn-color: var(--button-color);
    --query-filter-btn-font-size: var(--button-font-size);
    --query-filter-btn-font-weight: var(--button-font-weight);
    --query-filter-btn-transition: all 0.3s ease;

    /* === BUTTON – Hover === */
    --query-filter-btn-border-color-hover: var(--button-border-color-hover);

    /* === BUTTON – Aktiv === */
    --query-filter-btn-active-bg: var(--button-background-color-hover);
    --query-filter-btn-active-color: var(--button-color-hover);
    --query-filter-btn-active-border-color: var(--button-border-color-hover);
    --query-filter-btn-active-padding-right: var(--wp--preset--spacing--5);
    --query-filter-btn-active-close-size: var(--wp--preset--font-size--lg);
    --query-filter-btn-active-close-margin-right: var(--wp--preset--spacing--2);

    /* === BUTTON – "Alle" === */
    --query-filter-btn-all-bg: transparent;
    --query-filter-btn-all-border-width: var(--button-border-width);
    --query-filter-btn-all-border-style: var(--button-border-style);
    --query-filter-btn-all-border-color: transparent;
    --query-filter-btn-all-border-color-hover: var(--button-border-color-hover);
}

/* ============================================================================
   FILTER-WRAPPER
   ============================================================================ */

.wp-block-query-filters {
    margin: var(--query-filter-margin-vertical) 0 !important;
    display: flex;
    gap: var(--query-filter-gap);
    flex-wrap: wrap;
}

/* ============================================================================
   FILTER-BUTTON – Basis
   ============================================================================ */

.filter-button {
    position: relative;
    padding: var(--query-filter-btn-padding-y) var(--query-filter-btn-padding-x);
    border: var(--query-filter-btn-border-width) var(--query-filter-btn-border-style) var(--query-filter-btn-border-color);
    border-radius: var(--query-filter-btn-border-radius);
    cursor: pointer;
    display: block;
    background-color: var(--query-filter-btn-bg);
    color: var(--query-filter-btn-color);
    transition: var(--query-filter-btn-transition);
    font-size: var(--query-filter-btn-font-size);
    font-weight: var(--query-filter-btn-font-weight);
}

.filter-button:hover {
    border-color: var(--query-filter-btn-border-color-hover);
    background-color: var(--query-filter-btn-active-bg);
    color: var(--query-filter-btn-active-color);
}

/* ============================================================================
   FILTER-BUTTON – Aktiv-Zustand mit Schliessen-Icon
   ============================================================================ */

.filter-button.active {
    background-color: var(--query-filter-btn-active-bg);
    color: var(--query-filter-btn-active-color);
    border-color: var(--query-filter-btn-active-border-color);
    padding-right: var(--query-filter-btn-active-padding-right);
}

.filter-button.active::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    content: '×';
    margin-right: var(--query-filter-btn-active-close-margin-right);
    font-size: var(--query-filter-btn-active-close-size);
    font-weight: bold;
}

/* ============================================================================
   FILTER-BUTTON – "Alle"-Button (rahmenlos, hebt sich vom Rest ab)
   ============================================================================ */

.filter-button[data-term-id="all"] {
    background-color: var(--query-filter-btn-all-bg);
    border: var(--query-filter-btn-all-border-width) var(--query-filter-btn-all-border-style) var(--query-filter-btn-all-border-color);
}

.filter-button[data-term-id="all"]:hover {
    border-color: var(--query-filter-btn-all-border-color-hover);
}

/* ============================================================================
   PAGINATION – ausblenden wenn Ajax-Filtering aktiv
   Query-Block erhält die Klasse .wp-block-query-no-pagination per JS,
   sobald ein Filter aktiv ist.
   ============================================================================ */

.wp-block-query-no-pagination .wp-block-query-pagination,
.wp-block-query-no-pagination .wp-block-query-pagination-previous,
.wp-block-query-no-pagination .wp-block-query-pagination-next,
.wp-block-query-no-pagination [class*="pagination"],
.wp-block-query-no-pagination nav[aria-label*="Pagination"],
.wp-block-query-no-pagination nav[class*="pagination"] {
    display: none !important;
}

/* ============================================================================
   LOAD MORE – Button & Wrapper
   ============================================================================ */

.wp-block-query-load-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--wp--preset--spacing--6);
}

.wp-block-query-load-more-btn {
    cursor: pointer;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    background-color: var(--button-background-color);
    color: var(--button-color);
    border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
    border-radius: var(--button-border-radius);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-query-load-more-btn:hover:not(:disabled) {
    background-color: var(--button-background-color-hover);
    color: var(--button-color-hover);
    border-color: var(--button-border-color-hover);
}

.wp-block-query-load-more-btn:disabled,
.wp-block-query-load-more-btn.is-loading {
    opacity: 0.6;
    cursor: wait;
}