/*
 Theme Name:   Hello Elementor Child (ENMARU)
 Theme URI:    https://elementor.com/
 Description:  Custom Child Theme für ENMARU basierend auf Hello Elementor mit lokaler Schrift-Integration.
 Author:       ENMARU Entwicklungs-Team
 Author URI:   https://enmaru.app
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* =========================================================================
   LOCAL FONTS SETUP (Jost Regular & Italic Variable Fonts)
   Erweiterte Font-Weights: 200 bis 900 | DSGVO-konform & Performance-optimiert
   ========================================================================= */

/* 1. Normaler / Aufrechter Schnitt (Roman Axis) */
@font-face {
  font-family: 'Jost';
  src: url('./fonts/Jost-VariableFont_wght.woff2') format('woff2-variations'),
       url('./fonts/Jost-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 900; /* Stufenlose Range von Extra Light bis Black */
  font-style: normal;   /* Definiert den Standard-Schnitt */
  font-display: swap;   /* Verhindert Layout-Verschiebungen beim Laden */
}

/* 2. Kursiver Schnitt (Italic Axis) */
@font-face {
  font-family: 'Jost';
  src: url('./fonts/Jost-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('./fonts/Jost-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 900; /* Nutzt dieselbe Gewichtsachse wie der normale Schnitt */
  font-style: italic;   /* WICHTIG: Mappt diese Datei exakt auf den Kursiv-Zustand */
  font-display: swap;
}

/* =========================================================================
   DEIN CUSTOM CSS FÜR HOVER, GLOWS UND SCHATTEN STARTET HIER
   ========================================================================= */

/* =========================================================================
   KUGELSICHERES FIXING FÜR ELEMENTOR FREE HEADER & FOOTER INJECTION
   ========================================================================= */

/* 1. Header & Footer Container auf volle Breite zwingen */
#site-header .elementor-section-wrap,
#site-footer .elementor-section-wrap,
#site-header .elementor-element,
#site-footer .elementor-element {
    width: 100%;
}

/* 1b. Header-Element selbst von der 600px-Begrenzung des Parent-Themes (Hello Elementor) befreien.
   Hello setzt `header:not(.dynamic-header) { max-width: 600px }` in theme.min.css — ohne diesen
   Override bleibt der <header> auf 600px gekappt und zentriert. Die inneren Container (Regel 1)
   können dann nicht über 600px hinaus, also erreicht der rechtsbündige CTA-Button nie den
   echten Viewport-Rand. */
#site-header,
header.site-header:not(.dynamic-header) {
    max-width: 100% !important;
}

/* 1c. Header „header-right" (dc0e34f): CTA-Button rechtsbündig + vertikal zentriert.
   V4-Atomic lädt post-172.css auf der Main-Page nicht → Ausrichtung hier erzwingen.
   flex-direction:row wird fixiert, damit justify-content zuverlässig horizontal wirkt. */
#site-header .elementor-element-dc0e34f {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* 2. Footer: Rechte Flexbox-Spalte reparieren (Inhalte untereinander) */
#site-footer .elementor-widget-text-editor,
#site-footer .elementor-text-editor {
    display: block !important;
    width: 100% !important;
}

/* Erzwingt, dass die Textelemente im Footer wie Absätze (Rows) untereinander stehen */
#site-footer .elementor-text-editor p {
    display: block !important;
    margin-bottom: 8px !important; /* Sauberer Abstand nach unten */
    width: 100% !important;
}

/* 3. Footer: Logo-Größe strikt auf 100px begrenzen */
#site-footer img, 
#site-footer .elementor-image img {
    max-width: 100px !important;
    width: 100px !important;
    height: auto !important;
}

/* 4. Flexbox-Ausrichtung im Footer erzwingen */
#site-footer .elementor-container {
    display: flex !important;
    flex-direction: row !important; /* Haupt-Container nebeneinander (Logo links, Text rechts) */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Mobile Optimierung: Auf Smartphones alles untereinander zentrieren */
@media (max-width: 767px) {
    #site-footer .elementor-container {
        flex-direction: column !important;
        gap: 20px;
    }
    #site-footer .elementor-text-editor p {
        text-align: center !important;
    }
}