/* =================================================================
   Elementor container reset
   -----------------------------------------------------------------
   Our widgets each render a full-bleed <section> that already handles
   its own background, padding and .wrap max-width. Elementor's default
   container adds another layer of width + padding on top, which would
   inset every section and break the design.

   This strips that outer layer for MSBS widgets only, so stock
   Elementor widgets used elsewhere keep their normal behaviour.
   ================================================================= */

/* Top-level containers holding one of our sections carry no width or gutter. */
.elementor-section-wrap > .elementor-section > .elementor-container,
.elementor-element.e-con.e-parent:has(> .elementor-element > [class*="elementor-widget-msbs-"]),
.elementor-element.e-con:has(> .elementor-widget[class*="elementor-widget-msbs-"]) {
  max-width: none;
  padding-inline: 0;
  --width: 100%;
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --padding-block-start: 0;
  --padding-block-end: 0;
}

/* The widget wrappers themselves must be transparent pass-throughs. */
[class*="elementor-widget-msbs-"] > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

[class*="elementor-widget-msbs-"] {
  width: 100%;
}

/* Elementor normalises heading/paragraph margins per-widget; our sections rely
   on the project stylesheet instead, so opt them back out. */
[class*="elementor-widget-msbs-"] h1,
[class*="elementor-widget-msbs-"] h2,
[class*="elementor-widget-msbs-"] h3,
[class*="elementor-widget-msbs-"] p,
[class*="elementor-widget-msbs-"] ul,
[class*="elementor-widget-msbs-"] figure {
  margin: revert;
  padding: revert;
}

[class*="elementor-widget-msbs-"] img {
  border-radius: revert;
  box-shadow: revert;
}

/* -----------------------------------------------------------------
   Editor-only affordances
   ----------------------------------------------------------------- */

/* Scroll-reveal starts sections at opacity:0. Inside the editor that reads as
   "my section vanished", so force them visible while editing. */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* The sticky header would otherwise overlap the first widget's drag handles. */
.elementor-editor-active .header {
  position: relative;
}