/* ===== Tipografia do conteúdo vindo do CMS =====
 *
 * Alvo de fidelidade do editor: o que o servidor municipal vê ao escrever tem
 * de ser o que o cidadão vê aqui. Por isso um contrato só, `.prose`, aplicado
 * a TODOS os pontos de injeção — antes eram 11 pontos com 4 convenções de
 * wrapper (sem classe, `mt-2`, `body`, `article-body`), e só 2 deles tinham
 * estilo: `.news-detail .body` com line-height 1.7 e `.entity-body .body` com
 * 1.65. O mesmo HTML renderizava diferente conforme a página em que caísse.
 *
 * O corpo chega SEM `class` e SEM `style`: o bluemonday.UGCPolicy() os remove
 * na gravação. Então tudo aqui é seletor de elemento — é a única alavanca que
 * existe, e é também o motivo de o contrato conseguir ser único.
 *
 * O que já vinha pronto e NÃO se repete aqui: `body{line-height:1.6}`,
 * `a{text-decoration:underline}` e `h1..h4` (site.css), e
 * `img{max-width:100%}` (critical.css, do gov.br DS).
 */

.prose {
  /* Tabela larga rola DENTRO do bloco, sem empurrar a página (WCAG 1.4.10;
   * tabela de dados é exceção explícita ao refluxo em uma dimensão).
   * Não se usa `display:block` na tabela para conseguir isso: no Chrome e no
   * Safari isso apaga a semântica de tabela na árvore de acessibilidade, e o
   * sanitizador não permite `role` para restaurá-la. */
  overflow-x: auto;
}

/* Medida de linha entre 45 e 75 caracteres. Só nos blocos de texto: tabela e
 * imagem seguem podendo ocupar a coluna inteira.
 *
 * O valor NÃO é o número de caracteres desejado: `ch` mede o avanço do glifo
 * "0", que na Rawline tem 11,48px, enquanto o caractere médio de texto em
 * português mede 7,88px — razão de 1,46. Medido no navegador, `68ch` rendia
 * 99 caracteres por linha. `50ch` = 574px = ~73 caracteres, dentro da faixa.
 * Mantido em `ch` (e não em px) para a medida acompanhar o zoom de fonte do
 * usuário — WCAG 1.4.4. */
.prose :is(p, ul, ol, blockquote) {
  max-width: 50ch;
}

.prose p {
  margin: 0 0 16px;
  line-height: 1.7;
}

/* O primeiro elemento não empurra o topo (h2..h4 trazem margin-top 1.4em). */
.prose > :first-child {
  margin-top: 0;
}

.prose :is(h2, h3, h4) {
  margin-bottom: 8px;
}

.prose :is(ul, ol) {
  margin: 0 0 16px;
  padding-inline-start: 24px;
}

.prose li {
  margin-bottom: 4px;
  line-height: 1.7;
}

.prose blockquote {
  margin: 24px 0;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--c-primary, #1351b4);
  color: var(--c-text-muted, #555); /* 7.5:1 sobre branco */
}

/* Tabelas não tinham NENHUMA regra — nem aqui nem no core do gov.br. Vinham
 * com o padrão do navegador: sem borda, sem respiro, cabeçalho indistinto. */
.prose table {
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95rem;
}

.prose :is(th, td) {
  /* #8c8c8c mede 3.4:1 sobre branco — o mínimo do WCAG 1.4.11 para contorno
   * de componente é 3:1. O token --c-border (#EDEDED) mede 1.2:1 e não serve
   * para transmitir a estrutura da tabela. */
  border: 1px solid #8c8c8c;
  padding: 8px 12px;
  text-align: start;
  vertical-align: top;
}

.prose th {
  background: var(--c-bg, #f8f8f8);
  font-weight: 600;
}

.prose caption {
  caption-side: top;
  text-align: start;
  padding-bottom: 8px;
  color: var(--c-text-muted, #555);
}

.prose img {
  display: block;
  height: auto;
  margin: 24px 0;
}

.prose figure {
  margin: 24px 0;
}

.prose figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--c-text-muted, #555);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--c-border, #ededed);
  margin: 32px 0;
}