/*
 * Medlink v3 — neutralises Elementor's container/widget defaults so the converted pages
 * lay out exactly like the static design. Loaded before each page's own stylesheet.
 *
 * Markers set by the build (convert.py):
 *   .mlc  container that stands in for a source <div>/<section>/...  -> behaves like a plain block
 *   .mlx  Text Editor widget whose wrapper stands in for a source leaf <div>
 *   .mlw  widget whose wrapper should not exist for layout (display:contents)
 *
 * Variable resets use high specificity so they beat Elementor's per-element CSS
 * (.elementor-N .elementor-element.elementor-element-x{--display:flex}). Property resets use
 * :where() so the design's own rules (all prefixed with body.ml) always win over them.
 */
body.ml .elementor .e-con.mlc.mlc {
	--display: block;
	--flex-direction: initial; --flex-wrap: initial; --justify-content: initial;
	--align-items: initial; --align-content: initial;
	--flex-grow: 0; --flex-shrink: 1; --flex-basis: auto;
	--row-gap: normal; --column-gap: normal; --gap: normal;
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px;
	--width: auto; --height: auto; --min-height: auto;
	--position: static; --z-index: auto; --overflow: visible; --border-radius: 0;
	--container-widget-width: auto;
}
:where(body.ml) .elementor-element.mlc,
:where(body.ml) .elementor-element.mlx {
	width: auto; min-width: auto; max-width: none; text-align: inherit; position: static;
}
:where(body.ml) .elementor-element.mlx { margin: 0; }
body.ml.ml.ml.ml.ml .elementor-element.mlw,
body.ml.ml.ml.ml.ml .elementor-element.mlw > .elementor-widget-container,
body.ml.ml.ml.ml.ml .elementor-element.mlx > .elementor-widget-container { display: contents; }

body.ml { --kit-widget-spacing: 0px; --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }
:where(body.ml) .elementor-heading-title { line-height: inherit; }
:where(body.ml) .elementor-widget-image img { display: block; }

/* Theme Builder location wrappers must not create a box (the design's header is position:sticky) */
body.ml .elementor-location-header,
body.ml .elementor-location-footer { display: contents; }

/* An <img> inside display:contents wrappers stops resolving height:100% against an aspect-ratio box,
   whose automatic min-height then grows to the photo (e.g. .prod-img 16/10). A 0 min-height restores it;
   design rules that set min-height still win (they set the property, this only sets Elementor's var). */
body.ml .elementor .e-con.mlc.mlc:has(> .elementor-widget-image.mlw) { --min-height: 0px; }

/* ---------- Elementor editor only ----------
   The editor re-renders the page after the design's script ran, so scroll-reveal never fires and
   every .reveal section stays at opacity 0. Show them, and give text/heading/form widgets a real box
   so the editor's hover outline + handles sit on the widget (display:contents has no box). */
body.ml.elementor-editor-active .reveal { opacity: 1 !important; transform: none !important; }
body.ml.ml.ml.ml.ml.ml.elementor-editor-active .elementor-element.mlw:not(.elementor-widget-image):not(.elementor-widget-html) { display: block; }

/* a source <span> that became a container (so its <img> can be an Image widget) stays inline by default */
body.ml .elementor .e-con.mlc.mlc.mlc-inline { --display: inline; }