/* ═══════════════════════════════════════════════════════════════════════════
   O que só existe no WordPress.

   POR QUE ESTE ARQUIVO É SEPARADO: o `style.css` é uma cópia literal do CSS do
   site institucional, refeita a cada `sincronizar-tema.sh`. Qualquer regra
   escrita lá seria apagada na próxima sincronização. Aqui ficam as classes que
   o WordPress gera e que o site estático nunca teve — alinhamento de imagem,
   legenda, paginação, o texto que só o leitor de tela lê.

   Herda tudo do `style.css`: as variáveis da marca já estão no `:root`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── imagem de capa do artigo ─────────────────────────────────────────────── */
.artigo__capa{ margin: var(--s-5) 0; }
.artigo__capa img{
  width: 100%; height: auto;
  border-radius: var(--raio);
}
.artigo__capa figcaption{
  margin-top: var(--s-2);
  font-size: var(--t-sm); color: var(--grafite);
}

/* ── o que o editor do WordPress produz dentro do texto ───────────────────── */
.artigo img,
.artigo .wp-block-image img{ max-width: 100%; height: auto; border-radius: var(--raio-p); }

.artigo figure{ margin: var(--s-5) 0; }
.artigo figcaption,
.artigo .wp-caption-text{
  margin-top: var(--s-2);
  font-size: var(--t-sm); color: var(--grafite);
}

.alignleft{ float: left; margin: .3em var(--s-4) var(--s-3) 0; }
.alignright{ float: right; margin: .3em 0 var(--s-3) var(--s-4); }
.aligncenter{ display: block; margin-inline: auto; }
.alignwide, .alignfull{ margin-inline: 0; }

/* No celular nada flutua: texto espremido em coluna estreita ao lado de uma
   imagem não se lê. */
@media (max-width: 620px){
  .alignleft, .alignright{ float: none; margin: var(--s-4) 0; display: block; }
}

.artigo blockquote,
.artigo .wp-block-quote{
  margin: var(--s-5) 0; padding-left: var(--s-4);
  border-left: 3px solid var(--dourado);
  font-family: var(--serif); font-size: var(--t-lg);
  color: var(--marinho-escuro);
}
.artigo blockquote cite{
  display: block; margin-top: var(--s-2);
  font-family: var(--sans); font-size: var(--t-sm); font-style: normal;
  color: var(--grafite);
}

.artigo .wp-block-table table{ width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.artigo .wp-block-table th,
.artigo .wp-block-table td{ padding: var(--s-2); border-bottom: 1px solid var(--linha); text-align: left; }
.artigo .wp-block-table th{ color: var(--marinho-escuro); }

.artigo .wp-block-separator{
  margin: var(--s-6) 0; border: 0; border-top: 1px solid var(--linha);
}

/* As cores da marca que o editor oferece (ver `functions.php`). */
.has-marinho-color{ color: var(--marinho); }
.has-marinho-escuro-color{ color: var(--marinho-escuro); }
.has-dourado-color{ color: var(--dourado-escuro); }
.has-grafite-color{ color: var(--grafite); }
.has-marinho-background-color{ background-color: var(--marinho); color: #fff; }
.has-branco-background-color{ background-color: #fff; }

/* ── paginação ────────────────────────────────────────────────────────────── */
.navigation.pagination{ margin-top: var(--s-6); }
.navigation.pagination .nav-links{
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
}
.navigation.pagination a,
.navigation.pagination .current{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  font-size: var(--t-sm); font-weight: 700; text-decoration: none;
  color: var(--marinho);
  transition: border-color var(--transicao), background var(--transicao);
}
.navigation.pagination a:hover{ background: var(--cinza-claro); }
.navigation.pagination .current{
  background: var(--marinho); border-color: var(--marinho); color: #fff;
}

/* ── acessibilidade ───────────────────────────────────────────────────────── */

/* O WordPress usa esta classe para texto que só o leitor de tela lê. Sem a
   regra, ele aparece na tela como frase solta no meio da página. */
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  margin: -1px; padding: 0; border: 0;
}
.screen-reader-text:focus{
  position: static !important;
  width: auto; height: auto; clip-path: none; white-space: normal;
}

/* A barra de administração do WordPress cobre o cabeçalho fixo enquanto o
   Dr. Lucas estiver logado. Isto devolve os 32px que ela ocupa. */
body.admin-bar .topo{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .topo{ top: 46px; }
}