/**
 * Spacing Foundation Styles
 * Global spacing system based on Original TYPO3
 *
 * @package Kurpfalz_Theme
 * @author Saad Badr
 * @copyright 2025 SawatzkiMühlenbruch GmbH
 */

/* ==========================================================================
   Container System (Boxed vs Full Width)
   ========================================================================== */

/**
 * Standard Container (Boxed)
 * Max-width 1350px, zentriert
 */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
}

/**
 * Full Width Container
 * Volle Breite, kein max-width
 */
.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Widget Horizontal Spacing (40px Standard)
   ========================================================================== */

/**
 * Standard horizontale Abstände für Widgets
 * 40px links/rechts wie im Original
 */
.elementor-widget-wrap {
    /* Widgets in boxed containers haben 40px padding */
}

.elementor-section-boxed .elementor-widget {
    /* Wird durch widget-spezifische Klassen überschrieben */
}

/* ==========================================================================
   Widget Vertical Spacing
   ========================================================================== */

/**
 * Standard vertikale Abstände zwischen Sections
 * Original verwendet 30px oder 80px
 */

/* Kleine Abstände (30px) */
.elementor-section {
    /* Elementor Column Gap übernimmt dies */
}

/* Große Abstände (80px) für wichtige Sections */
.elementor-top-section {
    margin-bottom: var(--spacing-xxl); /* 80px */
}

.elementor-top-section:first-child {
    margin-top: var(--spacing-xxl); /* 80px */
}

/* ==========================================================================
   Widget-Specific Horizontal Spacing
   ========================================================================== */

/**
 * Widgets die 40px horizontale Abstände brauchen
 * Diese Margins werden auf den inneren Elementen (Header, Grid, etc.) angewendet
 * nicht auf dem Wrapper selbst, damit Hintergrundfarben über die volle Breite gehen
 */
.kurpfalz-huge-link-wrapper,
.kurpfalz-service-icons-wrapper,
.kurpfalz-shop-grid-wrapper,
.kurpfalz-highlights-wrapper,
.kurpfalz-shop-logos-wrapper,
.kurpfalz-contact-form-wrapper,
.kurpfalz-intro-wrapper,
.kurpfalz-call-to-action-wrapper {
    /* Margins werden auf inneren Elementen angewendet (siehe component CSS) */
    /* Dies ermöglicht Hintergrundfarben über die volle Breite */
}

/* ==========================================================================
   Full Width Sections - Kein horizontales Padding
   ========================================================================== */

/**
 * Bei full-width Sections ohne horizontales Padding
 * (z.B. Header Slider, Footer)
 */
.elementor-section-full_width .kurpfalz-header-slider-wrapper,
.elementor-section-full_width .kurpfalz-footer-wrapper {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Responsive Spacing Adjustments
   ========================================================================== */

@media (max-width: 750px) {
    /* Reduzierte horizontale Abstände auf mobil */
    .kurpfalz-huge-link-wrapper,
    .kurpfalz-service-icons-wrapper,
    .kurpfalz-shop-grid-wrapper,
    .kurpfalz-highlights-wrapper,
    .kurpfalz-shop-logos-wrapper,
    .kurpfalz-contact-form-wrapper,
    .kurpfalz-intro-wrapper,
    .kurpfalz-call-to-action-wrapper {
        margin-left: var(--spacing-sm); /* 20px */
        margin-right: var(--spacing-sm); /* 20px */
    }
    
    /* Reduzierte vertikale Abstände */
    .elementor-top-section {
        margin-bottom: var(--spacing-lg); /* 40px */
    }
    
    .elementor-top-section:first-child {
        margin-top: var(--spacing-lg); /* 40px */
    }
}

@media (max-width: 540px) {
    /* Noch kleinere Abstände auf sehr kleinen Screens */
    .elementor-top-section {
        margin-bottom: var(--spacing-md); /* 30px */
    }
}

/* ==========================================================================
   Section Background Colors - Overflow Hidden
   ========================================================================== */

/**
 * Sections mit Hintergrundfarben brauchen overflow:hidden
 * für border-radius und andere Effekte
 */
.elementor-section[class*="frame-background-"] {
    overflow: hidden;
}

/* ==========================================================================
   First/Last Child Spacing Adjustments
   ========================================================================== */

/**
 * Erstes Element in Section braucht oft mehr top-margin
 */
.elementor-section > .elementor-container > .elementor-row > .elementor-column:first-child h2:first-child {
    margin-top: var(--spacing-xxl); /* 80px */
}

/**
 * Letztes Element in Section braucht oft margin-bottom
 */
.elementor-section > .elementor-container > .elementor-row > .elementor-column:last-child > .elementor-widget:last-child {
    margin-bottom: var(--spacing-xxl); /* 80px */
}

/* ==========================================================================
   Content Area Spacing
   ========================================================================== */

/**
 * Content-Bereich hat min-height und top-margin
 * (für fixed header)
 */
.elementor-location-single,
.elementor-location-archive {
    min-height: 10vh;
}

@media screen and (max-width: 1270px) {
    .elementor-location-single,
    .elementor-location-archive {
        margin-top: 80px; /* Platz für fixed header */
    }
}

@media (max-width: 540px) {
    .elementor-location-single,
    .elementor-location-archive {
        margin-top: 50px; /* Kleinerer header auf mobil */
    }
}

/* ==========================================================================
   Helper Classes - Für manuelle Anwendung in Elementor
   ========================================================================== */

/**
 * Klasse: kurpfalz-spacing
 * Fügt die Standard-Abstände (40px links/rechts) hinzu
 * Verwendung: Elementor → Erweitert → CSS-Klassen → "kurpfalz-spacing"
 */
.kurpfalz-spacing {
    padding-left: var(--margin-horizontal) !important;
    padding-right: var(--margin-horizontal) !important;
}

/**
 * Klasse: kurpfalz-spacing-vertical
 * Fügt die Standard-Abstände (80px oben/unten) hinzu
 * Verwendung: Elementor → Erweitert → CSS-Klassen → "kurpfalz-spacing-vertical"
 */
.kurpfalz-spacing-vertical {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
}

/**
 * Klasse: kurpfalz-spacing-all
 * Fügt alle Standard-Abstände hinzu (40px links/rechts, 80px oben/unten)
 * Verwendung: Elementor → Erweitert → CSS-Klassen → "kurpfalz-spacing-all"
 */
.kurpfalz-spacing-all {
    padding: var(--spacing-xl) var(--margin-horizontal) !important;
}

/**
 * Klasse: kurpfalz-max-width
 * Begrenzt die Breite auf 1350px und zentriert
 * Verwendung: Elementor → Erweitert → CSS-Klassen → "kurpfalz-max-width"
 */
.kurpfalz-max-width {
    max-width: var(--max-width-content) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/**
 * Klasse: kurpfalz-container
 * Kombiniert max-width + horizontale Abstände
 * Verwendung: Elementor → Erweitert → CSS-Klassen → "kurpfalz-container"
 */
.kurpfalz-container {
    max-width: var(--max-width-content) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--margin-horizontal) !important;
    padding-right: var(--margin-horizontal) !important;
}

/**
 * Klasse: kurpfalz-content-spacing
 * Nur für den Inhalt: Fügt horizontale Abstände hinzu
 * Hintergrund des Containers geht über volle Breite
 * Verwendung:
 * 1. Container auf "Full Width" stellen
 * 2. Hintergrundfarbe auf Container setzen
 * 3. CSS-Klasse "kurpfalz-content-spacing" hinzufügen
 */
.kurpfalz-content-spacing {
    padding-left: var(--margin-horizontal) !important;
    padding-right: var(--margin-horizontal) !important;
}

/**
 * Klasse: kurpfalz-content-spacing-all
 * Für den Inhalt: Fügt alle Abstände hinzu (oben/unten/links/rechts)
 * Hintergrund des Containers geht über volle Breite
 * Verwendung:
 * 1. Container auf "Full Width" stellen
 * 2. Hintergrundfarbe auf Container setzen
 * 3. CSS-Klasse "kurpfalz-content-spacing-all" hinzufügen
 */
.kurpfalz-content-spacing-all {
    padding: var(--spacing-xl) var(--margin-horizontal) !important;
}

/**
 * Klasse: kurpfalz-inner-container
 * Erstellt einen inneren Container mit max-width und Abständen
 * Hintergrund des äußeren Containers geht über volle Breite
 * Verwendung:
 * 1. Äußerer Container auf "Full Width" + Hintergrundfarbe
 * 2. Innerer Container mit CSS-Klasse "kurpfalz-inner-container"
 */
.kurpfalz-inner-container {
    max-width: var(--max-width-content) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--margin-horizontal) !important;
    padding-right: var(--margin-horizontal) !important;
}

/* Responsive Anpassungen für Helper Classes */
@media (max-width: 750px) {
    .kurpfalz-spacing,
    .kurpfalz-spacing-all,
    .kurpfalz-container,
    .kurpfalz-content-spacing,
    .kurpfalz-content-spacing-all,
    .kurpfalz-inner-container {
        padding-left: var(--spacing-sm) !important; /* 20px */
        padding-right: var(--spacing-sm) !important; /* 20px */
    }

    .kurpfalz-spacing-vertical,
    .kurpfalz-spacing-all,
    .kurpfalz-content-spacing-all {
        padding-top: var(--spacing-lg) !important; /* 40px */
        padding-bottom: var(--spacing-lg) !important; /* 40px */
    }
}