/* =========================================================================
   CSS DE RESPONSIVIDADE - terapiaonlinepsi.com.br
   Cole em: Aparência → Personalizar → CSS Adicional
   (Funciona no Elementor Free, não precisa do Pro)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) GERAL - vale para todas as telas
   ------------------------------------------------------------------------- */

/* Evita rolagem horizontal indesejada (imagem ou seção "vazando") */
html, body {
  overflow-x: hidden !important;
}

/* Imagens sempre fluidas, nunca estouram o container */
.elementor-widget-image img,
.elementor-image img {
  max-width: 100% !important;
  height: auto !important;
}

/* -------------------------------------------------------------------------
   2) TABLET (até 1024px)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .elementor-section .elementor-container {
    flex-wrap: wrap;
  }

  .elementor-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .elementor-column {
    width: 100% !important;
  }

  /* Título principal (Hero) */
  h1, .elementor-heading-title {
    font-size: clamp(28px, 5vw, 38px) !important;
    line-height: 1.3 !important;
  }

  /* Esconde menu horizontal desktop e mostra só o toggle (☰) */
  .elementor-nav-menu--main .elementor-nav-menu {
    display: none !important;
  }
  .elementor-menu-toggle {
    display: flex !important;
  }
}

/* -------------------------------------------------------------------------
   3) MOBILE (até 767px) - o principal ponto fraco identificado
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

  .elementor-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* --- Título da Hero: era o principal problema (quebrava palavra por palavra) --- */
  h1, .elementor-heading-title {
    font-size: 28px !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 19px !important;
  }

  p, .elementor-widget-text-editor {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Botões: mais fáceis de tocar, texto centralizado */
  .elementor-button {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Cards de serviço (Psicoterapia / Terapia de Casal / Atendimento Online) */
  .elementor-column {
    margin-bottom: 24px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Ícones/imagens dos cards - evita que fiquem grandes demais */
  .elementor-widget-image img {
    max-width: 140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Footer - ícones e copyright melhor distribuídos */
  footer .elementor-container,
  .elementor-location-footer .elementor-container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
}

/* -------------------------------------------------------------------------
   4) CELULARES BEM PEQUENOS (até 400px) - ajuste fino extra
   ------------------------------------------------------------------------- */
@media (max-width: 400px) {
  h1, .elementor-heading-title {
    font-size: 24px !important;
  }
}

/* -------------------------------------------------------------------------
   5) ELEMENTOR "CONTAINERS" (versão nova, usada nas páginas internas:
      Psicoterapia, Terapia de Casal, Minha Missão, Formulário de Contato)
   Essas páginas não usam .elementor-column, por isso precisam de regras
   próprias para empilhar corretamente no mobile.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Container pai: força quebra de linha ao invés de espremer lado a lado */
  .e-con {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 767px) {
  /* Qualquer container/filho direto de container passa a ocupar 100% */
  .e-con > .e-con,
  .e-con > .e-child,
  div[data-element_type="container"] > div[data-element_type="container"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Imagem dentro desses containers (foto do Alexandre, foto do casal, etc.) */
  .e-con img,
  div[data-element_type="container"] img {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Texto ao lado da imagem: evita ficar espremido numa coluna estreita */
  .e-con .elementor-widget-text-editor,
  .e-con .elementor-widget-heading {
    text-align: left !important;
  }

  /* Formulário de contato: campos ocupando a largura toda */
  .elementor-field-group,
  .elementor-field-textual {
    width: 100% !important;
  }
}