/* ============================================================
   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 {
	margin: var(--query-filter-margin-vertical) 0 !important;
	display: flex;
	gap: var(--query-filter-gap);
	flex-wrap: wrap;


	/* === 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
   ============================================================ */


/* ============================================================
   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: 700;
}

/* ============================================================
   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:disabled,
.wp-block-query-load-more-btn.is-loading {
	opacity: 0.6;
	cursor: wait;
}

.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);
}