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

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: #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
   CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
body.mg-design-system .e-parent:not(.mg-edge-left):not(.mg-edge-right):not(.mg-edge-left-60):not(.mg-edge-right-60):not(.e-child),
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):not(.e-child),
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),
body.mg-design-system [data-element_type="section"]: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
   CRITICAL: Only apply to OUTER containers - NOT .e-child (inner/nested containers) */
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));
}

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