/* ============================================================
   Rellicon Filter - default styles
   ------------------------------------------------------------
   Alles is gescoped op .rlc-wc-filter en elke visuele waarde
   loopt via een --wcf-* custom property. Een host-theme maakt de
   filter passend met een enkel CSS-bestand dat alleen die
   properties overschrijft; hieronder staan verder geen losse
   kleuren of maten.

   De toegankelijkheidsondergrenzen zitten in de defaults zelf:
   body-tekst 17px, tap-targets 44x44px en een zichtbare
   focus-ring. Overschrijf ze alleen omhoog.
   ============================================================ */

.rlc-wc-filter {
  /* Layout */
  --wcf-gap: 1.5rem;
  --wcf-gap-small: 0.75rem;
  --wcf-columns: 3;
  --wcf-column-min: 15rem;
  --wcf-radius: 0.75rem;
  --wcf-control-size: 44px; /* AA: minimale tap-target */
  --wcf-control-padding: 0.5rem 0.875rem;

  /* Typografie */
  --wcf-font-family: inherit;
  --wcf-font-size-base: 1.0625rem; /* AA: 17px ondergrens */
  --wcf-font-size-legend: 1.0625rem;
  --wcf-line-height: 1.5;
  --wcf-legend-weight: 600;
  --wcf-text-color: #1c2530;
  --wcf-muted-color: #4a5563;

  /* Vlakken en randen */
  --wcf-bg: transparent;
  --wcf-control-bg: #ffffff;
  --wcf-border-color: rgba(28, 37, 48, 0.18);
  --wcf-border-width: 1px;

  /* Interactie */
  --wcf-accent: #1c2530;
  --wcf-hover-bg: rgba(28, 37, 48, 0.06);
  --wcf-focus-ring: 0 0 0 3px rgba(28, 37, 48, 0.45);
  --wcf-disabled-opacity: 0.5;
  --wcf-transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);

  background: var(--wcf-bg);
  color: var(--wcf-text-color);
  display: flex;
  flex-direction: column;
  font-family: var(--wcf-font-family);
  font-size: var(--wcf-font-size-base);
  gap: var(--wcf-gap);
  line-height: var(--wcf-line-height);
}

.rlc-wc-filter *,
.rlc-wc-filter *::before,
.rlc-wc-filter *::after {
  box-sizing: border-box;
}

/* ---------- Controls ---------- */

.rlc-wc-filter__controls {
  display: flex;
  flex-direction: column;
  gap: var(--wcf-gap);
  margin: 0;
}

.rlc-wc-filter__group {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wcf-gap-small);
  margin: 0;
  padding: 0;
}

.rlc-wc-filter__legend {
  font-size: var(--wcf-font-size-legend);
  font-weight: var(--wcf-legend-weight);
  padding: 0;
}

.rlc-wc-filter__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wcf-gap-small);
}

/* Het hele label is de tap-target, niet alleen het vakje. */
.rlc-wc-filter__option {
  align-items: center;
  background: var(--wcf-control-bg);
  border: var(--wcf-border-width) solid var(--wcf-border-color);
  border-radius: var(--wcf-radius);
  cursor: pointer;
  display: inline-flex;
  gap: var(--wcf-gap-small);
  min-height: var(--wcf-control-size);
  min-width: var(--wcf-control-size);
  padding: var(--wcf-control-padding);
  transition: background var(--wcf-transition), border-color var(--wcf-transition);
}

.rlc-wc-filter__option:hover {
  background: var(--wcf-hover-bg);
}

.rlc-wc-filter__option:has(.rlc-wc-filter__input:checked) {
  border-color: var(--wcf-accent);
}

.rlc-wc-filter__input {
  accent-color: var(--wcf-accent);
  height: 1.125rem;
  margin: 0;
  width: 1.125rem;
}

/* De focus-ring hangt aan het label, want dat is het vlak dat de bezoeker
   ziet wanneer het kleine vakje focus krijgt. Browsers zonder :has vallen
   hieronder terug op een ring om het vakje zelf, zodat er nooit twee ringen
   tegelijk staan en er nooit geen. */
.rlc-wc-filter__option:has(.rlc-wc-filter__input:focus-visible),
.rlc-wc-filter__select:focus-visible,
.rlc-wc-filter__reset:focus-visible,
.rlc-wc-filter__page:focus-visible,
.rlc-wc-filter__tile-link:focus-visible {
  box-shadow: var(--wcf-focus-ring);
  outline: none;
}

@supports not selector(:has(*)) {
  .rlc-wc-filter__input:focus-visible {
    box-shadow: var(--wcf-focus-ring);
    outline: none;
  }
}

.rlc-wc-filter__option-label {
  font-size: var(--wcf-font-size-base);
}

/* ---------- Sorteren ---------- */

.rlc-wc-filter__sorting {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wcf-gap-small);
}

.rlc-wc-filter__sorting-label {
  font-weight: var(--wcf-legend-weight);
}

.rlc-wc-filter__select {
  background: var(--wcf-control-bg);
  border: var(--wcf-border-width) solid var(--wcf-border-color);
  border-radius: var(--wcf-radius);
  color: inherit;
  font-family: inherit;
  font-size: var(--wcf-font-size-base);
  min-height: var(--wcf-control-size);
  min-width: var(--wcf-control-size);
  padding: var(--wcf-control-padding);
}

/* ---------- Toolbar ---------- */

/* Sorteren en de reset-knop op een rij; bij weinig ruimte wikkelen ze
   vanzelf onder elkaar. */
.rlc-wc-filter__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wcf-gap-small) var(--wcf-gap);
}

/* ---------- Knoppen ---------- */

.rlc-wc-filter__actions {
  display: flex;
  gap: var(--wcf-gap-small);
}

.rlc-wc-filter__reset,
.rlc-wc-filter__page {
  background: var(--wcf-control-bg);
  border: var(--wcf-border-width) solid var(--wcf-border-color);
  border-radius: var(--wcf-radius);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--wcf-font-size-base);
  min-height: var(--wcf-control-size);
  min-width: var(--wcf-control-size);
  padding: var(--wcf-control-padding);
  transition: background var(--wcf-transition);
}

.rlc-wc-filter__reset:hover,
.rlc-wc-filter__page:hover:not([disabled]) {
  background: var(--wcf-hover-bg);
}

.rlc-wc-filter__page[disabled] {
  cursor: default;
  opacity: var(--wcf-disabled-opacity);
}

/* ---------- Resultaten ---------- */

.rlc-wc-filter__region {
  display: flex;
  flex-direction: column;
  gap: var(--wcf-gap-small);
}

.rlc-wc-filter__status {
  color: var(--wcf-muted-color);
  font-size: var(--wcf-font-size-base);
  margin: 0;
}

.rlc-wc-filter__region[aria-busy='true'] .rlc-wc-filter__grid {
  opacity: var(--wcf-disabled-opacity);
  transition: opacity var(--wcf-transition);
}

.rlc-wc-filter__results {
  display: grid;
  gap: var(--wcf-gap);
  /* Mobiel: een kolom die meegroeit. De kolomtelling komt er pas bij
     zodra er ruimte voor is. */
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .rlc-wc-filter__results {
    grid-template-columns: repeat(
      var(--wcf-columns),
      minmax(min(var(--wcf-column-min), 100%), 1fr)
    );
  }

  /* ---------- Masonry ---------- */

  /* De masonry-stand (layout="masonry"): kaarten houden hun eigen hoogte en
     schuiven in elkaar zonder gaten, in plaats van dat de langste kaart de
     hele rij oprekt. De basis is CSS multi-column: overal ondersteund. Waar
     de browser echte grid-masonry kent, wint die: de leesvolgorde blijft dan
     per rij in plaats van per kolom. Mobiel blijft het gewone
     een-koloms-grid en doet deze stand niets. */
  .rlc-wc-filter--masonry .rlc-wc-filter__results {
    display: block;
    columns: var(--wcf-columns);
    column-gap: var(--wcf-gap);
  }

  /* Expliciet block: een item kan een anchor zijn en een inline element
     fragmenteert vrijelijk over kolommen heen, waar break-inside niets
     tegen doet. In het gewone grid speelt dit niet (grid-items worden
     geblockificeerd), hier wel. */
  .rlc-wc-filter--masonry .rlc-wc-filter__results > * {
    break-inside: avoid;
    display: block;
    margin-block-end: var(--wcf-gap);
  }

  .rlc-wc-filter--masonry .rlc-wc-filter__item--heading {
    column-span: all;
  }

  @supports (grid-template-rows: masonry) {
    .rlc-wc-filter--masonry .rlc-wc-filter__results {
      columns: auto;
      display: grid;
      grid-template-columns: repeat(
        var(--wcf-columns),
        minmax(min(var(--wcf-column-min), 100%), 1fr)
      );
      grid-template-rows: masonry;
    }

    .rlc-wc-filter--masonry .rlc-wc-filter__results > * {
      margin-block-end: 0;
    }
  }
}

/* Eigen items uit rlc_wc_filter_items. Een item zonder sleutel is een
   tussenkopje en hoort over de volle breedte te staan, niet in een kolom. */
.rlc-wc-filter__item--heading {
  grid-column: 1 / -1;
}

.rlc-wc-filter__tile-title {
  font-size: var(--wcf-font-size-base);
  margin: 0.5rem 0 0;
}

.rlc-wc-filter__tile-link {
  color: inherit;
  display: block;
  text-decoration: none;
}

.rlc-wc-filter__no-results {
  color: var(--wcf-muted-color);
}

/* ---------- Paginering ---------- */

.rlc-wc-filter__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wcf-gap-small);
}

.rlc-wc-filter__pagination[hidden] {
  display: none;
}

.rlc-wc-filter__page-status {
  color: var(--wcf-muted-color);
}

/* ---------- Melding ---------- */

.rlc-wc-filter__notice {
  color: var(--wcf-muted-color);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rlc-wc-filter * {
    transition: none;
  }
}