/*
 * Estilos estáticos da template "Apresentação do template" (template-sale-page.php).
 *
 * Estas regras antes viviam embutidas em um bloco \3c style> no corpo do
 * documento, junto com as condicionais PHP de cor vindas do ACF. Como este
 * trecho não depende de nenhum dado dinâmico, ele foi extraído para este
 * arquivo externo, que o navegador consegue cachear entre visitas.
 *
 * As cores configuráveis pelo painel (menu, cabeçalho, vídeo, perguntas
 * frequentes, formulário e rodapé) não estão aqui nem inline no template: são
 * montadas por templatesavenda_build_sale_page_colors_css() (inc/colors.php) e
 * injetadas com wp_add_inline_style() logo depois desta folha.
 *
 *
 * COMO ACRESCENTAR UMA CLASSE DO TAILWIND QUE AINDA NÃO EXISTE
 * ===========================================================
 *
 * Escreva a classe no markup e rode o build. Só isso.
 *
 *     npm run build:sale     (uma vez)
 *     npm run watch:sale     (durante o desenvolvimento)
 *
 * O CSS-base desta página é assets/css/output.css, gerado por tailwind.config.js
 * a partir de src/css/output.css. O `content` daquele arquivo varre
 * template-sale-page.php, header-custom.php, footer-custom.php,
 * template-parts/ inteiro e inc/blocks/whatsapp.php — então uma classe nova
 * escrita em qualquer um deles entra no build sozinha.
 *
 * NÃO transcreva utilitários do Tailwind à mão neste arquivo. O cabeçalho
 * anterior ensinava a fazer isso, partindo de uma premissa que deixou de valer:
 * a de que "o projeto que gerou esse arquivo não está versionado no tema". Ele
 * está — tailwind.config.js, src/css/output.css e os scripts do package.json —,
 * e o CI reprova o push quando assets/css/ diverge de src/css/ (job `assets`,
 * em .github/workflows/ci.yml). Regra escrita à mão aqui só duplica o que o
 * build já resolve.
 *
 * Classe montada por concatenação em PHP é a única exceção, porque nenhum
 * scanner estático a enxerga: essas entram no `safelist` de tailwind.config.js,
 * que já traz `order-1` a `order-4` por causa de template-parts/plan-content.php.
 *
 * NUNCA edite assets/css/output.css. Ele é regerado do zero a cada build, e
 * qualquer regra escrita à mão nele desaparece sem aviso.
 *
 * ==========================================================================
 * Estilos próprios da template
 * ========================================================================== */

.icon-question.bi-plus::after{content:"+"}

.icon-question.bi-dash::after{content:"-"}

/* Acordeão do FAQ: a altura é animada por grid-template-rows (0fr para 1fr),
   o que dispensa medir a resposta em JavaScript e funciona com texto de
   qualquer tamanho. O estado aberto é a classe .is-open, aplicada pelo
   assets/js/main-sale-page.js. */
.tex-answer{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s ease,visibility .2s}

.tex-answer.is-open{grid-template-rows:1fr;visibility:visible}

/* O recorte precisa de um nível próprio, sem padding nem borda: com
   box-sizing:border-box, uma caixa nunca encolhe abaixo de padding+borda, então
   aplicar o overflow direto no .tex-answer__inner (que tem p-4 e border)
   deixaria 34px de resíduo visível com o acordeão fechado. */
.tex-answer>.tex-answer__clip{overflow:hidden;min-height:0}

@media (prefers-reduced-motion:reduce){

.tex-answer{transition:none}}

.main-content p{line-height:2rem;}

/* Botão de reprodução do vídeo.

   O controle era um <svg> solto dentro de uma <div> — não recebia foco, não
   respondia a Enter nem a Espaço e não era anunciado como controle. Virou
   <button> nativo em template-parts/sale/video.php, e estas regras existem só
   para tirar o cromo que o navegador dá a um <button>: fundo, borda e recuo.

   Nenhuma regra desta folha nem de assets/css/output.css referenciava
   `.homeVideoPlayButton` — ela sempre foi gancho de JavaScript, e por isso pôde
   acompanhar o elemento sem levar estilo junto. O desenho continua vindo dos
   atributos width, height e fill do próprio <svg>.

   `display:block` evita a faixa de descida da linha de base que um <button>
   inline deixaria abaixo do ícone dentro do flex centralizador. */
.video-play-button{display:block;padding:0;border:0;background:none;color:inherit;cursor:pointer;line-height:0}