/**
 * C4mulo5 Schatten-Helfer
 *
 * Wendet Schatten auf Bilder, Buttons und Karten/Boxen INNERHALB einer
 * Section an. Steuert sich über data-Attribute auf der Section:
 *
 *   data-c4m5-shadow-img="sm|md|lg"  → Schatten auf <img>
 *   data-c4m5-shadow-btn="sm|md|lg"  → Schatten auf Buttons + .button + a.btn
 *   data-c4m5-shadow-box="sm|md|lg"  → Schatten auf typische Karten-Container
 *
 * Funktioniert für ALLE Sections — sowohl unsere C4mulo5-Sections als auch
 * Mesmerize-Standard-Sections, da Mesmerize fremde data-Attribute beibehält
 * und ins post_content speichert.
 */

/* ═══ Bilder ════════════════════════════════════════════════════════ */
[data-c4m5-shadow-img="sm"] img,
[data-c4m5-shadow-img="sm"] .wp-image,
[data-c4m5-shadow-img="sm"] [data-bg="image"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.2s ease;
}
[data-c4m5-shadow-img="md"] img,
[data-c4m5-shadow-img="md"] .wp-image,
[data-c4m5-shadow-img="md"] [data-bg="image"] {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
    transition: box-shadow 0.2s ease;
}
[data-c4m5-shadow-img="lg"] img,
[data-c4m5-shadow-img="lg"] .wp-image,
[data-c4m5-shadow-img="lg"] [data-bg="image"] {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
    transition: box-shadow 0.2s ease;
}

/* Hintergrundbilder dürfen nicht: nur Image-Tags und Mesmerize bg-images */
[data-c4m5-shadow-img] svg {
    box-shadow: none !important;
}

/* ═══ Buttons ══════════════════════════════════════════════════════ */
/* Mesmerize-Standard-Buttons (.button, .button-primary, .btn …),
 * native <button> + <input type="button">, sowie Mesmerize Companion „a.button" */
[data-c4m5-shadow-btn="sm"] .button,
[data-c4m5-shadow-btn="sm"] a.btn,
[data-c4m5-shadow-btn="sm"] button:not(.c4m5-bz-zone):not(.c4m5-tabs-nav__btn):not(.c4m5-deal-countdown__unit):not(.c4m5-promo-close):not(.c4m5-trust-lightbox__close):not(.c4m5-nlg-copy):not([type="checkbox"]),
[data-c4m5-shadow-btn="sm"] input[type="button"],
[data-c4m5-shadow-btn="sm"] input[type="submit"] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
[data-c4m5-shadow-btn="md"] .button,
[data-c4m5-shadow-btn="md"] a.btn,
[data-c4m5-shadow-btn="md"] button:not(.c4m5-bz-zone):not(.c4m5-tabs-nav__btn):not(.c4m5-deal-countdown__unit):not(.c4m5-promo-close):not(.c4m5-trust-lightbox__close):not(.c4m5-nlg-copy):not([type="checkbox"]),
[data-c4m5-shadow-btn="md"] input[type="button"],
[data-c4m5-shadow-btn="md"] input[type="submit"] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
[data-c4m5-shadow-btn="lg"] .button,
[data-c4m5-shadow-btn="lg"] a.btn,
[data-c4m5-shadow-btn="lg"] button:not(.c4m5-bz-zone):not(.c4m5-tabs-nav__btn):not(.c4m5-deal-countdown__unit):not(.c4m5-promo-close):not(.c4m5-trust-lightbox__close):not(.c4m5-nlg-copy):not([type="checkbox"]),
[data-c4m5-shadow-btn="lg"] input[type="button"],
[data-c4m5-shadow-btn="lg"] input[type="submit"] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
[data-c4m5-shadow-btn]:not([data-c4m5-shadow-btn=""]):not([data-c4m5-shadow-btn="none"]) .button:hover,
[data-c4m5-shadow-btn]:not([data-c4m5-shadow-btn=""]):not([data-c4m5-shadow-btn="none"]) a.btn:hover {
    transform: translateY(-1px);
}

/* ═══ Karten/Boxen ═══════════════════════════════════════════════════ */
/* Trifft typische Mesmerize-Karten-Container und unsere c4m5-Karten */
[data-c4m5-shadow-box="sm"] .box,
[data-c4m5-shadow-box="sm"] .card,
[data-c4m5-shadow-box="sm"] .pricing-table,
[data-c4m5-shadow-box="sm"] .feature-box,
[data-c4m5-shadow-box="sm"] .testimonial,
[data-c4m5-shadow-box="sm"] [class*="-card"]:not(.c4m5-lvp-card):not(.c4m5-trust-item),
[data-c4m5-shadow-box="sm"] [class*="-tile"],
[data-c4m5-shadow-box="sm"] [class*="-box"]:not([class*="-shadow-box"]) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
[data-c4m5-shadow-box="md"] .box,
[data-c4m5-shadow-box="md"] .card,
[data-c4m5-shadow-box="md"] .pricing-table,
[data-c4m5-shadow-box="md"] .feature-box,
[data-c4m5-shadow-box="md"] .testimonial,
[data-c4m5-shadow-box="md"] [class*="-card"]:not(.c4m5-lvp-card):not(.c4m5-trust-item),
[data-c4m5-shadow-box="md"] [class*="-tile"],
[data-c4m5-shadow-box="md"] [class*="-box"]:not([class*="-shadow-box"]) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
[data-c4m5-shadow-box="lg"] .box,
[data-c4m5-shadow-box="lg"] .card,
[data-c4m5-shadow-box="lg"] .pricing-table,
[data-c4m5-shadow-box="lg"] .feature-box,
[data-c4m5-shadow-box="lg"] .testimonial,
[data-c4m5-shadow-box="lg"] [class*="-card"]:not(.c4m5-lvp-card):not(.c4m5-trust-item),
[data-c4m5-shadow-box="lg"] [class*="-tile"],
[data-c4m5-shadow-box="lg"] [class*="-box"]:not([class*="-shadow-box"]) {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* "none" oder leerer Wert: explizit Schatten zurücksetzen */
[data-c4m5-shadow-img="none"] img { box-shadow: none !important; }
[data-c4m5-shadow-btn="none"] .button,
[data-c4m5-shadow-btn="none"] a.btn,
[data-c4m5-shadow-btn="none"] button:not(.c4m5-bz-zone) { box-shadow: none !important; }
[data-c4m5-shadow-box="none"] .box,
[data-c4m5-shadow-box="none"] .card { box-shadow: none !important; }

/* ═══ Overlay-Steuerung (über Hintergrundbild) ══════════════════════
 * Manipuliert das <div class="section-overlay"> Element das oft auf
 * Hero-Sections über dem Hintergrundbild liegt (dunkles Gradient zur
 * Lesbarkeits-Verbesserung). Das Element kann per inline style oder
 * per Klasse gestylt sein — wir überschreiben mit !important.
 */

/* Komplett ausblenden */
[data-c4m5-overlay="off"] > .section-overlay,
[data-c4m5-overlay="off"] > .overlay,
[data-c4m5-overlay="off"] > [class*="bg-overlay"] {
    display: none !important;
}

/* Opacity-Stufen — verändert die Sichtbarkeit des Overlays */
[data-c4m5-overlay="weak"] > .section-overlay,
[data-c4m5-overlay="weak"] > .overlay,
[data-c4m5-overlay="weak"] > [class*="bg-overlay"] {
    opacity: 0.35 !important;
}
[data-c4m5-overlay="medium"] > .section-overlay,
[data-c4m5-overlay="medium"] > .overlay,
[data-c4m5-overlay="medium"] > [class*="bg-overlay"] {
    opacity: 0.65 !important;
}
[data-c4m5-overlay="strong"] > .section-overlay,
[data-c4m5-overlay="strong"] > .overlay,
[data-c4m5-overlay="strong"] > [class*="bg-overlay"] {
    opacity: 1 !important;
}