/* ======================================
   MG LEADBUILDER 2025 – SIMPLIFIED UTILITIES
   Keep-only: shadow, radius, and essential a11y
   Elementor handles layout/structure, spacing is in spacing tab
   
   NAMING CONVENTION: All classes use mg- prefix for proper namespacing
   All classes match the Design System Wiki documentation
   ====================================== */

@layer utilities {

  /* ---- Shadow Effects ---- */
  :where(.mg-shadow-sm){ box-shadow: var(--mg-shadow-sm, 0 1px 2px rgba(0,0,0,.05)); }
  :where(.mg-shadow-md){ box-shadow: var(--mg-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)); }
  :where(.mg-shadow-lg){ box-shadow: var(--mg-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)); }
  :where(.mg-shadow-xl){ box-shadow: var(--mg-shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)); }

  /* ---- Border Radius (responsive) ---- */
  :where(.mg-radius-sm){ border-radius: clamp(0.1875rem, 0.3vw, 0.25rem); }
  :where(.mg-radius-md){ border-radius: clamp(0.375rem, 0.5vw, 0.5rem); }
  :where(.mg-radius-lg){ border-radius: clamp(0.625rem, 0.8vw, 0.75rem); }
  :where(.mg-radius-xl){ border-radius: clamp(0.875rem, 1vw, 1rem); }

}
/* End simplified utilities */

/* ---- List Bullet Styles ---- */
/* Accent-colored circular bullet points */
/* Scoped outside @layer for proper specificity - removed :where() for higher specificity */
body.mg-design-system .mg-list-bullet-accent,
body.mg-design-system ul.mg-list-bullet-accent,
body.mg-design-system ol.mg-list-bullet-accent,
body.mg-design-system .mg-list-bullet-list-accent,
body.mg-design-system ul.mg-list-bullet-list-accent,
body.mg-design-system ol.mg-list-bullet-list-accent {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

body.mg-design-system .mg-list-bullet-accent li,
body.mg-design-system ul.mg-list-bullet-accent li,
body.mg-design-system ol.mg-list-bullet-accent li,
body.mg-design-system .mg-list-bullet-list-accent li,
body.mg-design-system ul.mg-list-bullet-list-accent li,
body.mg-design-system ol.mg-list-bullet-list-accent li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  position: relative !important;
  padding-left: 1.5em !important;
  margin-left: 0 !important;
}

/* Hide the default ::marker pseudo-element completely */
body.mg-design-system .mg-list-bullet-accent li::marker,
body.mg-design-system ul.mg-list-bullet-accent li::marker,
body.mg-design-system ol.mg-list-bullet-accent li::marker,
body.mg-design-system .mg-list-bullet-list-accent li::marker,
body.mg-design-system ul.mg-list-bullet-list-accent li::marker,
body.mg-design-system ol.mg-list-bullet-list-accent li::marker {
  content: '' !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
}

/* Add custom accent-colored bullet with ::before */
/* Use Elementor's global accent color first, then fallback to design system accent */
body.mg-design-system .mg-list-bullet-accent li::before,
body.mg-design-system ul.mg-list-bullet-accent li::before,
body.mg-design-system ol.mg-list-bullet-accent li::before,
body.mg-design-system .mg-list-bullet-list-accent li::before,
body.mg-design-system ul.mg-list-bullet-list-accent li::before,
body.mg-design-system ol.mg-list-bullet-list-accent li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.5em !important;
  width: 0.5em !important;
  height: 0.5em !important;
  background-color: var(--e-global-color-accent, var(--mg-color-accent)) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 0.5em !important;
}