/* =========================================================
   ELEMENTOR COMPONENT BRIDGE
   Applies Designer Controls settings to Elementor elements
   Scoped to body.mg-design-system
   
   Version: 2025.12.06
   - 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
   - FIXED: Removed direct padding: 0 resets to allow Elementor inline padding to work
   ========================================================= */

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, var(--mg-color-accent, #0ea5e9));
  color: #ffffff;
  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);
  /* Let Elementor control padding and borders */
}

/* 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
   Apply Designer Controls spacing to Elementor containers by default
   Manual padding in Elementor editor WILL override this (inline styles win)
   ========================= */

/* VERTICAL PADDING ONLY for top-level containers (sections/parent containers)
   Uses Elementor's CSS variables so inline padding styles can easily override
   EXEMPT: Edge layouts (mg-edge-left, mg-edge-right, etc.) handle their own padding */
body.mg-design-system .e-parent:not(.mg-edge-left):not(.mg-edge-right):not(.mg-edge-left-60):not(.mg-edge-right-60),
body.mg-design-system .e-con:not(.e-child):not(.mg-edge-left):not(.mg-edge-right):not(.mg-edge-left-60):not(.mg-edge-right-60),
body.mg-design-system .elementor-section:not(.mg-edge-left):not(.mg-edge-right):not(.mg-edge-left-60):not(.mg-edge-right-60),
body.mg-design-system [data-element_type="container"]:not(.e-child):not(.mg-edge-left):not(.mg-edge-right):not(.mg-edge-left-60):not(.mg-edge-right-60) {
  --container-default-padding-top: var(--mg-container-padding-vertical, clamp(1.5rem, 3vw, 3rem));
  --container-default-padding-bottom: var(--mg-container-padding-vertical, clamp(1.5rem, 3vw, 3rem));
}

/* ONLY add horizontal padding to BOXED containers (not full-width)
   Uses Elementor's CSS variables so inline padding styles can easily override
   EXEMPT: Edge layouts handle their own padding */
body.mg-design-system .e-con-boxed:not(.e-child):not(.mg-edge-left):not(.mg-edge-right):not(.mg-edge-left-60):not(.mg-edge-right-60) {
  --container-default-padding-left: var(--mg-container-padding-horizontal, clamp(1rem, 2vw, 1.5rem));
  --container-default-padding-right: var(--mg-container-padding-horizontal, clamp(1rem, 2vw, 1.5rem));
}

/* Nested containers get NO padding (prevent accumulation)
   Inner containers start at 0 - only add spacing via classes or Elementor inline styles
   EXCEPT when utility classes OR Designer Controls spacing presets are applied
   Use :not() to exclude elements with utility classes and Designer Controls classes
   NOTE: Do NOT reset anything - let Elementor's inline styles handle padding completely
   Elementor sets padding via inline styles (either CSS variables or direct padding properties)
   and those must take precedence. We only prevent default Designer Controls from applying. */
/* REMOVED: CSS variable resets for .e-child - they were interfering with Elementor's inline padding styles
   Elementor's inline styles (whether CSS variables or direct padding) should work without interference */

/* Reset padding on .e-con-inner - gap is handled by Elementor's inline styles on .e-con */
/* REMOVED: CSS variable resets for .e-con-inner - they were interfering with Elementor's inline padding styles
   Elementor's inline styles (whether CSS variables or direct padding) should work without interference */

/* =========================
   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 + horizontal padding for safe reading area
   NOTE: No !important - Elementor's inline styles will override */
body.mg-design-system .mg-content-width {
  max-width: var(--mg-content-max-width, 1400px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mg-container-padding-horizontal);
  padding-right: var(--mg-container-padding-horizontal);
}

/* 3. Children of full-width automatically get safe padding (opt-in pattern)
   NOTE: No !important - Elementor's inline styles will override */
body.mg-design-system .mg-full-width > .elementor-element[data-element_type="container"]:not(.mg-full-width) {
  --container-default-padding-left: var(--mg-container-padding-horizontal);
  --container-default-padding-right: var(--mg-container-padding-horizontal);
}

/* =========================
   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, 1.5rem);
  --e-con-gap: var(--mg-gap-row, 1.5rem);
}

/* 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, clamp(1.5rem, 2.5vw, 2.5rem));
}

/* 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; /* Prevent child content from breaking radius */
}

/* 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); /* Fallback for unsupported browsers */
}

/* 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); /* Already set earlier */
}

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

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

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