/* Ajustes responsivos do que e COMPARTILHADO pelas paginas de pages/
   (topo.phtml e rodape.phtml). Correcoes de secao ficam no CSS de cada pagina.

   Contexto: os breakpoints do tema saltam de 998px direto para 768/598px, entao
   a faixa de tablet herdava medidas de desktop. */

/* --------------------------------------------------------------------------
   TOPO - BOTAO DE ABRIR O MENU NO TABLET
   O menu horizontal (.cabecalho__container__menu) some em 1200px, mas o botao
   de abrir o menu mobile so aparecia em 768px. De 769px a 1200px - justamente
   a faixa dos tablets - o topo ficava sem os dois: nao havia como navegar.

   A correcao de origem esta em assets/scss/layout/_topo.scss (e ja aplicada no
   pedizap.css compilado, que atende as paginas do CMS). Ela precisa ser
   repetida aqui porque os bundles de pages/ (index.css, recursos.css,
   sobre-nos.css) trazem a sua propria copia do CSS do tema e carregam DEPOIS do
   pedizap.css - a regra base display:none deles venceria.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .cabecalho__container__btn-open {
    display: flex;
  }
}

/* O botao de fechar do painel off-canvas seguia a mesma logica quebrada: base
   display:none e um @media reativando so em 768px. Com o menu abrindo ate
   1200px, o tablet abria o painel e nao tinha como fechar. Ele vive dentro do
   painel, que so aparece com o menu aberto, entao nao precisa de breakpoint
   nenhum - e assim que ficou tambem em assets/scss/layout/_menu-mobile.scss. */
.navegacao-mobile__btn-close {
  display: block;
  right: calc(15px + 3%);
}

/* Com o hamburguer no ar, "Documentacao API" e "Aumentar minhas vendas" saem do
   topo fixo: os dois ja estao dentro do menu mobile, ficavam duplicados. O
   limite acompanha o do hamburguer (1200px); estava em 768px. */
@media (max-width: 1200px) {
  .cabecalho.down .cabecalho__container__btn-api {
    display: none;
  }

  .cabecalho.down .cabecalho__container__btn-vendas {
    display: none !important;
  }
}

/* O link da API dentro do painel reaproveita a classe do topo, que e
   display:none por padrao - estava no HTML mas nunca aparecia. */
.navegacao-mobile__btns .cabecalho__container__btn-api {
  display: block;
  margin: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   RODAPE - NEWSLETTER
   Dois problemas na faixa de tablet:

   1) Entre 999px e 1199px a imagem da pessoa ainda aparecia e, ao lado dela, o
      formulario no formato desktop (input de 450px + botao de 215px) nao cabia
      no .container - o bloco vazava para a direita e o documento ficava mais
      largo que a janela. Era isso que abria a faixa branca lateral em 1024px.
   2) Abaixo de 998px a imagem some, mas a barra inclinada (skew) continuava e
      ficava espremida, com o titulo cortado pelo topo do bloco.

   O layout empilhado que ja existia em <=768px resolve os dois casos, entao ele
   passa a valer em toda a faixa de tablet.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1199.98px) {
  footer .container.newsletter .newsletter__image {
    display: none;
  }

  footer .container.newsletter .newsletter__formulario {
    padding: 30px 25px 40px;
  }

  footer .container.newsletter .newsletter__formulario #container_newsletter .form-custom-newsletter .title {
    margin-left: 0;
    padding: 0 0 22px;
    color: #fff;
    font-style: normal;
    font-weight: 600;
    font-size: 1.75rem;
    text-align: center;
  }

  footer .container.newsletter .newsletter__formulario #container_newsletter .form-custom-newsletter .form__content {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
  }

  footer .container.newsletter .newsletter__formulario #container_newsletter .form-custom-newsletter .form__content input {
    width: min(100%, 420px);
    height: 55px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .15);
    transform: none;
  }

  footer .container.newsletter .newsletter__formulario #container_newsletter .form-custom-newsletter .form__content button {
    width: auto;
    padding: 15px 40px;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   RODAPE - BLOCO PEDIZAP (logo + menu + horario + redes)
   Em telas estreitas o menu e o bloco de horario dividiam a mesma linha e as
   colunas encostavam uma na outra. Abaixo de 640px cada bloco ocupa a largura
   toda, empilhado e centralizado.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  footer .container.pedizap {
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
  }

  footer .container.pedizap .pedizap__menu-rodape {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    width: 100%;
  }

  footer .container.pedizap .pedizap__right {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    border-left: 0;
    padding-left: 0;
  }

  footer .container.pedizap .pedizap__right__horario {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   "AUMENTE SUAS VENDAS" (home e sobre-nos)
   Em duas colunas o formulario reserva de 380px a 430px e sobra pouco para a
   direita, entao o terceiro card ("50+ Cidades") fica cortado na borda. Isso
   acontecia em duas faixas diferentes:

   - na home, entre 999px e 1200px (o empilhamento so comecava em 998px);
   - no sobre-nos, ate 640px - o CSS da pagina tem duas copias das regras de
     conversao e, na segunda, o bloco @media (max-width: 998px) ficou sem a
     linha grid-template-columns (sobre-nos.css:28399). Sem ela, quem manda
     ate 640px e o @media (max-width: 1200px) logo acima, de duas colunas.

   Uma regra so resolve os dois: da faixa de tablet para baixo vale o mesmo
   empilhamento - texto e numeros em cima, formulario embaixo, largura toda.
   O limite inferior e 641px porque abaixo disso cada pagina ja tem o seu
   ajuste de mobile, mais apertado.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1200px) {
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 54px;
  }

  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right {
    order: -1;
    padding-right: 0;
    text-align: center;
    /* tem max-width: 795px; sem as margens automaticas ficava encostado a
       esquerda da coluna, desalinhado do formulario */
    margin-right: auto;
    margin-left: auto;
  }

  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__cabecalho {
    margin: 0 auto;
  }

  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__cabecalho__subtitulo,
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista {
    margin-right: auto;
    margin-left: auto;
  }

  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__left {
    max-width: 620px;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   BOTOES INCLINADOS
   O tema usa width fixo (448px) + ::after com skew. Quando o rotulo quebra em
   duas linhas o texto sai da forma colorida. Travar a quebra e deixar a altura
   crescer com o conteudo evita isso em qualquer largura.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {

  .teste-gratis__container__left__btn,
  .cardapio__container__left__btn,
  .facil__container__left__btn,
  .parceiros__container__left__btn,
  .edit-cardapio__container__right__btn,
  .solucao-delivery__container__btn,
  .desafios__container__btns__btn-sabia,
  .desafios__container__btns__btn-teste {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 52px;
    padding: 14px 32px;
    text-align: center;
    white-space: nowrap;
  }

  /* os dois botoes de "Desafios" tem padding lateral de 80px/108px fixo, que
     estoura a forma inclinada em telas estreitas */
  .desafios__container__btns__btn-sabia,
  .desafios__container__btns__btn-teste {
    padding: 14px 40px;
  }
}