/*
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.1.0
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 Eigene @font-face Deklarationen (alternativ zu theme.json)
  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 Weitere benutzerdefinierte CSS-Anpassungen

--------------------------------------------------------------
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 Eigene @font-face Deklarationen (alternativ zu theme.json)
--------------------------------------------------------------*/
/* Auskommentiert, da primär über theme.json verwaltet */

/*--------------------------------------------------------------
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 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; */
}