/*
Theme Name: Tur Abdin Neuburg
Theme URI: https://turabdin-neuburg.de/
Author: Tur Abdin e.V. Neuburg an der Donau
Description: Block-Theme für den Tur Abdin Kulturverein e.V. Neuburg an der Donau. Editorialer Aufbau für Vereins- und Kulturinhalte, Bildarchiv und Aktuelles. Ohne externe Schriften, Skripte oder Tracker.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: turabdin
Tags: block-theme, full-site-editing, editorial, accessibility-ready
*/

/* Nur, was theme.json nicht abbilden kann. */

/* Sichtbarer Fokus überall, auch bei Mausklick-Themes. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Sprungziele werden nur per Skript fokussiert, nie mit dem Tabulator
   erreicht. Ein Rahmen um den ganzen Abschnitt wäre dort nur Lärm. */
:where([tabindex="-1"]):focus-visible {
  outline: none;
}

/* Sprunglink zum Inhalt */
.turabdin-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--tinte);
  color: var(--wp--preset--color--basis);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  text-decoration: none;
}
.turabdin-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Navigation: Unterstreichung wächst statt zu springen */
.wp-block-navigation .wp-block-navigation-item__content {
  padding-block: 0.65rem;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  border-bottom-color: var(--wp--preset--color--akzent);
}

/* Lesetext: großzügige Absätze, keine zu langen Zeilen */
.turabdin-lesetext > p {
  margin-block: 0 1.15em;
  hyphens: auto;
}
.turabdin-lesetext > h2 { margin-block: 1.8em 0.5em; }
.turabdin-lesetext > h3 { margin-block: 1.5em 0.4em; }

/* Erste Zeile eines Fließtextes leicht hervorheben */
.turabdin-vorspann {
  font-size: var(--wp--preset--font-size--gross);
  line-height: 1.55;
  color: var(--wp--preset--color--grau);
}

/* Bildarchiv: einheitliche Kacheln, Bildunterschrift außerhalb */
.turabdin-galerie .wp-block-image img,
.turabdin-galerie .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wp--preset--color--gedaempft);
  border: 1px solid var(--wp--preset--color--rand);
}
.turabdin-galerie .wp-block-image {
  margin: 0;
}
.turabdin-galerie .wp-block-image a:hover img,
.turabdin-galerie .wp-block-post-featured-image a:hover img {
  border-color: var(--wp--preset--color--akzent);
}

/* Übersicht der Bildsammlungen: Bild links, Text rechts, dünne Trennlinien.
   Wächst mit – jede weitere Unterseite des Bildarchivs reiht sich ein. */
.turabdin-sammlungen .wp-block-post {
  border-top: 1px solid var(--wp--preset--color--rand);
}
.turabdin-sammlungen .wp-block-post:last-child {
  border-bottom: 1px solid var(--wp--preset--color--rand);
}
.turabdin-sammlungen .wp-block-post > .wp-block-group > :last-child {
  flex: 1 1 18rem;
}
.turabdin-sammlungen .wp-block-post-featured-image {
  margin: 0;
  flex: 0 0 auto;
}
.turabdin-sammlungen .wp-block-post-featured-image img {
  border: 1px solid var(--wp--preset--color--rand);
  background: var(--wp--preset--color--gedaempft);
}
.turabdin-sammlungen .wp-block-post-featured-image a:hover img {
  border-color: var(--wp--preset--color--akzent);
}

/* Historische Aufnahmen dürfen etwas ruhiger stehen */
.turabdin-galerie--historisch .wp-block-image img {
  background: var(--wp--preset--color--dunkel);
}

/* Beitragslisten: dünne Trennlinien statt Karten-Schatten */
.turabdin-liste .wp-block-post {
  padding-block: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--rand);
}
.turabdin-liste .wp-block-post:last-child {
  border-bottom: 1px solid var(--wp--preset--color--rand);
}

/* Rubriken-Markierung */
.turabdin-rubrik a {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--gold);
}
.turabdin-rubrik a:hover { color: var(--wp--preset--color--akzent); }

/* Gedenkabschnitt: dunkel, ohne Effekthascherei */
.turabdin-gedenken {
  border-left: 3px solid var(--wp--preset--color--akzent);
}

/* Bilder nie ohne reservierten Platz */
img { height: auto; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Listen im Lesetext brauchen denselben Abstand wie Absätze */
.turabdin-lesetext > ul,
.turabdin-lesetext > ol {
  margin-block: 0 1.15em;
  padding-inline-start: 1.5em;
}
.turabdin-lesetext > ul li,
.turabdin-lesetext > ol li {
  margin-block-end: 0.4em;
}

/* Navigation bleibt rechts, auch wenn sie auf eine eigene Zeile umbricht.
   Der Selektor muss spezifischer sein als die Layoutregel von WordPress,
   sonst greift die Ausrichtung nicht. */
header .wp-block-group > .wp-block-navigation {
  margin-inline-start: auto;
}

/* Menüknopf auf Tippgröße bringen – das Symbol allein misst nur 24 Pixel. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* Vergrößerte Bilder vor dunklem Grund – ruhiger für Fotos */
.wp-lightbox-overlay .scrim {
  background-color: var(--wp--preset--color--dunkel) !important;
  opacity: 0.96;
}
.wp-lightbox-overlay button {
  /* WordPress setzt fill per style-Attribut, deshalb !important. */
  fill: var(--wp--preset--color--basis) !important;
  color: var(--wp--preset--color--basis);
}

/* Vier neueste Schwerpunkte-Beiträge spaltenweise füllen: neuester oben
   links, zweiter darunter, dritter oben rechts, vierter unten rechts. */
.turabdin-schwerpunkte-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: var(--wp--preset--spacing--40);
}
.turabdin-schwerpunkte-raster > li {
  align-self: stretch;
  height: 100%;
  margin-top: 0 !important;
}
.turabdin-schwerpunkte-raster > li > * {
  height: 100%;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .turabdin-schwerpunkte-raster {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* Auf schmalen Bildschirmen steht das Vorschaubild über dem Text
   und nutzt die volle Breite. */
@media (max-width: 600px) {
  .turabdin-sammlungen .wp-block-post-featured-image,
  .turabdin-sammlungen .wp-block-post-featured-image img {
    width: 100% !important;
    max-width: 100%;
  }
  .turabdin-sammlungen .wp-block-post-featured-image img {
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}

/* Kontaktformular – gleiche Anmutung wie das Kommentarformular */
.turabdin-formular .turabdin-feld {
  margin-block: 0 var(--wp--preset--spacing--30);
}
.turabdin-formular label {
  display: block;
  margin-block-end: 0.35rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
}
/* Alle Texteingaben, nicht nur die heute bekannten Typen. */
.turabdin-formular input:not([type="checkbox"]):not([type="hidden"]),
.turabdin-formular textarea {
  width: 100%;
  /* Ohne border-box zählen Innenabstand und Rahmen obendrauf – auf dem
     Telefon stand das Formular dadurch über den Bildschirmrand hinaus. */
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--wp--preset--color--rand);
  border-radius: 2px;
  background: var(--wp--preset--color--flaeche);
  color: var(--wp--preset--color--tinte);
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--basis);
  line-height: 1.5;
}
.turabdin-formular textarea {
  resize: vertical;
  min-height: 10rem;
}
.turabdin-formular [aria-invalid="true"] {
  border-color: var(--wp--preset--color--akzent);
}
.turabdin-formular .turabdin-feldfehler {
  display: block;
  margin-block-start: 0.35rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--klein);
  color: var(--wp--preset--color--akzent);
}
.turabdin-formular .turabdin-feld--zustimmung label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  line-height: 1.5;
}
.turabdin-formular .turabdin-feld--zustimmung input {
  /* Antippbar auch auf dem Telefon */
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.15rem;
}
.turabdin-formular .turabdin-absenden {
  margin-block: var(--wp--preset--spacing--30) 0;
}
.turabdin-formular button {
  cursor: pointer;
  border: 0;
}

/* Nur für Bots gedacht, deshalb vollständig aus dem Fluss genommen */
.turabdin-honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turabdin-hinweis {
  margin-block-end: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--gedaempft);
  border-left: 3px solid var(--wp--preset--color--gold);
}
.turabdin-hinweis--fehler {
  border-left-color: var(--wp--preset--color--akzent);
}
.turabdin-hinweis--erfolg {
  border-left-color: var(--wp--preset--color--gold);
}
.turabdin-hinweis p {
  margin-block: 0 0.5em;
}
.turabdin-hinweis p:last-child {
  margin-block-end: 0;
}

/* Eigennamen und Abkürzungen nicht trennen – "STRA-TO" liest sich falsch */
.turabdin-eigenname {
  hyphens: none;
}

/* Startseite: Textblöcke beginnen an derselben Kante wie die breiten
   Bildreihen. Die Zeilenlänge bleibt begrenzt – über etwa 46rem wird
   Fließtext mühsam zu lesen. */
.turabdin-textbreit > * {
  max-width: 54rem;
}

.turabdin-textbreit > p {
  max-width: 46rem;
}

/* Aktuelles auf der Startseite: News und Veranstaltungen stehen in zwei
   Spalten, jede mit eigener Kopfkante. Die Farbe der Kante ist das
   Unterscheidungsmerkmal – Gold für Termine, Akzent für Nachrichten. */
.turabdin-rubrikkopf > * {
  margin-block: 0;
}

.turabdin-rubrikkopf p {
  max-width: 24rem;
}

/* --- Rubriken auf einen Blick unterscheidbar --- */

/* Filterzeile über der Beitragsliste: die aktuelle Auswahl ist markiert.
   Welche das ist, verrät die body-Klasse von WordPress – kein PHP nötig. */
.turabdin-rubrikfilter a {
  font-family: var(--wp--preset--font-family--sans);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--wp--preset--color--grau);
  padding-block-end: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.turabdin-rubrikfilter a:hover {
  color: var(--wp--preset--color--tinte);
  border-bottom-color: var(--wp--preset--color--rand);
}
body.blog .turabdin-rubrikfilter a[href="/aktuelles/"],
body.category-news .turabdin-rubrikfilter a[href="/rubrik/news/"],
body.category-veranstaltungen .turabdin-rubrikfilter a[href="/rubrik/veranstaltungen/"] {
  color: var(--wp--preset--color--tinte);
  border-bottom-color: var(--wp--preset--color--akzent);
  font-weight: 500;
}

/* Rubrikmarkierung am Beitrag: eigene Farbe je Rubrik, dazu ein Punkt.
   Die Farbe ist Zugabe – die Bedeutung steht immer als Wort daneben. */
.turabdin-rubrik a::before {
  content: "";
  display: inline-block;
  inline-size: 0.45em;
  block-size: 0.45em;
  margin-inline-end: 0.45em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.1em;
}
.category-veranstaltungen .turabdin-rubrik a {
  color: var(--wp--preset--color--akzent);
}
.category-news .turabdin-rubrik a {
  color: var(--wp--preset--color--blau);
}

/* Veranstaltungen bekommen zusätzlich eine Kante, damit sie sich beim
   Überfliegen einer langen Liste abheben. */
.turabdin-liste .wp-block-post.category-veranstaltungen {
  border-inline-start: 2px solid var(--wp--preset--color--akzent);
  padding-inline-start: var(--wp--preset--spacing--30);
}
.turabdin-liste .wp-block-post.category-news {
  border-inline-start: 2px solid var(--wp--preset--color--blau);
  padding-inline-start: var(--wp--preset--spacing--30);
}

/* Rubriküberschriften auf der Startseite tragen denselben Farbpunkt wie die
   Markierung am Beitrag – so bedeutet Rot überall dasselbe. */
.turabdin-rubriktitel::before {
  content: "";
  display: inline-block;
  inline-size: 0.4em;
  block-size: 0.4em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  vertical-align: 0.18em;
}
.turabdin-rubriktitel--veranstaltungen::before { background: var(--wp--preset--color--akzent); }
.turabdin-rubriktitel--news::before            { background: var(--wp--preset--color--blau); }

/* Aktuelles auf der Startseite passt sich der Belegung an.
   Leere Rubrikspalte fällt weg, die verbleibende füllt die Breite; sind beide
   leer, verschwindet der ganze Abschnitt. Ohne :has() – also in sehr alten
   Browsern – bleibt es beim bisherigen Verhalten mit Platzhaltertext. */
.turabdin-rubrikspalte {
  flex-grow: 1;
}
.turabdin-rubrikspalte:not(:has(.wp-block-post)) {
  display: none;
}
.turabdin-aktuelles:not(:has(.wp-block-post)) {
  display: none;
}

/* Füllt eine Rubrik allein die Breite, bleibt der Text trotzdem lesbar.
   36rem liegt über der Breite einer halben Spalte, im Zweispalter greift
   die Regel also nicht. */
.turabdin-rubrikspalte .wp-block-post {
  max-inline-size: 36rem;
}

/* Formulargruppen und Feldpaare */
.turabdin-formular fieldset {
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 0;
  border: 0;
}
.turabdin-formular legend {
  padding: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grau);
}
.turabdin-feldpaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 var(--wp--preset--spacing--30);
}
.turabdin-feldpaar--plz {
  grid-template-columns: minmax(7rem, 1fr) minmax(12rem, 2fr);
}
@media (max-width: 30rem) {
  .turabdin-feldpaar--plz { grid-template-columns: 1fr; }
}

/* --- Kopfbereich bleibt stehen und wird beim Scrollen kompakter --- */

/* Sticky gehört an den Vorlagenteil, nicht an die Gruppe darin: die Gruppe ist
   genauso hoch wie ihr Elter und könnte darin gar nicht kleben bleiben. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Ohne eigenen Grund scheint der Inhalt durch. */
  background: var(--wp--preset--color--basis);
}

/* Sprungmarken und Tastaturfokus dürfen nicht unter dem Kopf verschwinden. */
html {
  scroll-padding-top: 6rem;
}

/* Das Verkleinern hängt am Scrollstand, nicht an einem Skript. Browser ohne
   scroll()-Zeitleiste zeigen den Kopf unverändert – er bleibt trotzdem stehen. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes turabdin-kopf-kompakt {
      to {
        padding-block: 0.4rem;
        box-shadow: 0 1px 0 var(--wp--preset--color--rand);
      }
    }
    @keyframes turabdin-untertitel-aus {
      to {
        opacity: 0;
        max-block-size: 0;
      }
    }
    @keyframes turabdin-logo-kompakt {
      to { inline-size: 46px; }
    }
    @keyframes turabdin-titel-kompakt {
      to { font-size: var(--wp--preset--font-size--gross); }
    }

    header.wp-block-template-part > .wp-block-group,
    header .wp-block-site-tagline,
    header .wp-block-site-title,
    header .wp-block-site-logo img {
      animation: linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 140px;
    }
    header.wp-block-template-part > .wp-block-group { animation-name: turabdin-kopf-kompakt; }
    header .wp-block-site-tagline  { animation-name: turabdin-untertitel-aus; overflow: hidden; }
    header .wp-block-site-logo img { animation-name: turabdin-logo-kompakt; }
    header .wp-block-site-title    { animation-name: turabdin-titel-kompakt; }
  }
}

/* Tap-Ziele: PageSpeed bemängelt zu kleine Trefferflächen bei den
   <br>-getrennten Fußzeilen-Links. */
.turabdin-fusslinks a {
  display: inline-block;
  padding-block: 0.5rem;
}