/*
Theme Name: Daniel & Indra – Hochzeit
Theme URI: https://www.hochzeit-daniel-indra.de
Author: Ralf Brinkbäumer
Description: Child Theme des wprbn Themes für die Hochzeits-Homepage von Daniel und Indra Reismann (12.09.2026). 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: danielundindra
*/

/* ──────────────────────────────────────────────────────────────────────────
   Child-Theme-Overrides für die Hochzeits-Homepage Daniel & Indra

   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.

   Farben und Schriften stehen im Dashboard (wprbn Options), nicht hier.
   Hier steht nur, was das Parent nicht kennt.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Marken-Töne aus dem Ringkissen ───────────────────────────────────────
   Gold, Eukalyptus und Salbei liegen im Dashboard als custom_1…custom_5.
   Für eigene Bausteine hier unter sprechenden Namen. */
:root {
    --dui-gold:        #b08d45;
    --dui-gold-hell:   #c9a961;
    --dui-eukalyptus:  #5f7361;
    --dui-salbei:      #c9d2bc;
    --dui-trockenblume:#ede3d0;
}

/* ── Countdown ────────────────────────────────────────────────────────────
   Markup aus inc/countdown/countdown.php. Vier Kacheln in einer Reihe,
   die auf schmalen Schirmen zweispaltig umbrechen. */
.dui-countdown {
    text-align: center;
    margin-block: var(--space-xl, 3rem);
}

.dui-countdown__titel {
    font-family: var(--font-eyebrow, inherit);
    font-size: var(--size-eyebrow, 0.8125rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--dui-gold);
    margin-block-end: 1.5rem;
}

/* Die Kacheln sind aria-hidden, weil eine sekündlich tickende Live-Region
   Vorlesewerkzeuge zumüllt. Diesen Satz lesen sie stattdessen vor – sichtbar
   stünde er doppelt neben der Tage-Kachel. Ohne JS bleiben die Kacheln
   trotzdem richtig: die Startwerte kommen aus PHP. */
.dui-countdown__satz {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Ist der Tag da, tritt der Satz nach vorn und übernimmt die Aussage. */
.dui-countdown.is-vorbei .dui-countdown__satz {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-family: var(--font-h2, serif);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--dui-gold);
}

.dui-countdown__reihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 3vw, 2.5rem);
}

.dui-countdown__feld {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    min-width: clamp(4.5rem, 14vw, 7rem);
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(0.5rem, 1.5vw, 1rem);
    border: 0.5px solid var(--border);
    border-block-start: 2px solid var(--dui-gold);
    background: var(--bg-tertiary);
}

.dui-countdown__zahl {
    font-family: var(--font-h1, serif);
    font-weight: 300;
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dui-countdown__wort {
    font-family: var(--font-eyebrow, inherit);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Ist der Tag vorbei, treten die Kacheln zurück und der Satz übernimmt. */
.dui-countdown.is-vorbei .dui-countdown__reihe { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────
   Die Fotos sind hell und unruhig; der Verlauf des Parents allein trägt den
   cremefarbenen Text nicht. Ein Schatten im Ton des Tiefgrüns sichert die
   Lesbarkeit, ohne einen grauen Schleier über das Bild zu legen. */
.wprbn-hero .hero-title,
.wprbn-hero .hero-subtitle {
    text-shadow: 0 1px 2px rgb(44 51 44 / 0.55), 0 2px 14px rgb(44 51 44 / 0.35);
}

/* Namen mittig statt unten links – das ist die klassische Haltung einer
   Hochzeitsseite und trägt den Kalligrafie-Schriftzug deutlich besser. */
.wprbn-hero--page .wprbn-hero__inner {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Alle Paarfotos sind Hochformate. Im breiten Hero schneidet ein mittiger
   Ausschnitt die Köpfe ab, deshalb sitzt der Bildausschnitt weiter oben.
   Auf schmalen Schirmen greift das Hochformat aus der Seiten-Meta, dort
   füllt das Bild die Höhe ohnehin aus und der Wert bleibt folgenlos. */
.wprbn-hero--page {
    background-position: 50% 20%;
}

/* ── Kopfleiste über dem Foto ─────────────────────────────────────────────
   Der Header ist transparent, Logo und Menü stehen cremefarben direkt auf
   dem Bild. Über hellem Himmel verschwanden sie darin. Dieselbe Antwort wie
   beim Hero-Titel: Schatten statt Schleier, damit das Foto hell bleibt.

   Nur die Zustände über dem Bild bekommen ihn. Fährt die Leiste ein, greift
   die Sticky-Fassung auf gedecktem Grund – dort wäre ein Schatten schmutzig. */
.wprbn-logo--default-light,
.wprbn-logo--default-dark,
.wprbn-logo--mobile-light,
.wprbn-logo--mobile-dark {
    filter: drop-shadow(0 1px 2px rgb(44 51 44 / 0.5))
            drop-shadow(0 2px 10px rgb(44 51 44 / 0.35));
}

.site-header:not(.is-shrunk):not(.is-sticky) .site-nav a,
.site-header:not(.is-shrunk):not(.is-sticky) .wprbn-menu--header a {
    text-shadow: 0 1px 2px rgb(44 51 44 / 0.55), 0 2px 10px rgb(44 51 44 / 0.35);
}

/* Der Menü-Knopf besteht aus Balken, nicht aus Text – deshalb drop-shadow.

   Auf dem Foto sind die Striche grün und sitzen links, also über dem dunklen
   Laub am Bildrand. Ein dunkler Schatten hilft dort nicht, er verschluckt sie
   erst recht. Ein heller Saum trennt sie von beidem: vom dunklen Laub und vom
   hellen Himmel. So bleiben sie grün und stehen trotzdem überall. */
body:has(.wprbn-hero--page) .site-header:not(.is-shrunk):not(.is-sticky) .wprbn-menu-toggle {
    filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.95))
            drop-shadow(0 1px 4px rgb(255 255 255 / 0.65));
}

/* Auf dem Vollton-Titelband stehen weiße Striche auf ruhigem Grund –
   da wäre jeder Saum nur Schmutz. */
body:has(.wprbn-hero--plain) .site-header .wprbn-menu-toggle {
    filter: none;
}

/* Striche des Menü-Knopfs je nach Untergrund.

   Der Kopf ist transparent, liegt also mal auf dem Foto, mal auf dem
   Vollton-Titelband. Eine einzige Farbe kann nicht beides bedienen: Auf dem
   Band (das ist genau dieses Grün) wären grüne Striche unsichtbar.

   `--header-control-color` steht im Parent auf dem <html>-Element. Hier auf
   dem <body> neu gesetzt gewinnt der Wert für alles darin – der Kopf gehört
   dazu. Ausgewählt wird über den Hero-Bereich, der als Geschwister *nach* dem
   Kopf steht; :has() am body kommt trotzdem an ihn heran.

   Die beiden Klassen sind eigenständige Namen: --page trifft nicht
   --page_plain, die Fälle können sich also nicht in die Quere kommen. */
body:has(.wprbn-hero--page) {
    --header-control-color: #5f7361;
}

body:has(.wprbn-hero--plain) {
    --header-control-color: #ffffff;
}

/* Reissleine gegen ein überlaufendes Logo. Auf schmalen Schirmen greift zwar
   die gestapelte Fassung (Dashboard → Logos), aber das Querlogo ist bei 60px
   Höhe 387px breit – ein Telefon ist 375px. Trüge jemand später wieder ein
   breites Motiv ein, schöbe es sonst die ganze Kopfleiste auseinander. */
.wprbn-logo {
    max-width: min(100%, 62vw);
    height: auto;
}

/* ── Fußzeilen-Menü ───────────────────────────────────────────────────────
   Der generische Footer-Menü-Renderer des Parents (assets/css/menu.css)
   liefert Farbe/Größe; hier nur der site-eigene Gold-Akzent beim Hover
   (ersetzt den früheren manuellen dui-footer-links-Hack). */
.wprbn-menu--footer > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link:hover,
.wprbn-menu--footer > .wprbn-menu__list > .wprbn-menu__item > .wprbn-menu__link:focus-visible {
    color: var(--dui-gold);
}

/* ── Galerie ──────────────────────────────────────────────────────────────
   Die Fotos sind Hochformate. Ein festes Seitenverhältnis hält das Raster
   ruhig, ohne die Gesichter zu beschneiden (object-position oben). */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 30%;
}

@media (max-width: 640px) {
    .wp-block-gallery.has-nested-images figure.wp-block-image img {
        aspect-ratio: 3 / 4;
    }

    /* Der Kern-Galerieblock lässt das letzte Bild einer angebrochenen Reihe
       auf die volle Breite laufen – bei drei Fotos stand das dritte riesig
       unter zwei kleinen.

       Nachgerechnete Breiten (50 % minus halber Abstand) treffen den echten
       Abstandswert nicht zuverlässig: schon ein Pixel zu viel wirft die
       zweite Kachel in die nächste Zeile. Deshalb Raster statt Flexbox –
       das teilt den Platz selbst auf und rechnet den Abstand mit ein.
       Das :not(#individual-image) hebt die Spezifität auf die der
       Kern-Regel, genau so schreibt WordPress sie selbst. */
    .wp-block-gallery.has-nested-images.columns-3 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
        width: auto;
        flex-grow: 0;
    }

    /* Vier Kacheln nebeneinander passen nicht; ohne Zutun bricht die
       Sekunden-Kachel allein in die zweite Reihe. Zwei mal zwei steht ruhiger. */
    .dui-countdown__reihe {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 20rem;
        margin-inline: auto;
    }

    .dui-countdown__feld {
        min-width: 0;
    }
}