/*
 * componentes.css — o que a peça realmente usa.
 *
 * A lista de componentes vem de `site/profile.md` §2: índice (TOC), tabelas,
 * callout, listas, FAQ e o botão de encaminhamento. Aqui cada um ganha a
 * aparência da identidade do site.
 *
 * O componente mais importante deste arquivo é `.botao-loja`: o S8 o emite
 * desde o primeiro dia (`site/publish/afiliados.py`) e NÃO EXISTIA CSS PARA
 * ELE EM LUGAR NENHUM. O botão de compra ia ao ar sem estilo.
 */

/* ==========================================================================
   O encaminhamento: o botão de compra
   ==========================================================================
   Markup que o S8 emite (site/publish/afiliados.py):

     <p class="encaminhamento">
       <a class="botao-loja" href="..." target="_blank"
          rel="sponsored nofollow noopener">Ver na Amazon</a>
     </p>

   O desenho segue a voz (site/brain/identity/voice.md): "o encaminhamento é
   continuação, não pressão". Então:

     - sólido e claro, porque é o próximo passo natural da leitura;
     - SEM exclamação, SEM caixa alta, SEM emoji, SEM contador;
     - rótulo "Ver na <Loja>", nunca "COMPRE AGORA".

   O gate de compliance proíbe urgência e escassez (check_urgencia). Este
   arquivo não deve criar espaço visual para nenhuma das duas.
   ========================================================================== */

.encaminhamento {
  margin: var(--esp-6) 0;
  max-width: var(--medida);
}

/* O SELETOR CARREGA `.entry-content`, e isso não é preciosismo: sem ele o
   RÓTULO DO BOTÃO FICA INVISÍVEL.
 *
 * `base.css` tem `.entry-content a { color: var(--accent) }` — especificidade
 * 11. Um `.botao-loja` solto tem 10, então PERDIA, e o texto do botão saía em
 * ardósia sobre fundo ardósia: contraste 1:1, um botão de compra mudo. O
 * `.botao-loja` solto continua valendo para quando o botão aparecer fora do
 * corpo do artigo.
 *
 * Com `.entry-content a.botao-loja` (21) a regra vence por especificidade, sem
 * `!important` e sem depender da ordem das folhas — a mesma técnica do
 * `.menu-toggle` em base.css.
 *
 * Este bug só apareceu porque o CSS foi renderizado contra markup de verdade
 * num harness. Nenhuma inspeção de código o teria pegado: as duas regras
 * parecem certas, cada uma no seu arquivo. */
.entry-content a.botao-loja,
.botao-loja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);

  min-height: var(--toque);
  padding: var(--esp-3) var(--esp-5);

  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  color: #fff;
  background-color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--raio);

  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.entry-content a.botao-loja:hover,
.entry-content a.botao-loja:focus,
.botao-loja:hover,
.botao-loja:focus {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  text-decoration: none;
}

/* O botão ocupa a largura no mobile: alvo de dedo maior, e não fica um
   retângulo perdido no meio da coluna. */
@media (max-width: 639px) {
  .botao-loja {
    display: flex;
    width: 100%;
  }
}

/* ==========================================================================
   A ressalva: "Para quem não serve"
   ==========================================================================
   A seção obrigatória da peça (check_secoes_obrigatorias). É o que separa uma
   resenha de um anúncio, e o desenho tem de dizer isso.

   Âmbar, NÃO vermelho. O âmbar ocupa aqui o papel que em outros sites é
   vermelho de alarme, e isso é deliberado: o site não assusta o leitor, ele o
   informa. "Não serve para você" não é um erro, é a informação mais útil da
   página.

   Uso: o S8 pode envolver a seção, ou ela é detectada pelo heading. As duas
   formas estão cobertas.
   ========================================================================== */

/* OBSERVAÇÃO HONESTA SOBRE O MARKUP: o `site/profile.md` §2 não define wrapper
   nenhum para a ressalva. A estrutura da peça é "heading + parágrafos", e a
   ressalva é a seção sob o H2 "Para quem não serve". Não existe
   `<div class="ressalva">` no que o S8 escreve.

   Então os seletores de CLASSE aqui são uma comodidade para quando o S8 (ou o
   Eliel, editando no WordPress) quiser envolver a seção à mão. Eles não são o
   caminho principal. O caminho principal é o realce por HEADING, que casa com
   o markup que existe de fato, e é o que o núcleo exige
   (`check_secoes_obrigatorias` procura um `## ` terminando exatamente em
   "Para quem não serve").

   Isto NÃO é decoração: a seção é obrigatória e o desenho tem de dizer que ela
   é a informação mais útil da página, não uma nota de rodapé. */
.ressalva,
.para-quem-nao-serve,
.secao-ressalva {
  background-color: var(--threat-bg);
  border: 1px solid var(--threat-line);
  border-left: 4px solid var(--threat);
  border-radius: 0 var(--raio-g) var(--raio-g) 0;
  padding: var(--esp-5);
  margin: var(--esp-6) 0;
}

.ressalva h2,
.ressalva h3,
.para-quem-nao-serve h2,
.para-quem-nao-serve h3 {
  margin-top: 0;
  color: var(--threat);
}

.ressalva p:last-child,
.para-quem-nao-serve p:last-child {
  margin-bottom: 0;
}

.ressalva ul li::marker,
.para-quem-nao-serve ul li::marker {
  color: var(--threat);
}

/* ==========================================================================
   O desfecho bom: "Para quem serve"
   ==========================================================================
   O par da ressalva. Verde, e o mesmo desenho espelhado, para que os dois se
   leiam como um par: serve / não serve.
   ========================================================================== */

.para-quem-serve,
.destaque-bom {
  background-color: var(--good-bg);
  border: 1px solid var(--good-line);
  border-left: 4px solid var(--good);
  border-radius: 0 var(--raio-g) var(--raio-g) 0;
  padding: var(--esp-5);
  margin: var(--esp-6) 0;
}

.para-quem-serve h2,
.para-quem-serve h3 {
  margin-top: 0;
  color: var(--good);
}

.para-quem-serve p:last-child {
  margin-bottom: 0;
}

.para-quem-serve ul li::marker {
  color: var(--good);
}

/* ==========================================================================
   A divulgação de afiliado
   ==========================================================================
   A regra central do site: visível, em linguagem clara, e ANTES do primeiro
   link (check_divulgacao). Não é letra miúda, não é rodapé.

   O desenho diz "isto é uma nota honesta", não "isto é uma advertência": sem
   vermelho, sem ícone de alerta, sem caixa alta.
   ========================================================================== */

.divulgacao-afiliado,
.aviso-afiliado {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: var(--esp-4);
  margin: var(--esp-5) 0;
}

.divulgacao-afiliado strong,
.aviso-afiliado strong {
  color: var(--ink);
}

/* ==========================================================================
   Tabelas: o formato natural para comparar traduções
   ==========================================================================
   A regra que importa aqui é o MOBILE: uma tabela de comparação de traduções
   tem 3 ou 4 colunas e estoura a tela de 390px. Ela precisa rolar SOZINHA,
   sem arrastar a página inteira junto (o bug clássico de overflow horizontal).

   `display: block` + `overflow-x: auto` no wrapper resolve. O `-webkit-overflow-scrolling`
   dá inércia no iOS.
   ========================================================================== */

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--esp-5) 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  background-color: var(--card);
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--line);
  padding: var(--esp-3);
  text-align: left;
  vertical-align: top;
}

.entry-content thead th {
  background-color: var(--accent-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  border-color: var(--accent-line);
}

.entry-content tbody tr:nth-child(even) {
  background-color: var(--surface);
}

/* O wrapper de rolagem. O S8 deve envolver tabelas largas nele; enquanto
   isso, o seletor abaixo cobre a tabela direta no mobile. */
.tabela-rolavel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--esp-5) 0;
}

.tabela-rolavel table {
  margin: 0;
  min-width: 480px;
}

@media (max-width: 639px) {
  /* Sem wrapper, a tabela ainda rola sozinha em vez de estourar a página. */
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .entry-content table th,
  .entry-content table td {
    white-space: normal;
    min-width: 8rem;
  }
}

/* ==========================================================================
   FAQ (Rank Math)
   ==========================================================================
   Vira `rank-math/faq-block` no WordPress, e emite o schema `FAQPage`. Aqui é
   só a aparência: pergunta em serif, resposta em sans, e uma separação que não
   compete com os H2 da resenha.

   ATENÇÃO AOS NOMES DAS CLASSES, e isto é uma armadilha que já custou uma
   versão inteira deste bloco. O Rank Math usa DOIS conjuntos de nomes:

     - `rank-math-faq-question` / `rank-math-faq-answer` vivem no editor JS
       (`assets/src/components/Question.js`). NUNCA aparecem no HTML servido.
     - `rank-math-question` / `rank-math-answer` são o que o render de servidor
       emite (`includes/modules/schema/blocks/faq/class-block-faq.php`).

   A primeira versão deste arquivo estilizou os nomes do EDITOR. O resultado
   seria um FAQ sem estilo nenhum na página publicada, e nenhum aviso: a classe
   simplesmente não casa. A estrutura real é:

     <div id="rank-math-faq" class="rank-math-block">
       <div class="rank-math-list">            (ou <ul>, se listStyle)
         <div class="rank-math-list-item">
           <h3 class="rank-math-question">…
           <div class="rank-math-answer">…
   ========================================================================== */

.rank-math-block,
.rank-math-list {
  margin: var(--esp-6) 0;
}

/* O `listStyle` do bloco pode ser `numbered`/`unordered`, e aí o container é
   uma `<ul>` de verdade. O `list-style: none` evita que os dois marcadores
   apareçam juntos (o do plugin e o meu). */
.rank-math-list {
  list-style: none;
  padding-left: 0;
}

.rank-math-list-item {
  border-top: 1px solid var(--line);
  padding: var(--esp-4) 0;
}

.rank-math-list-item:last-child {
  border-bottom: 1px solid var(--line);
}

.rank-math-question {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 var(--esp-2);
}

.rank-math-answer {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.rank-math-answer p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Índice "Neste artigo" (LuckyWP Table of Contents)
   ==========================================================================
   Auto-inserido pelo plugin antes do primeiro heading. O rascunho NÃO o
   escreve (ver site/profile.md §2).

   Um índice é navegação: sans, compacto, e o link na cor do mecanismo. Ele não
   pode competir visualmente com o H1.
   ========================================================================== */

/* A caixa é `.lwptoc_i` (o container INTERNO), e não `.lwptoc`. O plugin
   aplica `background` e `color` no `_i`, pelo esquema de cor escolhido:
   com `colorScheme: light` (a config atual, conferida em `lwptoc_appearance`)
   ele emite `.lwptoc-light .lwptoc_i { color:#333; background:#fafafa }`, que
   tem especificidade 20 e vence um `.lwptoc` solto (10). Pintar só o `.lwptoc`
   deixaria um retângulo cinza-azulado do plugin dentro da minha moldura.
 *
   O `#fafafa` do plugin é quase o meu `--surface` (#faf8f4), mas não é o
   mesmo, e num site cuja identidade inteira é "papel", um branco frio no meio
   do papel quente aparece. Por isso o override é explícito. */
.lwptoc .lwptoc_i {
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--raio-g);
  padding: var(--esp-4) var(--esp-5);
  text-align: left;
}

.lwptoc {
  margin: var(--esp-5) 0 var(--esp-6);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.lwptoc_header,
.lwptoc_title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--esp-3);
}

/* O plugin põe `margin: 32px 0` no `.lwptoc` e `margin-top: 16px` no primeiro
   filho. Como o índice é auto-inserido antes do primeiro heading, o `margin-top`
   grande empurra o título da peça para longe. */
.lwptoc:first-child {
  margin-top: var(--esp-4);
}

/* O índice ocupa a coluna inteira, e não a largura do próprio texto.
 *
 * A config do site é `width: auto` (conferida em `lwptoc_appearance`), e nesse
 * modo o plugin adiciona `.lwptoc-autoWidth`, que faz o container interno ser
 * `display: inline-block`. O resultado era uma caixa de 241px encolhida à
 * esquerda, enquanto todo o resto da página ocupa a coluna: numa página cuja
 * única estrutura é uma coluna de texto, um bloco que não acompanha a margem
 * lê como desalinhamento, não como escolha.
 *
 * As duas regras do plugin que precisam cair: `.lwptoc-autoWidth .lwptoc_i`
 * (display: inline-block) e a largura herdada. Ambas com especificidade maior
 * que a minha `.lwptoc .lwptoc_i`, por isso os seletores aqui carregam a
 * classe do plugin. */
.lwptoc-autoWidth .lwptoc_i,
.lwptoc .lwptoc_i {
  display: block;
  width: auto;
}

.lwptoc_items,
.lwptoc_itemWrap {
  line-height: 1.6;
}

.lwptoc a,
.lwptoc_item a {
  color: var(--accent);
  text-decoration: none;
}

.lwptoc a:hover,
.lwptoc_item a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* O LuckyWP numera os itens (configurado: decimalnested). O número é do
   plugin, e o corpo da peça não leva prefixo numérico nos headings. */
.lwptoc_item_number {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Gráficos SVG inline
   ==========================================================================
   Os gráficos vêm do gerador do núcleo (lab/charts/), com viewBox fixo e
   width="100%". O wrapper de rolagem é do núcleo, para gráfico denso no
   mobile.

   O texto do SVG carrega `fill` e `font-family` INLINE de propósito: o CSS do
   tema vence a herança do SVG e deixaria o texto invisível. Não "conserte"
   isso removendo o inline de lá.
   ========================================================================== */

/* O seletor é `svg[role="img"]`, e NÃO `svg` solto. A diferença custou um bug
   real: com `svg` solto, esta regra alcançava o ícone da lupa do formulário de
   busca, que na home vive DENTRO de `.entry-content` (o estado vazio). O ícone
   herdava `margin: 1.5rem auto` — 24px acima e abaixo — e o `.gp-icon` de 17px
   passava a ter 65px, esticando o botão de busca para 67px. O sintoma parecia
   um problema de baseline; a causa era esta margem.
 *
 * `[role="img"]` é exatamente o conjunto certo: o `check_svg.py` do núcleo
 * EXIGE `role="img"` em todo gráfico gerado, e os ícones do tema carregam
 * `aria-hidden="true"`. Um seletor que acerta o alvo por construção, em vez de
 * por sorte de markup. */
.entry-content svg[role="img"] {
  display: block;
  margin: var(--esp-5) auto;
}

/* ==========================================================================
   O card do livro (a capa + a ficha da edição)
   ==========================================================================
   Markup que o S5/S8 emitem (scripts/card_livro.py → bloco core/html):

     <svg class="card-livro" role="img" viewBox="0 0 592 372" width="100%">
       ... <image href="data:image/jpeg;base64,..."> ... <text> ...

   O card é um SVG GERADO, e não um bloco de imagem do WordPress, para o post
   ficar autocontido: a capa entra em base64 e não há arquivo de mídia para o
   Simply Static resolver no congelamento. A classe `card-livro` no próprio
   `<svg>` é o único alvo de que o CSS dispõe — os SVGs inline de uma página não
   têm nada que os distinga (o `id_prefix` do núcleo só nomeia ids de `<defs>`).

   ⚠️ A SANGRIA DE MOBILE, e por que ela não é enfeite. O `viewBox` é 592 fixo
   com `width="100%"`, então o card escala junto com a coluna: num aparelho de
   390px o artigo tem 324px de coluna, escala 0,547, e o título de 32 unidades
   sairia a 17,5px e a ficha de 20 a 10,9px — abaixo do piso de 11px que o
   `check_svg.py` do núcleo usa para gráfico. Deixar o card ocupar também o
   padding do artigo (24px de cada lado) sobe a escala para 0,603 e devolve
   ~19px ao título e ~12px à ficha.

   ⚠️ `max-width: none` NÃO É REDUNDANTE, e o defeito que ele conserta é mudo:
   `base.css` tem `.entry-content svg { max-width: 100% }`, e "100%" ali é o
   containing block — a coluna de 324px. O `width` maior é calculado e depois
   CORTADO por essa regra, então a sangria não acontece e nada avisa: o card
   simplesmente fica do tamanho de antes. Medido no harness em 2026-10-15, com e
   sem a linha.

   Só em `max-width: 639px`, que é o mesmo ponto de quebra do `base.css` (lá o
   padding do artigo sobe para `--esp-6`). A partir de 640px a coluna já passa
   de 540px e a escala fica acima de 0,9: sangria ali só desalinharia o card dos
   gráficos A1/A2 logo abaixo.

   ⚠️ CONSEQUÊNCIA MEDIDA, para quem for mexer aqui e achar que é bug: por isso
   o card ENCOLHE ao passar de 639px para 640px. Em 639px ele sangra e fica com
   606px (título a 32,8px); em 640px a sangria desliga, o padding do artigo
   cresce, e ele cai para 543px (título a 29,4px). São ~11% de degrau em 1px de
   viewport. É o preço de a faixa estreita ter prioridade, e as duas pontas são
   confortáveis — mas o degrau existe, e não é o layout quebrando. */
@media (max-width: 639px) {
  .entry-content svg[role="img"].card-livro {
    max-width: none;
    width: calc(100% + 2 * var(--esp-5));
    margin-left: calc(-1 * var(--esp-5));
    margin-right: calc(-1 * var(--esp-5));
  }
}

/* ==========================================================================
   Busca (a da navegação, a única que fica)
   ========================================================================== */

/* O markup real do GeneratePress (inc/structure/search-modal.php e
   searchform.php) é:

     <form class="search-form">
       <label>
         <span class="screen-reader-text">Pesquisar por:</span>
         <input type="search" class="search-field">
       </label>
       <button class="search-submit">...</button>
     </form>

   O input está DENTRO de um <label>, então `flex` no form não basta: o label
   é que precisa esticar, e o input ocupar 100% dele. */

.search-form {
  display: flex;
  align-items: stretch;
  gap: var(--esp-2);
  width: 100%;
}

.search-form label {
  flex: 1;
  min-width: 0; /* sem isto, o input não encolhe abaixo do tamanho intrínseco */
  display: block;
}

.search-form .search-field,
.search-form input[type="search"] {
  /* `display: block` NÃO é cosmético. Um input inline-block senta na baseline
     do label, e o espaço do descender abaixo da baseline soma à altura da
     linha: o campo ficava com 44px mas o form inteiro com 67px, e o botão,
     que estica, ia junto. Foi o que fazia o botão de busca parecer alto e
     desalinhado. */
  display: block;
  width: 100%;
  min-height: var(--toque);
  padding: 0 var(--esp-3);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background-color: var(--card);
  color: var(--ink);
  font-size: 1rem;
}

.search-form .search-field:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-line);
  outline-offset: 0;
}

.search-form .search-submit,
.search-form input[type="submit"],
.search-form button[type="submit"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque);
  min-height: var(--toque);
  padding: 0 var(--esp-4);
  background-color: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--raio);
  font-weight: 600;
  cursor: pointer;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus,
.search-form input[type="submit"]:hover,
.search-form button[type="submit"]:hover {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* ==========================================================================
   Estados vazios
   ==========================================================================
   O que o site mostrava na home antes de ter conteúdo: "Nada encontrado" e
   widgets de exemplo. Um estado vazio deve orientar, não constranger.
   ========================================================================== */

.no-results,
.error-404 {
  text-align: left;
}

.no-results .entry-title,
.error-404 .entry-title {
  color: var(--ink);
}

/* ==========================================================================
   Impressão
   ==========================================================================
   Quem imprime uma resenha quer o texto. O botão de compra e a navegação não
   servem no papel, mas a URL da fonte, sim.
   ========================================================================== */

@media print {
  .site-header,
  .main-navigation,
  .site-footer,
  .site-info,
  .botao-loja,
  .lwptoc,
  .paging-navigation {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .entry-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}