/* ==========================================================================
   CupCake Theme — elementor-overrides.css
   Aligns Elementor's container widths, paddings, and widget spacing with
   the CupCake design system tokens. Loaded only when Elementor is active.
   ========================================================================== */

/* ─── Elementor container widths ─────────────────────────────────────────────── */

/* Elementor uses --e-container-max-width for boxed containers.
   We default to full-width so widgets can span edge-to-edge. */
:root {
    --e-container-max-width: 100%;
}

/* Classic section structure (pre-flex container layout): full-width by default. */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-container.elementor-column-gap-default {
    max-width: 100%;
}

/* Flexbox container structure (current Elementor): full-width containers. */
.elementor .e-con,
.elementor .e-container {
    max-width: 100%;
}

/* Default spacing for newly added Elementor containers.
   This gives standard containers sensible horizontal and vertical rhythm
   without requiring manual padding every time.

   Elementor's own core CSS (frontend.min.css) does this on every .e-con,
   unconditionally, on every page load:

     .e-con {
       --padding-top: var(--container-default-padding-top, 10px);
       --padding-right: var(--container-default-padding-right, 10px);
       --padding-bottom: var(--container-default-padding-bottom, 10px);
       --padding-left: var(--container-default-padding-left, 10px);
     }

   Setting --padding-top etc. ourselves does nothing reliable — Elementor's
   own rule re-derives those same variables from --container-default-*
   every time, so it always wins regardless of stylesheet order. The
   --container-default-padding-* variables are the actual, intended
   extension point for a theme default. A per-element Advanced > Padding
   override still wins because it sets --padding-top/etc. directly as an
   inline style, which has higher priority than any of these class rules. */
.elementor .e-con {
    --container-default-padding-top: 96px;
    --container-default-padding-bottom: 96px;
    --container-default-padding-left: 0px;
    --container-default-padding-right: 0px;
}

/* NOTE: we intentionally do NOT zero out padding on .e-con > .e-con-inner.
   In current Elementor container markup, vertical (block) padding is
   actually rendered on .e-con-inner via padding-block-start/end (bound to
   --padding-top/--padding-bottom), while .e-con itself only carries the
   horizontal (inline) padding variables. A blanket `padding: 0` here was
   silently canceling both the theme default padding and any per-element
   Advanced > Padding override. Elementor's own CSS already zeroes
   padding-inline-start/end on .e-con-inner, so nothing further is needed. */

/* Keep explicitly full-width containers edge-to-edge. */
.elementor .e-con.e-con-full {
    padding-inline: 0;
}

/* Optional container background helpers.
   Use these in Elementor > Advanced > CSS Classes on a container. */
.elementor .e-con.cc-bg-rose {
    background-color: var(--cc-set-rose-bg, #fff3f1);
    --cc-container-accent: var(--cc-set-rose-icon, #fa4d56);
}

.elementor .e-con.cc-bg-sage {
    background-color: var(--cc-set-sage-bg, #eaf3ec);
    --cc-container-accent: var(--cc-set-sage-icon, #4e7d5b);
}

.elementor .e-con.cc-bg-sand {
    background-color: var(--cc-set-sand-bg, #fff1dc);
    --cc-container-accent: var(--cc-set-sand-icon, #d98a2b);
}

.elementor .e-con.cc-bg-berry {
    background-color: var(--cc-set-berry-bg, #fbe8ef);
    --cc-container-accent: var(--cc-set-berry-icon, #c9417a);
}

.elementor .e-con.cc-bg-grey {
    background-color: var(--cc-set-grey-bg, #f3f4f6);
    --cc-container-accent: var(--cc-set-grey-icon, #6b7280);
}

/* Context accent color based on selected Elementor Global Color background.
   This enables labels like "INSPIRATIE" to follow the matching dark tone. */
.elementor .e-con[style*='--e-global-color-cupcake-rose-light'],
.elementor .e-con[style*='--e-global-color-cupcake-rose-dark'] {
    --cc-context-accent: var(--cc-set-rose-icon, #fa4d56);
}

.elementor [style*='var(--e-global-color-cupcake-rose-light)'],
.elementor [style*='var(--e-global-color-cupcake-rose-dark)'] {
    --cc-context-accent: var(--cc-set-rose-icon, #fa4d56);
}

.elementor .e-con[style*='--e-global-color-cupcake-sage-light'],
.elementor .e-con[style*='--e-global-color-cupcake-sage-dark'] {
    --cc-context-accent: var(--cc-set-sage-icon, #4e7d5b);
}

.elementor [style*='var(--e-global-color-cupcake-sage-light)'],
.elementor [style*='var(--e-global-color-cupcake-sage-dark)'] {
    --cc-context-accent: var(--cc-set-sage-icon, #4e7d5b);
}

.elementor .e-con[style*='--e-global-color-cupcake-sand-light'],
.elementor .e-con[style*='--e-global-color-cupcake-sand-dark'] {
    --cc-context-accent: var(--cc-set-sand-icon, #d98a2b);
}

.elementor [style*='var(--e-global-color-cupcake-sand-light)'],
.elementor [style*='var(--e-global-color-cupcake-sand-dark)'] {
    --cc-context-accent: var(--cc-set-sand-icon, #d98a2b);
}

.elementor .e-con[style*='--e-global-color-cupcake-berry-light'],
.elementor .e-con[style*='--e-global-color-cupcake-berry-dark'] {
    --cc-context-accent: var(--cc-set-berry-icon, #c9417a);
}

.elementor [style*='var(--e-global-color-cupcake-berry-light)'],
.elementor [style*='var(--e-global-color-cupcake-berry-dark)'] {
    --cc-context-accent: var(--cc-set-berry-icon, #c9417a);
}

.elementor .e-con[style*='--e-global-color-cupcake-grey-light'],
.elementor .e-con[style*='--e-global-color-cupcake-grey-dark'] {
    --cc-context-accent: var(--cc-set-grey-icon, #6b7280);
}

.elementor [style*='var(--e-global-color-cupcake-grey-light)'],
.elementor [style*='var(--e-global-color-cupcake-grey-dark)'] {
    --cc-context-accent: var(--cc-set-grey-icon, #6b7280);
}

/* ─── Full-width sections ────────────────────────────────────────────────────── */

/* Ensure Elementor's full-width sections break out of any wrapper cleanly. */
.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100%;
}

/* No extra left/right padding on full-width sections — we manage spacing
   inside widgets with padding controls. */
.elementor-section.elementor-section-full_width {
    padding-inline: 0;
}

/* ─── Section spacing defaults ───────────────────────────────────────────────── */

/* Give sections breathing room by default. Users can override per section. */
.elementor-section {
    padding-block: var(--cc-space-16);
}

.elementor-section.elementor-section-full_width {
    padding-block: 0;
}

/* Prevent a visual gap under the sticky header on the first front-page widget. */
body.home .elementor-section.elementor-top-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
}

body.home .elementor > .e-con:first-child,
body.home .elementor > .e-container:first-child {
    padding-top: 0;
    margin-top: 0;
}

/* ─── Column gap alignment ───────────────────────────────────────────────────── */

.elementor-column-gap-default > .elementor-row {
    --elementor-column-gap: var(--cc-space-8);
}

.elementor-column-gap-narrow > .elementor-row {
    --elementor-column-gap: var(--cc-space-4);
}

.elementor-column-gap-wide > .elementor-row {
    --elementor-column-gap: var(--cc-space-12);
}

/* ─── Widget typography overrides ────────────────────────────────────────────── */

/* Elementor's default heading widget — ensure it inherits our font tokens. */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--cc-font-display);
}

/* Elementor text editor — body copy. */
.elementor-widget-text-editor .elementor-widget-container {
    font-family: var(--cc-font-body);
    color: var(--cc-color-text);
    line-height: 1.6;
}

/* ─── Elementor button overrides ─────────────────────────────────────────────── */

/* Map Elementor's default button to match cc-btn--primary when using the
   default accent in Global Settings. */
.elementor-button {
    font-family: var(--cc-font-body);
    font-weight: 600;
    letter-spacing: 0;
    border-radius: var(--cc-radius-md);
    transition:
        background-color var(--cc-transition-fast),
        border-color var(--cc-transition-fast),
        color var(--cc-transition-fast);
}

/* ─── Elementor image widget ─────────────────────────────────────────────────── */

.elementor-widget-image img {
    border-radius: var(--cc-radius-md);
}

/* ─── Elementor inner sections / containers ──────────────────────────────────── */

/* Keep nested sections full-width as well. */
.elementor-inner-section > .elementor-container {
    max-width: 100%;
}

/* ─── Remove default Elementor widget padding where our components own it ────── */

/* Our cc-hero already handles its own padding. */
.elementor-widget-cupcake-hero .elementor-widget-container {
    padding: 0;
}

.elementor-widget-cupcake-cta-card .elementor-widget-container {
    padding: 0;
}

.elementor-widget-cupcake-testimonial .elementor-widget-container {
    padding: 0;
}

.elementor-widget-cupcake-packages .elementor-widget-container {
    padding: 0;
}

.elementor-widget-cupcake-company-logos .elementor-widget-container {
    padding: 0;
}

/* ─── CupCake Banner widget ───────────────────────────────────────────────────── */

.cc-banner {
    display: flex;
    align-items: center;
    gap: var(--cc-space-3, 12px);
    padding: var(--cc-space-4, 16px) var(--cc-space-5, 20px);
    background-color: var(--cc-banner-bg, #fff1dc);
    border: 1px solid var(--cc-banner-border, #f2e0c3);
    border-radius: var(--cc-radius-md);
}

.cc-banner__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--cc-banner-icon-color, #d98a2b);
    font-size: 24px;
    line-height: 1;
}

.cc-banner__icon i,
.cc-banner__icon svg {
    width: 24px;
    height: 24px;
}

.cc-banner__icon .e-font-icon-svg,
.cc-banner__icon [class*='e-fas-'],
.cc-banner__icon [class*='e-far-'],
.cc-banner__icon [class*='e-fab-'] {
    width: 24px;
    height: 24px;
}

.cc-banner__icon i,
.cc-banner__icon i::before,
.cc-banner__icon svg {
    color: var(--cc-banner-icon-color, #d98a2b);
}

.cc-banner__icon i::before {
    font-size: 1em;
}

.cc-banner__icon .e-font-icon-svg,
.cc-banner__icon .e-font-icon-svg path {
    fill: currentColor;
}

.cc-banner__icon svg [fill]:not([fill='none']) {
    fill: currentColor;
}

.cc-banner__icon svg [stroke] {
    stroke: currentColor;
}

.cc-banner__message {
    color: var(--cc-banner-message-color, #5a4a2f);
    font-family: var(--cc-font-body);
    line-height: 1.5;
}

.cc-banner__message p:last-child {
    margin-bottom: 0;
}

/* ─── Editor mode: section outline contrast fix ──────────────────────────────── */

/* In the editor, Elementor renders a dashed outline on hover. Ensure it
   doesn't conflict with our dark surface backgrounds. */
.elementor-edit-mode .elementor-element:hover > .elementor-element-overlay {
    outline-color: var(--cc-color-accent);
}

/* ─── Theme chrome vs. Elementor Kit "Theme Style" tag defaults ─────────────────
   The active Elementor Kit applies global Theme Style rules straight to raw
   tags (e.g. `.elementor-kit-#### button`), which outrank this theme's own
   class-based component styles whenever the kit stylesheet happens to load
   after main.css. Reassert our header chrome here, scoped through an
   ancestor class so specificity wins regardless of load order. */
.site-header .site-header__hamburger {
    background: transparent;
    border: 1px solid #e6d8c7;
    border-radius: var(--cc-radius-sm);
    padding: var(--cc-space-2);
}

.site-header .site-header__cta-link {
    background: #4e7d5b;
    color: #fff;
    border-radius: 999px;
    padding: 12px 22px;
}

/* ─── Elementor popup / modal ────────────────────────────────────────────────── */

.elementor-popup-modal .dialog-widget-content {
    border-radius: var(--cc-radius-lg);
    box-shadow: var(--cc-shadow-lg);
}

@media (max-width: 1024px) {
    /* See the note above the base .elementor .e-con rule: use
       --container-default-padding-* (Elementor's own extension point),
       not --padding-* directly, so per-element Advanced > Padding
       overrides still win at this breakpoint too. */
    .elementor .e-con {
        --container-default-padding-top: 50px;
        --container-default-padding-bottom: 50px;
        --container-default-padding-left: 15px;
        --container-default-padding-right: 15px;
    }
}

/* ─── Responsive: Elementor on mobile ───────────────────────────────────────── */

@media (max-width: 767px) {
    .elementor-section {
        padding-block: var(--cc-space-12);
    }

    .elementor-section.elementor-section-full_width {
        padding-block: 0;
    }

    .elementor .e-con {
        --container-default-padding-top: 50px;
        --container-default-padding-bottom: 50px;
        --container-default-padding-left: 15px;
        --container-default-padding-right: 15px;
    }
}