/* =========================================================
   ELEMENTOR COMPONENT BRIDGE
   Applies Designer Controls settings to Elementor elements
   Scoped to body.mg-design-system
   
   Version: 2025.12.05
   - Uses Elementor CSS variables for padding/gap compatibility
   - Designer Controls apply only to outer containers (.e-parent)
   - Inner containers (.e-child) start at padding: 0 and gap: 0
   - Elementor inline styles override defaults (no !important on defaults)
   - Utility classes (mg-gap-*) use !important to override Designer Controls
   - CSS Specificity: Elementor inline > Utility classes > Designer Controls > Defaults
   ========================================================= */

/* Default gap CSS variables - set to 1vw */
body.mg-design-system {
	--mg-gap-row: 1vw;
	--mg-gap-column: 1vw;
}

body.mg-design-system :where(.elementor-button, .elementor-button-wrapper .elementor-button) {
	padding: var(--mg-btn-py) var(--mg-btn-px);
	border-radius: var(--mg-btn-radius);
	box-shadow: var(--mg-shadow-sm, none);
	transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
	/* Default button colors (can be overridden by Elementor) */
	background-color: var(--e-global-color-accent);
	color: #fff;
	border: none;
}

@media (hover:hover) {
	body.mg-design-system :where(.elementor-button:hover) {
		transform: translateY(calc(var(--mg-btn-hover-raise, 0px) * -1));
		box-shadow: var(--mg-btn-shadow, none);
	}
}

/* Focus ring geometry only (color = currentColor or Elementor) */
body.mg-design-system :where(.elementor-button:focus-visible) {
	outline: var(--mg-focus-ring-width, 2px) solid currentColor;
	outline-offset: var(--mg-focus-ring-offset, 2px);
}

/* Inputs */
body.mg-design-system :where(.elementor-form .elementor-field, .elementor-field-group .elementor-field, input.elementor-field) {
	/* Let Elementor control padding and borders */
	border-radius: var(--mg-input-radius);
	box-shadow: var(--mg-shadow-sm, none);
}

body.mg-design-system :where(.elementor-form .elementor-field:focus) {
	outline: var(--mg-focus-ring-width, 2px) solid currentColor;
	outline-offset: var(--mg-focus-ring-offset, 2px);
}

/* Cards (opt-in: add .mg-card to a Container or Section) */
body.mg-design-system :where(.mg-card) {
	border-radius: var(--mg-card-radius);
	box-shadow: var(--mg-shadow-md);
}

/* Override Elementor's DEFAULT shadow with Designer Controls shadows
   JavaScript will handle the detection and replacement automatically */

/* Gravity Forms - Apply Designer Controls border radius */
body.mg-design-system :where(.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="url"], .gform_wrapper input[type="password"], .gform_wrapper input[type="number"], .gform_wrapper textarea, .gform_wrapper select) {
	border-radius: var(--mg-radius-sm);
}

/* Gravity Forms - More specific selectors for select/dropdown fields */
body.mg-design-system .gform_wrapper select, body.mg-design-system .gform_wrapper .gfield_select, body.mg-design-system .gform_wrapper .ginput_container_select select {
	border-radius: var(--mg-radius-sm);
}

body.mg-design-system :where(.gform_wrapper .gform_button, .gform_wrapper input[type="submit"]) {
	border-radius: var(--mg-btn-radius);
	padding: var(--mg-btn-py) var(--mg-btn-px);
}

/* Nav (Elementor Nav Menu widget) - Elementor controls all styling */

/* =========================
   CONTAINER PADDING CONTROL
   REMOVED: All forced padding defaults - Elementor now has full control
   Padding can only be added via:
   1. Elementor inline styles (highest priority - always wins)
   2. Utility classes (mg-padding-*, mg-section-*, etc.)
   3. Explicit Elementor settings in the editor
   ========================= */

/* REMOVED: Default vertical padding on top-level containers
   Elementor now controls all padding by default */

/* REMOVED: Default horizontal padding on boxed containers
   Elementor now controls all padding by default */

/* INNER CONTAINERS: Explicitly set to 0 padding by default
   Inner containers (.e-child) get NO padding from Designer Controls presets
   Padding can only be added via:
   1. Elementor inline styles (highest priority - always wins)
   2. Utility classes (mg-padding-*, mg-section-*, etc.)
   3. Explicit Elementor settings in the editor
   This prevents padding accumulation in nested layouts
   
   NOTE: We use CSS variables with 0 values, not direct padding: 0
   This allows Elementor's inline styles to override without !important */
body.mg-design-system .e-child:not([class*="mg-section-"]):not([class*="mg-padding-"]) {
	/* Reset CSS variables to 0 for inner containers without utility classes
     Elementor inline styles will override these if padding is set in editor */
	--container-default-padding-top: 0;
	--container-default-padding-bottom: 0;
	--container-default-padding-left: 0;
	--container-default-padding-right: 0;
	--e-con-padding-top: 0;
	--e-con-padding-bottom: 0;
	--e-con-padding-left: 0;
	--e-con-padding-right: 0;
}

/* =========================
   FULL-WIDTH LAYOUT UTILITIES
   For edge-to-edge designs with safe content areas
   ========================= */

/* 1. Remove horizontal padding from full-width containers
   NOTE: No !important - Elementor's inline styles will override */
body.mg-design-system .mg-full-width.elementor-element[data-element_type="container"] {
	--container-default-padding-left: 0px;
	--container-default-padding-right: 0px;
}

body.mg-design-system .mg-full-width.elementor-section > .elementor-container {
	padding-left: 0;
	padding-right: 0;
}

/* 2. Content-width utility - adds max-width only (no forced padding)
   Elementor controls all padding */
body.mg-design-system .mg-content-width {
	max-width: var(--mg-content-max-width, 1400px);
	margin-left: auto;
	margin-right: auto;
}

/* 3. REMOVED: Automatic padding on children of full-width containers
   Elementor now controls all padding */

/* =========================
   GAP CONTROL (Column & Row spacing)
   Apply default gaps between widgets and elements
   ========================= */

/* Set Elementor's internal gap variables as fallbacks
   NO !important - allows Elementor inline styles to override */
body.mg-design-system .elementor-element, body.mg-design-system [data-element_type] {
	--widgets-spacing: var(--mg-gap-row, 1vw);
	--e-con-gap: var(--mg-gap-row, 1vw);
}

/* CRITICAL GAP FIX: Elementor's CSS uses gap: var(--row-gap) var(--column-gap) on .e-con-inner
   If Elementor only sets --gap (shorthand), gap won't work because CSS can't extract values from shorthand
   SOLUTION: Override Elementor's gap rule to use --gap directly if set, otherwise use --row-gap/--column-gap */
body.mg-design-system .e-con > .e-con-inner {
	gap: var(--gap, var(--row-gap, 0) var(--column-gap, 0));
}

/* Elementor columns (side-by-side elements)
   NO !important - allows Elementor inline styles to override */
body.mg-design-system .elementor-row {
	gap: var(--mg-gap-column, 1vw);
}

/* Apply to containers
   NO !important - allows Elementor inline styles to override */
body.mg-design-system :where(.elementor-container) {
	column-gap: var(--mg-gap-column);
}

/* Apply to widget wraps
   NO !important - allows Elementor inline styles to override */
body.mg-design-system :where(.elementor-widget-wrap) {
	row-gap: var(--mg-gap-row);
}

/* =========================
   SMART BORDER RADIUS SYSTEM
   Container-first approach with dynamic size measurement
   Optimized for Flexbox/Container-based layouts
   ========================= */

/* PRIMARY: Enable container queries on all containers and columns */
body.mg-design-system :where(
  .elementor-container,
  .elementor-column,
  .elementor-inner-section > .elementor-container,
  .elementor-widget-wrap
) {
	container-type: inline-size;
	overflow: hidden;
}

/* BASE: Default radius for containers (will be overridden by size queries) */
body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
	border-radius: var(--mg-radius-md);
}

/* DYNAMIC SIZING: Containers measured by actual width */

/* XS - Very small containers (≤250px) - Mobile cards, narrow sidebars */
@container (max-width: 250px) {
	body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
		border-radius: var(--mg-radius-xs);
	}
}

/* SM - Small containers (251px-500px) - Mobile columns, small cards */
@container (min-width: 251px) and (max-width: 500px) {
	body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
		border-radius: var(--mg-radius-sm);
	}
}

/* MD - Medium containers (501px-800px) - Tablet layouts, 2-col grids */
@container (min-width: 501px) and (max-width: 800px) {
	body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
		border-radius: var(--mg-radius-md);
	}
}

/* LG - Large containers (801px-1200px) - Desktop content, 1-col layouts */
@container (min-width: 801px) and (max-width: 1200px) {
	body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
		border-radius: var(--mg-radius-lg);
	}
}

/* XL - Extra large containers (>1200px) - Full-width sections, hero areas */
@container (min-width: 1201px) {
	body.mg-design-system :where(.elementor-container, .elementor-column, .elementor-widget-wrap) {
		border-radius: var(--mg-radius-xl);
	}
}

/* SECTIONS: Always XL (full-width) */
body.mg-design-system :where(.elementor-section) {
	border-radius: var(--mg-radius-xl);
	overflow: hidden;
}

/* SPECIFIC ELEMENTS: Fixed radius (not size-dependent) */

/* Buttons - always SM */
body.mg-design-system :where(.elementor-button) {
	border-radius: var(--mg-btn-radius);
}

/* Inputs - always use input radius */
body.mg-design-system :where(.elementor-field, input.elementor-field) {
	border-radius: var(--mg-input-radius);
}

/* Opt-in cards - use card radius */
body.mg-design-system :where(.mg-card) {
	border-radius: var(--mg-card-radius);
}

/* =========================
   HARDENING TWEAKS
   ========================= */

/* 1) Better focus in High Contrast */
@media (forced-colors: active) {
	body.mg-design-system :where(.elementor-button:focus-visible,
                       .elementor-form .elementor-field:focus-visible) {
		outline-color: CanvasText;
	}
}

/* 2) Prefer :focus-visible for inputs (keep :focus for Safari) */
body.mg-design-system :where(.elementor-form .elementor-field:focus-visible) {
	outline: var(--mg-focus-ring-width, 2px) solid currentColor;
	outline-offset: var(--mg-focus-ring-offset, 2px);
}

/* 3) Respect reduced motion + disabled state */
@media (prefers-reduced-motion: reduce) {
	body.mg-design-system :where(.elementor-button) {
		transition: none;
	}
	
	body.mg-design-system :where(.elementor-button:hover) {
		transform: none;
	}
}

body.mg-design-system :where(.elementor-button[disabled], .elementor-button[aria-disabled="true"]) {
	pointer-events: none;
	transform: none;
	box-shadow: var(--mg-btn-shadow, none);
	opacity: .7;
}

/* =========================
   CUSTOM STYLES
   Project-specific Elementor widget adjustments
   ========================= */
body.mg-design-system .elementor-widget-icon-box .elementor-icon-box-icon {
	padding-top: 15px !important;
}