/*
Theme Name: Elisabit
Theme URI: https://elisabit.de
Description: Kind-Theme von Hello Elementor. Das Design kommt 1:1 aus dem
  kompilierten CSS der React-Seite (css/tailwind.css). Diese Datei enthaelt
  ausschliesslich die Bruecke zu Elementor — nichts vom Design selbst.
Author: elisabit
Template: hello-elementor
Version: 1.0.0
Text Domain: elisabit
*/

/* ============================================================
   ELEMENTOR-BRUECKE

   Das Design liegt in css/tailwind.css und ist dasselbe CSS, das die
   React-Seite ausliefert. Damit Tailwind-Klassen an Elementor-Elementen
   genauso wirken wie im Original, dreht diese Datei die Stellen zurueck,
   an denen Elementor eigene Vorgaben einschiebt.

   Ladereihenfolge (siehe functions.php):
     Elementor  ->  diese Bruecke  ->  Tailwind
   Die Bruecke muss NACH Elementor kommen, um dessen Vorgaben abzuschalten.
   Tailwind muss NACH der Bruecke kommen, weil beide mit einer Klasse
   adressieren — bei gleicher Spezifitaet entscheidet die Reihenfolge, und
   das Layout soll aus dem Original stammen, nicht aus der Bruecke.
   ============================================================ */

/* --- 1. Wrapper aus dem Layout nehmen ------------------------------------

   Elementor rendert pro Container und Widget zusaetzliche Divs:

     .e-con > .e-con-inner > .elementor-element > .elementor-widget-container

   Ein Tailwind-`grid` am Container traefe also nur .e-con-inner statt der
   Kinder. `display: contents` loest die Wrapper aus dem Layoutbaum, ohne
   sie aus dem DOM zu nehmen — die Kinder werden zu direkten Grid-/Flex-
   Kindern, genau wie im React-Markup.

   Gezielt ueber `eb-unwrap`, nicht global: Bereiche ohne diese Klasse
   behalten normales Elementor-Verhalten. */

.eb-unwrap > .e-con-inner {
  display: contents;
}

.eb-unwrap > .elementor-element > .elementor-widget-container,
.eb-unwrap > .e-con-inner > .elementor-element > .elementor-widget-container {
  display: contents;
}

.eb-unwrap-self > .elementor-widget-container {
  display: contents;
}

/* Ein HTML-Baustein, der nur absolut positioniertes Markup enthaelt
   (Verlaeufe, Verzierungen, Gitterraster), haette als eigener Kasten die
   Hoehe null — und `inset: 0` darin bezoege sich auf diesen Kasten statt
   auf die gemeinte Ebene. Ohne diese Zeile fehlen genau die Abdunklungen
   und Leuchtflaechen, die ueber den Aufmacherbildern liegen.

   Dasselbe gilt fuer das Text-Widget: Fliesstext, Listen und Zitate sind
   dort mitsamt ihrem aeusseren Tag hinterlegt (`<p class="text-xl …">`),
   damit sie im Editor bearbeitbar sind UND ihre Gestaltung behalten. Die
   Huelle darf dabei nicht als eigener Kasten im Layout stehen, sonst
   greifen Abstaende und Ausrichtung des Elternteils nicht mehr. */
.eb-plain > .elementor-widget-html.eb-unwrap-self,
.eb-plain > .elementor-widget-text-editor.eb-unwrap-self,
.eb-plain > .elementor-widget-video.eb-unwrap-self {
  display: contents;
}

/* --- 2. Elementor-Vorgaben neutralisieren --------------------------------

   Elementor steuert Breite, Abstaende und Anzeigeart ueber eigene
   CSS-Variablen. Wo Tailwind das Layout bestimmt, muessen die weg — sonst
   addieren sich Elementor-Padding und Tailwind-Padding.

   Wichtig: hier nur Variablen und `display` setzen, keine konkreten
   Layout-Eigenschaften wie padding oder max-width. Die kommen aus
   Tailwind, das nach dieser Datei geladen wird und bei gleicher
   Spezifitaet gewinnen soll. */

.eb-plain {
  --display: block;
  --content-width: 100%;
  --container-max-width: none;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --flex-wrap: nowrap;

  /* Schlaegt Elementors `.e-flex { display: flex }`. Tailwind-Klassen wie
     `grid` oder `flex` gewinnen danach wieder, weil Tailwind spaeter laedt. */
  display: block;
}

.eb-plain .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

.eb-plain .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Elementors Standard-Zeilenhoehe/Farbe darf die Tailwind-Klassen nicht
   ueberschreiben, wenn ein Widget direkt Markup ausgibt. */
.eb-plain .elementor-widget-html,
.eb-plain .elementor-widget-html > .elementor-widget-container {
  color: inherit;
  font-family: inherit;
}

/* --- 3. Elementor-Typografie neutralisieren -------------------------------

   Das Elementor-Kit faerbt und formatiert Ueberschriften global:

     .elementor-widget-heading .elementor-heading-title {
       color: var(--e-global-color-primary); font-family: ...; }

   Die Tailwind-Klassen sitzen aber am umgebenden Widget-Div, nicht am
   h1/h3/span selbst. Ohne diese Regel gewinnt Elementor — sichtbar als
   Text in Elementor-Blau statt im Verlauf der Marke.

   `inherit` gibt die Kontrolle an den Wrapper zurueck, wo die
   Original-Klassen stehen. */

.eb-plain .elementor-heading-title,
.eb-unwrap-self .elementor-heading-title,
.eb-plain .elementor-widget-text-editor,
.eb-plain .elementor-widget-text-editor > .elementor-widget-container,
.eb-plain .elementor-widget-html {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

/* Die Seite kennt nur eine Schrift (Space Grotesk), Ueberschriften haben
   also keine eigene Auszeichnungsschrift wie bei anderen Projekten. Was
   bleibt, ist Elementors Kit-Schrift: sie wuerde ueber `.elementor-kit-*`
   am <body> greifen, wenn eine Ueberschrift keine eigene Klasse traegt.
   Der Anker haelt die Spezifitaet bei (1,1,0) — Tailwind laedt spaeter und
   gewinnt weiterhin mit einer ausdruecklichen `font-*`-Klasse. */
#eb .eb-unwrap-self:where(.elementor-widget-heading):has(:where(h1, h2, h3, h4, h5, h6)) {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Bild-Widgets: Elementor rahmt <img> in <figure> und setzt eigene Breiten.
   Im Original traegt das <img> selbst die Klassen (w-full h-full object-cover). */
.eb-plain .elementor-widget-image,
.eb-plain .elementor-widget-image figure,
.eb-plain .elementor-widget-image .elementor-image {
  display: contents;
}

/* Elementor gibt Bildern eine Standardbreite; die Klassen am img zaehlen. */
.eb-plain .elementor-widget-image img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* --- 4. Flussrichtung, Ausrichtung, Breite --------------------------------

   Der `#eb`-Anker ist hier noetig: Elementor schreibt Richtung und
   Ausrichtung pro Element mit drei Klassen in post-<id>.css (Spezifitaet
   0,3,0). Eine einfache Klassenregel verliert dagegen. Der id-Selektor
   (1,1,0) gewinnt — und Tailwind, das ebenfalls ueber `#eb` laeuft und
   spaeter geladen wird, gewinnt weiterhin gegen diese Zeilen (`flex-col`,
   `self-start`, `grow` …). */

#eb .eb-plain {
  /* Elementor-Container sind `flex-direction: column`. Tailwinds `flex`
     setzt nur `display: flex` — dadurch zentriert `items-center` horizontal
     statt vertikal, und Aufmachertitel kleben oben unter der Kopfzeile. */
  --flex-direction: row;
  flex-direction: row;

  /* Elementor setzt an Containern zusaetzlich `align-self` und `flex-grow`.
     Damit ignoriert ein Kind das `items-center` seines Elternteils.
     `auto` gibt die Entscheidung an den Elternteil zurueck. */
  --align-self: auto;
  align-self: auto;
  --flex-grow: 0;
  --flex-shrink: 1;

  /* Elementor laesst Container umbrechen. Bei `flex-wrap: wrap` bestimmt
     `align-content` die Lage der Zeile — `align-items: center` zentriert
     dann nur INNERHALB der Zeile, und die Zeile selbst klebt oben. */
  --flex-wrap: nowrap;
  flex-wrap: nowrap;
  --align-content: center;
  align-content: center;

  /* Elementor setzt an jedem Container `width: var(--width)` und schreibt
     `--width: 100%` pro Element in post-<id>.css. Ein Container, der im
     React-Markup als Flex-Kind auf seine Inhaltsbreite schrumpft, wird damit
     auf die volle Zeile aufgezogen.

     Gesetzt wird nur die Variable, nicht `width` selbst: der Konverter hebt
     Inline-Breiten der Vorlage als eigene Klasse in das erzeugte Stylesheet
     (etwa `width: max-content` an einem Logo-Laufband). Eine direkte
     `width`-Angabe mit Anker wuerde diese Klasse schlagen und das Laufband
     auf Fensterbreite zusammenstauchen. */
  --width: auto;
}

/* Elementor setzt an Containern und Widgets `min-width: 0`. Damit darf ein
   Flex-Kind unter seine Inhaltsbreite schrumpfen — der Browser laesst das von
   sich aus nicht zu (`min-width: auto` entspricht der Mindestbreite des
   Inhalts). Sichtbar wird es an Plaketten und Knoepfen, deren letztes Zeichen
   ueber den eigenen Rand hinausragt.

   Im Original gibt es diese Regel nicht, also wird der Normalwert
   wiederhergestellt. Tailwind gewinnt weiterhin: `#eb .min-w-0` hat dieselbe
   Spezifitaet und laedt spaeter. */
#eb .eb-plain,
#eb .eb-unwrap-self {
  min-width: auto;
}

/* --- 5. Schaltflaechen ----------------------------------------------------

   Hier stand einmal ein Zuruecksetzen von Rahmen, Rundung und Abstand an
   <button>. Es war die Gegenregel zu Hello Elementors reset.css — und ein
   Fehler: mit `#eb .eb-plain button` (1,2,0) schlug sie auch die
   Tailwind-Klassen des Originals (`#eb .rounded-full`, 1,1,0). Der
   Absende-Knopf des Kontaktformulars stand dadurch rechteckig und ohne
   Innenabstand da, 24 statt 60 Pixel hoch.

   Richtig ist, den fremden Reset gar nicht erst zu laden; das geschieht in
   functions.php. Tailwinds Preflight ist der Reset der Vorlage und
   neutralisiert Knoepfe bereits genauso, wie das Original es erwartet.

   Bleibt nur die Tastaturbedienung: die Vorlage macht den Fokus ueber
   `html.enhanced-focus` sichtbar, eine Klasse, die dort das
   Barrierefreiheits-Werkzeug setzt (inc/a11y.php tut dasselbe). Ohne
   Klasse greift die schlichtere Regel aus index.css — und die ist Teil des
   Tailwind-Builds, steht also bereits zur Verfuegung. Hier ist nichts
   nachzutragen. */