/*
Theme Name: KG Emspünte - Greven e.V.
Theme URI: https://wordpress.kg-emspuente.de
Author: Ralf Brinkbäumer
Description: Child Theme des wprbn Themes für die Homepage der KG Emspünte - Greven e.V. Erbt Layout, Dashboard und Funktionen des Parent-Themes; eigene Anpassungen (Farben, Schrift, Overrides) werden hier ergänzt.
Template: wprbn_theme
Version: 1.0.0
License: Private
Text Domain: kg-emspuente
*/

/* ──────────────────────────────────────────────────────────────────────────
   Child-Theme-Overrides für KG Emspünte - Greven e.V.

   Das Parent-Theme (wprbn) liefert alle Basis-Styles, Farb-Tokens und das
   main.css. Diese Datei enthält ausschließlich Anpassungen, die von den
   Parent-Defaults abweichen sollen.

   Regeln (siehe Parent-CLAUDE.md):
   - Immer CSS Custom Properties aus :root / [data-theme] verwenden,
     keine hardcodierten Farbwerte.
   - Overrides, die gegen WordPress- oder Parent-Layer-Styles ankämpfen
     müssen, außerhalb aller @layer ans Ende schreiben.

   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   Hero-Header (Startseite)
   ────────────────────────────────────────────────────────────────────────── */

/* Dunkles Overlay (grauer Schleier) über dem Hero-Foto entfernen – das Bild
   soll in voller Helligkeit wie im Original erscheinen. Overrides das im
   Parent-main.css hartkodierte ::after-Verlaufsoverlay. */
header.wp-block-template-part:has(.site-header--hero)::after {
    display: none !important;
}

/* Ohne Overlay steht der weiße Hero-Text teils auf hellem Gold. Dezenter,
   an das Vereinsblau angelehnter Textschatten sichert die Lesbarkeit, ohne
   den Schleier zurückzubringen. */
.site-header--hero .hero-title,
.site-header--hero .hero-subtitle {
    text-shadow: 0 1px 2px rgba(7, 37, 89, 0.45), 0 2px 10px rgba(7, 37, 89, 0.30);
}

/* ──────────────────────────────────────────────────────────────────────────
   Titelband-Deko (Option „Titelband-Deko" im Parent → Body-Klasse band-deko-*)
   Wirkt nur auf das Vollton-Titelband (.wprbn-hero--plain) für Seiten ohne
   Hero. Assets liegen im Parent (assets/images/deko/), eingebunden über die
   CSS-Variablen aus der Child-functions.php. Titel bleibt vorn (Inner z-index 2).
   ────────────────────────────────────────────────────────────────────────── */

/* Variante A – Konfetti: vier gestreute Punkt-Ebenen über die Band-Breite. */
.band-deko-konfetti .wprbn-hero--plain {
    background-image:
        var(--kg-deko-konfetti-1),
        var(--kg-deko-konfetti-2),
        var(--kg-deko-konfetti-3),
        var(--kg-deko-konfetti-4);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 6% 42%, 34% 62%, 68% 34%, 94% 56%;
    background-size: auto 94%, auto 108%, auto 88%, auto 100%;
}

/* Variante B – Luftschlangen: gedrehte Papierschlangen links & rechts neben
   der Headline. ::after überschreibt das Parent-„display:none" der compact-Variante. */
.band-deko-luftschlangen .wprbn-hero--plain {
    overflow: hidden;
}
.band-deko-luftschlangen .wprbn-hero--plain::before,
.band-deko-luftschlangen .wprbn-hero--plain::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: clamp(110px, 15vw, 200px);
    aspect-ratio: 342 / 960;
    background: var(--kg-deko-luftschlange) center / contain no-repeat;
    z-index: 1;
    pointer-events: none;
}
.band-deko-luftschlangen .wprbn-hero--plain::before {
    left: 1%;
    transform: translateY(-50%) rotate(18deg);
}
.band-deko-luftschlangen .wprbn-hero--plain::after {
    right: 1%;
    transform: translateY(-50%) rotate(-18deg) scaleX(-1);
}

/* Mobil: Schlangen kleiner, damit sie den Titel nicht überlagern. */
@media (max-width: 767px) {
    .band-deko-luftschlangen .wprbn-hero--plain::before,
    .band-deko-luftschlangen .wprbn-hero--plain::after {
        width: 74px;
        opacity: 0.9;
    }
}