/*
 * Elementor Legacy Cleanup
 *
 * Constrains Elementor icon/button/widget sizes on pages that still have
 * Elementor markup in their content (migrated from an Elementor-built site).
 *
 * WHY THIS FILE EXISTS:
 *   When you switch from Elementor to this theme, Elementor's CSS no longer
 *   loads, but the HTML classes (.elementor-icon, .elementor-button, etc.)
 *   remain in post_content. Without Elementor's sizing rules, icons render
 *   at huge/broken sizes inheriting ambient font-size.
 *
 * SAFE TO DELETE:
 *   Once all pages have been rebuilt with the ACF Product Collection
 *   template, delete this file AND remove its enqueue in:
 *   inc/theme-settings.php (search for "elementor-legacy")
 *
 *   No other theme code depends on this file.
 */

/* ==========================================================================
   Icons — force reasonable size
   ========================================================================== */

.elementor-icon,
.elementor-icon-box-icon,
.elementor-icon-list-icon,
.elementor-icon-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 40px !important;
  line-height: 1 !important;
  width: auto !important;
  max-width: 80px !important;
  max-height: 80px !important;
}

.elementor-icon i,
.elementor-icon svg,
.elementor-icon-box-icon i,
.elementor-icon-box-icon svg,
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
  width: 1em !important;
  height: 1em !important;
  font-size: inherit !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: inline-block !important;
}

/* Small icons inside buttons and list items */
.elementor-button-icon,
.elementor-button-icon-left,
.elementor-button-icon-right {
  font-size: 14px !important;
  line-height: 1 !important;
  width: auto !important;
  max-width: 1.2em !important;
  max-height: 1.2em !important;
  display: inline-flex !important;
}

.elementor-button-icon i,
.elementor-button-icon svg,
.elementor-button-icon-left i,
.elementor-button-icon-left svg,
.elementor-button-icon-right i,
.elementor-button-icon-right svg {
  width: 1em !important;
  height: 1em !important;
  font-size: inherit !important;
}

/* Icon list items — keep icon aligned with text */
.elementor-icon-list-item .elementor-icon-list-icon {
  font-size: 16px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  margin-right: 8px;
}

/* ==========================================================================
   Bare SVGs inside content (Elementor leftover after stripping wrapper classes)
   These SVGs have viewBox but no width/height attrs, rendering huge.
   ========================================================================== */

/* SVG sitting directly inside a list item — typical icon-list leftover */
.entry-content li > svg,
.entry-content li > svg:first-child,
.entry-content ul svg:not([width]):not([height]),
.entry-content ol svg:not([width]):not([height]) {
  width: 1em !important;
  height: 1em !important;
  max-width: 1.2em !important;
  max-height: 1.2em !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Standalone bare SVG inside a paragraph or heading */
.entry-content p > svg:not([width]):not([height]),
.entry-content h1 > svg:not([width]):not([height]),
.entry-content h2 > svg:not([width]):not([height]),
.entry-content h3 > svg:not([width]):not([height]),
.entry-content h4 > svg:not([width]):not([height]),
.entry-content span > svg:not([width]):not([height]) {
  width: 1em !important;
  height: 1em !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Catch-all — ANY bare SVG anywhere in content, capped to 48px */
.entry-content svg:not([width]):not([height]) {
  max-width: 48px !important;
  max-height: 48px !important;
}

/* Catch bare <i> Font Awesome elements */
.entry-content i.fa,
.entry-content i.fas,
.entry-content i.far,
.entry-content i.fab,
.entry-content i.fal,
.entry-content i[class*="eicon-"] {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Inside Elementor widgets (if any wrapper remains), keep the larger original */
.elementor-widget svg:not([width]):not([height]),
.elementor-widget .elementor-icon-wrapper svg {
  max-width: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
}

/* Font Awesome / Elementor Icons — absolute size cap */
.elementor i.fa,
.elementor i.fas,
.elementor i.far,
.elementor i.fab,
.elementor i.fal,
.elementor i[class*="eicon-"] {
  font-size: 40px !important;
  line-height: 1 !important;
}

/* Inside buttons/lists they stay small */
.elementor-button i.fa,
.elementor-button i[class*="eicon-"],
.elementor-icon-list-icon i.fa,
.elementor-icon-list-icon i[class*="eicon-"] {
  font-size: inherit !important;
}

/* ==========================================================================
   Image widgets — cap broken aspect ratios
   ========================================================================== */

.elementor-widget-image img,
.elementor-image img {
  max-width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-icon,
  .elementor-icon-box-icon,
  .elementor-icon-wrapper {
    font-size: 32px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  .elementor i.fa,
  .elementor i.fas,
  .elementor i.far,
  .elementor i.fab,
  .elementor i[class*="eicon-"] {
    font-size: 32px !important;
  }
}