/**
 * artafair.css
 *
 * Ergänzende Styles, die nicht (oder nur schwer) elegant über theme.json lösbar sind.
 *
 * Aktueller Fokus:
 * - Die Darsteller-Seiten (agency-artists Plugin) nutzen derzeit eigene Wrapper
 *   ("#page", "#header", "#footer") statt der Block-Theme-Struktur ".wp-site-blocks".
 *   Dadurch greifen Global-Padding/Layout-Regeln des Block-Themes nicht vollständig.
 *   Diese Overrides bringen die Seiten visuell näher an Twenty Twenty-Five heran,
 *   bis wir die Plugin-Templates vollständig auf Block-Theme-Header/Footer umstellen.
 */

/*
 * Interim Layout Harmonisierung für Darsteller-Archiv & Single.
 * Die CSS-Variablen kommen aus Global Styles (theme.json / Styles UI).
 */
body.post-type-archive-darsteller #page,
body.single-darsteller #page {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--style--root--padding-left);
}

/* Bessere Grundabstände im Plugin-Header der Darsteller-Seiten */
body.post-type-archive-darsteller #header,
body.single-darsteller #header {
  padding-block: var(--wp--preset--spacing--30);
}

body.post-type-archive-darsteller hr,
body.single-darsteller hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  margin: 0;
}

/* Hauptbereich näher an die Page-Templates (Top-Abstand) */
body.post-type-archive-darsteller main.agency-archive,
body.single-darsteller main.agency-artist {
  margin-top: var(--wp--preset--spacing--60);
}

/* ============================================================
 * Contact Form 7 – Styling (Kontaktseite)
 * Ziel: optisch an eure Filter/Search-Controls + Pills anlehnen.
 * Scope bewusst eng: nur im Child-Theme + nur CF7, um Kollisionen zu vermeiden.
 * ============================================================ */
.wp-child-theme-artafair .wpcf7 {
  --artafair-form-border: color-mix(in srgb, currentColor 12%, transparent);
  --artafair-form-muted: color-mix(in srgb, currentColor 65%, transparent);
  --artafair-form-radius: 12px;

  --artafair-control-radius: 10px;
  --artafair-control-pad-y: 10px;
  --artafair-control-pad-x: 12px;

  --artafair-label-size: 10px;
  --artafair-label-letterspacing: 0.06em;

  --artafair-focus: color-mix(in srgb, currentColor 25%, transparent);
}

/* Form als „Card“ (weißer Hintergrund gewünscht) */
.wp-child-theme-artafair .wpcf7 form.wpcf7-form {
  border: 1px solid var(--artafair-form-border);
  border-radius: calc(var(--artafair-form-radius) + 4px);
  padding: clamp(14px, 2vw, 20px);
  background: var(--wp--preset--color--base, #fff);

  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Desktop: Name + E-Mail zweispaltig, Rest full-width */
@media (min-width: 900px) {
  .wp-child-theme-artafair .wpcf7 form.wpcf7-form {
    grid-template-columns: 1fr 1fr;
  }

  /* Ab dem 3. <p> (Betreff, Nachricht, Datenschutz, Submit) über beide Spalten */
  .wp-child-theme-artafair .wpcf7 form.wpcf7-form > p:nth-of-type(n+3) {
    grid-column: 1 / -1;
  }
}

/* CF7 nutzt <p> als Wrapper – margins entfernen, damit Grid sauber wirkt */
.wp-child-theme-artafair .wpcf7 form.wpcf7-form > p {
  margin: 0;
}

/* Labels wie bei euren Filter-Labels (klein, uppercase) */
.wp-child-theme-artafair .wpcf7 form.wpcf7-form label {
  display: block;
  font-size: var(--artafair-label-size);
  letter-spacing: var(--artafair-label-letterspacing);
  text-transform: uppercase;
  color: var(--artafair-form-muted);
}

/* Das CF7-<br> im Label rausnehmen */
.wp-child-theme-artafair .wpcf7 form.wpcf7-form label > br {
  display: none;
}

/* Input/Textarea – „Searchbar“-Look */
.wp-child-theme-artafair .wpcf7 input.wpcf7-text,
.wp-child-theme-artafair .wpcf7 input.wpcf7-email,
.wp-child-theme-artafair .wpcf7 textarea.wpcf7-textarea {
  width: 100%;
  box-sizing: border-box;

  padding: var(--artafair-control-pad-y) var(--artafair-control-pad-x);
  border-radius: var(--artafair-control-radius);
  border: 1px solid var(--artafair-form-border);
  background: transparent;

  font: inherit;
  font-size: var(--wp--preset--font-size--medium, 1rem);
  line-height: 1.2;
  margin-top: 3px;
}

.wp-child-theme-artafair .wpcf7 textarea.wpcf7-textarea {
  min-height: 9rem;
  resize: vertical;
}

/* Focus states (a11y) */
.wp-child-theme-artafair .wpcf7 input.wpcf7-text:focus-visible,
.wp-child-theme-artafair .wpcf7 input.wpcf7-email:focus-visible,
.wp-child-theme-artafair .wpcf7 textarea.wpcf7-textarea:focus-visible {
  outline: 2px solid var(--artafair-focus);
  outline-offset: 2px;
}

/* Acceptance (Datenschutz) als „Pill/Callout“ – gleiche Abrundung wie Eingabefelder */
.wp-child-theme-artafair .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.wp-child-theme-artafair .wpcf7 .wpcf7-acceptance .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 10px 12px;
  border-radius: var(--artafair-control-radius);
  border: 1px solid var(--artafair-form-border);
  background: color-mix(in srgb, currentColor 2%, transparent);

  /* Text wieder „normal“ statt uppercase */
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--wp--preset--font-size--small, 0.95rem);
  color: color-mix(in srgb, currentColor 85%, transparent);

  margin-top: 3px;
}

.wp-child-theme-artafair .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--wp--preset--color--contrast, #111);
}

/* Submit Button „primary“ */
.wp-child-theme-artafair .wpcf7 input.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1rem 2.25rem;
  border-radius: 14px;
  border: 1px solid var(--wp--preset--color--contrast, #111);
  background: var(--wp--preset--color--contrast, #111);
  color: var(--wp--preset--color--base, #fff);

  font: inherit;
  font-size: var(--wp--preset--font-size--medium, 1rem);
  line-height: 1;

  cursor: pointer;
}

.wp-child-theme-artafair .wpcf7 input.wpcf7-submit:hover {
  filter: brightness(0.95);
}

.wp-child-theme-artafair .wpcf7 input.wpcf7-submit:focus-visible {
  outline: 2px solid var(--artafair-focus);
  outline-offset: 2px;
}

/* Validation/Errors */
.wp-child-theme-artafair .wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.9rem;
}

.wp-child-theme-artafair .wpcf7 form.wpcf7-form .wpcf7-not-valid {
  border-color: color-mix(in srgb, #cf2e2e 55%, transparent);
}

.wp-child-theme-artafair .wpcf7 .wpcf7-response-output {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--artafair-form-border);
  background: color-mix(in srgb, currentColor 3%, transparent);
}

/* ============================================================
 * Startseite – Hero + Header Reveal
 *
 * Verhalten:
 * - Desktop: voller Header initial unsichtbar, erscheint ab 80px Scroll.
 * - Mobile: Hamburger bleibt sichtbar, voller Header erscheint ab 40px Scroll.
 * - Animationen nur bei prefers-reduced-motion: no-preference.
 * ============================================================ */

/* Anchor-Links berücksichtigen die fixe Headerhöhe (wird via JS gesetzt). */
html {
  scroll-padding-top: max(var(--artafair-home-header-height, 0px), var(--artafair-site-header-height, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Voller Header: fixed + initial verborgen */
body.home .artafair-home-header {
  position: fixed;
  top: -12px;
  left: 0;
  right: 0;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transform: none;

  /* Transform NICHT verwenden: sonst wird position:fixed im Menü relativ zum Header. */

  /* Weißer Header wird erst im "scrolled" State eingeblendet */
  background-color: transparent;
  box-shadow: none;

  transition:
    opacity 200ms ease,
    top 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease;
}

/* Header sichtbar sobald gescrollt */
body.home.artafair-is-scrolled .artafair-home-header {
  opacity: 1;
  pointer-events: auto;
  top: 0;
  transform: none;
  background-color: var(--wp--preset--color--base, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}


/* Mobile: Header erscheint (wie auf Desktop) erst nach Scroll – kein "Minimal Header" am Top. */
@media (max-width: 800px) {
  /* Sicherheit: auch auf Mobile bleibt der Header bis zum Reveal komplett verborgen. */
  body.home:not(.artafair-is-scrolled) .artafair-home-header {
    opacity: 0;
    pointer-events: none;
    top: -12px;
    transform: none;
  }

  /* Und der Toggle-Button (Hamburger) ist initial ebenfalls ausgeblendet. */
  body.home:not(.artafair-is-scrolled) .artafair-home-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}

/* ============================================================
 * Navigation Breakpoint Override
 *
 * Ziel:
 * - Mobile Navigation (Hamburger + Fullscreen Overlay) bereits bis inkl. 800px.
 *
 * Hintergrund:
 * Core Navigation nutzt je nach Theme/Styles unterschiedliche Breakpoints.
 * Mit zusätzlichen Icon-Links (Mail/Instagram) wird die Desktop-Navigation
 * bei ~800px schnell eng. Daher erzwingen wir hier den früheren Switch.
 *
 * Scope bewusst eng:
 * - Nur die Hauptnavigation (aria-label="Navigation")
 * - Footer-Navigation bleibt unberührt.
 *
 * Wichtig:
 * - Wir dürfen den Responsive-Container auf Desktop NICHT ausblenden,
 *   da dort auch die normale Link-Liste gerendert wird.
 * - Auf Mobile blenden wir lediglich den Container aus, solange das Menü
 *   nicht geöffnet ist (is-menu-open), damit nur der Hamburger sichtbar ist.
 * ============================================================ */

@media (max-width: 800px) {
  /* Hamburger sichtbar. */
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /*
   * Link-Liste/Overlay-Container auf Mobile standardmäßig ausblenden,
   * bis WordPress das Menü als geöffnet markiert.
   */
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  /* Sobald geöffnet: Fullscreen Overlay anzeigen (Core steuert die restlichen Styles). */
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
  }
}

@media (min-width: 801px) {
  /* Desktop: Hamburger ausblenden, normale Navigation wie Core darstellen. */
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /*
   * Core rendert die Link-Liste auch innerhalb des Responsive-Containers.
   * Wenn wir den Breakpoint auf 800px vorziehen, müssen wir auf Desktop
   * sicherstellen, dass dieser Container sichtbar UND nicht modal/fixed ist.
   */
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__responsive-container {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Close-Button in Desktop-Navigation nicht anzeigen. */
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Link-Liste sichtbar lassen. */
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__container {
    display: flex !important;
  }
}
/* ============================================================
 * Header Navigation: Icon-Links (Mail + Instagram)
 *
 * Ziel:
 * - Desktop: Icons direkt rechts neben den Navigation-Links.
 * - Mobile (Overlay): Icons unterhalb der Link-Liste, nebeneinander.
 *
 * Umsetzung:
 * - Icons werden per PHP (render_block Filter) in den Core Navigation Block
 *   injiziert (nur aria-label="Navigation").
 * - Icons nutzen inline SVG mit `currentColor` und erben damit die Link-Farbe.
 * ============================================================ */

.wp-block-navigation[aria-label="Navigation"] .artafair-nav-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  /*
   * Optik: Icons wirken (durch dickere Linien) oft "schwärzer" als Text-Links.
   * Daher rendern wir die Icons minimal heller als die Link-Farbe.
   *
   * - currentColor wird aus dem Navigation-Kontext geerbt
   * - color-mix(...) reduziert die visuelle Dominanz, ohne eine harte Farbe zu erzwingen
   */
  color: color-mix(in srgb, currentColor 75%, transparent);
}

/* Fallback, falls ein Browser `color-mix()` nicht unterstützt. */
@supports not (color: color-mix(in srgb, currentColor 50%, transparent)) {
  .wp-block-navigation[aria-label="Navigation"] .artafair-nav-icons {
    opacity: 0.78;
  }
}

.wp-block-navigation[aria-label="Navigation"] .artafair-nav-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  line-height: 0;

  /* Touch/Click Target: etwas großzügiger, ohne sichtbar "Button" zu wirken */
  padding: 6px;
  border-radius: 999px;
}

.wp-block-navigation[aria-label="Navigation"] .artafair-nav-icon-link:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  outline-offset: 3px;
}

.wp-block-navigation[aria-label="Navigation"] .artafair-nav-icon {
  display: block;
}

/*
 * Icons: gleiche Höhe, aber Mail darf bewusst etwas breiter sein.
 *
 * Hintergrund:
 * Das Envelope-Icon wirkt bei quadratischer Fläche schnell "gequetscht".
 * Wir halten daher die Höhe identisch und geben dem Mail-Icon mehr Breite.
 */
.wp-block-navigation[aria-label="Navigation"] .artafair-nav-icon--instagram {
  width: 20px;
  height: 20px;
}

.wp-block-navigation[aria-label="Navigation"] .artafair-nav-icon--mail {
  width: 24px;
  height: 20px;
}

/* Desktop: Icons in einer Reihe mit den Links ausrichten */
@media (min-width: 801px) {
  .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation__responsive-container-content {
    display: flex;
    align-items: center;
    gap: 14px;
  }
}

/* Mobile Overlay: Icons unter die Link-Liste (nebeneinander, mittig) */
@media (max-width: 800px) {
  .wp-block-navigation[aria-label="Navigation"] .artafair-nav-icons {
    margin-top: 16px;
    justify-content: center;
    gap: 18px;
  }
}

/* Hero: Full-Viewport, Logo zentriert */
body.home .artafair-home-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative; /* für Scroll-Down Button */

  margin-top: 0;
  padding-inline: var(--wp--style--root--padding-left);
}

/* Scroll-Down Button (Hero) */
body.home .artafair-scroll-down {
  position: absolute;
  left: 50%;
  /*
   * Wichtig:
   * Manche Viewports/Browser (insb. Mobile mit "Safe Area" oder dynamischer
   * Browser-UI) können absolute Elemente am unteren Rand optisch "abschneiden".
   * Daher positionieren wir den Button bewusst etwas höher und berücksichtigen
   * zusätzlich die Safe-Area-Insets.
   */
  bottom: calc(clamp(54px, 8svh, 108px) + env(safe-area-inset-bottom));
  transform: translateX(-50%);

  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: currentColor;
  text-decoration: none;

  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--wp--preset--color--base, #fff) 82%, transparent);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* SVG im Kreis wirklich mittig ausrichten (kein Baseline/Line-Box-Offset) */
body.home .artafair-scroll-down__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

body.home .artafair-scroll-down__icon svg {
  display: block;
}

/*
 * Smooth-Scroll Fokusziel
 *
 * Wir setzen nach dem Klick auf den Scroll-Down Button den Fokus auf den
 * "Nach dem Hero"-Bereich, damit Screenreader & Keyboard-User den Kontext
 * nachvollziehen können.
 *
 * Einige Browser zeigen für fokussierte <div>-Elemente eine sehr prominente
 * Default-Outline (wirkt wie schwarze Border oben/unten). Das wollen wir hier
 * bewusst verhindern.
 */
body.home #artafair-home-after-hero:focus,
body.home #artafair-home-after-hero:focus-visible {
  outline: none;
  box-shadow: none;
}

body.home .artafair-scroll-down:hover {
  filter: brightness(0.98);
}

body.home .artafair-scroll-down:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  outline-offset: 3px;
}

/* Button dezent ausblenden, sobald gescrollt wurde */
body.home.artafair-is-scrolled .artafair-scroll-down {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/*
 * Hero-Logo
 *
 * WICHTIG:
 * Block-Templates (HTML) können Theme-Assets nicht zuverlässig in <img src>
 * referenzieren ("file:./..." ist für Browser kein gültiger Web-URL).
 * Daher wird das Logo als CSS-Background gerendert.
 */
body.home .artafair-home-hero-logo-wrap {
  width: min(86vw, 1400px);
  aspect-ratio: 2048 / 363; /* Fallback */
  aspect-ratio: var(--artafair-home-logo-aspect, 2048 / 363); /* Logo-Dimensionen (px) für saubere Höhe */
  display: block;

  /* Scroll-getriebene Transform/Opacity Updates (per JS) */
  will-change: transform, opacity;
}

body.home .artafair-home-hero-logo {
  width: 100%;
  height: 100%;
  display: block;

  background-image: var(--artafair-home-logo-image, url('../img/artafair-logo.png'));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width: 800px) {
  body.home .artafair-home-hero-logo-wrap {
    width: min(92vw, 720px);
  }
}

/* Animation nur wenn Motion erlaubt ist */
@media (prefers-reduced-motion: no-preference) {
  body.home .artafair-home-hero-logo {
    /*
     * Intro-Animation (stärker + länger):
     * - sichtbarer Zoom-In
     * - sanfter Fade-In
     */
    animation: artafair-hero-fade-zoom 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  @keyframes artafair-hero-fade-zoom {
    0% {
      opacity: 0;
      transform: translateY(22px) scale(0.90);
    }

    65% {
      opacity: 1;
      transform: translateY(0) scale(1.03);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* Hero tritt nach Scroll subtil zurück (ohne das Logo zusätzlich zu verdunkeln). */
body.home.artafair-is-scrolled .artafair-home-hero {
  transform: scale(0.995);
  transition: transform 200ms ease;
}


/* ============================================================
 * Typografie – allgemeine Inhaltsseiten / Beiträge / Startseite
 * Ziel:
 * - Ruhigere, etwas kleinere Typografie für statische Inhalte.
 * - Subtile responsive Staffelung für Smartphone / Tablet / Desktop.
 * - Gilt bewusst NICHT für die Darsteller-Datenbank
 *   (post-type-archive-darsteller / single-darsteller).
 * ============================================================ */
body.home main,
body.page main,
body.single-post main {
  font-size: 1rem;
  line-height: 1.58;
}

body.home .wp-block-post-title,
body.page .wp-block-post-title,
body.single-post .wp-block-post-title {
  font-size: 1.875rem;
  line-height: 1.15;
}

body.home .entry-content,
body.page .entry-content,
body.single-post .entry-content {
  font-size: inherit;
  line-height: inherit;
}

body.home .entry-content p,
body.page .entry-content p,
body.single-post .entry-content p,
body.home .entry-content li,
body.page .entry-content li,
body.single-post .entry-content li,
body.home .entry-content blockquote,
body.page .entry-content blockquote,
body.single-post .entry-content blockquote {
  font-size: inherit;
  line-height: inherit;
}

@media (min-width: 768px) {
  body.home main,
  body.page main,
  body.single-post main {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  body.home .wp-block-post-title,
  body.page .wp-block-post-title,
  body.single-post .wp-block-post-title {
    font-size: 2.0625rem;
  }
}

@media (min-width: 1024px) {
  body.home main,
  body.page main,
  body.single-post main {
    font-size: clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
  }

  body.home .wp-block-post-title,
  body.page .wp-block-post-title,
  body.single-post .wp-block-post-title {
    font-size: clamp(2.0625rem, 1.98rem + 0.4vw, 2.25rem);
  }
}

/* ============================================================
 * Startseite – News Grid (Beiträge)
 *
 * Rendering:
 * - via Dynamic Block: agency-artists/news-grid
 * - Styling hier, damit es zum Rest der Seite (Pills/Controls) passt.
 * ============================================================ */


/* Desktop: 4 Kacheln pro Zeile (Startseite) */
@media (min-width: 1024px) {
  body.home .agency-news-grid .agency-news-grid__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body.home .artafair-home-news {
  padding-block: var(--wp--preset--spacing--60);
}

/* Grid-Items nicht in der Zeilenhöhe stretchen (sonst entstehen unten "Leerflächen"). */
body.home .agency-news-grid .agency-news-grid__items {
  align-items: start;
}

body.home .artafair-home-news .wp-block-heading {
  margin-bottom: var(--wp--preset--spacing--30);
}

body.home .agency-news-card {
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--base, #fff);
  position: relative;
}

/*
 * News Bilder: NATÜRLICHES Seitenverhältnis (kein Crop)
 * - Der Rahmen passt sich dem Bild an.
 * - Bilder werden nicht beschnitten, sondern proportional skaliert.
 */
body.home .agency-news-card__image {
  display: block;
  position: relative;
  overflow: hidden;
  /*
   * Plugin-Basis-CSS setzt standardmäßig `aspect-ratio: 4/5` (Portrait-Crop).
   * Auf der Startseite wollen wir aber das natürliche Seitenverhältnis – ohne Crop.
   */
  aspect-ratio: auto;
}

body.home .agency-news-card__image img {
  display: block;
  width: 100%;
  height: auto;
  /* defensiv: falls ein anderes Stylesheet height:100% setzt */
  object-fit: contain;
}

/* Placeholder, falls kein Featured Image gesetzt ist */
body.home .agency-news-card__image--placeholder {
  display: block;
  width: 100%;
  /* ohne Bild brauchen wir eine definierte Höhe, sonst kollabiert die Kachel */
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, currentColor 3%, transparent);
}

/* Overlay (Desktop Hover/Focus): full-cover + Icons zentriert */
body.home .agency-news-card__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;

  /* leichte Abdunklung, nicht volle Opacity */
  background: color-mix(in srgb, #000 28%, transparent);
  transition: opacity 160ms ease;
}

body.home .agency-news-card:hover .agency-news-card__overlay,
body.home .agency-news-card:focus-within .agency-news-card__overlay {
  opacity: 1;
  pointer-events: auto;
}

body.home .agency-news-card__actions {
  display: flex;
  gap: 14px;
}

body.home .agency-news-card__action {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #fff 40%, transparent);
  background: color-mix(in srgb, #000 25%, transparent);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

body.home .agency-news-card__action:focus-visible {
  outline: 2px solid color-mix(in srgb, #fff 70%, transparent);
  outline-offset: 2px;
}

/* Mobile/Touch: Overlay per Tap (kein Hover) */
@media (hover: none), (pointer: coarse) {
  /* iOS/Safari kann :hover nach Tap "kleben" lassen -> neutralisieren */
  body.home .agency-news-card:hover .agency-news-card__overlay,
  body.home .agency-news-card:focus-within .agency-news-card__overlay {
    opacity: 0;
    pointer-events: none;
  }

  /* Overlay ist NUR sichtbar, wenn JS die Card als "open" markiert */
  body.home .agency-news-card.agency-news-card--open .agency-news-card__overlay {
    opacity: 1;
    pointer-events: auto;
    background: color-mix(in srgb, #000 18%, transparent);
  }

  body.home .agency-news-card__action {
    border: 1px solid color-mix(in srgb, #fff 30%, transparent);
    background: color-mix(in srgb, #000 20%, transparent);
    color: #fff;
  }
}


/* ============================================================
 * Site Header (alle Seiten außer Startseite)
 * Ziel:
 * - Header ist immer sichtbar.
 * - Sticky beim Scrollen.
 * - Leichter Shadow erst nach kurzem Scroll (via JS Klasse).
 * ============================================================ */
body:not(.home) header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 9999;
  background-color: var(--wp--preset--color--base, #fff);
  box-shadow: none;
  transition: box-shadow 200ms ease;
}

body:not(.home).artafair-site-scrolled header.wp-block-template-part {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}



/* News-Anker auf der Startseite: etwas Abstand unter dem Sticky-Header */
body.home #artafair-home-news {
  scroll-margin-top: calc(max(var(--artafair-home-header-height, 0px), 0px) + 18px);
}

/* Aktive Menü-Items in der Hauptnavigation etwas kräftiger hervorheben */
.wp-block-navigation[aria-label="Navigation"] .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.wp-block-navigation[aria-label="Navigation"] .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label {
  font-weight: 500;
}

/* Startseite: News-Link als aktiv behandeln (Custom Anchor-Link trägt i.d.R. keine current-menu-item Klasse). */
body.home .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation-item__content[href*="#artafair-home-news"] .wp-block-navigation-item__label,
body.home .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation-item__content[href*="#artafair-home-after-hero"] .wp-block-navigation-item__label {
  font-weight: 500;
}

/* Darsteller-Archiv: Künstler*innen-Link als aktiv behandeln, Singles bewusst NICHT. */
body.post-type-archive-darsteller .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation-item__content[href$="/darsteller"] .wp-block-navigation-item__label,
body.post-type-archive-darsteller .wp-block-navigation[aria-label="Navigation"] .wp-block-navigation-item__content[href$="/darsteller/"] .wp-block-navigation-item__label {
  font-weight: 500;
}