/*
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.
   Ohne ihn verschwindet er auf dem Telefon vollständig im hellen Himmel. */
.site-header:not(.is-shrunk):not(.is-sticky) .wprbn-menu-toggle {
    filter: drop-shadow(0 1px 2px rgb(44 51 44 / 0.55))
            drop-shadow(0 2px 8px rgb(44 51 44 / 0.35));
}

/* 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ßzeile ─────────────────────────────────────────────────────────────
   Impressum und Datenschutz hängen aus dem Fußmenü an der Copyright-Zeile
   (siehe functions.php). Sie sollen mitlaufen, nicht auffallen. */
.dui-footer-links a {
    color: inherit;
    text-decoration: none;
    border-block-end: 0.5px solid var(--border-strong);
}

.dui-footer-links a:hover,
.dui-footer-links a:focus-visible {
    color: var(--text-primary);
    border-block-end-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;
    }
}