/*
 * Sfera Global — Elementor widget styles.
 *
 * Layout / spacing / typography helpers ONLY. The bundled CSS
 * (dist/sfera.css) owns every transition, transform, and animation.
 * Do NOT add `transition`, `animation`, `transform`, `will-change`,
 * or `@keyframes` rules here.
 *
 * Each widget's CSS lives under a class scoped to its widget
 * type so rules don't leak between widgets.
 */


/* ----------------------------------------------------------------------
 * Sfera Section wrapper
 *
 * Suppress Elementor's default widget chrome around the `<section>` so
 * the bundled `.section` styles in dist/sfera.css apply cleanly.
 * --------------------------------------------------------------------- */

.elementor-widget-sferaglobal_section_wrapper {
    /* The widget root <div> Elementor wraps around our <section>. Make
       it transparent to layout — width fills, no padding, no margin. */
    width: 100%;
    margin: 0;
    padding: 0;
}

.elementor-widget-sferaglobal_section_wrapper > .elementor-widget-container {
    /* Hidden in markup via has_widget_inner_wrapper() = false, but kept
       here as a defensive override for older Elementor versions that
       still emit it. */
    margin: 0;
    padding: 0;
}


/* ----------------------------------------------------------------------
 * Sfera Scramble Heading
 *
 * The bundle's `.section__headline` class drives sizing. We just
 * neutralize Elementor's default widget chrome.
 * --------------------------------------------------------------------- */

.elementor-widget-sferaglobal_scramble_heading {
    margin: 0;
}


/* ----------------------------------------------------------------------
 * Sfera Typewriter Text
 *
 * The bundle's `.contact__col` rules size the paragraph. Same chrome
 * neutralization.
 * --------------------------------------------------------------------- */

.elementor-widget-sferaglobal_typewriter_text {
    margin: 0;
}


/* ----------------------------------------------------------------------
 * Sfera Paint Splash
 *
 * The bundled CSS handles `.who__splat-anim` sizing. Just keep the
 * widget wrapper transparent to layout.
 * --------------------------------------------------------------------- */

.elementor-widget-sferaglobal_paint_splash {
    pointer-events: none;
    width: 100%;
    margin: 0;
}


/* ----------------------------------------------------------------------
 * Sfera Language Switcher
 *
 * The shortcode emits `.country-lang-selector` markup; the bundle's
 * CSS handles all visual states. We only ensure the widget wrapper
 * doesn't add width constraints that would clip the dropdowns.
 * --------------------------------------------------------------------- */

.elementor-widget-sferaglobal_language_switcher {
    width: 100%;
    margin: 0;
}


/* ----------------------------------------------------------------------
 * Data widgets (Experts / Services / Offices)
 *
 * The widget wrapper itself is transparent to layout. The bundled
 * `.section--experts`, `.section--services`, `.section--offices`
 * rules in dist/sfera.css handle every visual.
 * --------------------------------------------------------------------- */

.elementor-widget-sferaglobal_experts,
.elementor-widget-sferaglobal_services,
.elementor-widget-sferaglobal_offices {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* JSON script tags must never be rendered as text — they're data, not
   markup. Browsers don't render `<script type="application/json">` by
   default but some Elementor preview modes wrap unknown elements; this
   defense ensures the JSON payload stays invisible. */
script[type="application/json"][data-sfera-experts],
script[type="application/json"][data-sfera-services],
script[type="application/json"][data-sfera-offices] {
    display: none !important;
}


/* ----------------------------------------------------------------------
 * Editor preview block.
 *
 * Shown in the Elementor editor iframe in place of the data widgets'
 * runtime mount points. The bundle's interactive UI (Experts breadcrumb,
 * Services dark flip, Offices grid) doesn't render reliably inside the
 * editor; this preview shows the underlying data so editors can verify
 * the widget is wired up. Distinct visual style (dashed border, badge)
 * communicates "editor-only".
 *
 * Frontend pages never emit this markup — the widget render() switches
 * on sferaglobal_elementor_in_editor_iframe() and outputs the normal
 * mount point in production.
 * --------------------------------------------------------------------- */

.sferaglobal-editor-preview {
    margin: clamp(20px, 4vw, 60px);
    padding: clamp(20px, 3vw, 36px);
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.85);
    max-width: 880px;
}

.sferaglobal-editor-preview__header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sferaglobal-editor-preview__badge {
    display: inline-block;
    padding: 2px 8px;
    background: #1ed760;
    color: #000;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 2px;
}

.sferaglobal-editor-preview__title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.9);
}

.sferaglobal-editor-preview__summary {
    margin: 0 0 16px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 13px;
}

.sferaglobal-editor-preview__groups {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 24px;
}

.sferaglobal-editor-preview__group {
    margin: 0;
    padding: 0;
}

.sferaglobal-editor-preview__group-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
}

.sferaglobal-editor-preview__count {
    margin-left: 4px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
}

.sferaglobal-editor-preview__empty {
    font-style: italic;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
}

.sferaglobal-editor-preview__items {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

.sferaglobal-editor-preview__items li {
    margin: 0 0 2px;
}

.sferaglobal-editor-preview__more {
    color: rgba(0, 0, 0, 0.45);
    font-style: italic;
}

.sferaglobal-editor-preview__note {
    margin: 20px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px;
    font-style: italic;
}

/* Inside a section--services container, the bundle's CSS sets
   `body.is-dark` background. Editor preview should stay readable
   regardless of the backdrop, so the preview block keeps its own
   light surface even when the section is dark-flagged. */
.section--services .sferaglobal-editor-preview,
body.is-dark .sferaglobal-editor-preview {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

body.is-dark .sferaglobal-editor-preview__title,
body.is-dark .sferaglobal-editor-preview__group-label {
    color: rgba(255, 255, 255, 0.9);
}

body.is-dark .sferaglobal-editor-preview__summary,
body.is-dark .sferaglobal-editor-preview__items,
body.is-dark .sferaglobal-editor-preview__note {
    color: rgba(255, 255, 255, 0.6);
}

/* ---------- Paint Splash editor placeholder ----------
   The Sfera Paint Splash widget emits an empty <div data-paint-splash>
   that the bundle's logo.js hydrates with a Lottie SVG at runtime. The
   bundle's layout.css sets the .who__splat-anim class to opacity:0 +
   width/height:100% so the home-page intro timeline can fade it in
   alongside the logo morph. In the Elementor editor iframe neither the
   bundle nor the intro timeline runs, so the widget renders invisibly
   and editors can't see or size it.

   The widget's render() adds the `sferaglobal-paint-splash-editor-preview`
   class only when sferaglobal_elementor_in_editor_iframe() is true; this
   CSS gives the element visible bounds, and assets/js/editor-preview.js
   mounts the actual paint-splash.json lottie inside it so editors see
   the real animation while laying out. While the lottie is loading
   (element is :empty) a gradient + "Paint Splash" label render as a
   fallback. Frontend output is unchanged. */
.sferaglobal-paint-splash-editor-preview {
    /* Override the bundle's layout.css `.who__splat-anim { opacity: 0 }`
       which would otherwise keep the editor preview invisible. */
    opacity: 1 !important;
    /* Fill the widget wrapper (Elementor's size controls drive the
       wrapper's width/height/aspect-ratio). 100% means the wrapper's
       dimensions cascade in. */
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

/* Loading / fallback placeholder — visible only until lottie injects
   its SVG. Once an <svg> child exists, :empty is false and these rules
   no longer match, exposing the actual animation. */
.sferaglobal-paint-splash-editor-preview:empty {
    background:
        radial-gradient(circle at 30% 35%, rgba(255, 180, 140, 0.55) 0%, transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(180, 210, 245, 0.45) 0%, transparent 52%),
        radial-gradient(circle at 50% 75%, rgba(255, 200, 200, 0.45) 0%, transparent 50%),
        #f6f1ec;
    border: 2px dashed #c4a99a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sferaglobal-paint-splash-editor-preview:empty::after {
    content: "Loading paint splash…";
    color: #6b4936;
    font: 600 11px/1 system-ui, -apple-system, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 2px;
}