/* =================================================================
   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%;
}

/* NOTE: this file used to `revert` heading/paragraph margins here, aiming to
   hand spacing back to the project stylesheet. `revert` rolls back to the
   *user-agent* sheet, not to style.css, so every heading and paragraph in our
   widgets picked up the browser's 1em margins on top of the design's own
   spacing — visible as large gaps inside cards and section headers. Nothing in
   Elementor competes for these margins, so style.css governs on its own and no
   rule is needed. */

[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;
}