/* ══ Select-Listen im BRACE-Look ══════════════════════════════════════════
   Gilt nur für <select class="js-custom-select">. Den geschlossenen Zustand
   (Unterstrich, Pfeil, Kupfer bei gesetztem Filter) stylt weiter die Section
   selbst; hier geht es um die aufgeklappte Liste.

   - Chrome/Edge ab 135: appearance: base-select, die Liste ist dann normales
     HTML und trägt den Look unten.
   - Safari/Firefox: native Liste, der geschlossene Zustand sieht trotzdem
     gleich aus.
   - Touch-Geräte: immer die native Auswahl des Systems.

   Ein Select aktivieren: Klasse js-custom-select setzen, es muss in einem
   .filters-Container stehen, und die Seite muss den Style-Handle
   brace-select laden (block.json "style" oder wp_enqueue_style, siehe
   inc/assets.php).

   Tom Select nachrüsten, falls die Liste auch in Safari/Firefox gleich
   aussehen soll: lokal unter assets/vendor/tom-select/, nur laden und
   initialisieren, wenn CSS.supports('appearance', 'base-select') false ist
   und (hover: hover) and (pointer: fine) gilt, auf dieselbe Klasse. Die
   Filter-Skripte hören auf change am echten <select>, das Tom Select
   weiter auslöst. Sobald alle Browser base-select können, fällt Tom Select
   wieder weg; diese Datei bleibt.

   Alle Filter stehen auf dunklem Grund, die Liste ist deshalb dunkel.
   Die Selektoren tragen body und .filters, weil die Sections selbst mit
   zwei Klassen appearance: none und für die native (helle) Liste
   color: var(--ink) an den Optionen setzen. ════════════════ */

@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    body .filters select.js-custom-select,
    body .filters select.js-custom-select::picker(select) { appearance: base-select; }

    /* Den Pfeil zeichnet die Section (Hintergrundbild bzw. .chev). */
    body .filters select.js-custom-select::picker-icon { display: none; }

    /* base-select macht das Select zu inline-flex mit align-items: normal,
       der Wert rutscht dann an die Oberkante, während der Pfeil der Section
       mittig bleibt. center stellt die native Lage wieder her. */
    body .filters select.js-custom-select { width: 100%; align-items: center; }

    body .filters select.js-custom-select::picker(select) {
      min-inline-size: anchor-size(self-inline);
      max-block-size: min(360px, 60vh);
      margin-block: 6px;
      padding: 6px 0;
      overflow-y: auto;
      background: #313437;
      border: 1px solid var(--line-dark);
      border-radius: 0;
      box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
      color: #fff;
    }

    body .filters select.js-custom-select option {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px;
      font: inherit; font-size: 15px; font-weight: 500;
      color: #fff; background: transparent;
      cursor: pointer;
    }
    body .filters select.js-custom-select option::checkmark { display: none; }
    body .filters select.js-custom-select option:hover,
    body .filters select.js-custom-select option:focus-visible {
      background: rgba(255, 255, 255, .08); color: #fff; outline: none;
    }
    body .filters select.js-custom-select option:checked { color: var(--copper); }
    body .filters select.js-custom-select option:disabled {
      color: var(--grey-60); background: transparent; cursor: default;
    }
  }
}