/* === Chip component (UI.token.Chip from Figma 219:7898) ===
 *
 * Two variants:
 *   - filled (.lfdk-chip, .is-style-chip-filled)  — colored bg from --current-section
 *   - outline (.lfdk-chip--outline, .is-style-chip-outline) — border only
 *
 * Three sizes:
 *   - small  (.lfdk-chip--sm)  — 14px, cards/compact contexts
 *   - default                  — 18px, standard usage (single header)
 *   - large  (.lfdk-chip--lg)  — 24px, meta row / filters
 *
 * Color variables (set per color mode by SectionDetector / TermColorCollector):
 *   --chip-bg, --chip-text, --chip-border — filled variant
 *   Outline uses fixed neutral palette.
 *
 * Note: WP 6.9 post-terms renders links as bare <a rel="tag"> without
 * the __link BEM class. Selectors target both for compatibility.
 */

/* --- Base chip (filled, regular size) --- */

.lfdk-chip,
.is-style-chip-filled .wp-block-post-terms__link,
.wp-block-button.is-style-chip-filled .wp-block-button__link,
.is-style-chip-filled > a {
  display: inline-block;
  background-color: var(--chip-bg, var(--wp--preset--color--current-chip-bg, var(--wp--preset--color--primary-3)));
  color: var(--chip-text, var(--wp--preset--color--contrast));
  border: 1px solid var(--chip-border, transparent);
  font-family: var(--wp--preset--font-family--noah);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 16px;
}

/* Remove default term separator */
.is-style-chip-filled .wp-block-post-terms__separator,
.is-style-chip-filled > span {
  display: none;
}

/* Add gap between chips */
.is-style-chip-filled {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Hover for linked chips */
.lfdk-chip:hover,
.is-style-chip-filled .wp-block-post-terms__link:hover,
.wp-block-button.is-style-chip-filled .wp-block-button__link:hover,
.is-style-chip-filled > a:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* --- Outline variant --- */

.lfdk-chip--outline,
.is-style-chip-outline .wp-block-post-terms__link,
.wp-block-button.is-style-chip-outline .wp-block-button__link,
.is-style-chip-outline > a {
  display: inline-block;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--current-outline, var(--wp--preset--color--primary-2));
  font-family: var(--wp--preset--font-family--noah);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 16px;
}

.is-style-chip-outline .wp-block-post-terms__separator,
.is-style-chip-outline > span {
  display: none;
}

.is-style-chip-outline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lfdk-chip--outline:hover,
.is-style-chip-outline .wp-block-post-terms__link:hover,
.wp-block-button.is-style-chip-outline .wp-block-button__link:hover,
.is-style-chip-outline > a:hover {
  background-color: var(--wp--preset--color--base-1);
  text-decoration: none;
}

/* --- Active state (filter bar: currently selected term or "Alle") --- */

.lfdk-chip.is-active,
.lfdk-chip[aria-current="page"],
.lfdk-chip--outline.is-active,
.lfdk-chip--outline[aria-current="page"],
.is-style-chip-outline .wp-block-post-terms__link.is-active,
.is-style-chip-outline .wp-block-post-terms__link[aria-current="page"],
.is-style-chip-outline > a.is-active,
.is-style-chip-outline > a[aria-current="page"],
.wp-block-button.is-style-chip-filled .wp-block-button__link.is-active,
.wp-block-button.is-style-chip-filled .wp-block-button__link[aria-checked="true"],
.wp-block-button.is-style-chip-outline .wp-block-button__link.is-active,
.wp-block-button.is-style-chip-outline .wp-block-button__link[aria-checked="true"] {
  background-color: var(--wp--preset--color--current-section, var(--wp--preset--color--primary));
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--current-section, var(--wp--preset--color--primary));
  font-weight: 600;
}

.lfdk-chip.is-active:hover,
.lfdk-chip[aria-current="page"]:hover,
.lfdk-chip--outline.is-active:hover,
.lfdk-chip--outline[aria-current="page"]:hover,
.is-style-chip-outline .wp-block-post-terms__link.is-active:hover,
.is-style-chip-outline .wp-block-post-terms__link[aria-current="page"]:hover,
.is-style-chip-outline > a.is-active:hover,
.is-style-chip-outline > a[aria-current="page"]:hover,
.wp-block-button.is-style-chip-filled .wp-block-button__link.is-active:hover,
.wp-block-button.is-style-chip-filled .wp-block-button__link[aria-checked="true"]:hover,
.wp-block-button.is-style-chip-outline .wp-block-button__link.is-active:hover,
.wp-block-button.is-style-chip-outline .wp-block-button__link[aria-checked="true"]:hover {
  background-color: var(--wp--preset--color--current-section, var(--wp--preset--color--primary));
  color: var(--wp--preset--color--base);
  opacity: 0.85;
}

/* --- Size: small (cards, compact) --- */

.lfdk-chip--sm,
.lfdk-chip--sm.lfdk-chip--outline,
.lfdk-chip--sm .wp-block-post-terms__link,
.lfdk-chip--sm > a {
  font-size: var(--wp--preset--font-size--custom-1);
  line-height: 1.1;
  padding: 4px 8px;
  border-radius: 12px;
}

/* --- Size: large (meta row, filters) --- */

.lfdk-chip--lg,
.lfdk-chip--lg.lfdk-chip--outline,
.lfdk-chip--lg .wp-block-post-terms__link,
.lfdk-chip--lg > a,
.lfdk-filter-chips .wp-block-button__link {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.4;
  padding: 4px 16px;
  border-radius: 24px;
}

.lfdk-filter-chips.wp-block-besch-query-filter {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}

.lfdk-filter-chips .wp-block-besch-taxonomy__label {
  display: none;
}

.lfdk-filter-chips .wp-block-besch-taxonomy__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}