/* ==========================================================================
   KCCU — ELEMENTOR OVERRIDES
   Conflict fixes only. Nothing here restyles the design system — it exists
   purely to stop Elementor's container model, default margins and icon
   normalisation from fighting the ported mockup CSS.

   Loaded LAST (after components.css / header-footer.css) — see enqueue.
   Sections:
     1. Full-bleed containers (modern .e-con + legacy .elementor-section)
     2. .kccu-fullbleed fallback for browsers without :has()
     3. Top-gap removal above heroes + archive title suppression
     4. Inline SVG icon constraint (with hero/rotor/logo exclusions)
     5. Elementor widget-container margin reset
   ========================================================================== */

/* ── 1. FULL-BLEED CONTAINERS ───────────────────────────────────────────────
   Widgets that must escape Elementor's boxed container and run edge to edge.
   Modern flexbox/grid containers (.e-con) — Elementor 3.6+.
   -------------------------------------------------------------------------- */
.e-con:has(> .e-con-inner > .elementor-widget-kccu_hero),
.e-con:has(> .e-con-inner > .elementor-widget-kccu_inner_hero),
.e-con:has(> .e-con-inner > .elementor-widget-kccu_ticker),
.e-con:has(> .e-con-inner > .elementor-widget-kccu_cta),
.e-con:has(> .e-con-inner > .elementor-widget-kccu_stats),
.e-con:has(> .e-con-inner > .elementor-widget-kccu_quote),
.e-con:has(> .e-con-inner > .elementor-widget-kccu_companies),
.e-con:has(.elementor-widget-kccu_hero),
.e-con:has(.elementor-widget-kccu_inner_hero),
.e-con:has(.elementor-widget-kccu_ticker),
.e-con:has(.elementor-widget-kccu_cta),
.e-con:has(.elementor-widget-kccu_stats),
.e-con:has(.elementor-widget-kccu_quote),
.e-con:has(.elementor-widget-kccu_companies) {
    --container-max-width: 100% !important;
    --content-width: 100% !important;
    --container-widget-width: 100% !important;
    --padding-inline-start: 0 !important;
    --padding-inline-end: 0 !important;
    --padding-block-start: 0 !important;
    --padding-block-end: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* the inner wrapper Elementor injects inside boxed .e-con */
.e-con:has(.elementor-widget-kccu_hero) > .e-con-inner,
.e-con:has(.elementor-widget-kccu_inner_hero) > .e-con-inner,
.e-con:has(.elementor-widget-kccu_ticker) > .e-con-inner,
.e-con:has(.elementor-widget-kccu_cta) > .e-con-inner,
.e-con:has(.elementor-widget-kccu_stats) > .e-con-inner,
.e-con:has(.elementor-widget-kccu_quote) > .e-con-inner,
.e-con:has(.elementor-widget-kccu_companies) > .e-con-inner {
    --container-max-width: 100% !important;
    --content-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* legacy section/column model — Elementor 3.5 and older layouts */
.elementor-section:has(.elementor-widget-kccu_hero) > .elementor-container,
.elementor-section:has(.elementor-widget-kccu_inner_hero) > .elementor-container,
.elementor-section:has(.elementor-widget-kccu_ticker) > .elementor-container,
.elementor-section:has(.elementor-widget-kccu_cta) > .elementor-container,
.elementor-section:has(.elementor-widget-kccu_stats) > .elementor-container,
.elementor-section:has(.elementor-widget-kccu_quote) > .elementor-container,
.elementor-section:has(.elementor-widget-kccu_companies) > .elementor-container {
    --container-max-width: 100% !important;
    --content-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-section:has(.elementor-widget-kccu_hero),
.elementor-section:has(.elementor-widget-kccu_inner_hero),
.elementor-section:has(.elementor-widget-kccu_ticker),
.elementor-section:has(.elementor-widget-kccu_cta),
.elementor-section:has(.elementor-widget-kccu_stats),
.elementor-section:has(.elementor-widget-kccu_quote),
.elementor-section:has(.elementor-widget-kccu_companies) {
    padding: 0 !important;
    margin: 0 !important;
}

/* columns inside those legacy sections must not re-pad the widget */
.elementor-section:has(.elementor-widget-kccu_hero) .elementor-column-wrap,
.elementor-section:has(.elementor-widget-kccu_inner_hero) .elementor-column-wrap,
.elementor-section:has(.elementor-widget-kccu_ticker) .elementor-column-wrap,
.elementor-section:has(.elementor-widget-kccu_cta) .elementor-column-wrap,
.elementor-section:has(.elementor-widget-kccu_stats) .elementor-column-wrap,
.elementor-section:has(.elementor-widget-kccu_quote) .elementor-column-wrap,
.elementor-section:has(.elementor-widget-kccu_companies) .elementor-column-wrap {
    padding: 0 !important;
}

/* ── 2. NO-:has() FALLBACK ──────────────────────────────────────────────────
   For browsers without :has() support, add class `kccu-fullbleed` to the
   widget root in the render() method. Scoped to .elementor-widget-container
   so it can never break out of a non-Elementor context (e.g. the theme
   header/footer templates, which are already full width).
   -------------------------------------------------------------------------- */
.elementor-widget-container > .kccu-fullbleed,
.elementor-widget-container .kccu-fullbleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* scrollbar-safe variant where the viewport unit would overflow */
@supports (width: 100dvw) {
    .elementor-widget-container > .kccu-fullbleed,
    .elementor-widget-container .kccu-fullbleed {
        width: 100dvw;
        max-width: 100dvw;
    }
}

/* when :has() IS supported the container above is already full width, so the
   negative margin would double up — neutralise it */
@supports selector(:has(*)) {
    .e-con:has(.elementor-widget-kccu_hero) .kccu-fullbleed,
    .e-con:has(.elementor-widget-kccu_inner_hero) .kccu-fullbleed,
    .e-con:has(.elementor-widget-kccu_ticker) .kccu-fullbleed,
    .e-con:has(.elementor-widget-kccu_cta) .kccu-fullbleed,
    .e-con:has(.elementor-widget-kccu_stats) .kccu-fullbleed,
    .e-con:has(.elementor-widget-kccu_quote) .kccu-fullbleed,
    .e-con:has(.elementor-widget-kccu_companies) .kccu-fullbleed,
    .elementor-section:has(.elementor-widget-kccu_hero) .kccu-fullbleed,
    .elementor-section:has(.elementor-widget-kccu_inner_hero) .kccu-fullbleed,
    .elementor-section:has(.elementor-widget-kccu_ticker) .kccu-fullbleed,
    .elementor-section:has(.elementor-widget-kccu_cta) .kccu-fullbleed,
    .elementor-section:has(.elementor-widget-kccu_stats) .kccu-fullbleed,
    .elementor-section:has(.elementor-widget-kccu_quote) .kccu-fullbleed,
    .elementor-section:has(.elementor-widget-kccu_companies) .kccu-fullbleed {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── 3. TOP GAP + PAGE TITLE SUPPRESSION ────────────────────────────────────
   The header is position:fixed and the heroes carry their own padding-top,
   so any wrapper offset above them shows as a dead band of page background.
   -------------------------------------------------------------------------- */
body.kccu .site-main > .elementor:first-child,
body.kccu .elementor-location-single > .elementor:first-child,
body.kccu main > .elementor:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.kccu .elementor-widget-kccu_hero,
body.kccu .elementor-widget-kccu_inner_hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.kccu .elementor-widget-kccu_hero > .elementor-widget-container,
body.kccu .elementor-widget-kccu_inner_hero > .elementor-widget-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* theme/plugin page headings are replaced by the inner-hero widget */
body.kccu .page-header,
body.kccu h1.entry-title,
body.kccu .elementor-page-title,
body.kccu .elementor-widget-theme-page-title,
body.kccu .hello-elementor-page-title {
    display: none !important;
}

/* the front page has no breadcrumb heading at all */
body.kccu-front .page-header,
body.kccu-front .entry-title {
    display: none !important;
}

/* ── 4. INLINE SVG ICON CONSTRAINT ──────────────────────────────────────────
   Elementor lets un-sized inline SVGs fill their parent. Icons inside KCCU
   widgets must behave like glyphs — EXCEPT the hero scene, the rotor ring
   and the logo bean, which carry their own dimensions in components.css /
   header-footer.css.
   -------------------------------------------------------------------------- */
.elementor-widget[data-widget_type^="kccu_"] svg:not(.k-hero-scene):not(.k-rotor svg):not(.k-logo-bean svg) {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

/* Belt-and-braces: re-assert the excluded SVGs at higher specificity in case
   the complex :not() above is not honoured by an older engine. */
.elementor-widget[data-widget_type^="kccu_"] svg.k-hero-scene {
    width: 100%;
    height: 100%;
    fill: none;
    display: block;
    vertical-align: baseline;
}
.elementor-widget[data-widget_type^="kccu_"] .k-rotor svg,
.elementor-widget[data-widget_type^="kccu_"] .k-rotor svg.ring {
    width: 100%;
    height: 100%;
    fill: none;
    display: block;
    vertical-align: baseline;
}
.elementor-widget[data-widget_type^="kccu_"] .k-logo-bean svg {
    width: 22px;
    height: 22px;
    fill: none;
    display: block;
    vertical-align: baseline;
}

/* Elementor's icon wrapper also normalises size — opt KCCU markup out */
.elementor-widget[data-widget_type^="kccu_"] .elementor-icon svg {
    width: 1em;
    height: 1em;
}

/* ── 5. WIDGET CONTAINER RESETS ─────────────────────────────────────────────
   Elementor's default widget spacing breaks edge-to-edge sections, which
   supply their own padding via --sec-pad.
   -------------------------------------------------------------------------- */
.elementor-widget[data-widget_type^="kccu_"] > .elementor-widget-container {
    margin: 0;
    padding: 0;
}

.elementor-widget[data-widget_type^="kccu_"] {
    margin-bottom: 0;
}

/* Elementor adds bottom spacing between stacked widgets — KCCU sections
   already own their vertical rhythm */
.e-con > .e-con-inner > .elementor-widget[data-widget_type^="kccu_"],
.e-con > .elementor-widget[data-widget_type^="kccu_"] {
    --widgets-spacing: 0px 0px;
    margin-block-end: 0 !important;
}

/* KCCU sections manage their own width; never let a boxed column clip them */
.elementor-widget[data-widget_type^="kccu_"] > .elementor-widget-container > .k-sec,
.elementor-widget[data-widget_type^="kccu_"] > .elementor-widget-container > .k-sec-sm,
.elementor-widget[data-widget_type^="kccu_"] > .elementor-widget-container > .k-hero,
.elementor-widget[data-widget_type^="kccu_"] > .elementor-widget-container > .k-inner-hero,
.elementor-widget[data-widget_type^="kccu_"] > .elementor-widget-container > .k-ticker {
    width: 100%;
    max-width: 100%;
}

/* Elementor resets list styling globally on some kits — KCCU lists are
   already reset in design-system.css, keep them that way inside widgets */
.elementor-widget[data-widget_type^="kccu_"] ul,
.elementor-widget[data-widget_type^="kccu_"] ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Elementor Hello/kit typography can leak into KCCU headings — the design
   system font stack must win inside KCCU widgets */
.elementor-widget[data-widget_type^="kccu_"] h1,
.elementor-widget[data-widget_type^="kccu_"] h2,
.elementor-widget[data-widget_type^="kccu_"] h3,
.elementor-widget[data-widget_type^="kccu_"] h4 {
    font-family: var(--f-display);
}