/**
 * My Framework — Elementor Compatibility Styles
 *
 * Loaded only when the Elementor plugin is active (frontend + editor preview).
 * Keeps the theme's global rules from fighting Elementor's own layout engine.
 *
 * @version 1.1.0
 */

/*
 * 1) Dark mode compatibility
 *
 * The theme auto-switches to a dark palette via `prefers-color-scheme: dark`.
 * Elementor designs use explicit colors, so the Elementor content area stays
 * on the light palette; the theme header/footer remain dark-mode aware.
 */
@media (prefers-color-scheme: dark) {
  body.elementor-page,
  body.elementor-edit-area {
    background-color: var(--color-white);
  }

  body.elementor-page .site-content,
  body.elementor-edit-area .site-content {
    --color-text:   var(--color-gray-900);
    --color-bg:     var(--color-white);
    --color-bg-alt: var(--color-gray-50);
    --color-border: var(--color-gray-200);
  }
}

/*
 * 2) Elementor content area width
 *
 * Ensure the Elementor content area inside <main> is not constrained by
 * any theme-level max-width rules (the theme's .container is not used
 * inside Elementor content, but this is defensive).
 */
.elementor-page .site-content,
.elementor-edit-area .site-content {
  width: 100%;
  max-width: none;
}

/*
 * 3) Preserve Elementor's own SVG icon sizing
 *
 * The theme's global `svg { height: auto }` can override Elementor's
 * explicit icon sizes where specificity ties. This restores Elementor's
 * intended sizing inside its elements.
 */
.elementor-page .elementor-element svg,
.elementor-edit-area .elementor-element svg {
  height: auto;
}