/* reservado para ajustes pontuais – Gabriela Assis Psicologia */

/* Ajuste fino mobile: Depoimentos (sem afetar desktop) */
@media (max-width: 575.98px) {
  .template-site-home-index .testimonials-section {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* Ajuste fino mobile: Depoimentos (sem afetar desktop) */
@media (max-width: 575.98px) {
  .template-site-home-index .testimonials-section {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ==== MENU MOBILE: mostrar ga-panel quando o HEADER ganha .open ==== */
@media (max-width: 991.98px) {

  /* Bloqueia scroll do conteúdo por trás do menu */
  body.up.open { overflow: hidden; }

  /* Overlay suave no fundo (opcional, reversível) */
  body.up.open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 998; /* abaixo do header/ga-panel */
  }

  /* Garante o header acima do overlay */
  .ga-header { position: relative; z-index: 999; }

  /* Base do painel (não muda seu visual, só garante empilhamento) */
  .ga-header .ga-panel {
    position: fixed; /* fica “colado” ao topo no mobile */
    left: 0; right: 0;
    top: var(--ga-header-h, 64px); /* altura do header */
    max-height: calc(100dvh - var(--ga-header-h, 64px));
    overflow: auto;
    z-index: 1000;
    /* estado fechado pode vir do CSS atual: display/opacity/visibility */
    transition: transform .24s ease, opacity .24s ease, visibility .24s ease;
  }

  /* ESTADO ABERTO: quando o header tiver .open, mostramos o painel */
  .ga-header.open .ga-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* === 0) Altura do header para o cálculo do painel === */
/* Seu header está com height: 70px, então fixamos a variável */
:root { --ga-header-h: 70px; }

/* === 1) Neutralizar regra global de HEADER só para o nosso header === */
@media (max-width: 991.98px) {
  /* Se houver regra genérica "header { position: fixed ... }", anulamos: */
  header.ga-header { position: fixed !important; }
  /* Opcional: se houver outra regra ainda mais genérica batendo, reforça: */
  body header.ga-header { position: fixed !important; }
}

/* === 2) Base do painel mobile (fechado por padrão) === */
@media (max-width: 991.98px) {
  .ga-header .ga-panel {
    display: none;                 /* fechado por padrão */
    position: fixed;
    left: 0; right: 0;
    top: calc(env(safe-area-inset-top) + var(--ga-header-h, 64px));
    max-height: calc(100dvh - (env(safe-area-inset-top) + var(--ga-header-h, 64px)));
    overflow: auto;
    z-index: 1002;                 /* acima do header/overlay */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
    /* fundo só para garantir leitura; pode tirar se já existir no seu theme */
    background: var(--ga-azul, #2C3D4F);
    padding: 12px 20px;
  }

  /* === 3) Estado ABERTO: quando o HEADER ganha .open === */
  .ga-header.open .ga-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* === 4) UX: travar o scroll do conteúdo por trás e overlay suave === */
  body.up.open { overflow: hidden; }
  body.up.open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;                 /* abaixo do painel (1002) e header (1001) */
  }
  .ga-header { position: relative; z-index: 1001; }
}

/* === ALTURA DO HEADER (inclui o safe-area via próprio header) === */
:root { --ga-header-h: 70px; } /* 70px = a altura que você usa no mobile */

/* === MENU MOBILE – corrigir o offset (sem duplicar safe-area) === */
@media (max-width: 991.98px) {
  /* header acima do overlay */
  .ga-header { position: relative; z-index: 1001; }

  /* overlay do fundo */
  body.up.open { overflow: hidden; }
  body.up.open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
  }

  /* estado fechado do painel */
  .ga-header .ga-panel {
    display: none;
    position: fixed;
    left: 0; right: 0;
    /* ⚠️ AQUI O AJUSTE: SOMENTE var(--ga-header-h), sem env(safe-area...) */
    top: var(--ga-header-h);
    max-height: calc(100dvh - var(--ga-header-h));
    overflow: auto;
    z-index: 1002;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
    background: var(--ga-azul, #2C3D4F);
    padding: 12px 20px;
  }

  /* aberto quando o header tem .open */
  .ga-header.open .ga-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

  /* garante que nenhum ancestor trave clique/visibilidade */
  html, body, .ga-header { overflow: visible !important; }
  
  /* === Altura do header no mobile (ajuste fino se necessário) === */
:root { --ga-header-h: 70px; }

/* === Header acima do overlay; cria contexto de empilhamento limpo === */
@media (max-width: 991.98px) {
  header.ga-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1001 !important;      /* abaixo do painel (1002) e acima do overlay (1000) */
    isolation: isolate;            /* evita misturar z-index com ancestrais */
  }

  /* Overlay do fundo só quando menu aberto */
  body.up.open { overflow: hidden; }
  body.up.open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;                 /* abaixo do header e do painel */
  }

  /* Estado FECHADO do painel */
  header.ga-header > nav.ga-panel {
    display: none;
    position: fixed;
    left: 0; right: 0;
    /* ⚠️ sem repetir safe-area: o header já lida com isso */
    top: var(--ga-header-h);
    max-height: calc(100dvh - var(--ga-header-h));
    overflow: auto;
    background: var(--ga-azul, #2C3D4F);
    z-index: 1002;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
    -webkit-overflow-scrolling: touch;
    padding: 12px 20px;
  }

  /* Estado ABERTO do painel */
  header.ga-header.open > nav.ga-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

/* Logo fluida sem “esmagar” no mobile */
header.ga-header .ga-brand svg,
header.ga-header .ga-brand img {
  display: block;
  height: 28px;        /* ajuste visual – se preferir 30/32, aumente aqui */
  width: auto;         /* mantém proporção */
  max-width: none;     /* evita limitar por container */
}
}

/* Garante um mínimo de respiro lateral em telas muito estreitas */
@media (max-width: 575.98px) {
  header.ga-header .ga-nav.container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}