/*
 Theme Name:   Sunflower26 Childtheme
 Theme URI:    https://sunflower-theme.de
 Description:  Childtheme für das Sunflower26 Theme von verdigado eG
 Author:       verdigado eG
 Author URI:   https://git.verdigado.com/verdigado/sunflower26-childtheme
 Template:     sunflower26
 Version:      1.0.0
 License:      GNU General Public License v2 the later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  sunflower26-childtheme
 */

/* ============================================================
   Sunflower 26 Child-Theme — Erweiterungen
   ============================================================
   - Neue Farb-Palette + Gradient (siehe theme.json)
   - textbalken2: rechteckiger Pendant zu textbalken
   - label-top/-bottom & skew-box: rechteckig statt Trapez
   ============================================================ */


/* ----------------------------------------------------------
   1. textbalken2 — rechteckiger Pendant zu textbalken
   Parent: sunflower26/style.css (Z. 28118–28370)
   Unterschied: KEIN transform: skew, padding 6/10/6/10
   ---------------------------------------------------------- */

/* Heading-Reset (margin/padding analog zu textbalken) */
h1.textbalken2,
h2.textbalken2,
h3.textbalken2,
h4.textbalken2,
h5.textbalken2,
h6.textbalken2,
.h1.textbalken2,
.h2.textbalken2,
.h3.textbalken2,
.h4.textbalken2,
.h5.textbalken2,
.h6.textbalken2 {
  margin-bottom: 0;
  padding: 0 1em;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Basis-Layout: rechteckiger Hintergrund via ::before */
.has-background.textbalken2 {
  z-index: 0;
  width: fit-content;
  line-height: 150%;
  position: relative;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 6px 10px 6px 10px !important;
}

.has-background.textbalken2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* KEIN transform: skew — bleibt rechteckig */
}

/* Alignment */
.has-background.textbalken2.has-text-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}
.has-background.textbalken2.has-text-align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Bestehende Farb-Varianten (von Parent geerbt) */
.has-background.textbalken2.has-schwarzwald-background-color::before {
  background-color: #002216;
}
.has-background.textbalken2.has-tanne-background-color::before {
  background-color: #005538;
}
.has-background.textbalken2.has-klee-background-color::before {
  background-color: #008939;
}
.has-background.textbalken2.has-grashalm-background-color::before {
  background-color: #8abd24;
}
.has-background.textbalken2.has-sonne-background-color::before {
  background-color: #fff17a;
}
.has-background.textbalken2.has-sand-background-color::before {
  background-color: #f5f1e9;
}
.has-background.textbalken2.has-maus-background-color::before {
  background-color: #374951;
}
.has-background.textbalken2.has-kalk-background-color::before {
  background-color: #e8eae9;
}
.has-background.textbalken2.has-gruener-sand-background-color::before {
  background-color: #f3faf6;
}
.has-background.textbalken2.has-himmel-background-color::before {
  background-color: #0ba1dd;
}

/* Neue Farb-Varianten (Child theme.json) */
.has-background.textbalken2.has-limette-background-color::before {
  background-color: #c7ff7a;
}
.has-background.textbalken2.has-flieder-background-color::before {
  background-color: #9f88ff;
}
.has-background.textbalken2.has-pink-background-color::before {
  background-color: #f28ade;
}
.has-background.textbalken2.has-koralle-background-color::before {
  background-color: #ff8568;
}
.has-background.textbalken2.has-minze-background-color::before {
  background-color: #33c270;
}

/* Versätze: links-eins (52px desktop / 32px mobile) */
.has-background.textbalken2.links-eins {
  margin-left: 52px !important;
}
@media (max-width: 949.98px) {
  .has-background.textbalken2.links-eins {
    margin-left: 32px !important;
  }
}
.has-background.textbalken2.links-eins.has-text-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}
.has-background.textbalken2.links-eins.has-text-align-right {
  margin-left: auto !important;
  margin-right: 52px !important;
}
@media (max-width: 949.98px) {
  .has-background.textbalken2.links-eins.has-text-align-right {
    margin-right: 32px !important;
  }
}

/* Versätze: links-zwei (92px desktop / 52px mobile) */
.has-background.textbalken2.links-zwei {
  margin-left: 92px !important;
}
@media (max-width: 949.98px) {
  .has-background.textbalken2.links-zwei {
    margin-left: 52px !important;
  }
}
.has-background.textbalken2.links-zwei.has-text-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}
.has-background.textbalken2.links-zwei.has-text-align-right {
  margin-left: auto !important;
  margin-right: 52px !important;
}
@media (max-width: 949.98px) {
  .has-background.textbalken2.links-zwei.has-text-align-right {
    margin-right: 32px !important;
  }
}

/* Versätze: links-drei (132px desktop / 92px mobile) */
.has-background.textbalken2.links-drei {
  margin-left: 132px !important;
}
@media (max-width: 949.98px) {
  .has-background.textbalken2.links-drei {
    margin-left: 92px !important;
  }
}

/* Cover-Container: Padding-Korrektur analog textbalken */
.wp-block-cover__inner-container:has(.textbalken2) {
  padding-left: 1em;
  padding-right: 1em;
}

/* Spalten-Selektoren (analog textbalken) */
.wp-block-columns .wp-block-column p.textbalken2,
.wp-block-columns .wp-block-column ul.textbalken2 {
  margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   2. label-top / label-bottom — Schräge entfernen
   Parent: sunflower26/style.css (Z. 29443, 29470)
   Das Header-Template gibt .label-top skew-box aus;
   wir überschreiben per Spezifität.
   ---------------------------------------------------------- */

.top-bar .brand-left .label-top::before,
.top-bar .brand-left .label-bottom::before {
  transform: none;
  left: 0;
  width: 100%;
}

/* Mobile-Anpassung (Parent hatte left: -7px / width: calc(100% + 14px)) */
@media (max-width: 1499.98px) {
  .top-bar .brand-left .label-top::before,
  .top-bar .brand-left .label-bottom::before {
    left: 0;
    width: 100%;
  }
}

/* ----------------------------------------------------------
   3. skew-box — Padding/Höhe für rechteckige Optik
   Parent: sunflower26/style.css (Z. 30000)
   Höhe und Inline-Padding anpassen, damit die Box ohne
   Schräge sauber sitzt.
   ---------------------------------------------------------- */

.skew-box {
  height: auto;
  padding: 6px 10px;
}
@media (max-width: 1499.98px) {
  .skew-box {
    height: auto;
    padding: 6px 10px;
  }
}

/* ----------------------------------------------------------
   4. Logo-Font: Work Sans Bold Italic
   Überschreibt die Parent-Schrift (gruenetypeneue) für das
   Sunflower-Logo im Topbar (.label-top, .label-bottom via .skew-box)
   ---------------------------------------------------------- */
.site .skew-box {
  font-family: var(--wp--preset--font-family--worksans), sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* ----------------------------------------------------------
   5. Brand-Label Versatz aufheben + Text-Decoration
   Parent: sunflower26/style.css (Z. 29435–29493)
   ---------------------------------------------------------- */

/* Versatz aufheben — label-top ist im Parent um --gap-large versetzt */
.site .top-bar .brand-left .label-top {
  right: 0;
  left: 0;
}

/* Default underline auf Brand-Box entfernen */
.top-bar .brand-left,
.top-bar .brand-left:hover {
  text-decoration: none;
}

/* ----------------------------------------------------------
   6. Brand-Label Farben + Hover (Child-Theme-Override)
   ---------------------------------------------------------- */

:root {
  /* label-top */
  --label-top-bg: #c7ff7a;          /* Limette  */
  --label-top-bg-hover: #000000;
  --label-top-color: #000000;
  --label-top-color-hover: #c7ff7a; /* Limette  */

  /* label-bottom */
  --label-bottom-bg: #F5F1E9;        /* Sand          */
  --label-bottom-bg-hover: #c7ff7a;  /* Grüner Sand   */
  --label-bottom-color: #000000;
  --label-bottom-color-hover: #000000;
}

/* label-top Hauptfarbe + Schrift */
.top-bar .brand-left .label-top {
  --bg: var(--label-top-bg);
  background-color: var(--bg);
  color: var(--label-top-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.top-bar .brand-left .label-top::before {
  background-color: var(--bg);
}

/* label-bottom Hauptfarbe + Schrift */
.top-bar .brand-left .label-bottom {
  --bg: var(--label-bottom-bg);
  background-color: var(--bg);
  color: var(--label-bottom-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.top-bar .brand-left .label-bottom::before {
  background-color: var(--bg);
}

/* Hover-Verhalten */
.top-bar .brand-left:hover .label-top {
  --bg: var(--label-top-bg-hover);
  color: var(--label-top-color-hover);
}
.top-bar .brand-left:hover .label-bottom {
  --bg: var(--label-bottom-bg-hover);
  color: var(--label-bottom-color-hover);
}

/* ----------------------------------------------------------
   7. Body-Font: Wix Madefor Display (Override gegen Parent-`body` in style.css Z. 28465)
   Selektor `body` reicht, weil Child-style.css NACH Parent-style.css geladen wird
   (siehe functions.php add_action priority 11) und damit per Source-Order gewinnt.
   ---------------------------------------------------------- */
body {
  font-family: var(--wp--preset--font-family--wix-madefor-display);
  font-weight: 400;
  line-height: 1.5;
}

/* ----------------------------------------------------------
   8. Headings: gegen Parent-`theme.json`-Default (`styles.elements.h1/h2`, Spec 0,0,0,1)
   UND gegen Parent-`.colorscheme-*-h1/h2` (Spec 0,0,2,1).

   Zwei-Schichten-Strategie (analog editor-style.css Section 6):
   a) Globaler Override für h1..h6 + .h1..h6
      - Element-Variante: `hN` → Spec (0,0,0,1)
      - Utility-Klassen-Variante: `.hN` → Spec (0,0,1,0)
      Gewinnt gegen theme.json-`h1` (Spec 0,0,0,1) per Source-Order im Child.
   b) Color-Scheme-Override (Defense-Layer):
      - Element-Variante: `.colorscheme-* hN` → Spec (0,0,1,1)
      - Utility-Klassen-Variante: `.colorscheme-* .hN` → Spec (0,0,2,0)
      Gewinnt für Headings INNERHALB von Color-Scheme-Containern (z. B.
      Body-Templates, die Color-Scheme setzen).
   ---------------------------------------------------------- */

/* a) Globale Headings — gewinnt gegen theme.json-Default */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--wp--preset--font-family--wix-madefor-display);
}
h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 800; }
h3, .h3 { font-weight: 700; }
h4, .h4,
h5, .h5,
h6, .h6 { font-weight: 600; }

/* b) Color-Scheme-Headings — Defense-Layer für Posts mit Color-Wrapper */
.colorscheme-light h1, .colorscheme-light .h1,
.colorscheme-light h2, .colorscheme-light .h2,
.colorscheme-light h3, .colorscheme-light .h3,
.colorscheme-light h4, .colorscheme-light .h4,
.colorscheme-light h5, .colorscheme-light .h5,
.colorscheme-light h6, .colorscheme-light .h6,
.colorscheme-green h1, .colorscheme-green .h1,
.colorscheme-green h2, .colorscheme-green .h2,
.colorscheme-green h3, .colorscheme-green .h3,
.colorscheme-green h4, .colorscheme-green .h4,
.colorscheme-green h5, .colorscheme-green .h5,
.colorscheme-green h6, .colorscheme-green .h6 {
  font-family: var(--wp--preset--font-family--wix-madefor-display);
}
.colorscheme-light h1, .colorscheme-light .h1,
.colorscheme-green h1, .colorscheme-green .h1 { font-weight: 800; }
.colorscheme-light h2, .colorscheme-light .h2,
.colorscheme-green h2, .colorscheme-green .h2 { font-weight: 800; }
.colorscheme-light h3, .colorscheme-light .h3,
.colorscheme-green h3, .colorscheme-green .h3 { font-weight: 700; }
.colorscheme-light h4, .colorscheme-light .h4,
.colorscheme-light h5, .colorscheme-light .h5,
.colorscheme-light h6, .colorscheme-light .h6,
.colorscheme-green h4, .colorscheme-green .h4,
.colorscheme-green h5, .colorscheme-green .h5,
.colorscheme-green h6, .colorscheme-green .h6 { font-weight: 600; }

body p {
  font-weight: 400;
  line-height: 1.6;
}

/* 9. Custom logo dark mode — body color-scheme toggles logo visibility. */
.colorscheme-light .custom-logo-dark { display: none; }
.colorscheme-green .custom-logo-light { display: none; }

/* 9b. Sticky header: translucent white background in both color schemes
   (parent sets rgba(255, 255, 255, 0.7)), so always show light logo. */
.top-bar.stuck .custom-logo-dark  { display: none; }
.top-bar.stuck .custom-logo-light { display: inline-block; }

/* 9c. Hamburger-Modus: Light/Dark-Umschaltung als Defense-Layer (falls Section 9 nicht greift,
   weil custom_logo_render_picture Original-Parent-HTML zurückgeben könnte wenn URLs identisch
   oder null sind). Spec (0,3,0) + !important schlägt Section 9 (0,2,0). */
body.hamburger-menu.colorscheme-light .custom-logo-light,
body.hamburger-menu.colorscheme-green .custom-logo-dark { display: inline-block !important; }
body.hamburger-menu.colorscheme-light .custom-logo-dark,
body.hamburger-menu.colorscheme-green .custom-logo-light { display: none !important; }

/* 9d. Hamburger Logo max-width 130px. Normal-Pfad Spec (0,4,0) + !important schlägt Parent
   Z. 29758 (0,4,1). Sticky-Selektor Spec (0,5,1) + !important gewinnt gegen Z. 29990 (0,4,1). */
body.hamburger-menu .top-bar .right-bar .custom-logo-link,
body.hamburger-menu .top-bar .right-bar .logo-background,
body.hamburger-menu .top-bar .right-bar .custom-logo-link img,
body.hamburger-menu .top-bar .right-bar .logo-background img,
body.hamburger-menu .top-bar .right-bar .logo-background svg,
body.hamburger-menu .top-bar .right-bar .custom-logo,
body.hamburger-menu .top-bar.stuck .right-bar__content > .custom-logo-link .custom-logo {
  max-width: 130px !important;
}