/**
 * Base Theme - Custom CSS
 * Globale Styles für Komponenten, die nicht in Tailwind abgebildet werden können
 *
 * WICHTIG FÜR WORDPRESS/BRICKS:
 * Diese Styles müssen in Bricks unter "Custom CSS" im Backend eingefügt werden!
 */

/* ========================================
   FEHLENDE TAILWIND KLASSEN (LiveCanvas)
   ======================================== */

.list-disc {
    list-style-type: disc !important;
}

.list-inside {
    list-style-position: inside !important;
}

.ml-4 {
    margin-left: 1rem !important; /* 16px */
}

/* ========================================
   FARBEN - PRIMARY COLOR DEFINITION
   ======================================== */

:root {
    --color-primary: #b17f4a; /* Braun - Bagel Gruppe */
    --color-primary-dark: #8d6539;
    --color-primary-light: #c99a6b;
}

/* Tailwind Utility Classes für Primary Color */
.text-primary {
    color: var(--color-primary);
}

.bg-primary {
    background-color: var(--color-primary);
}

.border-primary {
    border-color: var(--color-primary);
}

.hover\:bg-primary:hover {
    background-color: var(--color-primary);
}

.hover\:text-primary:hover {
    color: var(--color-primary);
}

.hover\:bg-white:hover {
    background-color: #fff;
}

.hover\:border-transparent:hover {
    border-color: transparent;
}

/* Primary mit Opacity Support */
.bg-primary\/10 {
    background-color: rgba(177, 127, 74, 0.1);
}

.bg-primary\/20 {
    background-color: rgba(177, 127, 74, 0.2);
}

.text-primary\/80 {
    color: rgba(177, 127, 74, 0.8);
}

/* ========================================
   INTERAKTIVE KARTE - ZOOM ANIMATIONEN
   ======================================== */

.map-zoom-in {
    animation: zoomIn 0.6s ease-out;
}

.map-zoom-out {
    animation: zoomOut 0.6s ease-out;
}

@keyframes zoomIn {
    from {
        transform: scale(1.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomOut {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========================================
   SCROLL TO TOP BUTTON
   ======================================== */

#scroll-top {
    cursor: pointer !important;
}

#scroll-top:hover {
    cursor: pointer !important;
}

/* ========================================
   FEHLENDE TAILWIND KLASSEN
   Klassen die im Build fehlen
   ======================================== */

.mb-24 {
    margin-bottom: 6rem !important; /* 96px */
}

.mt-24 {
    margin-top: 6rem !important;
}

.py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.gap-24 {
    gap: 6rem !important;
}

/* ========================================
   BILDER - WordPress/LiveCanvas Fix
   Überschreibt HTML width/height Attribute
   ======================================== */

/*
 * Problem: WordPress fügt width/height Attribute zu Bildern hinzu,
 * die CSS-Klassen wie h-[400px] überschreiben können.
 * Lösung: !important auf Bilder mit expliziten Höhenklassen
 */

/* Feste Höhen - überschreibt HTML-Attribute */
img.h-\[400px\],
img[class*="h-[400px]"] {
    height: 400px !important;
    max-height: 400px !important;
}

img.h-\[600px\],
img[class*="h-[600px]"] {
    height: 600px !important;
    max-height: 600px !important;
}

img.h-\[300px\],
img[class*="h-[300px]"] {
    height: 300px !important;
    max-height: 300px !important;
}

/* Min-Height Klassen */
img.min-h-\[400px\],
img[class*="min-h-[400px]"] {
    min-height: 400px !important;
}

img.min-h-\[300px\],
img[class*="min-h-[300px]"] {
    min-height: 300px !important;
}

img.min-h-\[600px\],
img[class*="min-h-[600px]"] {
    min-height: 600px !important;
}

/* Object-fit sicherstellen für alle Bilder mit festen Höhen */
img.object-cover {
    object-fit: cover !important;
}

/* Aspect-Ratio Klassen */
img.aspect-square {
    aspect-ratio: 1 / 1 !important;
}

img.aspect-\[3\/2\] {
    aspect-ratio: 3 / 2 !important;
}

img.aspect-\[16\/10\] {
    aspect-ratio: 16 / 10 !important;
}

/*
 * Generelle Regel: Wenn ein Bild eine Tailwind-Höhenklasse hat,
 * ignoriere die HTML width/height Attribute für die Höhe
 */
img[class*="h-"][class*="object-cover"] {
    height: auto;
    object-fit: cover !important;
}

/* WordPress-spezifische Klassen entschärfen */
img.wp-image-auto,
img[class*="wp-image-"] {
    max-width: 100%;
}

/* Bilder in Containern mit fester Höhe */
.h-\[400px\] img,
[class*="h-[400px]"] img {
    height: 100% !important;
    object-fit: cover !important;
}

.h-full img {
    height: 100% !important;
    object-fit: cover !important;
}

/* Tailwind Standard-Höhenklassen */
.h-72 img,
img.h-72 {
    height: 18rem !important;
    max-height: 18rem !important;
    object-fit: cover !important;
}

.h-64 img,
img.h-64 {
    height: 16rem !important;
    max-height: 16rem !important;
    object-fit: cover !important;
}

.h-80 img,
img.h-80 {
    height: 20rem !important;
    max-height: 20rem !important;
    object-fit: cover !important;
}

.h-96 img,
img.h-96 {
    height: 24rem !important;
    max-height: 24rem !important;
    object-fit: cover !important;
}

.h-48 img,
img.h-48 {
    height: 12rem !important;
    max-height: 12rem !important;
    object-fit: cover !important;
}

.h-56 img,
img.h-56 {
    height: 14rem !important;
    max-height: 14rem !important;
    object-fit: cover !important;
}

/*
 * Fix für img.h-full - überschreibt WordPress width/height Attribute
 * Wichtig: Das Bild muss 100% der Container-Höhe ausfüllen
 */
img.h-full,
img[class*="h-full"] {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* Responsive Varianten - md: Breakpoint (768px+) */
@media (min-width: 768px) {
    .md\:h-96 img,
    img.md\:h-96 {
        height: 24rem !important;
        max-height: 24rem !important;
        object-fit: cover !important;
    }

    .md\:h-80 img,
    img.md\:h-80 {
        height: 20rem !important;
        max-height: 20rem !important;
        object-fit: cover !important;
    }

    .md\:h-72 img,
    img.md\:h-72 {
        height: 18rem !important;
        max-height: 18rem !important;
        object-fit: cover !important;
    }

    .md\:h-64 img,
    img.md\:h-64 {
        height: 16rem !important;
        max-height: 16rem !important;
        object-fit: cover !important;
    }
}

/* Responsive Varianten - lg: Breakpoint (1024px+) */
@media (min-width: 1024px) {
    .lg\:h-96 img,
    img.lg\:h-96 {
        height: 24rem !important;
        max-height: 24rem !important;
        object-fit: cover !important;
    }

    .lg\:h-80 img,
    img.lg\:h-80 {
        height: 20rem !important;
        max-height: 20rem !important;
        object-fit: cover !important;
    }
}

/* ========================================
   FLUENT FORMS - Überschreibungen
   ======================================== */

.ff_submit_btn_wrapper {
    margin-bottom: 0 !important;
}

/* Headings in Fluent Forms HTML-Blöcken */
.fluentform h1,
.ff-el-html h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 1rem !important;
    margin-top: 1.5rem !important;
    line-height: 1.2 !important;
}

.fluentform h2,
.ff-el-html h2 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 0.75rem !important;
    margin-top: 1.5rem !important;
    line-height: 1.3 !important;
}

.fluentform h3,
.ff-el-html h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1rem !important;
    line-height: 1.4 !important;
}

.fluentform h4,
.ff-el-html h4 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1rem !important;
}

/* Absätze in Fluent Forms */
.fluentform p,
.ff-el-html p {
    margin-bottom: 0.75rem !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}

/* Erstes Heading ohne Top-Margin */
.fluentform h1:first-child,
.fluentform h2:first-child,
.ff-el-html h1:first-child,
.ff-el-html h2:first-child {
    margin-top: 0 !important;
}