/*
Theme Name: aya-swoboda
Description: Child theme of Twenty Twenty-Five
Template: twentytwentyfive
Version: 1.0.0
Text Domain: aya-swoboda
*/

/* ==========================================================================
   Inhalt
   1. Design-Tokens
   2. Link-System
   3. Header: Site-Titel und Tagline
   4. Navigation (Burger-Menü und Dropdown-Panel)
   5. Galerie-Auswahl (Query Loop)
   6. Breadcrumb
   7. Lightbox
   8. Footer
   9. Exhibitions List
   10. About: Sprachspalten
   11. Seitenvorlage ohne sichtbaren Titel (page-no-title)
   12. Event Card (Pattern "Event Card", Home: Current & Upcoming)
   ========================================================================== */


/* ==========================================================================
   1. Design-Tokens
   ========================================================================== */
:root {
  /* Typografie für UI-Titel (Karten-Titel, Breadcrumb) */
  --ui-size: var(--wp--preset--font-size--medium);
  --ui-weight: 500;

  /* Links */
  --link-line: 1px;
  --link-line-strong: 2px;
  --link-offset: 0.25em;

  /* Steuerelemente (Lightbox) */
  --ctl-size: 2.75rem;
  --ctl-color: var(--wp--preset--color--ink);
  --ctl-hover: #000;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");

  /* Lightbox */
  --lb-gap: var(--wp--preset--spacing--30); /* X-Small */
  --lb-top: 64px;                           /* Platz für Schließen-Button */
  --lb-bar: 4rem;                           /* Leistenhöhe, wird per JS gesetzt */
  --lb-count-w: 5rem;                       /* Breite des Zählers zwischen den Pfeilen */
  --lb-pb: calc(.5rem + env(safe-area-inset-bottom, 0px)); /* Abstand unter der Steuerzeile */
}



/* ==========================================================================
   2. Link-System
   UI-Links (Site-Titel, Navigation, Karten-Titel, Breadcrumb, Footer):
     Ruhe: keine Linie | Hover/Fokus: 1px | aktuelle Seite: 2px
   Textlinks (alle anderen):
     Ruhe: Linie 1px | Hover: 2px
   Farbe überall Ink, die Linie ist das Erkennungsmerkmal.
   !important bei text-decoration-thickness: Das Parent-Theme setzt
   a { text-decoration-thickness: 1px !important }.
   Neue UI-Bereiche in allen drei Selektorlisten ergänzen.
   ========================================================================== */

/* Gleicher Abstand der Linie zum Text bei allen Links */
body a {
  text-underline-offset: var(--link-offset);
}

/* Textlinks (Standard): Hover verstärkt die Linie */
a:where(:not(.wp-element-button)):hover {
  text-decoration-thickness: var(--link-line-strong) !important;
}

/* UI-Links: Ruhe */
:is(.wp-block-site-title, .wp-block-navigation, .wp-block-post-title, .wp-block-breadcrumbs, footer.wp-block-template-part) a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* UI-Links: Hover und Tastaturfokus */
:is(.wp-block-site-title, .wp-block-navigation, .wp-block-post-title, .wp-block-breadcrumbs, footer.wp-block-template-part) a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: var(--link-line) !important;
}

/* UI-Links: aktuelle Seite (nach der Hover-Regel, damit 2px auch beim Hover bleibt).
   Site-Titel ausgenommen: WordPress setzt auf der Startseite aria-current am Titel. */
:is(.wp-block-navigation, .wp-block-post-title, .wp-block-breadcrumbs, footer.wp-block-template-part) :is(a, span)[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: var(--link-line-strong) !important;
}


/* ==========================================================================
   3. Header: Site-Titel und Tagline
   ========================================================================== */

/* Titel: größer, dunkel */
.wp-block-site-title {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
}

/* Tagline: klein, grau, Großbuchstaben, einzeilig */
.wp-block-site-tagline {
  color: var(--wp--preset--color--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Auf sehr schmalen Handys darf die Tagline umbrechen */
@media (max-width: 479px) {
  .wp-block-site-tagline {
    white-space: normal;
  }
}


/* ==========================================================================
   4. Navigation
   Burger-Menü bis 899px, Overlay als Dropdown-Panel unter dem Header.
   ========================================================================== */

/* 4.1 Burger-Menü bis 899px statt nur bis 599px */
@media (min-width: 600px) and (max-width: 899px) {
  header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  header.wp-block-template-part .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* 4.2 Dropdown-Panel: Bezugspunkt = Header (Desktop bleibt unberührt) */
header.wp-block-template-part {
  position: relative;
}
header.wp-block-template-part .wp-block-group,
header.wp-block-template-part .wp-block-navigation {
  position: static;
}

/* Panel klappt von oben auf, volle Breite, Inhalt linksbündig mit dem Seitentitel */
@keyframes menu-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0); }
}

@media (max-width: 899px) {
  header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container {
    display: flex !important;
    flex-direction: column;
    position: absolute !important;
    inset: 100% 0 auto 0;
    width: auto !important;
    z-index: 1000;
    padding-block: var(--wp--preset--spacing--20);
    padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
    background-color: var(--wp--preset--color--paper) !important;
    color: var(--wp--preset--color--ink) !important;
    border: 0;
    border-block-end: 1px solid currentColor;

    /* zu: eingeklappt, unsichtbar, nicht fokussierbar */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    animation: none;
    transition: clip-path .2s ease-in, visibility .2s;
  }

  /* auf: Keyframes für das Aufklappen */
  header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    clip-path: inset(0);
    visibility: visible;
    animation: menu-in .2s ease-out;
    transition: none;
  }

  /* Menüpunkte untereinander */
  header.wp-block-template-part .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
  header.wp-block-template-part .wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    padding: 0;
    text-align: start;
  }

  header.wp-block-template-part .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    padding-block: .75rem;
    padding-inline: 0;
    font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
    font-weight: 400;
    color: var(--wp--preset--color--ink);
  }
}

/* Seite bleibt sichtbar und scrollbar, solange das Menü offen ist */
html.has-modal-open {
  overflow: visible;
}

/* Panel: Menüpunkte linksbündig, trotz "rechtsbündig" in den Navigationseinstellungen */
header.wp-block-template-part .is-menu-open .wp-block-navigation,
header.wp-block-template-part .is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: start;
}
header.wp-block-template-part .is-menu-open .wp-block-navigation__container {
  gap: 0;
}

/* Overlay-Menüpunkte (max. 1.5rem = Mindestgröße des Titels) */
.wp-block-navigation__overlay-container .wp-block-navigation-item__content {
  padding-block: .75rem;
  padding-inline: 0;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  font-weight: 400;
  color: var(--wp--preset--color--ink);
}
.wp-block-navigation__overlay-container .wp-block-group > * + * {
  margin-block-start: 0;
}

/* 4.3 Burger -> X */
.wp-block-navigation__responsive-container-open svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s;
}
.wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open svg path:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open svg path:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* 4.4 Close-Button: Klickfläche, nur bei Tastaturfokus sichtbar (das Burger-X übernimmt das Schließen) */
.wp-block-navigation-overlay-close {
  min-height: 44px;
  min-width: 44px;
}
.wp-block-navigation-overlay-close:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 4.5 Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container,
  header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    animation: none;
    transition: none;
  }
  .wp-block-navigation__responsive-container-open svg path {
    transition: none;
  }
}


/* ==========================================================================
   5. Galerie-Auswahl (Query Loop)
   Klasse "gallery-cards" am Post-Template-Block.
   Karte = Bild + Titel, ganze Karte klickbar (Stretched Link).
   ========================================================================== */
   
.wp-block-post-template.gallery-cards {
  column-gap: 0.5rem;                       /* wie die Galerie-Raster */
  row-gap: var(--wp--preset--spacing--30);  /* X-Small, wie der Abstand oben */
}
.gallery-cards .wp-block-post-featured-image {
  margin: 0;
}
.gallery-cards .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.gallery-cards > li {
  position: relative;
  display: grid;            /* Bild und Titel teilen sich eine Zelle */
}
.gallery-cards > li > * {
  grid-area: 1 / 1;
}
.gallery-cards .wp-block-post-title {
  align-self: end;
  z-index: 1;
  margin: 0;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
  text-align: start;
  color: #fff;
  /* Scrim: Kontrast für weiße Schrift auf hellen Bildern */
  background: linear-gradient(to top, rgb(0 0 0 / .5), rgb(0 0 0 / 0));
  pointer-events: none;     /* Klicks gehen an den Stretched Link */
}

/* Link-Farbe: überschreibt die Ink-Farbe des UI-Link-Systems (Abschnitt 2) */
.gallery-cards .wp-block-post-title a {
  color: #fff;
  pointer-events: auto;
}

/* Stretched Link: Klickfläche = ganze Karte */
.gallery-cards .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Fokusring auf der Karte statt nur auf dem Titel */
.gallery-cards > li:has(a:focus-visible) {
  outline: 3px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}
.gallery-cards .wp-block-post-title a:focus-visible {
  outline: none;
}


/* ==========================================================================
   6. Breadcrumb
   Gleiche Typografie wie die Karten-Titel (Abschnitt 5) und die h2.
   Im Editor beim Breadcrumbs-Block die Typografie zurücksetzen:
   Schriftgröße (has-medium-font-size nutzt !important) und Appearance
   (setzt Inline-Styles, die jede CSS-Regel schlagen).
   ========================================================================== */
.wp-block-breadcrumbs,
.gallery-cards .wp-block-post-title {
  font-size: var(--ui-size);
  font-weight: var(--ui-weight);
  line-height: 1.2;
}


/* ==========================================================================
   7. Lightbox
   Core-Lightbox mit eigenen Steuerelementen (Pfeile, Schließen, Caption).
   ========================================================================== */

/* Fokusring für alle Buttons in der Lightbox */
.wp-lightbox-overlay button:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

/* iOS Safari: 100vh = Höhe ohne Adressleiste, das Overlay ragt unten heraus.
   dvh = tatsächlich sichtbare Höhe. Core setzt height: 100vh. */
html .wp-lightbox-overlay {
  height: 100vh;   /* Fallback für ältere Browser */
  height: 100dvh;
}

/* Bild in den Platz zwischen oben (Schließen) und Leiste zentrieren */
.wp-lightbox-overlay .lightbox-image-container {
  top: calc((100% - var(--lb-bar) + var(--lb-top)) / 2);
}

/* Mindest-Klickfläche für Pfeile und Schließen-Button */
.wp-lightbox-overlay button.wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay button.wp-lightbox-navigation-button-next,
.wp-lightbox-overlay button.wp-lightbox-close-button {
  min-width: var(--ctl-size);
  min-height: var(--ctl-size);
}

/* Pfeile: in der Steuerzeile, links und rechts neben dem Zähler */
.wp-lightbox-overlay button.wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay button.wp-lightbox-navigation-button-next {
  bottom: var(--lb-pb);
  transform: none;
  color: var(--ctl-color);
}
.wp-lightbox-overlay button.wp-lightbox-navigation-button-prev {
  left: calc(50% - var(--lb-count-w) / 2 - var(--ctl-size));
  right: auto;
}
.wp-lightbox-overlay button.wp-lightbox-navigation-button-next {
  left: calc(50% + var(--lb-count-w) / 2);
  right: auto;
}

/* Core-Icon durch den eigenen Chevron (Token --chevron) ersetzen */
.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
  display: none;
}
.wp-lightbox-overlay .wp-lightbox-navigation-icon::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--ctl-color);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-next .wp-lightbox-navigation-icon::before {
  rotate: 180deg;
}
.wp-lightbox-overlay button.wp-lightbox-navigation-button-prev:hover .wp-lightbox-navigation-icon::before,
.wp-lightbox-overlay button.wp-lightbox-navigation-button-next:hover .wp-lightbox-navigation-icon::before {
  background-color: var(--ctl-hover);
}

/* Untere Leiste: Caption (Alt-Text), darunter Steuerzeile mit Zähler.
   Die Pfeile sind eigene Buttons und sitzen per CSS links/rechts vom Zähler. */
.lightbox-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2000003;
  box-sizing: border-box;
  margin: 0;
  padding: var(--lb-gap) 1rem var(--lb-pb);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  pointer-events: none;
}
.lightbox-caption__text {
  margin: 0;
  max-width: 40rem;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
  text-wrap: balance;             /* zwei Zeilen gleichmäßig statt einem Wort in Zeile 2 */
}
.lightbox-caption__text:empty {
  display: none;
}
.slider-count {
  margin: 0;
  box-sizing: border-box;
  width: var(--lb-count-w);
  height: var(--ctl-size);        /* gleiche Höhe wie die Pfeil-Buttons = eine Linie */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--small);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--ink);
}

/* Seite hinter der offenen Lightbox ausblenden.
   iOS 26 Safari: Fixed-Overlays decken den Bereich unter der durchsichtigen
   Leiste nicht ab, ohne diese Regel scheint dort die Seite durch.
   Verzögerung = Dauer der Zoom-Animation, damit das Bild sauber vom Thumbnail aufgeht. */
body:has(.wp-lightbox-overlay.active) .wp-site-blocks {
  visibility: hidden;
  transition: visibility 0s linear .4s;
}


/* ==========================================================================
   8. Footer
   ========================================================================== */

/* Abstand über dem Trenner: X-Small, wie überall sonst (ersetzt den Core-Blockabstand) */
footer.wp-block-template-part {
  margin-block-start: var(--wp--preset--spacing--30);
}

.site-footer .footer-label {
  color: var(--wp--preset--color--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  white-space: nowrap;
  margin-block-end: 0.75rem;
}

/* Zeilen: Contact und Menü gleich hoch, über 24 px (WCAG 2.5.8) */
.site-footer .footer-line,
.site-footer .wp-block-navigation-item__content {
  line-height: 1.5;
  padding-block: 0.18rem;
}
.site-footer .footer-line {
  margin: 0;
  overflow-wrap: anywhere; /* lange Mailadresse sprengt schmale Screens nicht */
}
.site-footer .wp-block-navigation-item__content { display: inline-block; }

/* Copyright-Zeile zurücknehmen: gleiche Farbe wie die Labels */
.site-footer .footer-line:last-child {
  color: var(--wp--preset--color--muted);
}

/* Mail und Telefon wie Links im Menü */
.site-footer .footer-line a { text-decoration: none; }
.site-footer .footer-line a:hover,
.site-footer .footer-line a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

/* Menü immer rechtsbündig */
.site-footer .footer-menu { text-align: right; }
.site-footer .footer-menu .wp-block-navigation { justify-content: flex-end; align-items: flex-end; }
.site-footer .footer-menu .wp-block-navigation__container { align-items: flex-end; }

/* Nur bei sehr schmalen Screens, wenn die Spalten umbrechen: Menü linksbündig */
@media (max-width: 21rem) {
  .site-footer .footer-menu { text-align: left; }
  .site-footer .footer-menu .wp-block-navigation,
  .site-footer .footer-menu .wp-block-navigation__container {
    justify-content: flex-start;
    align-items: flex-start;
  }
}




/* ==========================================================================
   9. Exhibitions List
   Klasse "exhibition-list" an den Listen-Blöcken. Jahr = h2, Einträge = ul.
   Abstandsstufen (von eng nach weit):
     Zeilenumbruch im Eintrag  <  Eintrag zu Eintrag  <  Liste zu nächstem Jahr
   Der Abstand zum nächsten Jahr kommt vom Blockabstand der Gruppe (X-Small).
   Jahr und seine Liste bleiben eng zusammen (Nähe = Zugehörigkeit).
   ========================================================================== */

.exhibition-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--wp--preset--spacing--20);  /* Jahr und Einträge eng */
  line-height: 1.3;                                    /* Umbruch im Eintrag: eng (Body: 1.65) */
}
.exhibition-list li + li {
  margin-block-start: .6em;                            /* Eintrag zu Eintrag */
}

/* ==========================================================================
   10. About: Sprachspalten
   Klasse "language-columns" am Columns-Block. Ab 782px stehen die Spalten
   nebeneinander, darunter gestapelt. Gestapelt soll der Abstand zwischen den
   Sprachen deutlich größer sein als der Absatzabstand innerhalb einer Sprache.
   Doppelte Klasse im Selektor, damit der Gap aus der theme.json sicher überschrieben wird.
   ========================================================================== */
@media (max-width: 781px) {
  .wp-block-columns.language-columns {
    row-gap: var(--wp--preset--spacing--70);  /* 50-55 px, Absatzabstand innen: 20 px */
  }
}

/* ==========================================================================
   11. Seitenvorlage ohne sichtbaren Titel (page-no-title)
   Der ausgeblendete h1 ist das erste Kind von <main>. Ohne diese Regel bekommt
   der Inhalt dahinter den Core-Blockabstand zusätzlich zum Padding der <main>
   (ca. 39 px statt X-Small). Auf Galerie-Seiten ist der h1 nicht das erste
   Kind (Breadcrumb davor), dort greift die Regel nicht.
   ========================================================================== */
main > .wp-block-post-title.screen-reader-text:first-child + .wp-block-post-content {
  margin-block-start: 0;
}

/* ==========================================================================
   12. Event Card (Pattern "Event Card", Home: Current & Upcoming)
   Titel, Datum und Text eng zusammen, das Bild deutlich abgesetzt.
   Ein leeres Datum (oder leerer Text) nimmt keinen Platz ein.
   ========================================================================== */
.wp-block-group.event-card > * + * {
  margin-block-start: .25rem;
}
.wp-block-group.event-card > .wp-block-image,
.wp-block-group.event-card > .wp-block-gallery {
  margin-block-start: var(--wp--preset--spacing--30);  /* X-Small */
}
.event-card__date {
  font-weight: 200;
}
.event-card p:empty {
  display: none;
}

/* "Fett" im Editor ist sonst nur 400 statt 300 (bolder relativ zum Body-Gewicht) */
strong,
b {
  font-weight: 600;
}
/* Bilder in Event Cards einheitlich zuschneiden (nur auf der Seite, nicht in der Lightbox) 
.wp-block-group.event-card .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}*/