/**
 * Tipografia do corpo do artigo (`.artigo-corpo`), aplicada ao HTML que sai
 * do Markdown sanitizado (`cms_markdown_para_html()`).
 *
 * Reproduz as mesmas regras que `corpo-artigo.tsx` aplicava via classes
 * Tailwind no site em Next — mas ali cada elemento ganhava a classe de um
 * componente React (`<PortableText>` chamando um componente por tipo de
 * bloco); aqui a árvore de elementos vem pronta do Parsedown, então as
 * mesmas regras viram seletores CSS comuns, com os mesmos tokens de design
 * (as variáveis abaixo já existem em `:root`, definidas por `site.css`).
 */

.artigo-corpo p {
  margin-top: 1.25rem;
  font-size: var(--text-lg);
  color: var(--color-texto-suave);
  line-height: 1.7;
}

.artigo-corpo h2 {
  margin-top: 3.5rem;
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-texto-forte);
}

.artigo-corpo h3 {
  margin-top: 2.5rem;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-texto-forte);
}

.artigo-corpo blockquote {
  margin-top: 2rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--color-acao-sutil);
  font-size: var(--text-lg);
  color: var(--color-texto-forte);
}

.artigo-corpo ul,
.artigo-corpo ol {
  margin-top: 1.25rem;
  padding-left: 1.5rem;
  font-size: var(--text-lg);
  color: var(--color-texto-suave);
}

.artigo-corpo ul {
  list-style: disc;
}
.artigo-corpo ol {
  list-style: decimal;
}
.artigo-corpo li {
  margin-top: 0.5rem;
}
.artigo-corpo li::marker {
  color: var(--color-acao);
}

.artigo-corpo strong {
  font-weight: 600;
  color: var(--color-texto-forte);
}

.artigo-corpo a {
  color: var(--color-acao-texto);
  text-underline-offset: 4px;
  text-decoration: underline;
}
.artigo-corpo a:hover {
  color: var(--color-jade-800);
}

.artigo-corpo img {
  margin-top: 2.5rem;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.artigo-corpo hr {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid var(--color-borda);
}