/**
 * Glossar-Archiv (Index-Seite)
 *
 * Definitionsliste gruppiert nach glossary_cat Hierarchie.
 * Kein Modal-System — eigenständige Seite mit Header/Footer.
 *
 * @package Werkstatt
 * @version 1.7.0
 * @ticket #518, #596, #618, #625, #619, #794
 * @changed 2026-08-24
 *
 * v1.7.0: #794 — Scope-Anker .page-glossary-archive → .glossary-archive
 *   umbenannt: der Name las sich wie eine Body-Klasse, ist aber eine geteilte
 *   Container-Klasse auf <main> über beide Glossar-Templates (archive-glossary,
 *   taxonomy-glossary_cat). Präfix in :where() gewickelt (0,2,0 → 0,1,0) —
 *   #787-Beleg Stufe 1 (Scope-Muster). Kommentar entschärft.
 * v1.6.0: #619 — Feedback David: Asterisk nur noch am Kategorie-h2 (raus aus
 *   den Verweis-Zeilen, dort trägt der Pfeil); Kategorie-Asterisk auf
 *   Versalhöhe skaliert und aufs Grundlinien-Band gesetzt.
 * v1.5.0: #619 — Verweis-Zeilen (Redirect-Terme aus _ws_index_refs) gestylt;
 *   UPPERCASE-Toggle am Kategorie-Titel entschieden: Normalschreibung
 *   (Kaltenbach-treu, David 2026-08-18).
 * v1.4.0: #619 — Kaltenbach-Register: vertikale Linie (border-left an .list) statt
 *   border-bottom am Kat-Titel; Kategorie grau + roter Asterisk (nur h2);
 *   Term-Gewicht als Term/Def-Kontrast. UPPERCASE als localhost-Toggle.
 * v1.3.0: #625 — .glossary-index-count entfernt (Glossar = Myzel, nicht Navigation).
 */

/* ========================================
   TITEL + LEAD
   ======================================== */

/* Scope-Anker: .glossary-archive ist eine geteilte Container-Klasse auf
 * <main>, gesetzt in archive-glossary.html UND taxonomy-glossary_cat.html.
 * Bewusst handgesetzt — keine native Body-Klasse spannt beide Templates
 * (CPT-Archiv trägt .post-type-archive-glossary, die Taxonomie nicht).
 * :where() hält den Anker spezifitätsfrei: .glossary-archive-title (0,1,0)
 * schlägt theme.json (:root :where(elements.h1), 0,0,0) schon allein — der
 * Scope kostet nichts, dient nur der Lesbarkeit. (#794, #787 Stufe 1) */
:where(.glossary-archive) .glossary-archive-title {
  font-family: var(--wp--preset--font-family--uni-neue);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--typography--letter-spacing--heading);
  line-height: 1.1;
}

:where(.glossary-archive) .glossary-archive-lead {
  font-style: italic;
  color: var(--wp--preset--color--dimmed);
}

/* ========================================
   KATEGORIEN (Sektionen)
   ======================================== */

.glossary-index {
  margin-bottom: var(--wp--preset--spacing--70);
}

.glossary-index-cat {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* #619 Kaltenbach: Kategorie = grau, Trenner wandert von border-bottom (raus)
 * zur vertikalen Linie an .glossary-index-list. Roter Asterisk nur auf h2. */
.glossary-index-cat-title {
  color: var(--wp--preset--color--dimmed);
  margin: 0 0 var(--wp--preset--spacing--20);

  /* --- UPPERCASE-TOGGLE (#619) — entschieden: AUS -------------------
   * Normalschreibung ist Kaltenbach-treu; der rote Asterisk trägt die
   * Sektionsmarkierung allein. (David, 2026-08-18 — an localhost gegen
   * beide Varianten entschieden.)
   *
   * `text-transform: none` ist nötig, nicht bloss Weglassen: theme.json
   * setzt elements.h2.textTransform = uppercase global, und der Kat-Titel
   * ist ein h2. Der Klassen-Selektor überschreibt die Element-Regel.
   *
   * Zurück auf Site-Look (Versalien): `none` → `uppercase` und
   * `letter-spacing: 0.06em` ergänzen. */
  text-transform: none;
}

/* Roter Asterisk als Kategorie-Marker (#619/#524). Vorerst Uni-Neue-Glyph "*"
 * in Akzentfarbe; Serif-Form ist spätere Option. Nur h2 (Top-Level).
 *
 * Der "*"-Glyph sitzt von Haus aus hoch und klein (Tintenband ~[0.36em,
 * 0.72em] über der Grundlinie, Höhe ~0.36em). David: gleich gross wie ein
 * Grossbuchstabe. Uni Neue hat Versalhöhe 0.715em → 2em skaliert die
 * Asterisk-Tinte auf ~Versalhöhe (per Canvas gemessen: 99 % Match), und
 * translateY(0.36em) schiebt das Band von [0.72,1.44]em auf ~[0,0.72]em,
 * also auf Grundlinie bis Versalhöhe. line-height:0 hält die Zeile ruhig. */
.glossary-index-cat-title::before {
  content: "*";
  color: var(--wp--preset--color--warning);
  display: inline-block;
  font-size: 2em;
  line-height: 0;
  transform: translate(-0.2em, 0.36em); /* #788: Asterisk mittig zur Vertikale, tunbar */
  margin-right: 0.5em; /* #788: H2-Text etwas nach rechts (Kaltenbach), tunbar */
}

/* ========================================
   UNTERKATEGORIEN
   ======================================== */

.glossary-index-subcat {
  margin-top: var(--wp--preset--spacing--30);
}

/* Gleiche Logik wie .glossary-index-cat-title: Normalschreibung (#619).
 * Wäre die Subkategorie versal, während die Kategorie normal steht, bräche
 * die Hierarchie optisch auseinander. theme.json setzt für h3 keine
 * Versalien; das explizite `none` löst die bisherige Uppercase-Regel ab und
 * hält die Absicht sichtbar. */
.glossary-index-subcat-title {
  text-transform: none;
  color: var(--wp--preset--color--dimmed);
  margin: 0 0 var(--wp--preset--spacing--10);
}

/* ========================================
   DEFINITIONSLISTE
   ======================================== */

.glossary-index-list {
  list-style: none;
  margin: 0;
  /* #619 Kaltenbach: vertikale Linie als Gruppierung (ersetzt border-bottom am Titel).
   * Farbe: warning (rot) — entschieden 2026-08-22 (David). Zurücksetzen:
   *   dezent (Ausgangswert)     → var(--wp--preset--color--dimmed)
   *   Mittelweg (dimmed, dünn)  → color-mix(in oklch, var(--wp--preset--color--dimmed), transparent 50%)
   * padding-bottom 0: Linie endet am letzten Eintrag statt mit Zipfel über das Polster. */
  border-left: 1px solid var(--wp--preset--color--warning);
  padding: 0 0 0 var(--wp--preset--spacing--20);
}

.glossary-index-item {
  padding: 0.25rem 0;
  line-height: 1.5;
}

/* Link: ganzes Item klickbar. Nur Layout.
 * Brutalist-A (main li a) greift, Idle-Tint via Token abgeschaltet
 * (--link-bg-opacity: 0 an .glossary-index), Hover-Swap bleibt.
 * Spans erben Farbe damit der Swap durchschlägt. */
.glossary-index-item .glossary-index-link {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  text-decoration: none;
}

/* Idle-Tint aus: Vererbung, Spezifität 0. Hover-Swap nutzt feste Farbe. */
.glossary-index { --link-bg-opacity: 0; }

/* Term: Stichwort — inherit für Swap */
.glossary-index-term {
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  /* #619 Kaltenbach: Term kräftiger als Definition — der Kontrast, den target.md
   * vermisste. Tunbar: 400 (dezent) … 600 (deutlich). body = 300. */
  font-weight: 500;
}

/* Opacity-Staffelung: visuelle Hierarchie innerhalb der Flex-Zeile.
 * Term (1.0) > Separator (0.5) ≈ Definition (0.5).
 * Hover hebt Definition auf 0.8 (lesbar, aber nicht dominant).
 * Brutalist-A Swap übernimmt die Farbinversion — opacity wird vererbt.
 * Keine Tokens: kontextspezifisch für dieses Archiv-Layout. */

/* Separator — inherit für Swap */
.glossary-index-sep {
  color: inherit;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Definition — inherit für Swap, idle gedämpft via opacity */
.glossary-index-def {
  color: inherit;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   VERWEISE (Redirect-Terme)
   #619 — „Löschkalk → Kalkhydrat". Eintrag ohne eigene Seite, zeigt auf den
   Haupteintrag. Quelle: _ws_index_refs (ws-lexikon), nicht _ws_synonyms —
   die bleiben Matching-Grundlage der Linkify-Engine.
   ======================================== */

/* Verweis-Begriff: aufrecht, gleiches Gewicht wie ein Eintrag (Analyse §1 —
 * im Buch ist der Querverweis roman, nicht kursiv). Kein Asterisk: der
 * bleibt dem Kategorie-h2 vorbehalten (David 2026-08-18). Der Pfeil → ist
 * der Verzweigungsmarker der Zeile. */
.glossary-index-ref {
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}

/* Pfeil + Ziel: gedämpft wie Separator/Definition, damit die Verweis-Zeile
 * im Satzbild leichter wiegt als ein echter Eintrag. */
.glossary-index-arrow,
.glossary-index-target {
  color: inherit;
  opacity: 0.5;
}

.glossary-index-arrow {
  flex-shrink: 0;
}

.glossary-index-target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   HOVER
   Dezent: nur Definition wird lesbarer.
   ======================================== */

.glossary-index-link:hover .glossary-index-def {
  opacity: 0.8;
}

.glossary-index-link:hover .glossary-index-arrow,
.glossary-index-link:hover .glossary-index-target {
  opacity: 0.8;
}

/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 781px) {
  /* Definition ausblenden: nur Terms, kompakter.
   * Verweise behalten Pfeil + Ziel — ohne die wäre die Zeile sinnlos
   * (ein Verweis ohne Ziel ist ein Eintrag, der ins Leere zeigt). */
  .glossary-index-sep,
  .glossary-index-def {
    display: none;
  }

  .glossary-index-link {
    display: block;
  }

  .glossary-index-item {
    padding: 0.35rem 0;
  }
}