/*
Theme Name: Christoph Alexander Verlag
Theme URI: https://christoph-alexander.com
Description: Child theme of GeneratePress for the Christoph Alexander Verlag shop. Layout grid, header/footer hooks, brand tokens, WooCommerce template overrides. All custom functionality lives in the cav-core plugin.
Author: Christoph Alexander Verlag
Template: generatepress
Version: 0.1.0
Text Domain: cav
*/

/* =====================================================================
   1. MARKENSYSTEM — Tokens (VERBINDLICH, Briefing §1)
   Single source of truth for colors, type, radius, shadow, spacing.
   ===================================================================== */
/* The [hidden] attribute must always win over component display rules
   (facet popups, overlays, search count, drawers all rely on it). */
[hidden]{ display: none !important; }

/* Inline SVG icons must never shrink in flex containers (otherwise a single
   icon centred in a flex button collapses to a few px wide). */
svg{ flex-shrink: 0; }

/* Links carry no underline by default (matches the design's `.ca-navroot a`);
   only prose/legal content and explicit text-links underline. */
a{ text-decoration: none; }
.entry-content a:not(.cav-btn):not(.button),
.cav-textlink{ text-decoration: underline; }
.cav-textlink{ text-underline-offset: 2px; }

:root{
  /* --- Farben (§1.1) --- */
  --cav-navy:            #2A3A52; /* Primär: Headlines, Buttons, Nav, Footer-BG */
  --cav-navy-hover:      #22304a; /* Button-Hover */
  --cav-navy-grad-1:     #34465f; /* Hero-Verlauf hell */
  --cav-navy-grad-2:     #3E5C8A; /* Hero-Verlauf hell 2 */

  --cav-hafer:           #F4F1E9; /* Seiten-Hintergrund (NIE Weiß als Body) */
  --cav-hafer-2:         #F7F4EC; /* Input-Felder, leichte Flächen */
  --cav-hafer-3:         #F0ECE2; /* Sand — sekundäre Flächen/Tints */
  --cav-cover-bg:        #EDE8DD; /* Cover-/Bild-Platzhalter-Hintergrund */

  --cav-ink:             #33322E; /* Anthrazit — Fließtext primär */
  --cav-ink-2:           #5C574F; /* Anthrazit-2 — Fließtext sekundär */
  --cav-warm:            #8C8882; /* Warmgrau — NUR Dekor/Trenner/Borders (als Text < AA!) */
  --cav-meta-text:       #6E6A63; /* Meta-TEXT (Datum/Lesezeit) — AA-konform: 5.4:1 Weiß / 4.8:1 Hafer */
  --cav-warm-light:      #C9C4BB; /* Warmgrau-hell — Trenner, Breadcrumb-Slashes */

  --cav-honey:           #D9A441; /* Akzent — SPARSAM */
  --cav-honey-dark:      #B07D1E; /* Honig-Text auf hellem Grund */
  --cav-honey-dark-2:    #C89230;

  --cav-teal:            #2E8B86; /* Sekundär-Akzent: Sofort-PDF, Erfolg, Häkchen */
  --cav-berry:           #8C4A5C; /* Lieber gebunden, Abmelden, dezente Warnung */
  --cav-green:           #7E9070; /* vereinzelt Kategorie-Akzent */

  --cav-white:           #FFFFFF; /* NUR Karten/Objekte */
  --cav-card-border:     rgba(140,136,130,0.18); /* Standard-Border weißer Karten */

  /* --- Typografie (§1.2) --- */
  --cav-font-head: "Fredoka", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cav-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Skalen Desktop (§1.2) — responsiv per clamp(), skaliert selbst ohne Media-Query */
  --cav-fs-h1-hero:   clamp(34px, 5.5vw, 52px); /* Startseiten-Hero */
  --cav-fs-h1:        34px;
  --cav-fs-h2-page:   clamp(30px, 4vw, 46px);   /* Seiten-H1 (Magazin/Über-uns) */
  --cav-fs-h2-section: 36px;                     /* Section-Überschriften Startseite */
  --cav-fs-h2:        26px; /* 24–28 */
  --cav-fs-h3:        16px;
  --cav-fs-lead:      19px; /* Intro-/Lead-Absatz */
  --cav-fs-body-lg:   17.5px; /* Artikel-Fließtext */
  --cav-fs-body:      16px; /* 15–17 */
  --cav-fs-body-sm:   14.5px; /* Karten-Text, sekundär */
  --cav-fs-meta:      13px; /* 12.5–13.5 */

  /* --- Form & Abstände (§1.3) --- */
  --cav-radius-sm:    12px; /* innere Elemente, Chips, kleine Karten */
  --cav-radius-md:    16px; /* mittlere Karten/Bilder */
  --cav-radius-card:  20px; /* 18–20 */
  --cav-radius-band:  22px; /* 20–24 */
  --cav-radius-pill:  999px;
  /* Elevation-Skala (alle mit Marken-Basis rgba(42,58,82,…)) */
  --cav-shadow-sm:    0 12px 30px -18px rgba(42,58,82,0.30);
  --cav-shadow-md:    0 18px 40px -24px rgba(42,58,82,0.40);
  --cav-shadow-card:  0 16px 40px -30px rgba(42,58,82,0.35);
  --cav-shadow-band:  0 24px 54px -30px rgba(42,58,82,0.7);

  --cav-container:    1320px;
  --cav-gutter:       20px;
  --cav-section-gap:  64px;
  --cav-read-max:     820px; /* Lese-Sektionen */

  /* Motion */
  --cav-ease-bounce: cubic-bezier(.34,1.28,.64,1); /* sanftes Überschwingen (war 1.5 = zu wackelig) */
  --cav-ease:        cubic-bezier(.16,1,.3,1);     /* smooth Ease-out für Slides/Panels/Overlays, KEIN Overshoot */
}

/* =====================================================================
   2. Oberflächen — nur drei: Hafer (Body), Weiß (Karten), Navy (Bänder)
   ===================================================================== */
html,
body,
body.generate-page{
  background: var(--cav-hafer);
  color: var(--cav-ink);
  font-family: var(--cav-font-body);
  font-size: var(--cav-fs-body);
  line-height: 1.6;
}

/* =====================================================================
   GeneratePress layout override — hand width/layout control to our
   custom templates. Without this GP squeezes content into a sidebar
   column + narrow container.
   ===================================================================== */
.site.grid-container,
.grid-container.container{ max-width:100%; padding-left:0; padding-right:0; width:100%; }
.site-content{ display:block; padding:0; }
#primary.content-area,
.content-area{ width:100% !important; max-width:100%; float:none; }
.widget-area, #right-sidebar, #left-sidebar{ display:none !important; }

/* App templates (home/shop/product/cart/checkout/account): no GP article box. */
.cav-bleed .site-main{ margin:0; padding:0; }
.cav-bleed .inside-article,
.cav-bleed article.post,
.cav-bleed .entry-content{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }
.cav-bleed .entry-header{ display:none; }

/* Reading pages (legal, über uns, kontakt, hilfe): our content has its own
   H1/eyebrow — hide GeneratePress's duplicate page-title header. */
body.page.cav-read-page .entry-header{ display:none; }
.cav-read-page .site-main{ max-width: var(--cav-container); margin:24px auto !important; padding:0 20px; }
/* Safety: always centre the main content column (GP/another rule otherwise resolves
   the auto margins to 0, leaving the whole page stuck to the left). */
.cav-bleed .site-main,
.cav-read-page .site-main{ margin-left:auto !important; margin-right:auto !important; }
.cav-read-page .inside-article{ background:#fff; border:1px solid var(--cav-card-border); border-radius: var(--cav-radius-card); box-shadow: var(--cav-shadow-card); padding:34px 38px; }
.cav-read-page .entry-content{ max-width: var(--cav-read-max); margin-inline:auto; }
.cav-read-page .entry-content :first-child{ margin-top:0; }

/* Legal/reading pages (Impressum, Datenschutz, AGB, Widerruf): 820px card + prose. */
.cav-legal-page .inside-article{ max-width:820px; margin-left:auto; margin-right:auto; }
.cav-legal .lg-eyebrow{ font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color: var(--cav-honey, #D9A441); }
.cav-legal h1{ font-family: var(--cav-font-head, 'Fredoka'), sans-serif; font-weight:600; font-size:34px; color: var(--cav-navy, #2A3A52); margin:8px 0 4px; line-height:1.1; }
.cav-legal .lg-sub{ font-size:14.5px; color: var(--cav-warm, #8C8882); margin:0 0 8px; }
.cav-legal h2{ font-family: var(--cav-font-head, 'Fredoka'), sans-serif; font-weight:600; font-size:21px; color: var(--cav-navy, #2A3A52); margin:30px 0 10px; }
.cav-legal h3{ font-family: var(--cav-font-head, 'Fredoka'), sans-serif; font-weight:600; font-size:16.5px; color: var(--cav-navy, #2A3A52); margin:18px 0 6px; }
.cav-legal p{ font-size:15px; line-height:1.7; color: var(--cav-ink-soft, #5C574F); margin:0 0 12px; }
.cav-legal strong{ color:#33322E; }
.cav-legal a{ color: var(--cav-navy, #2A3A52); font-weight:700; text-decoration:underline; }
.cav-legal .lg-note{ display:flex; gap:13px; align-items:flex-start; background: var(--cav-hafer, #F4F1E9); border-radius:14px; padding:18px 20px; margin:20px 0 6px; }
.cav-legal .lg-note__ico{ flex:none; width:34px; height:34px; border-radius:10px; background: var(--cav-honey, #D9A441); color:#33322E; display:flex; align-items:center; justify-content:center; }
.cav-legal .lg-note p{ margin:0; font-size:14px; line-height:1.6; }

/* Container deckungsgleich mit Nav-Innenkante (§1.3) */
.cav-container{
  max-width: var(--cav-container);
  margin-inline: auto;
  padding-inline: var(--cav-gutter);
  width: 100%;
}
.cav-read{ max-width: var(--cav-read-max); margin-inline: auto; }
/* Enthält die Lese-Karte die Gratis-CTA (.cagm)? Dann darf sie die VOLLE Breite der
   weißen Karte nutzen — nur der Fließtext (alles außer der CTA) bleibt in der 820px-Lesespalte. */
.cav-read:has(.cagm){ max-width: none !important; }
.cav-read:has(.cagm) > :not(.cagm){ max-width: var(--cav-read-max); margin-inline: auto; }
/* Wenn die Gratis-CTA (.cagm) schon in einer weißen Karte steckt — der Lese-Karte
   (.cav-read, /gratis-motiv/) oder der Produktseiten-Karte (.cav-lead) — verschmilzt sie
   mit ihr zu EINEM Modul: kein zweiter Rahmen/Schatten, keine Karte-in-Karte.
   (Standalone auf anderen Seiten behält .cagm die eigene Karte.) */
.cav-read .cagm,
.cav-lead .cagm{ background: transparent; border: none; box-shadow: none; padding: 8px 0 0; }

/* Headlines: Fredoka, immer einfarbig Navy (§1.2) */
h1,h2,h3,h4,h5,h6,
.cav-head{
  font-family: var(--cav-font-head);
  font-weight: 600;
  color: var(--cav-navy);
  line-height: 1.15;
}
h1{ font-size: var(--cav-fs-h1); }
h2{ font-size: var(--cav-fs-h2); }
h3{ font-size: var(--cav-fs-h3); }

/* Auf Navy-Bändern: Headlines weiß */
.cav-band h1, .cav-band h2, .cav-band h3,
.cav-on-navy h1, .cav-on-navy h2, .cav-on-navy h3,
.cav-on-navy{ color: var(--cav-white); }

/* --- Surfaces --- */
.cav-card{
  background: var(--cav-white);
  border: 1px solid var(--cav-card-border);
  border-radius: var(--cav-radius-card);
  box-shadow: var(--cav-shadow-card);
}
.cav-band{
  background: linear-gradient(135deg, var(--cav-navy), var(--cav-navy-grad-1) 55%, var(--cav-navy-grad-2));
  border-radius: var(--cav-radius-band);
  box-shadow: var(--cav-shadow-band);
  color: var(--cav-white);
}

/* Eyebrow (Honig, sparsam) */
.cav-eyebrow{
  font-family: var(--cav-font-body);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--cav-fs-meta);
  color: var(--cav-honey-dark);
}
.cav-band .cav-eyebrow{ color: var(--cav-honey); }

/* Meta / sekundär */
.cav-meta{ color: var(--cav-meta-text); font-size: var(--cav-fs-meta); }
.cav-sub{ color: var(--cav-ink-2); }

/* =====================================================================
   3. Akzent-Helfer (sparsam einsetzen)
   ===================================================================== */
.cav-pill-teal{ background: var(--cav-teal); color:#fff; border-radius: var(--cav-radius-pill); }
.cav-badge-new{ background: var(--cav-teal); color:#fff; }
.cav-badge-bestseller{ background: var(--cav-honey); color: var(--cav-navy); }
.cav-text-berry{ color: var(--cav-berry); }
.cav-text-teal{ color: var(--cav-teal); }

/* =====================================================================
   4. Page-Transition (§2.3) — nur Opacity, damit Sticky/Modal stabil
   ===================================================================== */
@keyframes cav-fade-in{ from{opacity:0;} to{opacity:1;} }
.cav-page-enter{ animation: cav-fade-in .4s ease both; }
@media (prefers-reduced-motion: reduce){
  .cav-page-enter{ animation: none; }
}

/* =====================================================================
   5. Globale Mobile-Regeln (§9, ≤560px) — Headlines runter, Paddings rein,
      kein horizontaler Overflow.
   ===================================================================== */
@media (max-width: 980px){
  :root{ --cav-fs-h1: 28px; --cav-fs-h2-section: 30px; --cav-fs-h2: 22px; }
}
@media (max-width: 560px){
  :root{ --cav-fs-h1: 24px; --cav-fs-h2-section: 26px; --cav-fs-h2: 20px; --cav-section-gap: 44px; }
  .cav-card{ padding: 16px !important; }
}
html, body{ overflow-x: clip; }

/* Finder-CTA („Welches Malbuch passt zu deinem Kind?") mobil kompakter — überschreibt die
   Inline-Styles per !important. Global, damit es überall greift (Start/Shop/Produkt/Magazin). */
@media (max-width:600px){
  .cav-finder-cta{ padding:16px !important; gap:13px !important; }
  .cav-finder-cta > span:first-child{ width:44px !important; height:44px !important; border-radius:12px !important; font-size:24px !important; }
  .cav-finder-cta > span:nth-child(2){ min-width:0 !important; }
  .cav-finder-cta > span:nth-child(2) > span:first-child{ font-size:17px !important; }
  .cav-finder-cta > span:nth-child(2) > span:nth-child(2){ font-size:13px !important; }
  .cav-finder-cta > span:last-child{ width:100%; text-align:center; justify-content:center; padding:11px 18px !important; }
}

/* =====================================================================
   6. A11y — Keyboard-Fokus (WCAG 2.4.7) & Reduced-Motion (WCAG 2.3.3)
   ===================================================================== */
/* Sichtbarer Fokus-Ring nur bei Tastatur-Navigation (nicht bei Maus-Klick). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--cav-navy);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Auf Navy-Bändern heller Ring (Navy-auf-Navy wäre unsichtbar). */
.cav-band a:focus-visible, .cav-band button:focus-visible,
.cav-on-navy a:focus-visible, .cav-on-navy button:focus-visible,
.cav-footer a:focus-visible{ outline-color: var(--cav-honey); }

/* Container-Felder setzen outline:0 auf dem inneren <input> — Fokus am Container zeigen. */
.cav-ifield:focus-within,
.cav-search__bar:focus-within{
  box-shadow: 0 0 0 3px rgba(42,58,82,0.32);
  border-color: var(--cav-navy);
}

/* Bewegung reduzieren: alle Animationen/Transitions global entschärfen. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   7. Print (@media print) — Artikel & Rechtsseiten sauber druckbar
   ===================================================================== */
@media print{
  html, body{ background:#fff !important; color:#000 !important; }
  /* Chrome: Nav, Footer, Cookie-Banner, Drawer/Overlays, CTAs, Reel raus. */
  .cav-header, .cav-footer, .cav-overlay, .cav-drawer, .cav-cookie,
  .cav-finder-fab, .cav-hero-reel, .cav-sidecart, .cav-mag-more,
  .ca-testi, #newsletter, .cav-finder-cta, .cav-skiplink{ display:none !important; }
  .cav-band, .cav-on-navy{ background:#fff !important; color:#000 !important; box-shadow:none !important; }
  .cav-card, .ca-prose, .cav-read-page .inside-article{ box-shadow:none !important; border:1px solid #ccc !important; }
  a{ color:#000 !important; text-decoration:underline; }
  /* Lese-/Rechtsseiten: Ziel-URL hinter Links ausschreiben. */
  .cav-legal a[href^="http"]::after,
  .ca-prose a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; color:#555; }
  section, .cav-card{ break-inside: avoid; }
}

/* =====================================================================
   8. DESIGN-SYSTEM-REFERENZ (Single Source of Truth) — Stand Modul 2
   ---------------------------------------------------------------------
   FARBEN (Rollen):
     Flächen: --cav-hafer (Body) · --cav-white (Karten) · --cav-band=Navy-Verlauf
              --cav-hafer-2/-3, --cav-cover-bg (Tints)
     Text:    --cav-ink (primär) · --cav-ink-2 (sekundär) · --cav-meta-text (Meta, AA!)
              --cav-warm = NUR Dekor/Border (als Text < AA)
     Marke:   --cav-navy (Primär) · --cav-honey/-dark (Akzent, als TEXT nur -dark)
              --cav-teal · --cav-berry · --cav-green (sparsam)
   TYPO: Head=Fredoka (--cav-font-head), Body=Nunito Sans (--cav-font-body)
     Skala: --cav-fs-h1-hero(clamp) · h2-page(clamp) · h2-section · h1 · h2 · h3
            · lead · body-lg · body · body-sm · meta.  Gewichte 400/500/600/700/800.
   FORM: Radius sm(12)/md(16)/card(20)/band(22)/pill.  Shadow sm/md/card/band.
   BREAKPOINTS (kanonisch — neuer Code NUR diese verwenden):
     560 (mobil) · 768 (tablet) · 980 (Desktop-Collapse/Nav) · 1320 (Container-Max).
     (Altbestand nutzt noch Zwischenwerte; schrittweise auf diese vier zusammenführen.)
   KOMPONENTEN: .cav-card · .cav-band · .cav-btn(-navy/-ghost/-teal) · .cav-magcard
     · Artikel-Boxen (Vertrag: siehe cav-magazin.css).
   REGEL: Neue Styles über Tokens. Keine rohen Hex außer in E-Mail-Templates
          (Mail-Clients unterstützen keine CSS-Variablen).
   ===================================================================== */