/* ======================================
   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 */
/* Apply ONLY to content lists, NOT navigation menus */
/* Exclude nav, header, footer, and menu classes */
body.mg-design-system .elementor-widget-text-editor ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .elementor-widget-text-editor ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .elementor-widget-html ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .elementor-widget-html ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .elementor-widget-theme-post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .elementor-widget-theme-post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .entry-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .entry-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system .post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system main ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
body.mg-design-system main ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu),
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;
}

/* Exclude lists inside nav, header, and footer */
body.mg-design-system nav ul,
body.mg-design-system nav ol,
body.mg-design-system header ul,
body.mg-design-system header ol,
body.mg-design-system footer ul,
body.mg-design-system footer ol,
body.mg-design-system .main-navigation ul,
body.mg-design-system .main-navigation ol {
  list-style: revert !important;
  list-style-type: revert !important;
}

body.mg-design-system nav ul li::before,
body.mg-design-system nav ol li::before,
body.mg-design-system header ul li::before,
body.mg-design-system header ol li::before,
body.mg-design-system footer ul li::before,
body.mg-design-system footer ol li::before,
body.mg-design-system .main-navigation ul li::before,
body.mg-design-system .main-navigation ol li::before {
  display: none !important;
  content: none !important;
}

body.mg-design-system .elementor-widget-text-editor ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .elementor-widget-text-editor ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .elementor-widget-html ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .elementor-widget-html ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .elementor-widget-theme-post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .elementor-widget-theme-post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .entry-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .entry-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system .post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system main ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
body.mg-design-system main ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li,
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 .elementor-widget-text-editor ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .elementor-widget-text-editor ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .elementor-widget-html ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .elementor-widget-html ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .elementor-widget-theme-post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .elementor-widget-theme-post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .entry-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .entry-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system .post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system main ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
body.mg-design-system main ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::marker,
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 .elementor-widget-text-editor ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .elementor-widget-text-editor ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .elementor-widget-html ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .elementor-widget-html ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .elementor-widget-theme-post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .elementor-widget-theme-post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .entry-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .entry-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .post-content ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system .post-content ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system main ul:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
body.mg-design-system main ol:not(.mg-list-no-bullet):not(.elementor-icon-list-items):not(.elementor-menu):not(.menu):not(.nav-menu) li::before,
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;
}

/* Spacing between list items - matches original site */
body.mg-design-system main ul li + li,
body.mg-design-system .entry-content ul li + li,
body.mg-design-system .post-content ul li + li,
body.mg-design-system .elementor-widget-text-editor ul li + li,
body.mg-design-system .elementor-widget-html ul li + li,
body.mg-design-system .elementor-widget-theme-post-content ul li + li {
  margin-top: 15px !important;
}

body.mg-design-system main ol li + li,
body.mg-design-system .entry-content ol li + li,
body.mg-design-system .post-content ol li + li,
body.mg-design-system .elementor-widget-text-editor ol li + li,
body.mg-design-system .elementor-widget-html ol li + li,
body.mg-design-system .elementor-widget-theme-post-content ol li + li {
  margin-top: 15px !important;
}

/* Content List Bottom Spacing
========================================== */
body.mg-design-system main ul,
body.mg-design-system .entry-content ul,
body.mg-design-system .post-content ul,
body.mg-design-system .elementor-widget-text-editor ul,
body.mg-design-system .elementor-widget-html ul,
body.mg-design-system .elementor-widget-theme-post-content ul,
body.mg-design-system main ol,
body.mg-design-system .entry-content ol,
body.mg-design-system .post-content ol,
body.mg-design-system .elementor-widget-text-editor ol,
body.mg-design-system .elementor-widget-html ol,
body.mg-design-system .elementor-widget-theme-post-content ol {
  margin-bottom: 1.5rem;
}

/* Inline Image Padding
========================================== */
body.mg-design-system main img,
body.mg-design-system .entry-content img,
body.mg-design-system .post-content img,
body.mg-design-system .elementor-widget-text-editor img,
body.mg-design-system .elementor-widget-html img,
body.mg-design-system .elementor-widget-theme-post-content img {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: block;
}

/* ======================================
   Grid to Carousel Utility
   Converts a grid layout to a carousel on specified breakpoints
   Usage: Add class "mg-grid-to-carousel" to your grid container
   Data attributes:
   - data-carousel-breakpoint: Breakpoint in px (default: 1024)
   - data-carousel-slides: Number of slides per view (default: 1)
   - data-carousel-gap: Gap between slides in px (default: 16)
   - data-carousel-pagination: Show pagination (true/false, default: true)
   - data-carousel-navigation: Show navigation arrows (true/false, default: false)
   ====================================== */

/* Base styles - grid remains as grid until breakpoint */
.mg-grid-to-carousel {
  display: grid;
}

/* When carousel is active, hide grid display */
.mg-grid-to-carousel.mg-carousel-active {
  display: block !important;
}

/* Override Elementor grid display when carousel is active */
.mg-grid-to-carousel.mg-carousel-active.e-grid {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Swiper container */
.mg-grid-to-carousel.mg-carousel-active .mg-carousel-swiper {
  display: block !important;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.mg-grid-to-carousel.mg-carousel-active .mg-carousel-wrapper {
  display: flex !important;
  width: 100%;
  height: 100%;
}

.mg-grid-to-carousel.mg-carousel-active .mg-carousel-slide {
  display: block !important;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Pagination styling */
.mg-grid-to-carousel .mg-carousel-pagination {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  text-align: center;
  margin-top: 3rem !important;
  margin-bottom: 0;
  padding-top: 1rem;
}

.mg-grid-to-carousel .mg-carousel-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--carousel-pagination-color, var(--e-global-color-accent, var(--mg-color-accent, #fdcb35)));
  opacity: 0.3;
  margin: 0 4px;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.mg-grid-to-carousel .mg-carousel-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--carousel-pagination-color, var(--e-global-color-accent, var(--mg-color-accent, #fdcb35)));
}

/* Custom pagination color via data attribute */
.mg-grid-to-carousel[data-carousel-pagination-color] .mg-carousel-pagination .swiper-pagination-bullet {
  background: var(--carousel-pagination-color, var(--e-global-color-accent, var(--mg-color-accent, #fdcb35))) !important;
}

/* Navigation arrows */
.mg-grid-to-carousel .mg-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mg-grid-to-carousel .mg-carousel-nav:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--e-global-color-accent, var(--mg-color-accent, #fdcb35));
}

.mg-grid-to-carousel .mg-carousel-nav-prev {
  left: 10px;
}

.mg-grid-to-carousel .mg-carousel-nav-next {
  right: 10px;
}

.mg-grid-to-carousel .mg-carousel-nav svg {
  width: 20px;
  height: 20px;
  fill: var(--e-global-color-text, var(--mg-color-text, #1f2937));
}

.mg-grid-to-carousel .mg-carousel-nav:hover svg {
  fill: var(--e-global-color-accent, var(--mg-color-accent, #fdcb35));
}

/* ---- Horizontal Rule (HR) Styling ---- */
body.mg-design-system hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

/* ---- Responsive Video Embeds ---- */
/* Wrapper for responsive video embeds */
body.mg-design-system .mg-video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 2rem 0;
}

body.mg-design-system .mg-video-responsive iframe,
body.mg-design-system .mg-video-responsive object,
body.mg-design-system .mg-video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Auto-wrap YouTube/Vimeo iframes in content */
body.mg-design-system main iframe[src*="youtube.com"],
body.mg-design-system main iframe[src*="youtu.be"],
body.mg-design-system main iframe[src*="vimeo.com"],
body.mg-design-system .entry-content iframe[src*="youtube.com"],
body.mg-design-system .entry-content iframe[src*="youtu.be"],
body.mg-design-system .entry-content iframe[src*="vimeo.com"],
body.mg-design-system .post-content iframe[src*="youtube.com"],
body.mg-design-system .post-content iframe[src*="youtu.be"],
body.mg-design-system .post-content iframe[src*="vimeo.com"],
body.mg-design-system .elementor-widget-text-editor iframe[src*="youtube.com"],
body.mg-design-system .elementor-widget-text-editor iframe[src*="youtu.be"],
body.mg-design-system .elementor-widget-text-editor iframe[src*="vimeo.com"],
body.mg-design-system .elementor-widget-html iframe[src*="youtube.com"],
body.mg-design-system .elementor-widget-html iframe[src*="youtu.be"],
body.mg-design-system .elementor-widget-html iframe[src*="vimeo.com"],
body.mg-design-system .elementor-widget-theme-post-content iframe[src*="youtube.com"],
body.mg-design-system .elementor-widget-theme-post-content iframe[src*="youtu.be"],
body.mg-design-system .elementor-widget-theme-post-content iframe[src*="vimeo.com"] {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: block;
  margin: 2rem 0;
}