/* ============================================================
   CONTEÚDO DO CMS
   Padrões de elemento para o texto que vem do editor do
   WordPress: post, case, qualquer coisa que o cliente escreve.

   POR QUE ISSO É UM ARQUIVO SEPARADO
   As dobras construídas à mão têm classe em tudo, e componente
   manda no próprio estilo. O conteúdo do editor chega pelado:
   <h2> e <p> sem classe nenhuma. Se as regras de elemento
   morassem junto com os componentes, elas atropelariam as dobras
   (um seletor `.m2 h2` tem specificity maior que `.cs-titulo`) e
   o site desmontaria. Por isso o escopo é `.m2-conteudo`, que
   só envolve texto de editor, e nunca envolve dobra.

   O escopo é classe de propósito e não :where(): aqui a gente
   PRECISA ganhar do tema navas, que traz os próprios h1 e p.
   ============================================================ */

.m2-conteudo{
  font-family:var(--texto);
  font-size:var(--fs-corpo);
  line-height:var(--lh-solto);
  color:var(--corpo);
}

/* ---------- HIERARQUIA ----------
   Nível semântico e corpo visual andam juntos aqui de propósito.
   Numa dobra desenhada eles podem divergir, e divergem: o chapéu
   tem 12px e é <p>, não <h6>. Mas em texto de editor, quem
   escreve não deve precisar pensar nisso: escolher "Título 2" no
   editor tem que dar o H2 certo, com o corpo certo. É isso que
   mantém o documento legível para leitor de tela e para o Google
   ao mesmo tempo. */
.m2-conteudo h1,
.m2-conteudo h2,
.m2-conteudo h3,
.m2-conteudo h4{
  font-family:var(--display);
  color:var(--ink);
  text-wrap:balance;          /* evita a última linha órfã no título */
}
.m2-conteudo h1{ font-size:var(--fs-t1); font-weight:var(--peso-semi);  line-height:var(--lh-solido); }
.m2-conteudo h2{ font-size:var(--fs-t2); font-weight:var(--peso-medio); line-height:var(--lh-justo); }
.m2-conteudo h3{ font-size:var(--fs-t3); font-weight:var(--peso-medio); line-height:var(--lh-medio); }
.m2-conteudo h4{ font-size:var(--fs-t4); font-weight:var(--peso-medio); line-height:var(--lh-medio); }
.m2-conteudo h5{ font-family:var(--texto); font-size:var(--fs-lead);  font-weight:var(--peso-semi); line-height:var(--lh-medio); color:var(--ink); }
.m2-conteudo h6{ font-family:var(--texto); font-size:var(--fs-corpo); font-weight:var(--peso-semi); line-height:var(--lh-medio); color:var(--apoio); }

/* ---------- RITMO ----------
   Margem só no topo, nunca embaixo: assim dois blocos vizinhos
   nunca somam margem e o primeiro elemento não empurra o bloco
   inteiro para baixo. */
.m2-conteudo > * + *{ margin-top:var(--e-4); }
.m2-conteudo > * + :is(h2,h3,h4){ margin-top:var(--e-8); }
.m2-conteudo > * + h1{ margin-top:var(--e-10); }
.m2-conteudo > :first-child{ margin-top:0; }

/* ---------- TEXTO ---------- */
.m2-conteudo p{ max-width:68ch; }   /* medida de leitura, não largura de caixa */
.m2-conteudo strong,
.m2-conteudo b{ font-weight:var(--peso-semi); }
.m2-conteudo small{ font-size:var(--fs-corpo-s); color:var(--apoio); }

.m2-conteudo a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color var(--dur) var(--ease);
}
.m2-conteudo a:hover{ color:var(--apoio); }

/* ---------- LISTA ---------- */
.m2-conteudo :is(ul,ol){ padding-left:var(--e-5); max-width:68ch; }
.m2-conteudo li + li{ margin-top:var(--e-2); }
.m2-conteudo ul{ list-style:disc; }
.m2-conteudo ol{ list-style:decimal; }
.m2-conteudo li::marker{ color:var(--muted); }

/* ---------- CITAÇÃO ---------- */
.m2-conteudo blockquote{
  margin-left:0; padding-left:var(--e-6);
  border-left:2px solid var(--amarelo);
  font-family:var(--display); font-weight:var(--peso-medio);
  font-size:var(--fs-quote); line-height:var(--lh-justo);
  color:var(--ink);
}
.m2-conteudo blockquote cite{
  display:block; margin-top:var(--e-3);
  font-family:var(--texto); font-size:var(--fs-corpo-s);
  font-style:normal; font-weight:var(--peso-regular); color:var(--muted);
}

/* ---------- MÍDIA ----------
   width e height no HTML mais aspect-ratio aqui: a caixa da
   imagem já nasce reservada e a página não pula quando ela
   carrega. É CLS, e conta para o ranqueamento. */
.m2-conteudo :is(img,video,iframe){
  max-width:100%; height:auto; display:block;
  border-radius:var(--r-medio);
}
.m2-conteudo figure{ margin:0; }
.m2-conteudo figcaption{
  margin-top:var(--e-2);
  font-size:var(--fs-corpo-s); line-height:var(--lh-texto); color:var(--muted);
}

/* ---------- TABELA ---------- */
.m2-conteudo .tabela-rolante{ overflow-x:auto; }
.m2-conteudo table{ width:100%; border-collapse:collapse; font-size:var(--fs-corpo-s); }
.m2-conteudo :is(th,td){ padding:var(--e-3) var(--e-4); text-align:left; border-bottom:1px solid var(--divisor); }
.m2-conteudo th{ font-weight:var(--peso-semi); color:var(--ink); }

/* ---------- RÉGUA ---------- */
.m2-conteudo hr{
  border:0; border-top:1px solid var(--divisor);
  margin-top:var(--e-9); margin-bottom:var(--e-9);
}

/* ---------- CELULAR ----------
   O display cai; o corpo não. Texto de leitura abaixo de 16px no
   celular é o que faz o iOS dar zoom sozinho em campo de
   formulário e o que cansa a vista. */
@media (max-width:767px){
  .m2-conteudo h1{ font-size:var(--fs-t2); }
  .m2-conteudo h2{ font-size:var(--fs-t3-g); }
  .m2-conteudo h3{ font-size:var(--fs-t4); }
  .m2-conteudo blockquote{ font-size:var(--fs-t3); padding-left:var(--e-4); }
}