/* ===========================================================================
   CENTRAL DE AJUDA E BOTÃO DE WHATSAPP (F3.15).

   Só consome tokens: nenhuma medida, nenhum tamanho de fonte e nenhum espaço
   é escrito à mão neste arquivo.

   As cores do botão vivem no tokens.css, com o resto do design system.

   ⚠️ POR QUE NÃO O VERDE OFICIAL DO WHATSAPP (#25D366): com letra branca ele dá
   1.98:1. Para o público 50+ isso é o texto do botão sumindo dentro do próprio
   botão. É o mesmo defeito já encontrado na F3.6 com o laranja do nível
   "Aquecendo". O #075E54 continua sendo verde de WhatsApp (é a cor escura da
   própria marca) e é lido por qualquer um.

   ⚠️ CARREGUE ESTE ARQUIVO DEPOIS do componentes.css: o .botao--whatsapp
   herda de .botao a altura de toque e o formato, e só troca a cor.
   =========================================================================== */

/* Os tokens --cor-whatsapp, --cor-whatsapp-esc e --z-flutuante vivem no
   tokens.css, com o resto do design system — é lá que o conferidor de
   contraste os enxerga e os mede a cada execução. */


/* --- BOTÃO DE WHATSAPP ---------------------------------------------------- */
.botao--whatsapp {
  color: var(--cor-texto-invertido);
  background: var(--cor-whatsapp);
}
.botao--whatsapp:hover { background: var(--cor-whatsapp-esc); }
.botao--whatsapp__icone { font-size: var(--texto-grande); line-height: 1; }

/* O horário, escrito ao lado do botão, sempre que o botão aparece. */
.ajuda-horario {
  display: block;
  margin: var(--e2) 0 0;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-suave);
}

/* --- ONDE O BOTÃO MORA ---------------------------------------------------- */
/* CELULAR (o padrão): o bloco fica no fluxo da página, no alto, dentro do slot
   que a própria página reserva. Ele NÃO é desenhado por cima de nada — em
   390px, uma bolha fixa no canto de baixo fica em cima do botão PRÓXIMA AULA
   em algum ponto da rolagem, e a pessoa toca achando que avança a aula e cai no
   WhatsApp. Aqui isso não tem como acontecer: não há sobreposição nenhuma. */
.ajuda-flutuante {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e1);
  margin: var(--e4) auto 0;
  max-width: var(--largura-pagina);
  padding: 0 var(--e4);
}

/* A partir de 560px o botão para de ocupar a largura inteira: sem esta linha o
   `align-items: stretch` de cima esticava a bolha até 1100px, e o painel abria
   com uma faixa verde gigante entre a barra do topo e a primeira aula,
   disputando a atenção com o conteúdo que a pessoa pagou para ver. */
@media (min-width: 560px) {
  .ajuda-flutuante { align-items: flex-start; }
}

/* TELA MUITO LARGA: aí sim a bolha no canto, porque só a partir daqui existe
   margem VAZIA dos dois lados do conteúdo — ela pousa ali e não há o que tapar.
   E ela NÃO some ao rolar, nunca: quem tem 70 anos procura o botão onde ele
   estava e, se não achar, conclui que o site quebrou.

   ☠️ ESTE NÚMERO É CONTA, NÃO GOSTO, E A CONTA JÁ ESTEVE ERRADA. A regra era
   900px, com o comentário dizendo "não há o que tapar" — e havia. O conteúdo
   tem `max-width: var(--largura-pagina)` (1100px), então a margem vazia de cada
   lado é (tela − 1100) ÷ 2. A bolha ocupa 320px + 20px de afastamento = 340px.
   Ela só cabe na margem quando (tela − 1100) ÷ 2 ≥ 340, ou seja tela ≥ 1780px.
   Numa janela de 1000px a bolha ficava EM CIMA da lista de aulas, no canto de
   baixo — exatamente o defeito que este arquivo inteiro jura evitar. Abaixo
   deste ponto o botão fica no fluxo, no alto da página, onde não tapa nada.
   Mexer em 1780 sem refazer a conta traz o defeito de volta. */
@media (min-width: 1780px) {
  .ajuda-flutuante {
    /* Dentro da bolha o botão volta a ocupar a caixa inteira: aqui a caixa tem
       320px, e botão encolhido dentro de uma bolha com borda fica torto. */
    align-items: stretch;
    position: fixed;
    right: var(--e5);
    bottom: var(--e5);
    left: auto;
    z-index: var(--z-flutuante);
    width: auto;
    max-width: 320px;
    margin: 0;
    padding: var(--e3) var(--e4) var(--e4);
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-2);
  }
  .ajuda-flutuante .ajuda-horario { text-align: center; }
}

/* --- PÁGINA /ajuda -------------------------------------------------------- */

/* Os dois botões de resgate, antes de qualquer texto: são o motivo de a página
   existir. Empilhados no celular, lado a lado quando cabe. */
.ajuda-resgate {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin: 0 0 var(--e8);
}
@media (min-width: 560px) {
  .ajuda-resgate { flex-direction: row; }
  .ajuda-resgate > .botao { flex: 1 1 0; }
}

.ajuda-carregando { color: var(--cor-texto-suave); }

.ajuda-categoria { margin-bottom: var(--e10); }
.ajuda-categoria__titulo {
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--cor-borda);
  margin-bottom: var(--e4);
}

/* --- UMA PERGUNTA (acordeão nativo <details>) ----------------------------- */
.ajuda-item {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  margin-bottom: var(--e4);
}

/* A FAIXA INTEIRA é clicável e tem altura de alvo de toque. O triângulo padrão
   do <details> tem uns 12px: o dedo erra, a página não reage, e a pessoa acha
   que travou. Aqui o alvo é a linha toda, de ponta a ponta. */
.ajuda-item__pergunta {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alvo-toque);
  padding: var(--e4) var(--e5);
  font-size: var(--texto-medio);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
  cursor: pointer;
  list-style: none;               /* tira o triângulo do Firefox */
}
.ajuda-item__pergunta::-webkit-details-marker { display: none; }

/* O sinal de abrir/fechar, desenhado por nós para caber no alvo de toque.
   É decoração: quem lê com leitor de tela recebe o estado do próprio <details>. */
.ajuda-item__pergunta::after {
  content: "+";
  margin-left: auto;
  font-size: var(--texto-titulo);
  font-weight: var(--peso-forte);
  line-height: 1;
  color: var(--cor-primaria);
}
.ajuda-item[open] > .ajuda-item__pergunta::after { content: "–"; }

.ajuda-item[open] > .ajuda-item__pergunta { background: var(--cor-primaria-clara); }

.ajuda-item__resposta {
  max-width: var(--largura-leitura);
  padding: var(--e2) var(--e5) var(--e5);
}
/* Resposta longa (o dono pode escrever cinco mil letras) não pode virar um
   bloco cinza sem respiro: cada parágrafo mantém o espaçamento do corpo. */
.ajuda-item__resposta p { margin: 0 0 var(--e4); }
.ajuda-item__resposta p:last-child { margin-bottom: 0; }

/* --- BLOCO DE CONTATO DO FIM DA PÁGINA ------------------------------------ */
.ajuda-contato {
  max-width: var(--largura-leitura);
  padding: var(--e6) var(--e5);
  background: var(--cor-fundo-realce);
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio-grande);
  margin-bottom: var(--e12);
}
.ajuda-contato .ajuda-horario { margin-bottom: var(--e4); }
.ajuda-email { margin-bottom: 0; }

/* Na página de ajuda, o bloco de contato JÁ é o botão: ele fica no fluxo do
   texto, no fim da página, e nunca vira bolha por cima de nada. */
.ajuda-contato.ajuda-flutuante { position: static; }