/**
 * Smoco Essentials V2 — Theme token bridge + style presets.
 *
 * Widget colors resolve through theme CSS variables (:root / html.is-dark).
 * Preset modifier classes override tokens for section-specific layouts.
 */

/* ── Base token aliases (theme → widget) ─────────────────────── */

.sev-audience,
.cmp-about-mission,
.cmp-our-people,
.cmp-support-center,
.cmp-testimonials-grid,
.cmp-featured-testimonial,
.cmp-sticky-scroll,
.cmp-stacking-cards,
.cmp-cta-band,
.cmp-animated-testimonials {
    --sev-eyebrow: var(--malibu);
    --sev-heading: var(--text-heading, var(--regal));
    --sev-body: var(--gray-500);
    --sev-surface: var(--surface, #fff);
    --sev-border: var(--gray-200);
    --sev-shadow-sm: var(--shadow-sm);
    --sev-shadow-md: var(--shadow-md);
    --sev-accent: var(--malibu);
    --sev-muted: var(--gray-400);
    --sev-card-bg: var(--gray-50, var(--surface, #fff));

    /* Kopfzeile (Wrapper) — getrennt von Karten/Items */
    --sev-section-eyebrow: var(--sev-eyebrow);
    --sev-section-heading: var(--sev-heading);
    --sev-section-body: var(--sev-body);
    --sev-section-bg: transparent;

    --cmp-accent: var(--malibu);
    --cmp-heading: var(--text-heading, var(--regal));
    --cmp-body: var(--gray-500);
    --cmp-muted: var(--gray-400);
    --cmp-border: var(--gray-200);
    --cmp-body-light: var(--gray-400);
    --cmp-card-bg: var(--gray-50, var(--surface, #fff));
    --cmp-section-bg: var(--surface, #fff);
    --cmp-section-heading: var(--cmp-heading);
    --cmp-section-body: var(--cmp-body);
    --cmp-section-accent: var(--cmp-accent);
    --cmp-panel-bg: var(--regal-deep, #002952);
    --cmp-support-accent: var(--malibu);
}

/* ── Style presets: Bedarfs-Cards (double-class beats base tokens) ─ */

/* Helle Flächen: nur im hellen Theme — bei html.is-dark wirkungslos (Theme-Standard) */
.elementor-element.sev-audience--style-light-surfaces {
    background-color: transparent;
}

html:not(.is-dark) .sev-audience.sev-audience--style-light-surfaces,
html:not(.is-dark) .elementor-element.sev-audience--style-light-surfaces .sev-audience {
    --sev-surface: #fff;
    --sev-section-heading: var(--regal, #003f7d);
    --sev-section-body: #64748b;
    --sev-section-eyebrow: var(--malibu, #60adfd);
    --sev-heading: var(--regal, #003f7d);
    --sev-body: #64748b;
    --sev-item-surface: #fff;
    --sev-item-heading: var(--regal, #003f7d);
    --sev-item-body: #64748b;
    --sev-item-accent: var(--malibu, #60adfd);
}

html:not(.is-dark) .elementor-widget-smoco-audience-cards .sev-audience--style-light-surfaces .sev-audience__head .sev-audience__title,
html:not(.is-dark) .elementor-widget-smoco-audience-cards .sev-audience.sev-audience--style-light-surfaces .sev-audience__head .sev-audience__title {
    color: var(--sev-section-heading);
}

html:not(.is-dark) .elementor-widget-smoco-audience-cards .sev-audience--style-light-surfaces .sev-audience__head .sev-audience__desc,
html:not(.is-dark) .elementor-widget-smoco-audience-cards .sev-audience.sev-audience--style-light-surfaces .sev-audience__head .sev-audience__desc {
    color: var(--sev-section-body);
}

html:not(.is-dark) .elementor-widget-smoco-audience-cards .sev-audience--style-light-surfaces .sev-audience__head .sev-audience__eyebrow,
html:not(.is-dark) .elementor-widget-smoco-audience-cards .sev-audience.sev-audience--style-light-surfaces .sev-audience__head .sev-audience__eyebrow {
    color: var(--sev-section-eyebrow);
}

/* Wrapper-Hintergrund + helle Kopfzeile; Karten behalten eigene Item-Tokens */
.elementor-element.sev-audience--style-on-dark-section {
    background-color: var(--regal-deep, #002952);
}

.sev-audience.sev-audience--style-on-dark-section,
.elementor-element.sev-audience--style-on-dark-section .sev-audience {
    --sev-section-bg: var(--regal-deep, #002952);
    --sev-section-heading: var(--text-heading, #e8f2fc);
    --sev-section-body: var(--gray-400);
    --sev-section-eyebrow: var(--malibu);
}

html.is-dark .sev-audience.sev-audience--style-on-dark-section,
html.is-dark .elementor-element.sev-audience--style-on-dark-section .sev-audience {
    --sev-section-bg: transparent;
    --sev-section-heading: var(--text-heading, var(--regal));
    --sev-section-body: var(--gray-500);
}

html.is-dark .elementor-element.sev-audience--style-on-dark-section {
    background-color: transparent;
}

/* Legacy Elementor color CSS — nur Kopfzeile, nicht Karten */
.elementor-widget-smoco-audience-cards .sev-audience--style-on-dark-section .sev-audience__head .sev-audience__eyebrow,
.elementor-widget-smoco-audience-cards .sev-audience.sev-audience--style-on-dark-section .sev-audience__head .sev-audience__eyebrow {
    color: var(--sev-section-eyebrow);
}

.elementor-widget-smoco-audience-cards .sev-audience--style-on-dark-section .sev-audience__head .sev-audience__title,
.elementor-widget-smoco-audience-cards .sev-audience.sev-audience--style-on-dark-section .sev-audience__head .sev-audience__title {
    color: var(--sev-section-heading);
}

.elementor-widget-smoco-audience-cards .sev-audience--style-on-dark-section .sev-audience__head .sev-audience__desc,
.elementor-widget-smoco-audience-cards .sev-audience.sev-audience--style-on-dark-section .sev-audience__head .sev-audience__desc {
    color: var(--sev-section-body);
}

/* html.is-dark: Theme-Tokens für alle Karten (helle Item-Stile sind dann inaktiv) */
html.is-dark .sev-audience .sev-card:not(.sev-card--surface-dark) {
    --sev-item-heading: var(--text-heading, #e8f2fc);
    --sev-item-body: var(--gray-500);
}

html.is-dark .sev-audience .sev-audience__head .sev-audience__title {
    color: var(--sev-section-heading);
}

html.is-dark .sev-audience .sev-audience__head .sev-audience__desc {
    color: var(--sev-section-body);
}

html.is-dark .sev-audience .sev-audience__head .sev-audience__eyebrow {
    color: var(--sev-section-eyebrow);
}

/* Legacy Elementor-Typo — Item-Farben erzwingen */
.elementor-widget-smoco-audience-cards .sev-card__title {
    color: var(--sev-item-heading, var(--sev-heading));
}

.elementor-widget-smoco-audience-cards .sev-card__text {
    color: var(--sev-item-body, var(--sev-body));
}

.elementor-widget-smoco-audience-cards .sev-card__num {
    color: var(--sev-item-accent, var(--sev-eyebrow));
}

/* Transparente Items auf dunklem Wrapper */
.sev-audience--style-on-dark-section .sev-card--surface-transparent,
.elementor-element.sev-audience--style-on-dark-section .sev-card--surface-transparent {
    --sev-item-heading: var(--text-heading, #e8f2fc);
    --sev-item-body: var(--gray-400);
    --sev-item-accent: var(--malibu);
}

/* ── Style presets: Component widgets ────────────────────────── */

html:not(.is-dark) .cmp-about-mission.cmp-about-mission--style-light-surfaces,
html:not(.is-dark) .cmp-our-people.cmp-our-people--style-light-surfaces,
html:not(.is-dark) .cmp-testimonials-grid.cmp-testimonials-grid--style-light-surfaces,
html:not(.is-dark) .cmp-featured-testimonial.cmp-featured-testimonial--style-light-surfaces,
html:not(.is-dark) .elementor-element.cmp-about-mission--style-light-surfaces .cmp-about-mission,
html:not(.is-dark) .elementor-element.cmp-our-people--style-light-surfaces .cmp-our-people,
html:not(.is-dark) .elementor-element.cmp-testimonials-grid--style-light-surfaces .cmp-testimonials-grid,
html:not(.is-dark) .elementor-element.cmp-featured-testimonial--style-light-surfaces .cmp-featured-testimonial {
    --cmp-card-bg: #fff;
    --cmp-section-bg: #fff;
    --cmp-section-heading: var(--regal, #003f7d);
    --cmp-section-body: #64748b;
    --cmp-section-accent: var(--malibu, #60adfd);
    --cmp-heading: var(--regal, #003f7d);
    --cmp-body: #64748b;
}

.elementor-element.cmp-about-mission--style-light-surfaces,
.elementor-element.cmp-our-people--style-light-surfaces,
.elementor-element.cmp-testimonials-grid--style-light-surfaces,
.elementor-element.cmp-featured-testimonial--style-light-surfaces {
    background-color: transparent;
}

/* Dunkler Wrapper — volle Sektions-Widgets (About, Our People): alle Texte hell */
.cmp-about-mission.cmp-about-mission--style-on-dark-section,
.elementor-element.cmp-about-mission--style-on-dark-section .cmp-about-mission,
.cmp-our-people.cmp-our-people--style-on-dark-section,
.elementor-element.cmp-our-people--style-on-dark-section .cmp-our-people {
    --cmp-section-heading: var(--text-heading, #e8f2fc);
    --cmp-section-body: #dce6f2;
    --cmp-section-accent: var(--malibu, #60adfd);
    --cmp-heading: var(--text-heading, #e8f2fc);
    --cmp-body: #dce6f2;
    --cmp-body-light: #9fb3cc;
    --cmp-muted: #9fb3cc;
    --cmp-border: rgba(255, 255, 255, 0.16);
    color: var(--cmp-body);
}

/* Dunkler Wrapper — nur Kopfzeile (Testimonials Grid, Featured) */
.cmp-testimonials-grid.cmp-testimonials-grid--style-on-dark-section,
.cmp-featured-testimonial.cmp-featured-testimonial--style-on-dark-section,
.elementor-element.cmp-testimonials-grid--style-on-dark-section .cmp-testimonials-grid,
.elementor-element.cmp-featured-testimonial--style-on-dark-section .cmp-featured-testimonial {
    --cmp-section-heading: var(--text-heading, #e8f2fc);
    --cmp-section-body: #dce6f2;
    --cmp-section-accent: var(--malibu, #60adfd);
}

.elementor-element.cmp-about-mission--style-on-dark-section,
.elementor-element.cmp-our-people--style-on-dark-section,
.elementor-element.cmp-testimonials-grid--style-on-dark-section,
.elementor-element.cmp-featured-testimonial--style-on-dark-section {
    background-color: var(--regal-deep, #002952);
}

html.is-dark .cmp-about-mission.cmp-about-mission--style-on-dark-section,
html.is-dark .elementor-element.cmp-about-mission--style-on-dark-section .cmp-about-mission,
html.is-dark .cmp-our-people.cmp-our-people--style-on-dark-section,
html.is-dark .elementor-element.cmp-our-people--style-on-dark-section .cmp-our-people {
    --cmp-section-heading: var(--text-heading, var(--regal));
    --cmp-section-body: var(--gray-500);
    --cmp-heading: var(--text-heading, var(--regal));
    --cmp-body: var(--gray-500);
    --cmp-body-light: var(--gray-400);
    --cmp-muted: var(--gray-400);
    --cmp-border: var(--gray-200);
}

html.is-dark .cmp-testimonials-grid.cmp-testimonials-grid--style-on-dark-section,
html.is-dark .cmp-featured-testimonial.cmp-featured-testimonial--style-on-dark-section,
html.is-dark .elementor-element.cmp-testimonials-grid--style-on-dark-section .cmp-testimonials-grid,
html.is-dark .elementor-element.cmp-featured-testimonial--style-on-dark-section .cmp-featured-testimonial {
    --cmp-section-heading: var(--text-heading, var(--regal));
    --cmp-section-body: var(--gray-500);
}

html.is-dark .elementor-element.cmp-about-mission--style-on-dark-section,
html.is-dark .elementor-element.cmp-our-people--style-on-dark-section,
html.is-dark .elementor-element.cmp-testimonials-grid--style-on-dark-section,
html.is-dark .elementor-element.cmp-featured-testimonial--style-on-dark-section {
    background-color: transparent;
}

/* ── Style presets: Sticky Scroll ────────────────────────────── */

html:not(.is-dark) .cmp-sticky-scroll.cmp-sticky-scroll--style-light-surfaces,
html:not(.is-dark) .elementor-element.cmp-sticky-scroll--style-light-surfaces .cmp-sticky-scroll {
    --cmp-section-bg: #fff;
    --cmp-section-heading: var(--regal, #003f7d);
    --cmp-section-body: #64748b;
    --cmp-section-accent: var(--malibu, #60adfd);
}

.elementor-element.cmp-sticky-scroll--style-on-dark-section {
    background-color: var(--regal-deep, #002952);
}

.cmp-sticky-scroll.cmp-sticky-scroll--style-on-dark-section,
.elementor-element.cmp-sticky-scroll--style-on-dark-section .cmp-sticky-scroll {
    --cmp-section-bg: var(--regal-deep, #002952);
    --cmp-section-heading: var(--text-heading, #e8f2fc);
    --cmp-section-body: #dce6f2;
    --cmp-section-accent: var(--malibu, #60adfd);
}

html.is-dark .cmp-sticky-scroll.cmp-sticky-scroll--style-on-dark-section,
html.is-dark .elementor-element.cmp-sticky-scroll--style-on-dark-section .cmp-sticky-scroll {
    --cmp-section-bg: transparent;
    --cmp-section-heading: var(--text-heading, var(--regal));
    --cmp-section-body: var(--gray-500);
}

html.is-dark .elementor-element.cmp-sticky-scroll--style-on-dark-section {
    background-color: transparent;
}

/* ── Style presets: Stacking Cards ───────────────────────────── */

html:not(.is-dark) .cmp-stacking-cards.cmp-stacking-cards--style-light-surfaces,
html:not(.is-dark) .elementor-element.cmp-stacking-cards--style-light-surfaces .cmp-stacking-cards {
    --cmp-section-bg: #fff;
    --cmp-card-bg: #fff;
    --cmp-heading: var(--regal, #003f7d);
    --cmp-body: #64748b;
    --cmp-section-accent: var(--malibu, #60adfd);
}

.elementor-element.cmp-stacking-cards--style-on-dark-section {
    background-color: var(--regal-deep, #002952);
}

.cmp-stacking-cards.cmp-stacking-cards--style-on-dark-section,
.elementor-element.cmp-stacking-cards--style-on-dark-section .cmp-stacking-cards {
    --cmp-section-bg: var(--regal-deep, #002952);
    --cmp-card-bg: #fff;
    --cmp-heading: var(--regal, #003f7d);
    --cmp-body: #64748b;
}

html.is-dark .cmp-stacking-cards.cmp-stacking-cards--style-on-dark-section,
html.is-dark .elementor-element.cmp-stacking-cards--style-on-dark-section .cmp-stacking-cards {
    --cmp-section-bg: transparent;
}

html.is-dark .elementor-element.cmp-stacking-cards--style-on-dark-section {
    background-color: transparent;
}

/* ── Style presets: CTA Band ─────────────────────────────────── */

.elementor-element.cmp-cta-band--style-on-dark-section {
    background-color: transparent;
}

html.is-dark .cmp-cta-band.cmp-cta-band--style-on-dark-section,
html.is-dark .elementor-element.cmp-cta-band--style-on-dark-section .cmp-cta-band {
    --cmp-section-heading: var(--text-heading, var(--regal));
    --cmp-section-body: var(--gray-500);
}

html.is-dark .sev-card {
    border: 1px solid var(--sev-border);
}

html.is-dark .sev-carousel__dot.is-active {
    background: var(--sev-accent);
}