/* Setup Global — Elementor bridge.
   Loads AFTER setup-global.css. Lets NATIVE Elementor widgets (heading, text,
   button, image) that carry sg-* classes inherit the design system, and stops
   Elementor container defaults (flex gap, widget margins) from fighting the
   sg layout. Keep edits here — never inside setup-global.css.

   NOTE: fine values (exact grid gaps, button padding) get a final polish pass
   once the pages are assembled live in Elementor. */

/* 1. Neutralise Elementor container gap/margins on our layout containers, so
      the sg CSS controls spacing. Applies to any e-con carrying an sg-* class. */
.e-con[class*="sg-"],
.e-con-inner[class*="sg-"] {
	--gap: 0px;
	--grid-gap: 0px;
}
.e-con[class*="sg-"] > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* 2. Headings: an Elementor Heading widget given class sg-section-head__title
      (etc.) should render with the sg heading styles, not Elementor defaults.
      The sg rule targets the wrapper; map the inner title element to inherit. */
[class*="sg-"] .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin: 0;
}

/* 3. Text editor: kill the default paragraph margins so sg spacing wins. */
[class*="sg-"] .elementor-widget-text-editor p {
	margin: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
}

/* 4. Buttons: an Elementor Button with class sg-btn (+ modifiers) should look
      like an sg button. Map the geometry/appearance onto the inner element. */
.sg-btn .elementor-button,
.elementor-button.sg-btn {
	background: var(--sg-gold);
	color: var(--sg-ink);
	border-radius: var(--sg-r-pill);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	width: auto;
	flex: 0 0 auto;
}
.sg-btn--ghost .elementor-button,
.elementor-button.sg-btn--ghost {
	background: transparent;
	color: var(--sg-ink);
	box-shadow: inset 0 0 0 1px var(--sg-hairline);
}

/* 5. Image widgets that stand in for sg media (hero/team): let the sg CSS crop
      via the inner <img>, and drop Elementor's default figure margins. */
[class*="sg-"] .elementor-widget-image,
[class*="sg-"] .elementor-widget-image figure,
[class*="sg-"] .elementor-widget-image img {
	margin: 0;
	line-height: 0;
}
.sg-hero__media .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }

/* 6. Elementor editor guard: the floating WhatsApp button is injected on the
      front end only; hide any accidental duplicate inside the editor canvas. */
.elementor-editor-active .sg-wa { pointer-events: none; }

/* ============================================================
   Native-content refactor — keep composite sg layouts intact
   when each editable string is its own Elementor widget.
   Elementor widgets/containers render as <div>; sg CSS targets
   classes, so these just guarantee display/flow the inner
   elementor wrappers would otherwise reset.
   ============================================================ */

/* Heading/text widgets that ARE an sg element: no widget chrome. */
[class*="sg-"] > .elementor-widget > .elementor-widget-container,
.e-con > .elementor-widget.sg-svc__title > .elementor-widget-container,
.e-con > .elementor-widget.sg-svc__text > .elementor-widget-container { margin:0; padding:0; }

/* text-editor/heading inner should fill and inherit inside any sg element. */
[class*="sg-"] .elementor-widget-text-editor,
[class*="sg-"] .elementor-widget-heading { width:100%; }
[class*="sg-"] .elementor-widget-text-editor .elementor-widget-container,
[class*="sg-"] .elementor-widget-heading .elementor-widget-container { margin:0; }

/* Composite pill/stat rows: the sg class sits on an Elementor container (div),
   which the sg rules already flex; ensure Elementor doesn't force column gaps. */
.e-con.sg-team__stat, .e-con.sg-jur-fact, .e-con.sg-jur-detail__stat,
.e-con.sg-jur-card__head, .e-con.sg-video-card__meta,
.e-con.sg-step, .e-con.sg-svc, .e-con.sg-feature,
.e-con.sg-myth__q, .e-con.sg-faq__q { --gap:0; }

/* Value + label stacks (jur-fact / jur-detail): text widgets inherit size from
   the sg __val/__lbl classes on their own wrappers. */
.sg-jur-fact__val .elementor-widget-container,
.sg-jur-fact__lbl .elementor-widget-container,
.sg-jur-detail__val .elementor-widget-container,
.sg-jur-detail__lbl .elementor-widget-container,
.sg-team__stat .elementor-widget-container { line-height:inherit; }
.sg-jur-fact__val p, .sg-jur-detail__val p { font: inherit; color: inherit; margin:0; }
.sg-jur-fact__lbl p, .sg-jur-detail__lbl p { font: inherit; color: inherit; margin:0; }

/* Team stat pill: strong + text on one line even as separate widgets. */
.e-con.sg-team__stat { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:0 0 auto; }

/* FAQ / Myth toggles are containers (div) now, not <button>: keep them clickable
   and looking like the original controls. */
.sg-faq__q, .sg-myth__toggle { cursor:pointer; width:100%; text-align:left; background:none; border:0; }
.sg-faq__q:focus-visible, .sg-myth__toggle:focus-visible { outline:2px solid var(--sg-gold); outline-offset:3px; }

/* Video-card trigger is a container (div) now: preserve button affordance. */
.e-con.sg-video-card__trigger { cursor:pointer; display:block; position:relative; width:100%; padding:0; border:0; background:none; }

/* Header link that is an Elementor Button/Text container: match original nav item. */
.sg-header__menu.e-con, .sg-header__actions.e-con { --gap:0; }