/* ============================================================
   Glossar-Übersicht — Stylesheet des Kern-Blocks „schulsozialarbeit-ass/glossary-overview"
   (Seite /info/glossar/, SSA-63; löst SSA-5).

   Geladen per wp_enqueue_block_style() nur dort, wo der Block rendert (functions.php), ohne
   Abhängigkeit. Alle Regeln hängen am Wrapper .ssa-glossary-overview und treffen nichts anderes.
   Der Block gibt zwei Markups aus — beide aus Codeat Glossary, Klassen 1:1 aus dessen Quelltext:
   · --premium (mit Glossar-Lizenz): A–Z-Leiste .glossary-term-bar (role="navigation") und Liste
     .glossary-term-list > .glossary-block > h2/h3.glossary-letter + ul > li > .glossary-link-item,
     Varianten .summary und .grid.
   · --basic (ohne Lizenz): ul.glossary-terms-list > li > a.
   Codeats eigene Suche und das Akkordeon nutzt der Block nicht (Suche: Suchblock der Seite).

   Mobile-first (min-width), Touch-Ziele ≥ 44 px, Fokus sichtbar, prefers-reduced-motion.
   Farben nur aus Token — Text in brand-text, Flächen in brand. Kontraste (WCAG, aus den Token
   berechnet, hell / dunkel):
     Link brand-text auf surface 5,89 / 5,78 · auf card 6,37 / 5,37 · auf brand-subtle 5,69 / 4,89
     Buchstabe on-brand auf brand 6,37 / 5,01 · auf brand-strong (Hover) 10,10 / 6,46
     leerer Buchstabe muted auf card 5,37 / 6,27 · Überschrift ink auf surface 16,48 / 13,54
     Fokusring brand-text an surface 5,89 / 5,78, an card 6,37 / 5,37 (≥ 3)
     Buchstaben-Fläche brand gegen die Leiste (card) 6,37 / 4,06 (≥ 3)
   Rahmen im border-Token sind Schmuck (1,34 / 1,29), nie das einzige Erkennungsmerkmal.
   ============================================================ */

.ssa-glossary-overview {
  margin-block: var(--wp--preset--spacing--40, 2rem) 0;
}

/* Hinweis nur in der Editor-Vorschau (z. B. „erscheint mit Lizenz") — nie für Besucher. */
.ssa-glossary-overview .ssa-glossary-overview__note {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--sm, 8px);
  background: var(--wp--preset--color--accent-subtle);
  color: var(--wp--preset--color--text);
  font-size: var(--wp--preset--font-size--small);
}
.ssa-glossary-overview .ssa-glossary-overview__empty { margin: 0; color: var(--wp--preset--color--muted); }

/* ============================================
   A–Z-Leiste (mit Lizenz)
   Raster mit Zellen ≥ 2,75rem (44 px): bei 320 px fünf Buchstaben je Zeile, nie schmaler.
   ============================================ */
.ssa-glossary-overview .glossary-term-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  grid-auto-rows: 2.75rem;
  gap: .375rem;
  box-sizing: border-box;
  margin: 0 0 var(--wp--preset--spacing--40, 2rem);
  padding: .5rem;
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg, 18px);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.ssa-glossary-overview .glossary-link-initial-item,
.ssa-glossary-overview .glossary-no-link-initial-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
}
.ssa-glossary-overview .glossary-link-initial-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 44px;
  border-radius: var(--wp--custom--radius--sm, 8px);
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--on-brand);
  text-decoration: none;
  transition: background-color .15s ease;
}
.ssa-glossary-overview .glossary-link-initial-item a:hover {
  background: var(--wp--preset--color--brand-strong);
}
/* Buchstaben ohne Begriffe (nur mit „Buchstaben ohne Begriffe zeigen"): nicht bedienbar, gedämpft. */
.ssa-glossary-overview .glossary-no-link-initial-item {
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm, 8px);
  color: var(--wp--preset--color--muted);
  font-weight: 400;
}

@media (min-width: 900px) {
  .ssa-glossary-overview .glossary-term-bar { padding: .75rem; gap: .5rem; }
}

/* ============================================
   Begriffsliste (mit Lizenz)
   ============================================ */
.ssa-glossary-overview .glossary-term-list { margin: 0; }
.ssa-glossary-overview .glossary-block {
  padding-block: 1rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.ssa-glossary-overview .glossary-block:first-child { border-top: 0; padding-top: 0; }

/* Buchstabe als Überschrift (h2/h3). Die Sprungmarke landet unter der klebenden Kopfzeile:
   html hat scroll-padding-top (theme.css), dazu etwas Luft. */
.ssa-glossary-overview .glossary-letter {
  margin: 0;
  scroll-margin-top: 1rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
}

.ssa-glossary-overview .glossary-block ul {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
}
.ssa-glossary-overview .glossary-block li { margin: 0; }

/* Der Begriffslink selbst: ganze Zeile, ≥ 44 px hoch. */
.ssa-glossary-overview .glossary-link-item > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: .25rem;
  color: var(--wp--preset--color--brand-text);
  font-weight: 700;
  text-decoration: none;
}
.ssa-glossary-overview .glossary-link-item > a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Kurzbeschreibung (Option „Kurzbeschreibung"): Codeat setzt „ - " als Text zwischen Link und
   Beschreibung. Schriftgröße 0 am Eintrag lässt ihn verschwinden, die Kinder bekommen ihre Größe
   zurück; die Beschreibung steht darunter. */
.ssa-glossary-overview .glossary-link-item:has(.glossary-list-term-excerpt) { display: block; font-size: 0; }
.ssa-glossary-overview .glossary-link-item:has(.glossary-list-term-excerpt) > * { font-size: 1rem; }
.ssa-glossary-overview .glossary-list-term-excerpt {
  display: block;
  margin: 0 0 .75rem;
  color: var(--wp--preset--color--text);
  line-height: 1.6;
}
.ssa-glossary-overview .glossary-list-term-excerpt a { color: var(--wp--preset--color--brand-text); }

/* Liste in Spalten (Variante „Liste"); CSS-Spalten fließen von oben nach unten, die Lese- und
   Vorlesereihenfolge bleibt alphabetisch. */
@media (min-width: 600px) {
  .ssa-glossary-overview .glossary-term-list:not(.summary):not(.grid) .glossary-block ul { columns: 2; column-gap: 2rem; }
  .ssa-glossary-overview .glossary-term-list:not(.summary):not(.grid) .glossary-block li { break-inside: avoid; }
}
@media (min-width: 900px) {
  .ssa-glossary-overview .glossary-term-list:not(.summary):not(.grid) .glossary-block ul { columns: 3; }
}

/* Variante „summary": Buchstabe als Fläche links neben den Begriffen. */
.ssa-glossary-overview .glossary-term-list.summary .glossary-block {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ssa-glossary-overview .glossary-term-list.summary .glossary-letter {
  flex: 0 0 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--on-brand);
  font-size: 1.25rem;
  line-height: 1;
}
.ssa-glossary-overview .glossary-term-list.summary .glossary-block ul { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (min-width: 600px) {
  .ssa-glossary-overview .glossary-term-list.summary .glossary-block { gap: 1.5rem; }
  .ssa-glossary-overview .glossary-term-list.summary .glossary-letter { flex-basis: 3.5rem; width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
  .ssa-glossary-overview .glossary-term-list.summary .glossary-block ul { columns: 2; column-gap: 2rem; }
  .ssa-glossary-overview .glossary-term-list.summary .glossary-block li { break-inside: avoid; }
}

/* Variante „grid": Buchstaben-Kacheln. */
.ssa-glossary-overview .glossary-term-list.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.ssa-glossary-overview .glossary-term-list.grid .glossary-block {
  padding: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg, 18px);
  background: var(--wp--preset--color--card);
  overflow: hidden;
}
.ssa-glossary-overview .glossary-term-list.grid .glossary-letter {
  padding: .5rem 1rem;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--on-brand);
  font-size: 1.25rem;
}
.ssa-glossary-overview .glossary-term-list.grid .glossary-block ul { margin: .25rem 1rem .5rem; }

/* ============================================
   Einfache Liste (ohne Lizenz)
   ============================================ */
.ssa-glossary-overview .glossary-terms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-gap: 2rem;
}
.ssa-glossary-overview .glossary-terms-list > li {
  margin: 0;
  break-inside: avoid;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.ssa-glossary-overview .glossary-terms-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: .25rem;
  color: var(--wp--preset--color--brand-text);
  font-weight: 700;
  text-decoration: none;
}
.ssa-glossary-overview .glossary-terms-list a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (min-width: 600px) {
  .ssa-glossary-overview .glossary-terms-list { columns: 2; }
}
@media (min-width: 900px) {
  .ssa-glossary-overview .glossary-terms-list { columns: 3; }
}

/* ============================================
   Tastatur-Fokus (beide Ausgaben): 3 px brand-text, 2 px Abstand — wie sonst im Theme.
   ============================================ */
.ssa-glossary-overview a:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-text);
  outline-offset: 2px;
  border-radius: var(--wp--custom--radius--sm, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .ssa-glossary-overview .glossary-link-initial-item a { transition: none; }
}