/*
Theme Name: BSW NRW
Theme URI: https://bsw-vg.nrw/
Description: Child-Theme für das BSW NRW, basierend auf Twenty Twenty-Five. Entwickelt, um die spezifischen Design-Richtlinien des BSW umzusetzen.
Author: Frank Kemper
Author URI: https://bsw-vg.nrw/
Template: twentytwentyfive
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bsw-nrw
Tags: child-theme, block-theme, two-columns, left-sidebar, right-sidebar, accessibility-ready

Dies ist ein Child-Theme von Twenty Twenty-Five.
Twenty Twenty-Five ist ein Theme von WordPress.org. (https://wordpress.org/themes/twentytwentyfive/)
*/

/*--------------------------------------------------------------
>>> Inhaltsverzeichnis:
----------------------------------------------------------------
1.0 Globale Stile
  1.1 Schriftschnitte nach Gestaltungsrichtlinie Punkt 2c
  1.2 Farbverlauf-Balken (Einzeln)
  1.3 Gestapelter Farbverlauf-Balken für Titel
  1.4 Trennelement mit Farbverlauf
  1.5 Header-Navigation Hover-Effekt und Aktiver Punkt
  1.6 Balken-Element nach Gestaltungsrichtlinie Punkt 2d
  1.7 Beitragsliste — Kartenansicht
  1.8 Beitragstitel in der Liste farbig
  1.9 Weitere benutzerdefinierte CSS-Anpassungen

Vergebbare CSS-Klassen (im Editor unter "Erweitert"):
  bsw-schlagzeile          Heavy Condensed, Schlagzeilenschrift
  bsw-schlagzeile-schraeg  dieselbe mit -8 Grad Neigung
  bsw-balken               Balkenelement hinter der Schrift, 64 % Deckkraft
  bsw-balken is-deckend    dasselbe deckend, mit weißer Schrift

--------------------------------------------------------------
1.0 Globale Stile
--------------------------------------------------------------*/

/*
  Hinweis: Für Block-Themes wie Twenty Twenty-Five werden die meisten Stile
  (Farben, Typografie, Layout) über die theme.json-Datei gesteuert.
  Diese style.css dient primär den Theme-Header-Informationen und
  kann für zusätzliche, manuelle CSS-Anpassungen verwendet werden,
  die nicht über theme.json abgedeckt werden oder spezifische
  Overrides erfordern.
*/

/*--------------------------------------------------------------
1.1 Schriftschnitte nach Gestaltungsrichtlinie Punkt 2c
--------------------------------------------------------------*/
/*
  Die Richtlinie unterscheidet drei Einsatzzwecke:

    Schlagzeilen (Headlines)  Helvetica Neue LT Heavy Condensed (87),
                              oft mit -8 Grad Neigung für mehr Dynamik
    Überschriften & Sublines  Helvetica Neue LT Heavy (85)
    Fließtexte (Body)         Helvetica Neue LT Roman (55)

  Die beiden letzten regelt die theme.json bereits global. Für die
  Schlagzeile stehen hier zwei Klassen bereit, die im Editor unter
  "Erweitert -> Zusätzliche CSS-Klasse(n)" vergeben werden.

  Bewusst NICHT global auf h1 gelegt: Die Richtlinie sagt "Schlagzeile",
  nicht "jede Seitenüberschrift". Die Bundesseite bsw-vg.de setzt den
  Condensed-Schnitt ebenfalls nur im Kampagnenbanner ein, während
  Beitragstitel dort in der normalbreiten Heavy stehen. Eine dauerhaft
  schräg gestellte Überschrift wäre außerdem schlechter lesbar.
*/

.bsw-schlagzeile,
.bsw-schlagzeile h1,
.bsw-schlagzeile h2,
.bsw-schlagzeile h3 {
  font-family: var(--wp--preset--font-family--bsw-schlagzeile);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Variante mit der in der Richtlinie genannten Neigung von -8 Grad.
   skewX statt font-style:italic, weil die Schrift keinen echten
   kursiven Condensed-Schnitt mitbringt und der Browser sonst
   künstlich verzerrt. */
.bsw-schlagzeile-schraeg,
.bsw-schlagzeile-schraeg h1,
.bsw-schlagzeile-schraeg h2,
.bsw-schlagzeile-schraeg h3 {
  font-family: var(--wp--preset--font-family--bsw-schlagzeile);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  display: inline-block;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}

/* Für Nutzer, die reduzierte Bewegung bzw. schlichte Darstellung
   eingestellt haben, die Neigung zurücknehmen. */
@media (prefers-reduced-motion: reduce) {
  .bsw-schlagzeile-schraeg,
  .bsw-schlagzeile-schraeg h1,
  .bsw-schlagzeile-schraeg h2,
  .bsw-schlagzeile-schraeg h3 {
    transform: none;
  }
}

/*--------------------------------------------------------------
1.2 Farbverlauf-Balken (Einzeln)
--------------------------------------------------------------*/
.bsw-gradient-bar-dark {
  height: auto;
  min-height: 60px;
  width: 100%;
  background: linear-gradient(to right, #792351, #cf0055, #f49800);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  box-sizing: border-box;
  text-align: center;
}

.bsw-gradient-bar-dark h1,
.bsw-gradient-bar-dark h2,
.bsw-gradient-bar-dark h3,
.bsw-gradient-bar-dark h4,
.bsw-gradient-bar-dark h5,
.bsw-gradient-bar-dark h6 {
  color: white;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.bsw-gradient-bar-dark p {
  color: white;
}

/*--------------------------------------------------------------
1.3 Gestapelter Farbverlauf-Balken für Titel
--------------------------------------------------------------*/
.bsw-stacked-gradient-title-container {
  position: relative; /* Wichtig für die Positionierung der Pseudo-Elemente */
  padding: 40px 20px; /* Innenabstand für den Titel, damit er nicht von den Verläufen verdeckt wird. Anpassen nach Bedarf. */
  text-align: center; /* Zentriert den Titeltext */
  min-height: 100px; /* Mindesthöhe, damit die Verläufe sichtbar sind */
  display: flex; /* Für Zentrierung des Titel-Blocks, falls er nicht volle Breite hat */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden; /* Verhindert, dass Pseudo-Elemente überstehen, falls sie größer als der Container sind */
}

/* Unterer, durchgehender Farbverlauf (Lila-Rot-Orange) */
.bsw-stacked-gradient-title-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* Positioniert ihn am unteren Rand des Containers */
  height: 70%; /* Höhe des unteren Balkens, z.B. 70% der Container-Höhe. Anpassen! */
  background: linear-gradient(to right, #792351, #cf0055, #f49800);
  z-index: 1; /* Stellt sicher, dass dieser Verlauf hinter dem Text, aber vor dem oberen Verlauf liegt */
}

/* Oberer, mittiger, transparenter Farbverlauf */
.bsw-stacked-gradient-title-container::after {
  content: "";
  position: absolute;
  width: 80%; /* Breite des oberen Balkens, z.B. 80% der Container-Breite */
  height: 50%; /* Höhe des oberen Balkens, z.B. 50% der Container-Höhe. Anpassen! */
  left: 50%;
  transform: translateX(-50%); /* Zentriert den Balken horizontal */
  bottom: 15%; /* Positioniert ihn etwas über dem unteren Rand des unteren Balkens. Anpassen! (z.B. 15% der Container-Höhe vom unteren Rand) */
  /* Farbverlauf gemäß Guideline Seite 17, Farbverlauf 2 (Dark Pink -> Pink -> Light Orange mit 64% Deckkraft) */
  background: linear-gradient(to right,
                              rgba(177, 25, 73, 0.64), /* Dark Pink mit Transparenz */
                              rgba(207, 0, 85, 0.64),  /* Pink mit Transparenz */
                              rgba(244, 152, 0, 0.64)   /* Light Orange mit Transparenz */
                            );
  z-index: 2; /* Stellt sicher, dass dieser Verlauf über dem unteren Verlauf, aber hinter dem Text liegt */
}

/* Sicherstellen, dass der eigentliche Titel-Inhalt über den Verläufen liegt */
.bsw-stacked-gradient-title-container > .wp-block-post-title,
.bsw-stacked-gradient-title-container > h1, /* Falls man manuell H1 einfügt */
.bsw-stacked-gradient-title-container > h2,
.bsw-stacked-gradient-title-container > h3 {
  position: relative; /* Damit z-index greift */
  z-index: 3;
  color: white; /* Textfarbe für den Titel */
  margin: 0; /* Entfernt Standard-Ränder der Überschrift, um das Layout besser zu kontrollieren */
}

/*--------------------------------------------------------------
1.4 Trennelement mit Farbverlauf
--------------------------------------------------------------*/
.bsw-gradient-separator hr,
.wp-block-separator.bsw-gradient-separator:not(.is-style-dots) {
  background-image: linear-gradient(to right, #792351, #cf0055, #f49800) !important;
  background-color: transparent !important;
  border: none !important;
  height: 5px !important;
  width: 100%;
  max-width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.wp-block-separator.is-style-wide.bsw-gradient-separator:not(.is-style-dots) {
    height: 8px !important;
}

/*--------------------------------------------------------------
1.5 Header-Navigation Hover-Effekt und Aktiver Punkt
--------------------------------------------------------------*/
/*
  Weise dem Navigations-Block im Header die Klasse "bsw-header-nav" zu.
*/
.bsw-header-nav .wp-block-navigation-item > a { /* Zielt auf die Links der obersten Menüebene */
  position: relative; /* Notwendig für die Positionierung des Pseudo-Elements */
  padding-bottom: 8px; /* Etwas Platz für die Linie unter dem Text schaffen */
  text-decoration: none; /* Standard-Unterstreichung entfernen, falls vorhanden */
  /* Ggf. Textfarbe anpassen, falls nicht von theme.json oder globalen Stilen geerbt */
  /* color: #deinewunschfarbe; */
}

/* Basis-Stil für die Linie (Farbverlauf und initial unsichtbar) */
.bsw-header-nav .wp-block-navigation-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* Positioniert die Linie am unteren Rand des Links (inkl. Padding) */
  width: 0; /* Linie ist initial unsichtbar/ohne Breite */
  height: 3px; /* Dicke der Linie, anpassen nach Bedarf */
  background: linear-gradient(to right, #792351, #cf0055, #f49800); /* Dein Farbverlauf */
  transition: width 0.3s ease-in-out; /* Sanfte Animation für die Breite */
}

/* Linie wird sichtbar beim Hovern ODER wenn der Punkt aktiv ist */
.bsw-header-nav .wp-block-navigation-item > a:hover::after,
.bsw-header-nav .wp-block-navigation-item.current-menu-item > a::after,
.bsw-header-nav .wp-block-navigation-item.current-page-ancestor > a::after {
  width: 100%; /* Linie wird auf volle Breite des Links animiert/gesetzt */
}

/* Aktiver Menüpunkt wird fett dargestellt */
.bsw-header-nav .wp-block-navigation-item.current-menu-item > a,
.bsw-header-nav .wp-block-navigation-item.current-page-ancestor > a {
  font-weight: 800; /* Entspricht "Heavy" aus deiner theme.json. Alternativ 'bold' */
}

/* Optional: Anpassung für Submenüs, falls diese anders behandelt werden sollen */
/*
.bsw-header-nav .sub-menu .wp-block-navigation-item > a::after {
  display: none; // Keine Linie für Submenü-Einträge
}
*/

/*--------------------------------------------------------------
1.6 Balken-Element nach Gestaltungsrichtlinie Punkt 2d
--------------------------------------------------------------*/
/*
  Die Richtlinie beschreibt es so:
    - dynamische Form: links schmal, nach rechts breiter werdend
    - Platzierung: hinter der Schrift
    - bei mehrzeiligen Schlagzeilen dürfen sich die Balken überlappen
    - Farbe: Farbverlauf mit etwa 64 % Deckkraft

  Der bisherige Ansatz unter 1.3 setzte zwei Rechtecke übereinander und
  ließ die dynamische Form aus. Diese Fassung setzt sie über clip-path um.
  Vergabe im Editor unter "Erweitert -> Zusätzliche CSS-Klasse(n)".

  Anwendung auf eine Überschrift:      Klasse  bsw-balken
  Zusammen mit der Schlagzeilenschrift: bsw-balken bsw-schlagzeile
*/

.bsw-balken {
  position: relative;
  display: inline-block;
  padding: 0.15em 0.7em 0.2em;
  /* Ohne diese Angabe säßen mehrzeilige Schlagzeilen zu weit auseinander,
     um sich wie in der Richtlinie überlappen zu können. */
  line-height: 1.1;
  /* Erzeugt einen eigenen Stapelkontext. Zwingend nötig: der Balken unten
     liegt auf z-index -1, damit er hinter dem Text sitzt. Ohne diese Zeile
     würde er hinter den Hintergrund des umgebenden Blocks rutschen und wäre
     unsichtbar, sobald dieser eine Hintergrundfarbe hat. */
  isolation: isolate;
}

.bsw-balken::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Muss negativ sein, damit der Balken HINTER dem Text liegt. Bei z-index 0
     würde er den Text verdecken: unpositionierter Textinhalt wird vor
     positionierten Nachkommen der Ebene 0 gemalt. */
  z-index: -1;
  background: var(--wp--preset--gradient--bsw-verlauf-transparent);
  /* Links schmal, rechts auf volle Höhe — die dynamische Form der Richtlinie. */
  clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 80%);
}

/* Mehrzeilige Schlagzeilen: leichte Überlappung wie in der Richtlinie. */
.bsw-balken + .bsw-balken {
  margin-top: -0.15em;
}

/* Deckender Balken, wenn der Text darauf sicher lesbar sein muss. */
.bsw-balken.is-deckend::before {
  background: var(--wp--preset--gradient--bsw-verlauf);
}

.bsw-balken.is-deckend {
  color: #fff;
}

/* Weißer Balken mit schwarzer Schrift — für Schlagzeilen, die auf einem
   farbigen Untergrund stehen. So hält es auch die Bundesseite, und es
   entspricht dem Kontrastgedanken der Richtlinie. */
.bsw-balken.is-weiss::before {
  background: #fff;
}

.bsw-balken.is-weiss {
  color: #000;
}


/*--------------------------------------------------------------
1.7 Beitragsliste — Kartenansicht
--------------------------------------------------------------*/
/*
  Greift, sobald die Beitragsliste als Raster läuft
  (wp:post-template mit "layout":{"type":"grid"}).
  Ohne Raster bleibt alles wie bisher, diese Regeln laufen dann ins Leere.
*/

.wp-block-post-template.is-layout-grid {
  gap: var(--wp--preset--spacing--50, 2rem);
}

.wp-block-post-template.is-layout-grid > li {
  display: flex;
  flex-direction: column;
  /* Gleich hohe Karten, damit die Datumszeile unten bündig steht. */
  height: 100%;
}

/* Das Beitragsbild oben, auf einheitliches Seitenverhältnis beschnitten,
   damit die Karten nicht unterschiedlich hoch beginnen. */
.wp-block-post-template.is-layout-grid .wp-block-post-featured-image {
  margin-bottom: 0.9rem;
  order: -1;
}

.wp-block-post-template.is-layout-grid .wp-block-post-featured-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.wp-block-post-template.is-layout-grid .wp-block-post-excerpt {
  /* Schiebt Trenner und Datum ans Kartenende. */
  flex-grow: 1;
}

.wp-block-post-template.is-layout-grid .wp-block-post-date {
  margin-top: 0.4rem;
  opacity: 0.75;
}


/*--------------------------------------------------------------
1.8 Beitragstitel in der Liste farbig
--------------------------------------------------------------*/
/*
  Erster Versuch waren durchgehend farbige Titel in BSW-Pink, nach dem
  Vorbild der Bundesseite. Im Live-Test wirkte das zu massiv: Auf bsw-vg.de
  stehen kurze Titel neben dem Bild, hier stehen lange Titel in Spalten
  übereinander — die Fläche wird dadurch sehr farbig.

  Jetzt: Titel in der gewohnten Textfarbe, die BSW-Farbe erscheint erst beim
  Überfahren. Dass der Titel anklickbar ist, bleibt damit erkennbar.

  Wer die durchgehend farbige Fassung doch möchte, kommentiert den Block
  darunter ein.
*/

/*
.wp-block-post-template .wp-block-post-title a {
  color: var(--wp--preset--color--bsw-pink);
}
*/

.wp-block-post-template .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.wp-block-post-template .wp-block-post-title a:hover,
.wp-block-post-template .wp-block-post-title a:focus {
  color: var(--wp--preset--color--bsw-pink);
  text-decoration: underline;
}

/* "Weiterlesen" als Verweis mit Pfeil, angelehnt an die Bundesseite. */
.wp-block-post-excerpt__more-link {
  color: var(--wp--preset--color--bsw-dark-orange);
  font-weight: 600;
  text-decoration: none;
}

.wp-block-post-excerpt__more-link::after {
  content: " →";
}

.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus {
  text-decoration: underline;
}


/*--------------------------------------------------------------
1.9 Weitere benutzerdefinierte CSS-Anpassungen
--------------------------------------------------------------*/
body {
    /* Beispiel: Globale Schrift für den Body setzen, falls theme.json nicht greift oder überschrieben werden soll */
    /* font-family: 'Helvetica Neue LT Pro Roman', sans-serif; */
}