/*
Theme Name: Magic Explorers
Theme URI: https://www.magicexplorers.com
Description: Magic Explorers is a clean, playful child theme built for conversion-focused landing pages targeting schools, preschools, camps, and libraries—brand-aligned, fast, and Elementor-ready.
Author: AMZingPPC
Author URI: https://example.com
Template: hello-elementor
Version: 1.0.0
Text Domain: magic-explorers
*/

/* Base typography using theme.json presets as fallback */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
  font-family: var(--wp--preset--font-family--inter, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  color: var(--ink-900, #1C1C1C);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--wp--preset--font-family--rubik, Rubik, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  color: var(--ink-900, #1C1C1C);
  line-height: 1.2;
  margin: 0 0 0.5em 0;
}

.me-lp-section{ padding: var(--space-8, 64px) 0; }
.me-lp-section--light{ background: var(--ink-100, #F5F6FA); }
.me-container{ width: min(100%, var(--container, 1200px)); margin: 0 auto; padding: 0 20px; }

/* Buttons */
.me-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-lg, 16px);
  border: 2px solid transparent;
  font-weight: 600; text-decoration: none; transition: .2s ease;
}
.me-btn--primary{ background: var(--color-primary, #6B4AF6); color: #fff; }
.me-btn--primary:hover{ filter: brightness(0.92); transform: translateY(-1px); }
.me-btn--secondary{ background: transparent; color: var(--color-primary, #6B4AF6); border-color: var(--color-primary, #6B4AF6); }
.me-btn--secondary:hover{ background: var(--color-primary, #6B4AF6); color: #fff; }

/* Cards */
.me-card{
  background: #fff; border: 1px solid #E6E8F0; border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-1, 0 2px 8px rgba(16,24,40,.08));
  padding: var(--space-4, 32px);
}

/* Proof bar */
.me-proof{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; opacity:.9 }
.me-proof__item{ display:flex; gap:8px; align-items:center; font-weight:600; }

/* Pricing table (simple) */
.me-table{ width:100%; border-collapse: collapse; }
.me-table th, .me-table td{ border: 1px solid #E6E8F0; padding: 12px 16px; text-align: left; }
.me-table th{ background: var(--ink-100, #F5F6FA); }

/* Forms */
.me-form input, .me-form select, .me-form textarea{
  width:100%; min-height:48px; padding:12px 14px; border-radius: var(--radius-md, 12px);
  border:1px solid #D9DDEA; outline:none; transition: .2s ease;
  font: inherit;
}
.me-form input:focus, .me-form select:focus, .me-form textarea:focus{ border-color: var(--color-primary, #6B4AF6); box-shadow: 0 0 0 3px rgba(107,74,246,.15); }
.me-form .me-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 768px){ .me-form .me-row{ grid-template-columns:1fr; } }

/* Utility */
.me-badge{ display:inline-block; background: var(--color-accent, #FFC84D); color: var(--ink-900, #1C1C1C);
  padding:6px 10px; border-radius: 999px; font-weight:600; font-family: var(--wp--preset--font-family--fredoka, Fredoka, Rubik, Inter, sans-serif); }
.me-muted{ color: var(--ink-600, #5C5C5C); }
.me-sticky-cta{ position: fixed; left:0; right:0; bottom: 16px; display:flex; justify-content:center; z-index: 999; }
@media (min-width: 768px){ .me-sticky-cta{ display:none; } }

/* 1) Nunca mostrar rolagem horizontal (sem quebrar âncoras/scroll): */
html, body { overflow-x: clip; } /* use 'clip' em vez de 'hidden' para evitar saltos */

/* 2) Evitar que widgets/containers gerem overflow na horizontal */
.e-con, .elementor-section, .elementor-container, .elementor-widget-button {
  overflow-x: clip;
}

/* 3) Botões: impedir que ícone/efeitos empurrem largura ao hover */
.elementor-button { overflow: hidden; transform: translateZ(0); }
.elementor-button .elementor-button-icon svg { display:block; } /* remove espaços inline */
.elementor-button .elementor-button-icon { transition: transform .2s; }
.elementor-button:hover .elementor-button-icon { transform: translateX(0); } /* zera movimentos laterais */