/* End fluid spacing system */

/* =========================
   MG LEADBUILDER 2025 – FLUID SPACING SYSTEM
   New fluid gap and section padding system
   ========================= */
:root {
	/* Top and Bottom Padding All Containers - Percentage-based for container-relative */
	--section-xxl-padding-min: 8%;
	/* ~150px @ 1920px */
	--section-xxl-padding-max: 10%;
	/* ~192px @ 1920px */
	--section-xl-padding-min: 6%;
	/* ~115px @ 1920px */
	--section-xl-padding-max: 7.5%;
	/* ~144px @ 1920px */
	--section-l-padding-min: 5%;
	/* ~96px @ 1920px */
	--section-l-padding-max: 6%;
	/* ~115px @ 1920px */
	--section-m-padding-min: 4%;
	/* ~77px @ 1920px */
	--section-m-padding-max: 5%;
	/* ~96px @ 1920px */
	--section-s-padding-min: 3%;
	/* ~58px @ 1920px */
	--section-s-padding-max: 3.5%;
	/* ~67px @ 1920px */
	--section-xs-padding-min: 2%;
	/* ~38px @ 1920px */
	--section-xs-padding-max: 2.5%;
	/* ~48px @ 1920px */
	--section-xxs-padding-min: 1.5%;
	/* ~29px @ 1920px */
	--section-xxs-padding-max: 2%;
	/* ~38px @ 1920px */
	
	/* Hero Sections Height Variable */
	--section-hero-height: 100vh;
	/* 100% the screen height */
	
	/* Offset Padding for Overlay Headers */
	--section-offset-header: 80px;
	/* Adjust to the overlay header's negative margin */
	
	/* Width For Narrow Sections*/
	--section-narrow: 62.5rem;
	/* 1000px */
	--section-narrow-xs: 45rem;
}

/* ---- Section/Container Padding - Fluid Variants ---- */

/* Designer Controls spacing presets - NO !important to allow Elementor inline styles to override */

/* Section padding applies to TOP and BOTTOM only - side padding handled by container/Elementor controls */

/* CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
body.mg-design-system .mg-section-xxl:not(.e-child) {
	--container-default-padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
	--container-default-padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
	--e-con-padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
	--e-con-padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
	padding-top: clamp(8%, 1.087vw + 9.13rem, 10%);
	padding-bottom: clamp(8%, 1.087vw + 9.13rem, 10%);
}

body.mg-design-system .mg-section-xl:not(.e-child) {
	--container-default-padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
	--container-default-padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
	--e-con-padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
	--e-con-padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
	padding-top: clamp(6%, 1.087vw + 6.63rem, 7.5%);
	padding-bottom: clamp(6%, 1.087vw + 6.63rem, 7.5%);
}

body.mg-design-system .mg-section-l:not(.e-child) {
	--container-default-padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
	--container-default-padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
	--e-con-padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
	--e-con-padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
	padding-top: clamp(5%, 1.087vw + 5.38rem, 6%);
	padding-bottom: clamp(5%, 1.087vw + 5.38rem, 6%);
}

body.mg-design-system .mg-section-m:not(.e-child) {
	--container-default-padding-top: clamp(3rem, 4vw, 5rem);
	--container-default-padding-bottom: clamp(3rem, 4vw, 5rem);
	--e-con-padding-top: clamp(3rem, 4vw, 5rem);
	--e-con-padding-bottom: clamp(3rem, 4vw, 5rem);
	padding-top: clamp(3rem, 4vw, 5rem);
	padding-bottom: clamp(3rem, 4vw, 5rem);
}

body.mg-design-system .mg-section-s:not(.e-child) {
	--container-default-padding-top: clamp(2.5rem, 3vw, 3.75rem);
	--container-default-padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
	--e-con-padding-top: clamp(2.5rem, 3vw, 3.75rem);
	--e-con-padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
	padding-top: clamp(2.5rem, 3vw, 3.75rem);
	padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
}

body.mg-design-system .mg-section-xs:not(.e-child) {
	--container-default-padding-top: clamp(1.5rem, 2vw, 2.5rem);
	--container-default-padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
	--e-con-padding-top: clamp(1.5rem, 2vw, 2.5rem);
	--e-con-padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
	padding-top: clamp(1.5rem, 2vw, 2.5rem);
	padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

body.mg-design-system :where(.mg-section-xxs:not(.e-child), .mg-section-xxs.e-con:not(.e-child), .mg-section-xxs.e-parent:not(.e-child)) {
	--container-default-padding-top: clamp(.5rem, 1vw, 1rem);
	--container-default-padding-bottom: clamp(.5rem, 1vw, 1rem);
	--e-con-padding-top: clamp(.5rem, 1vw, 1rem);
	--e-con-padding-bottom: clamp(.5rem, 1vw, 1rem);
	padding-top: clamp(.5rem, 1vw, 1rem);
	padding-bottom: clamp(.5rem, 1vw, 1rem);
}

/* Full Viewport Height Sections */
.mg-section-100vh {
	min-height: var(--section-hero-height) !important;
}

.mg-section-100vh .e-con-inner {
	justify-content: center !important;
}

/* ---- HEADER UTILITIES ---- */

/* Standard Header: XXS padding with no bottom padding (for nav at bottom edge) */

/* CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
body.mg-design-system :where(.mg-header-std:not(.e-child), .mg-header-std.e-con:not(.e-child), .mg-header-std.e-parent:not(.e-child)) {
	--container-default-padding-top: clamp(.5rem, 1vw, 1rem);
	--container-default-padding-bottom: 0;
	--e-con-padding-top: clamp(.5rem, 1vw, 1rem);
	--e-con-padding-bottom: 0;
	padding-top: clamp(.5rem, 1vw, 1rem);
	padding-bottom: 0;
}

/* Apply XXS gap to standard header */
body.mg-design-system .mg-header-std, body.mg-design-system .mg-header-std .e-con-inner {
	--row-gap: clamp(.25rem, .5vw, .5rem) !important;
	--column-gap: clamp(.25rem, .5vw, .5rem) !important;
	--widgets-spacing-row: clamp(.25rem, .5vw, .5rem) !important;
	--widgets-spacing-column: clamp(.25rem, .5vw, .5rem) !important;
	row-gap: clamp(.25rem, .5vw, .5rem) !important;
	column-gap: clamp(.25rem, .5vw, .5rem) !important;
}

/* Asymmetric Edge-to-Edge Layouts */

/* ---- EDGE LEFT (flush left) ---- */

/* Content bleeds to left edge (50/50 default), right side aligns with boxed layouts */
body.mg-design-system :where(.mg-edge-left, .mg-edge-left.e-con, .mg-edge-left.e-parent) {
	/* No vertical padding - edge-to-edge vertically too */
	--container-default-padding-top: 0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* Left side: 0 padding, right side: align with boxed content */
	--container-default-padding-left: 0px !important;
	/* Calculate right padding: (50vw - content-width/2) + base padding */
	
	/* This makes the right column align with boxed content */
	--container-default-padding-right: calc(( 50vw - var(--mg-content-max-width) / 2 ) + var(--mg-container-padding-horizontal)) !important;
	padding-left: 0 !important;
	padding-right: calc(( 50vw - var(--mg-content-max-width) / 2 ) + var(--mg-container-padding-horizontal)) !important;
	/* No gap - content containers handle their own spacing */
	--column-gap: 0 !important;
	column-gap: 0 !important;
}

/* Left column in mg-edge-left should be 50vw (50/50) */
body.mg-design-system .mg-edge-left > .e-child:first-child, body.mg-design-system .mg-edge-left > .elementor-element:first-child {
	width: 50vw !important;
	max-width: 50vw !important;
	flex: 0 0 50vw !important;
}

/* 60/40 variant - left column 60vw (edge), right 40vw (content aligns with boxed) */
body.mg-design-system :where(.mg-edge-left-60, .mg-edge-left-60.e-con, .mg-edge-left-60.e-parent) {
	--container-default-padding-top: 0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* No padding on parent - children handle their own padding */
	--container-default-padding-left: 0px !important;
	--container-default-padding-right: 0px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	/* No gap - content containers handle their own spacing */
	--column-gap: 0 !important;
	column-gap: 0 !important;
	/* Built-in equal height behavior */
	display: flex !important;
	align-items: stretch !important;
}

/* Left column: 60vw edge-to-edge (typically image/media) */
body.mg-design-system .mg-edge-left-60 > .e-child:first-child, body.mg-design-system .mg-edge-left-60 > .elementor-element:first-child {
	width: 60vw !important;
	max-width: 60vw !important;
	flex: 0 0 60vw !important;
	padding: 0 !important;
	/* No padding - true edge-to-edge */
	display: flex !important;
	flex-direction: column !important;
}

/* Right column (40%): Content aligns with boxed layout right edge */
body.mg-design-system .mg-edge-left-60 > .e-child:nth-child(2), body.mg-design-system .mg-edge-left-60 > .elementor-element:nth-child(2) {
	/* Calculate padding to align right edge with boxed content */
	
	/* Right padding = space from viewport edge to content edge */
	--mg-40-right-padding: calc(( 100vw - var(--mg-content-max-width) ) / 2);
	/* Left padding: keep content away from the gap */
	padding-left: clamp(1.5rem, 3vw, 3rem) !important;
	/* Right padding: align with boxed content boundary */
	padding-right: max(var(--mg-40-right-padding), var(--mg-container-padding-horizontal)) !important;
	/* Built-in equal height behavior */
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

/* ---- EDGE RIGHT (flush right) ---- */

/* Content bleeds to right edge (50/50 default), left side aligns with boxed layouts */
body.mg-design-system :where(.mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent) {
	/* No vertical padding - edge-to-edge vertically too */
	--container-default-padding-top: 0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* Right side: 0 padding, left side: align with boxed content */
	
	/* Calculate left padding: (50vw - content-width/2) + base padding */
	--container-default-padding-left: calc(( 50vw - var(--mg-content-max-width) / 2 ) + var(--mg-container-padding-horizontal)) !important;
	--container-default-padding-right: 0px !important;
	padding-left: calc(( 50vw - var(--mg-content-max-width) / 2 ) + var(--mg-container-padding-horizontal)) !important;
	padding-right: 0 !important;
	/* No gap - content containers handle their own spacing */
	--column-gap: 0 !important;
	column-gap: 0 !important;
}

/* Right column in mg-edge-right should be 50vw (50/50) */
body.mg-design-system .mg-edge-right > .e-child:last-child, body.mg-design-system .mg-edge-right > .elementor-element:last-child {
	width: 50vw !important;
	max-width: 50vw !important;
	flex: 0 0 50vw !important;
}

/* 40/60 variant - left 40vw (content aligns with boxed), right column 60vw (edge) */
body.mg-design-system :where(.mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent) {
	--container-default-padding-top: 0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* No padding on parent - children handle their own padding */
	--container-default-padding-left: 0px !important;
	--container-default-padding-right: 0px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	/* No gap - content containers handle their own spacing */
	--column-gap: 0 !important;
	column-gap: 0 !important;
	/* Built-in equal height behavior */
	display: flex !important;
	align-items: stretch !important;
}

/* Right column: 60vw edge-to-edge (typically image/media) */
body.mg-design-system .mg-edge-right-60 > .e-child:last-child, body.mg-design-system .mg-edge-right-60 > .elementor-element:last-child {
	width: 60vw !important;
	max-width: 60vw !important;
	flex: 0 0 60vw !important;
	padding: 0 !important;
	/* No padding - true edge-to-edge */
	display: flex !important;
	flex-direction: column !important;
}

/* Left column (40%): Content aligns with boxed layout left edge */
body.mg-design-system .mg-edge-right-60 > .e-child:first-child, body.mg-design-system .mg-edge-right-60 > .elementor-element:first-child, body.mg-design-system .mg-edge-right-60.e-con > .e-con:first-child, body.mg-design-system .mg-edge-right-60.e-parent > .e-con:first-child, body.mg-design-system [data-element_type="container"].mg-edge-right-60 > [data-element_type="container"]:first-child {
	/* Calculate padding to align left edge with boxed content */
	
	/* Left padding = space from viewport edge to content edge */
	--mg-40-left-padding: calc(( 100vw - var(--mg-content-max-width, 1400px) ) / 2);
	/* Left padding: align with boxed content boundary - FORCE with min fallback */
	padding-left: max(var(--mg-40-left-padding), clamp(1rem, 2vw, 1.5rem)) !important;
	/* Right padding: keep content away from the gap */
	padding-right: clamp(1.5rem, 3vw, 3rem) !important;
	/* Override any padding utility classes that might be applied */
	padding-inline-start: max(var(--mg-40-left-padding), clamp(1rem, 2vw, 1.5rem)) !important;
	padding-inline-end: clamp(1.5rem, 3vw, 3rem) !important;
	/* Built-in equal height behavior */
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

/* ---- RESPONSIVE: Stack on Tablet ---- */
@media (max-width: 1024px) {
	/* Stack all edge variants */
	body.mg-design-system :where(
        .mg-edge-left, .mg-edge-left.e-con, .mg-edge-left.e-parent,
        .mg-edge-left-60, .mg-edge-left-60.e-con, .mg-edge-left-60.e-parent,
        .mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent,
        .mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent
    ) {
		flex-direction: column !important;
		--container-default-padding-left: 0px !important;
		--container-default-padding-right: 0px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		--column-gap: 0 !important;
		column-gap: 0 !important;
		--row-gap: 0 !important;
		row-gap: 0 !important;
		/* Remove min-height so content determines height */
		min-height: auto !important;
	}
	
	/* All columns go full width by default */
	body.mg-design-system .mg-edge-left > .e-child, body.mg-design-system .mg-edge-left > .elementor-element, body.mg-design-system .mg-edge-left-60 > .e-child, body.mg-design-system .mg-edge-left-60 > .elementor-element, body.mg-design-system .mg-edge-right > .e-child, body.mg-design-system .mg-edge-right > .elementor-element, body.mg-design-system .mg-edge-right-60 > .e-child, body.mg-design-system .mg-edge-right-60 > .elementor-element {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	
	/* EDGE-LEFT variants: First child (flush left) stays edge-to-edge */
	body.mg-design-system .mg-edge-left > .e-child:first-child, body.mg-design-system .mg-edge-left > .elementor-element:first-child, body.mg-design-system .mg-edge-left-60 > .e-child:first-child, body.mg-design-system .mg-edge-left-60 > .elementor-element:first-child {
		width: 100vw !important;
		max-width: 100vw !important;
		flex: 0 0 100vw !important;
		padding: 0 !important;
	}
	
	/* EDGE-LEFT variants: Second child (content) gets normal padding */
	body.mg-design-system .mg-edge-left > .e-child:nth-child(2), body.mg-design-system .mg-edge-left > .elementor-element:nth-child(2), body.mg-design-system .mg-edge-left-60 > .e-child:nth-child(2), body.mg-design-system .mg-edge-left-60 > .elementor-element:nth-child(2) {
		padding-left: var(--mg-container-padding-horizontal) !important;
		padding-right: var(--mg-container-padding-horizontal) !important;
	}
	
	/* EDGE-RIGHT variants: Last child (flush right) stays edge-to-edge */
	body.mg-design-system .mg-edge-right > .e-child:last-child, body.mg-design-system .mg-edge-right > .elementor-element:last-child, body.mg-design-system .mg-edge-right-60 > .e-child:last-child, body.mg-design-system .mg-edge-right-60 > .elementor-element:last-child {
		width: 100vw !important;
		max-width: 100vw !important;
		flex: 0 0 100vw !important;
		padding: 0 !important;
	}
	
	/* EDGE-RIGHT variants: First child (content) gets normal padding */
	body.mg-design-system .mg-edge-right > .e-child:first-child, body.mg-design-system .mg-edge-right > .elementor-element:first-child, body.mg-design-system .mg-edge-right-60 > .e-child:first-child, body.mg-design-system .mg-edge-right-60 > .elementor-element:first-child {
		padding-left: var(--mg-container-padding-horizontal) !important;
		padding-right: var(--mg-container-padding-horizontal) !important;
	}
	
	/* For edge-right variants, reverse order so right column (edge) appears on top */
	body.mg-design-system :where(
        .mg-edge-right, .mg-edge-right.e-con, .mg-edge-right.e-parent,
        .mg-edge-right-60, .mg-edge-right-60.e-con, .mg-edge-right-60.e-parent
    ) {
		flex-direction: column-reverse !important;
	}
}

/* Full Width Sections - No Side Padding */
.mg-section-full div {
	max-width: 100% !important;
}

/* Narrow Sections */
.mg-section-narrow .e-con-inner {
	max-width: var(--section-narrow) !important;
}

.mg-section-narrow-xs .e-con-inner {
	max-width: var(--section-narrow-xs) !important;
}

/* Offset Padding for Overlay Headers */
.mg-section-offset {
	padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}

/* =========================
   EQUAL HEIGHT UTILITY
   Forces all child columns to match the tallest column's height
   Perfect for image + content layouts where image should match content height
   ========================= */
body.mg-design-system .mg-equal-height {
	/* Use flexbox for natural height behavior */
	display: flex !important;
	align-items: stretch !important;
}

/* Ensure all direct children participate in equal height */
body.mg-design-system .mg-equal-height > .e-child, body.mg-design-system .mg-equal-height > .elementor-element {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

/* Simple: Just make images fill their container width */
body.mg-design-system .mg-equal-height img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
}

/* That's it! Let flexbox handle the rest naturally */

/* Responsive: Stack on mobile but maintain equal height within each column */
@media (max-width: 1024px) {
	body.mg-design-system .mg-equal-height {
		flex-direction: column !important;
		/* Stack columns on mobile */
		display: flex !important;
	}
	
	/* Each column still maintains equal height of its own content */
	body.mg-design-system .mg-equal-height > .e-child, body.mg-design-system .mg-equal-height > .elementor-element {
		height: auto !important;
		/* Let content determine height on mobile */
		flex: none !important;
	}
}