/* ============================================================================
   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); */
  /* Ohne Kreuz braucht der aktive Knopf rechts keinen Extraplatz. */
  --query-filter-btn-active-padding-right: var(--query-filter-btn-padding-x);
  /* --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); */
}
/* ============================================================================
   MEHR-LADEN-KNOPF (Figma 4331:800)
   ============================================================================ */

/* Stufe 3: Der Knopf gehoert dem Plugin und wird erst im Browser erzeugt - eine
   Block-Style-Variante greift darauf nicht. Die Werte kommen aus denselben
   Tokens wie der Outline-Button des Themes, den der Entwurf hier zeigt. */
.wp-block-query-load-more-btn {
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border: var(--button-border-width) var(--button-border-style) var(--button-outline-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-outline-background-color);
  color: var(--button-outline-color);
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
}

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

/* Stufe 3: Das Kreuz haengt als Pseudo-Element am Plugin-Knopf, dafuer gibt es keinen Schalter; aktiv genuegt die rote Flaeche. */
.filter-button.active::after {
  display: none;
}