/*
Theme Name: Resolva Blog
Theme URI: https://blog.resolva.com.br
Author: Resolva Marcas e Patentes
Description: Tema de blocos autoral para o blog da Resolva Marcas e Patentes. Leve, sem
  page builder e sem framework CSS — construído sobre os recursos nativos do WordPress.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: resolva-blog
Tags: blog, block-theme, full-site-editing, one-column, right-sidebar, translation-ready
*/

/* Os tokens vivem no theme.json. Aqui ficam só os componentes que ele não expressa. */

/* ---------------------------------------------------------------- base */

/* O WordPress aplica `box-sizing: border-box` só nos BLOCOS. Componentes próprios
   feitos com <a> ou <p> ficam em `content-box`, e aí padding e borda somam POR
   FORA da largura declarada. Foi assim que o botão do rodapé com `inline-size:
   100%` virou 366px dentro de um contêiner de 310px: 310 + 2×26 de padding + 2×2
   de borda. Vale para .rb-cta e .rb-mega__card também. */
*, *::before, *::after { box-sizing: border-box; }


html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* foco visível — o tema do Typiq não expõe este estado, então é reconstrução nossa */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; inset-inline-start: 16px; inset-block-start: 16px;
  z-index: 999; width: auto; height: auto;
  clip-path: none; padding: 12px 20px;
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--card);
  box-shadow: 0 4px 20px rgb(25 25 25 / 15%);
}

/* ---------------------------------------------------------------- chip de categoria */

.rb-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7.5px 8px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--chip);
  background: var(--wp--preset--color--surface);
  color: var(--cat-color, var(--wp--preset--color--primary));
  font-size: var(--wp--preset--font-size--chip);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color .22s, border-color .22s, background-color .22s, box-shadow .22s;
}
/* O hover preenche com --cat-ink, NÃO com a cor crua do assunto.
   A cor crua é escolhida pelo owner no seletor do painel e não tem compromisso
   com contraste: o verde do tema dá 3,30 contra branco, o ciano da marca 1,52.
   O --cat-ink é a mesma cor escurecida até passar 4,5 sobre BRANCO — e, pela
   simetria da fórmula da WCAG, branco sobre ele passa pelos mesmos 4,5.
   Assim o hover fica legível com qualquer cor que venha a ser cadastrada. */
.rb-cat:hover,
.rb-cat:focus-visible {
  background: var(--cat-ink, var(--wp--preset--color--primary));
  border-color: var(--cat-ink, var(--wp--preset--color--primary));
  color: #fff;
  /* a cor crua sobrevive aqui, onde contraste de texto não se aplica */
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 32%, transparent);
}
.rb-cat::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.rb-cat:hover::before,
.rb-cat:focus-visible::before { background: #fff; }

/* cor por categoria — definida em functions.php a partir do term meta */
.rb-cat-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 14px; }

/* ---------------------------------------------------------------- card de post */

.rb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--card);
  overflow: hidden;
  transition: transform .3s var(--rb-ease), box-shadow .3s var(--rb-ease);
}
:root { --rb-ease: cubic-bezier(.32, .74, .57, 1); }

.rb-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgb(25 25 25 / 10%); }

.rb-card__thumb { position: relative; overflow: hidden; aspect-ratio: 700 / 470; }
.rb-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .52s var(--rb-ease);
}
.rb-card:hover .rb-card__thumb img { transform: scale(1.06); }

/* post sem imagem destacada — estado que a referência não mostra (reconstrução) */
.rb-card__thumb--empty {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--base)),
    var(--wp--preset--color--base));
  display: grid; place-items: center;
}
.rb-card__thumb--empty::after {
  content: attr(data-initial);
  font-size: 44px; font-weight: 700;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}

.rb-card__body { display: flex; flex-direction: column; padding: 20px; gap: 0; }

.rb-card__title {
  margin: 0 0 6px;
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  line-height: 1.3;
  /* título de 3 linhas não pode quebrar o grid — a referência só mostra 2 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rb-card__title a { color: inherit; text-decoration: none; }
.rb-card__title a:hover { color: var(--wp--preset--color--primary); }

.rb-card__excerpt {
  margin: 0 0 14px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.75;
  color: var(--wp--preset--color--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: auto;
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 500;
  color: var(--wp--preset--color--muted);
}
.rb-card__meta > * { display: inline-flex; align-items: center; gap: 6px; }
.rb-card__meta > * + *::before {
  content: ""; width: 4px; height: 4px; border-radius: 1px;
  background: currentColor; margin-inline-end: 10px; opacity: .6;
}

/* variante sobreposta — o card grande da home */
.rb-card--overlay { aspect-ratio: 1400 / 520; justify-content: flex-end; }
.rb-card--overlay .rb-card__thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.rb-card--overlay .rb-card__body {
  position: relative;
  padding: 40px;
  background: linear-gradient(to top, rgb(25 25 25 / 85%) 0%, rgb(25 25 25 / 55%) 45%, transparent 100%);
}
.rb-card--overlay .rb-card__title,
.rb-card--overlay .rb-card__excerpt,
.rb-card--overlay .rb-card__meta { color: #fff; }
.rb-card--overlay .rb-card__title a { color: #fff; }

/* ---------------------------------------------------------------- grid */

.rb-grid { display: grid; gap: var(--wp--custom--gutter); }
.rb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .rb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .rb-grid--2, .rb-grid--3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- layout com sidebar */

.rb-layout {
  display: grid;
  grid-template-columns: minmax(0, 814fr) minmax(0, 443fr);
  gap: 0 var(--rb-layout-gap, 48px);
  align-items: start;
}
@media (max-width: 1024px) { .rb-layout { grid-template-columns: 1fr; gap: 50px; } }

.rb-sidebar { position: sticky; top: 100px; display: grid; gap: 30px; }
@media (max-width: 1024px) { .rb-sidebar { position: static; } }

.rb-widget {
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--card);
  padding: 30px;
}
.rb-widget__title {
  margin: 0 0 20px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

/* ---------------------------------------------------------------- progresso de leitura */

.rb-progress {
  position: fixed;
  inset-block-end: 40px;
  inset-inline-end: 40px;
  z-index: 50;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--wp--preset--color--border-soft);
  border-radius: 50%;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.rb-progress[data-visible="true"] { opacity: 1; transform: none; }
.rb-progress svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rb-progress circle { fill: none; stroke-width: 2; }
.rb-progress .rb-progress__track { stroke: transparent; }
.rb-progress .rb-progress__value {
  stroke: var(--wp--preset--color--primary);
  stroke-linecap: round;
  stroke-dasharray: var(--rb-circumference);
  stroke-dashoffset: var(--rb-offset, var(--rb-circumference));
  transition: stroke-dashoffset .1s linear;
}
.rb-progress__label { font-size: 11px; font-weight: 600; line-height: 1; }
@media (max-width: 680px) { .rb-progress { inset-block-end: 20px; inset-inline-end: 20px; } }

/* ---------------------------------------------------------------- conteúdo do post */

.wp-block-post-content > * + * { margin-block-start: 20px; }
.wp-block-post-content h2 { margin-block-start: 40px; }
.wp-block-post-content h3 { margin-block-start: 30px; }

blockquote.wp-block-quote { position: relative; }
blockquote.wp-block-quote::before {
  content: "”";
  position: absolute; inset-block-start: 10px; inset-inline-start: 40px;
  font-size: 80px; line-height: 1;
  color: var(--wp--preset--color--primary);
  opacity: .25;
}
blockquote.wp-block-quote cite {
  display: block; margin-block-start: 20px;
  font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 600;
  color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- comentários */

.wp-block-comments {
  margin-block-start: 50px;
  padding: 60px;
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--card);
}
@media (max-width: 680px) { .wp-block-comments { padding: 30px 20px; } }

/* aninhamento — a referência não expõe 3º nível, então definimos o limite aqui */
.wp-block-comment-template ol { list-style: none; margin: 0; padding-inline-start: 40px; }
.wp-block-comment-template > li + li { margin-block-start: 30px; }
.wp-block-comment-template li > ol > li {
  margin-block-start: 30px;
  padding-inline-start: 20px;
  border-inline-start: 2px solid var(--wp--preset--color--border);
}
@media (max-width: 680px) {
  .wp-block-comment-template ol { padding-inline-start: 16px; }
}

:where(.wp-block-post-comments-form, .comment-form) :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 14px 15px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--card);
  font: inherit;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text);
}
:where(.wp-block-post-comments-form, .comment-form) :is(input, textarea)::placeholder { color: var(--wp--preset--color--muted); }

/* ---------------------------------------------------------------- estados vazios */

.rb-empty {
  padding: 80px 30px;
  text-align: center;
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--card);
}
.rb-empty__title { margin: 0 0 10px; font-size: var(--wp--preset--font-size--xx-large); }
.rb-empty__text { margin: 0 auto 30px; max-width: 46ch; color: var(--wp--preset--color--muted); }

/* ---------------------------------------------------------------- paginação */

.wp-block-query-pagination { margin-block-start: 50px; gap: 8px; }
.wp-block-query-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--wp--preset--color--border-soft);
  border-radius: var(--wp--custom--radius--button);
  background: var(--wp--preset--color--surface);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
}
/* Só a seta aparece (o rótulo virou texto de leitor de tela, ver functions.php).
   Sem isto o botão continuaria com a largura de quando tinha a palavra dentro:
   medido, 101x58 contra os 44x44 dos números ao lado. */
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	padding: 0;
	font-size: 17px;
	line-height: 1;
}

.wp-block-query-pagination .page-numbers.current {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: #fff;
}

/* ------------------------------------------------------------ correções v0.1.1 */

/* Clamp de linhas — três armadilhas, todas verificadas no navegador:
   1. o line-clamp PADRÃO ainda não existe no Chrome 152 (CSS.supports = false).
      Só o -webkit- funciona;
   2. item flex tem o display blockificado, o que anula o -webkit-box. Por isso
      o texto mora dentro de .rb-card__text, que não é flex;
   3. o <h3> do post-title recusa o -webkit-box mesmo em fluxo normal — o clamp
      precisa ir no <a> de dentro. Medido: 182px (5 linhas) -> 109px (3 linhas).
   O Chrome serializa o display computado como "flow-root" quando o clamp está
   ativo. Isso é normal e NÃO significa que o clamp falhou — medir a altura. */
.rb-card__text .rb-card__title a,
.rb-card__text .rb-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rb-card__text .rb-card__title a { -webkit-line-clamp: 3; }
.rb-card__text .rb-card__excerpt { -webkit-line-clamp: 2; }

/* Rede de segurança: se o clamp não pegar em algum navegador, o teto de altura
   ainda mantém o grid alinhado (sem reticências, mas sem quebrar o layout). */
.rb-card__text .rb-card__title { max-height: calc(1.3em * 3); overflow: hidden; }

/* Cards do Query Loop precisam esticar até a altura da linha do grid. */
.wp-block-post-template.is-layout-grid > .wp-block-post { display: flex; }
.wp-block-post-template > .wp-block-post > .rb-card { flex: 1; width: 100%; }

/* O corpo do card precisa empurrar a meta para o rodapé. */
.rb-card__body { flex: 1; }

/* O placeholder é um <a>, então precisa de dimensão própria. */
a.rb-card__thumb--empty { display: grid; width: 100%; text-decoration: none; }

/* Busca no cabeçalho — o botão só com ícone fica um quadrado sem respiro. */


/* Busca dentro dos widgets e do 404. */
.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}
.wp-block-search__input { border: 0; background: transparent; padding: 14px 15px; font: inherit; }
.wp-block-search__input:focus { outline: none; }

/* O grupo de texto ocupa o espaço e empurra a meta para o rodapé do card. */
.rb-card__text { flex: 1; }

/* ------------------------------------------------------------ ajustes v0.1.2 */

/* Card sobreposto: o texto encosta no rodapé, sem vão no meio.
   O .rb-card__text não pode esticar aqui — só nos cards do grid. */
.rb-card--overlay .rb-card__body { justify-content: flex-end; }
.rb-card--overlay .rb-card__text { flex: none; }
.rb-card--overlay .rb-card__meta { margin-top: 14px; }

/* No card sobreposto o título pode respirar mais do que no grid. */
.rb-card--overlay .rb-card__text .rb-card__title { max-height: none; }
.rb-card--overlay .rb-card__text .rb-card__title a { -webkit-line-clamp: 2; }

/* Placeholder: a inicial estava fraca demais para se ler. */
.rb-card__thumb--empty::after {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
	font-size: clamp(36px, 7vw, 64px);
}

/* ------------------------------------------------------------ a11y v0.1.5 */

/* O texto do selo usa a cor já corrigida para contraste (--cat-ink); o ponto em
   repouso usa a cor crua do assunto, onde contraste de texto não se aplica.
   O hover inteiro mora na seção "chip de categoria", lá em cima — havia uma
   cópia dele aqui, e as duas discordavam. */
.rb-cat { color: var(--cat-ink, var(--wp--preset--color--primary)); }
.rb-cat::before { background: var(--cat-color, currentColor); }

/* mesma armadilha do blockGap nos corpos absolutos */
.rb-card--overlay .rb-card__body { margin-block: 0; }

/* ------------------------------------------------------------ leitura v0.1.7 */

/* Quando a sidebar empilha, a coluna de texto passa a ocupar o container inteiro
   e a linha estica: medido, 94 caracteres em 900px contra 89 no desktop. Acima de
   ~90 a leitura piora (o olho perde a linha ao voltar). A coluna fica travada na
   mesma largura do desktop e centralizada. */
@media (max-width: 1024px) {
	.rb-layout > :first-child,
	.rb-layout > .rb-sidebar {
		max-inline-size: 814px;
		margin-inline: auto;
		inline-size: 100%;
	}
}

/* ------------------------------------------------------------ card fluido v0.1.8 */

/* O mesmo card aparece em larguras bem diferentes: 447px (3 colunas), 328px
   (4 colunas), 349px (arquivo com sidebar) e 350px (celular). Um título fixo em
   28px — tamanho pensado para o card largo — domina o card estreito e espreme o
   resumo.
   A medida passa a ser do CARD, não da janela: `cqi` é 1% da largura do container.
   6.4cqi reproduz a proporção da referência (28px num card de 447px) e desce
   sozinho nos cards estreitos, com piso de 20px. */
.rb-card { container-type: inline-size; }

.rb-card__text .rb-card__title {
	font-size: clamp(20px, 6.4cqi, 28px);
}

/* no card estreito o respiro interno também encolhe um pouco */
@container (max-width: 360px) {
	.rb-card__body { padding: 18px; }
}

/* ------------------------------------------------------------ leia mais v0.1.9 */

.rb-mais {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Botão de contorno, não sólido: "Leia mais" é navegação, e o verde da marca
   fica reservado para as ações de conversão do site. */
.rb-mais__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 32px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .22s, color .22s;
}
.rb-mais__botao:hover:not(:disabled) {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.rb-mais__botao:disabled { cursor: progress; opacity: .7; }

.rb-mais__spinner {
	display: none;
	width: 16px; height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: rb-girar .7s linear infinite;
}
.rb-mais__botao[aria-busy="true"] .rb-mais__spinner { display: block; }
@keyframes rb-girar { to { transform: rotate(360deg); } }

.rb-mais__fim {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

.rb-mais__link {
	display: inline-flex; align-items: center; min-height: 48px;
	padding: 0 32px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--primary);
	font-weight: 600; text-decoration: none;
}

/* Entrada suave dos cards que chegam depois. Começam invisíveis e o JS libera no
   quadro seguinte à inserção — sem isso o navegador pinta o estado final direto. */
.rb-card-novo {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .38s ease, transform .38s ease;
}
.rb-card-novo--visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.rb-card-novo { opacity: 1; transform: none; transition: none; }
	.rb-mais__spinner { animation-duration: 2s; }
}


/* ============================================================== CABEÇALHO v0.3
 *
 * Padrão do tintor.com.br, medido: o cabeçalho NÃO é uma barra de largura total.
 * O invólucro é fixo e transparente; o que se vê é uma CÁPSULA flutuante — fundo
 * branco, raio total, sombra difusa, recuada das bordas.
 *
 * Medidas da referência (viewport 1440): invólucro 1440x112 transparente com
 * padding 20px 0 · cápsula 1320x72, raio 50px, sombra 0 10px 30px a 10% · logo a
 * 26px da borda interna · itens 16px/500 com padding 18px 15px · ativo na cor da
 * marca, sem sublinhado · ações com gap 10px, CTA em cápsula com sombra colorida
 * e ação em ícone num círculo de 40px.
 *
 * Ao rolar, a referência só aprofunda a sombra (10% -> 14%) e leva o fundo a 95%.
 * Aqui acrescentamos o desfoque que o owner pediu.
 * ============================================================================ */

.rb-fixo {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	padding: 16px 20px;
	background: none;
	pointer-events: none; /* o vão ao redor da cápsula não intercepta cliques */
}
.rb-fixo > * { pointer-events: auto; }

.rb-header {
	position: relative;
	max-inline-size: 1400px;
	margin-inline: auto;
	/* simétrico: a referência usa ~26px dos dois lados. Antes eram 22 à esquerda e
	   6 à direita, e o CTA ficava colado na borda. */
	padding: 5px 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 10px 30px rgb(25 25 25 / 10%);
	transition: background-color .4s ease, box-shadow .4s ease;
}
.rb-header > * { margin-block: 0; } /* blockGap não empurra a cápsula */

.rb-header[data-scrolled="true"] {
	box-shadow: 0 10px 34px rgb(25 25 25 / 15%);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.rb-header[data-scrolled="true"] {
		background: color-mix(in srgb, var(--wp--preset--color--surface) 82%, transparent);
		-webkit-backdrop-filter: blur(18px) saturate(180%);
		backdrop-filter: blur(18px) saturate(180%);
	}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rb-header[data-scrolled="true"] {
		background: color-mix(in srgb, var(--wp--preset--color--surface) 97%, transparent);
	}
}

/* Barra de progresso de leitura — no topo absoluto do site, largura total, 5px.
   Fica FORA da cápsula: a cápsula ganha backdrop-filter ao rolar, e isso a torna
   bloco de contenção para descendentes fixos — a barra ficaria presa a ela em vez
   de ao viewport. Por isso ela é irmã do cabeçalho, não filha.
   O JS escreve --rb-progresso no <html>, para a variável alcançar os dois. */
.rb-progresso {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 60;
	block-size: 5px;
	inline-size: var(--rb-progresso, 0%);
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary), var(--wp--preset--color--accent));
	pointer-events: none;
}

.rb-header__grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	min-height: 62px;
}
/* O blockGap dá margin-block-start aos filhos a partir do segundo — e margem em
   item de GRID soma à altura da linha. Sem isto, 48px de conteúdo viravam 78px de
   cápsula. Quarta vez que essa armadilha aparece neste tema. */
.rb-header__grid > * { margin-block: 0; }

/* --------------------------------------------------------------- marca */

.rb-header__marca { display: flex; min-width: 0; justify-self: start; }

/* O link é o alvo de clique — bloco, para não herdar a caixa de linha do texto,
   que somaria alguns pixels invisíveis à altura da linha do grid. */
.rb-header__marca-link {
	display: block;
	border-radius: 8px;
	text-decoration: none;
	transition: opacity .18s ease, translate .18s ease;
}
.rb-header__marca-link:hover { opacity: .78; }
.rb-header__marca-link:active { translate: 0 1px; }
.rb-header__marca-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

/* A altura manda; a largura acompanha a proporção 255x108 do arquivo. */
.rb-header__marca img {
	display: block;
	block-size: 38px;
	inline-size: auto;
	max-inline-size: none;
}

/* --------------------------------------------------------------- menu */

.rb-header__menu { display: flex; justify-content: center; min-width: 0; }

.rb-header .wp-block-navigation-item__content {
	display: block;
	padding: 10px 14px;
	border-radius: 999px;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, background-color .2s ease;
}
/* O texto usa a PRIMÁRIA ESCURA, não a primária.
   A primária passa sobre branco (4,90), mas o próprio realce que colocamos atrás
   dela derruba o contraste: sobre o tingimento de 8% cai para 4,39 e sobre o de
   10% para 4,29 — abaixo do mínimo. Com `secondary` o item ativo dá 6,35. */
.rb-header .wp-block-navigation-item__content:hover,
.rb-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--secondary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
.rb-header .wp-block-navigation-item__content:active { scale: .97; }

/* página atual: cor da marca e um leve preenchimento — como na referência, sem
   sublinhado */
.rb-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--secondary);
	font-weight: 600;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

/* --------------------------------------------------------------- dropdown */

/* As categorias saíram da barra e entraram num submenu "Assuntos" — com 6 itens
   de rótulo longo o menu estourava a largura da cápsula e quebrava em duas linhas.
   É o mesmo recurso que a referência usa para agrupar os segmentos dela. */
.rb-header .wp-block-navigation__submenu-icon {
	margin-inline-start: 4px;
	transition: rotate .24s cubic-bezier(.32,.74,.57,1);
}
.rb-header .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.rb-header .wp-block-navigation-submenu[aria-expanded="true"] .wp-block-navigation__submenu-icon {
	rotate: 180deg;
}

.rb-header .wp-block-navigation__submenu-container {
	min-inline-size: 250px;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 16px 40px rgb(25 25 25 / 12%);
	/* o submenu nasce logo abaixo da cápsula, não colado no item */
	inset-block-start: calc(100% + 10px);
}
.rb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	inline-size: 100%;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* --------------------------------------------------------------- ações */

.rb-header__acoes { min-width: 0; justify-self: end; position: relative; }

/* CTA em cápsula com texto BRANCO.
   O gradiente do site (#59f370 -> #158828) não serve para texto branco: na ponta
   clara o contraste é 1,45. Por isso ele foi deslocado para a metade ESCURA do
   mesmo verde da marca — #16873a (4,60) a #0d6b1d (6,69), o mesmo tom em que
   termina o `--grad-cta-hover` do site. O branco fica legível em toda a extensão. */
.rb-cta {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 20px;
	border-radius: 999px;
	background: linear-gradient(106deg, #16873a 1.19%, #0d6b1d 89.9%);
	color: #fff;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--wp--preset--color--accent) 32%, transparent);
	transition: box-shadow .26s ease, translate .26s ease, filter .26s ease;
}
/* sem `filter: saturate()` no hover: ele clareia o gradiente e derruba o contraste
   do texto branco. O retorno visual fica por conta da elevação e da sombra. */
.rb-cta:hover {
	translate: 0 -1px;
	box-shadow: 0 12px 26px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}
.rb-cta:active { translate: 0 0; scale: .97; }
.rb-cta__curto { display: none; }

/* --------------------------------------------------------------- busca */

.rb-header .wp-block-search { margin: 0; inline-size: auto; }
.rb-header .wp-block-search__inside-wrapper {
	position: relative; display: flex; align-items: center;
	border: 0; background: none; overflow: visible;
}
/* abre SOBREPONDO: se ocupasse espaço no fluxo, a zona de ações reservaria a
   largura dela mesmo recolhida e o menu quebraria */
.rb-header .wp-block-search__input {
	position: absolute;
	inset-inline-end: 50px;
	inset-block-start: 50%;
	translate: 0 -50%;
	inline-size: 240px;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--meta);
	transition: inline-size .32s cubic-bezier(.32,.74,.57,1), opacity .2s ease .08s,
		padding .32s ease, border-color .22s ease;
}
.rb-header .wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}
.rb-header .wp-block-search__searchfield-hidden .wp-block-search__input {
	inline-size: 0; padding-inline: 0; border-width: 0; opacity: 0;
	transition: inline-size .3s cubic-bezier(.32,.74,.57,1), opacity .16s ease, padding .3s ease;
}
.rb-header .wp-block-search__button {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	margin: 0; padding: 0; flex: none;
	border: 0; border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, scale .12s ease;
}
.rb-header .wp-block-search__button:hover { background: var(--wp--preset--color--primary); color: #fff; }
.rb-header .wp-block-search__button:active { scale: .94; }
.rb-header .wp-block-search__button svg { width: 19px; height: 19px; fill: currentColor; }

/* --------------------------------------------------------------- hambúrguer */

/* NÃO declarar `display` aqui: o core esconde o botão de abrir acima de 600px com
   a mesma especificidade, e a nossa folha vem depois — o hambúrguer apareceria no
   desktop. Quem liga o botão é a media query. */
.rb-header .wp-block-navigation__responsive-container-open,
.rb-header .wp-block-navigation__responsive-container-close {
	place-items: center;
	width: 42px; height: 42px;
	padding: 0; flex: none;
	border: 0; border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, scale .12s ease;
}
.rb-header .wp-block-navigation__responsive-container-close { display: grid; }
.rb-header .wp-block-navigation__responsive-container-open:hover,
.rb-header .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--primary); color: #fff;
}
.rb-header .wp-block-navigation__responsive-container-open:active,
.rb-header .wp-block-navigation__responsive-container-close:active { scale: .94; }

.rb-burger { display: grid; gap: 4px; width: 17px; }
.rb-burger span {
	display: block; height: 2px; border-radius: 2px; background: currentColor;
	transition: translate .26s cubic-bezier(.32,.74,.57,1), rotate .26s cubic-bezier(.32,.74,.57,1),
		opacity .18s ease, width .26s ease;
}
.rb-burger span:nth-child(2) { width: 12px; justify-self: start; }
.rb-header .wp-block-navigation__responsive-container-open:hover .rb-burger span:nth-child(2) { width: 17px; }
.rb-header .wp-block-navigation__responsive-container-close .rb-burger span:nth-child(1) { translate: 0 6px; rotate: 45deg; }
.rb-header .wp-block-navigation__responsive-container-close .rb-burger span:nth-child(2) { opacity: 0; width: 17px; }
.rb-header .wp-block-navigation__responsive-container-close .rb-burger span:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

/* --------------------------------------------------------------- responsivo */

/* O core só troca para hambúrguer aos 600px. Com 6 itens, marca, busca, CTA e
   WhatsApp, a cápsula já estoura bem antes. */
@media (max-width: 1180px) {
	.rb-header .rb-header__grid { grid-template-columns: 1fr auto auto; }
	.rb-header .rb-header__menu { justify-content: flex-end; }
	.rb-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; }

	.rb-header .wp-block-navigation__responsive-container {
		transition: opacity .28s ease, translate .28s cubic-bezier(.32,.74,.57,1), display .28s allow-discrete;
	}
	.rb-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none; opacity: 0; translate: 0 -12px;
	}
	.rb-header .wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1; translate: 0 0; padding-block-start: 24px;
	}
	@starting-style {
		.rb-header .wp-block-navigation__responsive-container.is-menu-open { opacity: 0; translate: 0 -12px; }
	}

	.rb-header .is-menu-open .wp-block-navigation-item {
		animation: rb-entrar .32s cubic-bezier(.32,.74,.57,1) backwards;
		inline-size: 100%;
	}
	.rb-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .05s; }
	.rb-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .09s; }
	.rb-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .13s; }
	.rb-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .17s; }
	.rb-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .21s; }
	.rb-header .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .25s; }
	@keyframes rb-entrar { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

	/* o seletor inclui o container: o core zera o padding dos itens com a mesma
	   especificidade, e o tamanho é fixo porque o token `medium` é fluido e
	   computaria ~14px num celular */
	.rb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 4px; inline-size: min(420px, 100%);
	}
	.rb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 14px 18px; font-size: 20px; font-weight: 600;
		border-radius: var(--wp--custom--radius--card);
	}
}

/* rótulo curto do CTA, como no padrão da referência */
@media (max-width: 1024px) {
	.rb-cta__longo { display: none; }
	.rb-cta__curto { display: inline; }
	.rb-cta { padding: 0 16px; }
}

@media (max-width: 860px) {
	.rb-fixo { padding: 12px 14px; }
	/* simétrico também aqui — antes eram 16 à esquerda e 8 à direita, e o CTA
	   encostava na borda da cápsula */
	.rb-header { padding: 5px 14px; }
	.rb-header .rb-header__grid { gap: 10px; }
	/* a busca sai: a sidebar e o rodapé já têm uma, e o espaço é do CTA */
	.rb-header .wp-block-search { display: none; }
}

@media (max-width: 520px) {
	.rb-header__marca img { block-size: 30px; }
	.rb-cta { min-height: 40px; padding: 0 14px; font-size: 13px; }
	.rb-header .wp-block-navigation__responsive-container-open { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.rb-header, .rb-cta,
	.rb-header .wp-block-navigation-item__content,
	.rb-header .wp-block-search__input,
	.rb-burger span { transition-duration: .01ms !important; }
	.rb-header .is-menu-open .wp-block-navigation-item { animation: none; }
	.rb-cta:hover { translate: 0; }
	.rb-header .wp-block-navigation-item__content:active,
	.rb-header .wp-block-search__button:active, .rb-cta:active { scale: 1; }
}

/* --------------------------------------------------------------- mega-menu */

/* Painel de assuntos em cards, no padrão medido no tintor.com.br:
   grid de 4 colunas, gap 16, padding 32, raio 22, sombra 0 24px 70px a 18%.
   Cada card com raio 20 e uma borda interna de 1px na cor do assunto.
   Aqui a paleta é clara, então o texto usa os tokens do blog. */
/* Sobre o `!important` daqui — ele é necessário, não preguiça.
   O core fixa `width: 200px` e `min-width: 200px` no contêiner do submenu, e essa
   regra é impressa num <style> dentro do <body>. Como ela vem depois de TUDO que
   sai do <head>, qualquer empate de especificidade cai para ela: testado, nem um
   <style> novo injetado no <head> com seletor de quatro níveis vencia — só estilo
   inline. Sem isto o painel ficava com 250px e os cards com 38px, sobrepostos. */
.rb-header .wp-block-navigation .wp-block-navigation__submenu-container.rb-mega {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	inline-size: min(1060px, calc(100vw - 48px)) !important;
	min-inline-size: 0 !important;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 22px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 24px 70px rgb(25 25 25 / 14%);
	/* centrado sob a cápsula, não preso à borda do item */
	inset-inline-start: 50%;
	translate: -50% 0;
	inset-block-start: calc(100% + 14px);
}
/* O <li> precisa ser um container que ESTICA o card.
   Antes o card pedia `block-size: 100%`, mas porcentagem de altura exige pai com
   altura definida — e a do <li> é automática. O 100% era ignorado, o card crescia
   até a altura do conteúdo (374px num painel de 370px úteis) e escapava pela base.
   Com o <li> em grid, o card é esticado e a linha passa a medir pelo card mais
   alto: todos ficam iguais e nada transborda. */
.rb-header .rb-mega .rb-mega__item-li { display: grid; }

.rb-mega__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 16px;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 18%, transparent);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: box-shadow .28s ease, translate .28s ease, background-color .28s ease;
}
.rb-mega__card:hover,
.rb-mega__card:focus-visible {
	translate: 0 -3px;
	background: var(--wp--preset--color--surface);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 45%, transparent),
		0 12px 26px rgb(25 25 25 / 10%);
}

.rb-mega__capa {
	display: block;
	aspect-ratio: 240 / 132;
	border-radius: 11px;
	overflow: hidden;
	background: color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 12%, transparent);
}
.rb-mega__capa img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* assunto sem nenhum post com imagem */
.rb-mega__capa--vazia { display: grid; place-items: center; }
.rb-mega__capa--vazia::after {
	content: attr(data-initial);
	font-size: 34px; font-weight: 700;
	color: color-mix(in srgb, var(--cat-ink, var(--wp--preset--color--primary)) 55%, transparent);
}

.rb-mega__titulo {
	font-size: 17px; font-weight: 700; line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}
.rb-mega__sub {
	font-size: var(--wp--preset--font-size--meta); font-weight: 500;
	color: var(--cat-ink, var(--wp--preset--color--primary));
}

.rb-mega__itens { display: grid; gap: 5px; margin-block-start: 2px; }
.rb-mega__item {
	display: grid;
	grid-template-columns: 13px 1fr;
	gap: 7px;
	align-items: start;
	font-size: 13px; line-height: 1.4;
	color: var(--wp--preset--color--muted);
}
.rb-mega__item svg { margin-block-start: 2px; color: var(--cat-ink, var(--wp--preset--color--primary)); }

/* "Ver assunto" empurrado para o rodapé do card, como na referência */
.rb-mega__link {
	display: inline-flex; align-items: center; gap: 5px;
	margin-block-start: auto; padding-block-start: 8px;
	font-size: var(--wp--preset--font-size--meta); font-weight: 700;
	color: var(--cat-ink, var(--wp--preset--color--primary));
}
.rb-mega__card:hover .rb-mega__link svg { translate: 2px -2px; }
.rb-mega__link svg { transition: translate .24s ease; }

/* Abaixo de 1180px o menu já é overlay: o painel vira uma coluna dentro dele. */
@media (max-width: 1180px) {
	.rb-header .wp-block-navigation .wp-block-navigation__submenu-container.rb-mega {
		position: static;
		translate: none;
		inline-size: 100% !important;
		min-inline-size: 0 !important;
		grid-template-columns: 1fr;
		gap: 10px;
		/* no overlay o core aplica um padding próprio, também de dentro do <body> —
		   sem forçar, sobravam 32px de cada lado e o card transbordava a tela */
		padding: 8px 0 0 !important;
		border: 0;
		background: none;
		box-shadow: none;
	}
	/* no estreito o card vira uma linha: capa à esquerda, título e contagem
	   empilhados à direita — lado a lado, a contagem quebrava no meio */
	.rb-mega__card {
		display: grid;
		grid-template-columns: 72px 1fr;
		grid-template-rows: auto auto;
		align-items: center;
		gap: 2px 12px;
		padding: 10px;
	}
	.rb-mega__capa { grid-row: 1 / 3; inline-size: 72px; aspect-ratio: 1; }
	.rb-mega__itens, .rb-mega__link { display: none; }
	.rb-mega__todos-conta { display: none; }
	.rb-mega__titulo { font-size: 16px; align-self: end; }
	.rb-mega__sub { align-self: start; }
}

/* --------------------------------------------- rodapé do painel */

/* O painel mostra só os quatro assuntos mais lidos. Esta linha atravessa as
   quatro colunas e leva ao resto — sem ela o menu ou fica incompleto ou vira
   uma lista longa demais para um dropdown. */
.rb-header .rb-mega .rb-mega__todos-li {
	grid-column: 1 / -1;
	display: grid;
	margin-block-start: 4px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.rb-mega__todos {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .24s ease, color .24s ease;
}
.rb-mega__todos:hover,
.rb-mega__todos:focus-visible {
	background: var(--wp--preset--color--secondary);
	color: #fff;
}
.rb-mega__todos svg { flex: none; transition: translate .24s ease; }
.rb-mega__todos:hover svg { translate: 3px 0; }

/* a contagem empurra a seta para a direita e informa o tamanho do acervo */
.rb-mega__todos-conta {
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	color: inherit;
	opacity: .78;
}

@media (prefers-reduced-motion: reduce) {
	.rb-mega__card, .rb-mega__link svg, .rb-mega__todos,
	.rb-mega__todos svg { transition-duration: .01ms !important; }
	.rb-mega__card:hover { translate: 0; }
}

/* ================================================== ACERVO (página unificada)
 *
 * `/todas-publicacoes/` era uma grade de posts e `/assuntos/` era uma grade de
 * assuntos. Em 15/09 o owner pediu as duas numa página só: os assuntos viram uma
 * COLUNA À ESQUERDA, com os cartões um abaixo do outro, e as publicações ocupam o
 * resto. A grade separada de assuntos saiu do tema junto com a página.
 *
 * Larguras: a coluna dos assuntos é fixa em 300px e as publicações ficam com o que
 * sobra do contêiner de 1400px — 1012px, que dão 3 colunas de card. Fixa e não
 * fracionária de propósito: em `fr` a coluna encolhe junto com a janela e, por
 * volta de 1100px, o cartão de assunto fica estreito demais para o nome caber em
 * uma linha, muito antes de o layout precisar empilhar.
 * ========================================================================== */

.rb-acervo {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 0 48px;
	align-items: start;
}
/* O blockGap do theme.json vira `margin-block-start` no segundo filho em diante, e
   margem em item de GRID empurra a linha inteira: a coluna das publicações nascia
   30px abaixo da dos assuntos e os dois títulos saíam desencontrados. Quinta vez
   que esta armadilha aparece no tema — ver .rb-header__grid e .rb-rodape__topo. */
.rb-acervo > * { margin-block: 0; }

/* o título da página e o texto de apoio começam no mesmo x */
.rb-acervo__intro .wp-block-post-content p {
	max-inline-size: 66ch;
	margin-block-start: 14px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* O rótulo "Assuntos" só existe na coluna da esquerda — o da direita repetiria o
   H1 e virou texto de leitor de tela, que não ocupa espaço nenhum no fluxo. Com
   isso os primeiros cartões das duas colunas nasciam em alturas diferentes:
   medido, 26px de diferença, exatamente a altura da linha do rótulo (o vão de
   30px depois dele é o blockGap, e esse as duas colunas já têm em comum).
   A coluna da direita recupera esses 26px como padding. Se o tamanho do rótulo
   mudar, este valor muda junto — por isso os dois moram na mesma variável. */
.rb-acervo { --rb-acervo-rotulo: 26px; }
.rb-acervo__posts { padding-block-start: var(--rb-acervo-rotulo); }

.rb-acervo__titulo {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

/* A coluna acompanha a rolagem: com 12 publicações por página, sem `sticky` os
   assuntos somem da tela no primeiro terço e a coluna deixa de ser navegação.
   O topo de 100px é a altura da cápsula fixa mais folga. */
.rb-acervo__lateral {
	position: sticky;
	top: 100px;
}

/* --------------------------------------------- cartões de assunto (coluna) */

.rb-assuntos-lat__lista {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rb-assunto-lat {
	display: grid;
	gap: 5px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	/* o fio de cor do assunto é a única pista de cor no repouso */
	box-shadow:
		inset 3px 0 0 0 var(--cat-color, var(--wp--preset--color--primary)),
		inset 0 0 0 1px var(--wp--preset--color--border-soft);
	text-decoration: none;
	transition: box-shadow .24s ease, translate .24s ease, background-color .24s ease;
}
.rb-assunto-lat:hover,
.rb-assunto-lat:focus-visible {
	translate: 3px 0;
	box-shadow:
		inset 4px 0 0 0 var(--cat-ink, var(--wp--preset--color--primary)),
		inset 0 0 0 1px color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 40%, transparent),
		0 10px 22px rgb(25 25 25 / 8%);
}

/* O assunto aberto numa página de categoria fica marcado. O fundo é uma tinta de
   8% da cor: sólido, o texto perderia contraste com cores claras. */
.rb-assunto-lat--aberto {
	background: color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 8%, var(--wp--preset--color--surface));
	box-shadow:
		inset 4px 0 0 0 var(--cat-ink, var(--wp--preset--color--primary)),
		inset 0 0 0 1px color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 35%, transparent);
}

.rb-assunto-lat__nome {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
	/* tom com folga: o cartão nunca fica sobre branco puro — ver a nota no PHP */
	color: var(--cat-ink-forte, var(--cat-ink, var(--wp--preset--color--primary)));
}

/* Duas linhas no máximo: a descrição é livre no painel do WordPress e uma frase
   longa faria um cartão ficar três vezes mais alto que o vizinho.
   O clamp vai no próprio <span>, que é `display: block` aqui — em item de flex o
   `-webkit-box` é ignorado. */
.rb-assunto-lat__sobre {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--text);
}

.rb-assunto-lat__metrica {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
}

/* Dentro do widget da barra lateral o fundo já é branco: o cartão precisa do tom
   de baixo para não sumir. Na página unificada é o contrário — ali o fundo da
   página é o `base` e o cartão é que se destaca em branco. */
.rb-widget .rb-assunto-lat { background: var(--wp--preset--color--base); }
.rb-widget .rb-assunto-lat:hover,
.rb-widget .rb-assunto-lat:focus-visible { background: var(--wp--preset--color--surface); }
.rb-widget .rb-assunto-lat--aberto {
	background: color-mix(in srgb, var(--cat-color, var(--wp--preset--color--primary)) 10%, var(--wp--preset--color--base));
}

/* o widget já traz o próprio respiro; a lista não precisa de margem por cima */
.rb-widget .rb-assuntos-lat__lista { gap: 8px; }

.rb-assuntos-lat__vazio {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------- responsivo */

/* Por que empilhar em 1100px, medido nos dois lados do corte:
     1101px, lado a lado → 300 + 713, e as publicações ficam em 2 colunas de 341,5px
     1100px, empilhado   → 1060 inteiros, e as publicações voltam para 3 colunas
   Ou seja, empilhar aqui TROCA a coluna grudada por uma coluna a mais de posts —
   e os assuntos não perdem nada, viram uma faixa de cartões acima da lista. Não é
   que 341px seja estreito (o grid da home usa 328); é que abaixo deste ponto a
   barra passa a custar mais do que entrega. */
@media (max-width: 1100px) {
	.rb-acervo {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.rb-acervo__lateral { position: static; }
	/* empilhado não há segunda coluna para acertar; o padding viraria vão solto */
	.rb-acervo__posts { padding-block-start: 0; }
	.rb-assuntos-lat__lista {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 12px;
	}
}

@media (max-width: 560px) {
	.rb-assuntos-lat__lista { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.rb-assunto-lat { transition-duration: .01ms !important; }
	.rb-assunto-lat:hover { translate: 0; }
}

/* ============================================================== RODAPÉ v0.3
 *
 * Padrão do rodapé do resolva.com.br, medido: NÃO é escuro — é o ciano da marca
 * (#68e1fd) de sangria total, com texto quase preto. Preto sobre ciano dá 13,78
 * de contraste, o que sustenta bem um rodapé denso.
 *
 * v0.3 (15/09): a faixa do WhatsApp saiu a pedido do owner, e a coluna da marca
 * estava empilhando cinco coisas (logo, texto, título do selo, selo, redes) — ela
 * descia 150px abaixo das colunas de links e deixava um vão morto antes da linha
 * legal. Agora são TRÊS faixas com papéis separados:
 *
 *   1. navegação  — marca + tagline | Assuntos | No blog | Resolva
 *   2. credencial — selo do INPI à esquerda, redes sociais à direita
 *   3. legal      — direitos e aviso, centralizados
 *
 * Cada faixa é separada por régua de 2px, e nenhuma coluna sustenta sozinha a
 * altura do bloco.
 * ============================================================================ */

.rb-rodape {
	margin-block-start: var(--wp--preset--spacing--80);
	padding: 64px 20px 34px;
	background: var(--wp--preset--color--cyan);
	color: #000;
}

.rb-rodape__inner { max-inline-size: 1320px; margin-inline: auto; }
.rb-rodape > *, .rb-rodape__inner > * { margin-block: 0; }

/* ------------------------------------------------- faixa 1: navegação */

.rb-rodape__topo {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 40px;
	padding-block-end: 38px;
}
.rb-rodape__topo > * { margin-block: 0; }

.rb-rodape__logo { display: block; inline-size: 196px; block-size: auto; }

.rb-rodape__sobre {
	margin: 18px 0 0;
	max-inline-size: 38ch;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.65;
	color: #000;
}

/* O título das colunas de link alinha opticamente com o miolo do logo, que é
   mais alto que uma linha de texto. Sem isto a primeira linha das três colunas
   fica flutuando acima da marca. */
.rb-rodape__col { padding-block-start: 6px; }

/* o título é <p> 16/600 na referência; aqui é <h2> com o mesmo desenho, para a
   hierarquia de cabeçalhos do documento continuar correta */
.rb-rodape__titulo {
	margin: 0 0 14px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	color: #000;
}

.rb-rodape__lista,
.rb-rodape .wp-block-categories {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.rb-rodape__lista a,
.rb-rodape .wp-block-categories a {
	display: inline-block;
	min-block-size: 26px;
	padding-block: 2px;
	font-size: var(--wp--preset--font-size--small);
	color: #000;
	text-decoration: none;
	transition: opacity .2s ease, translate .2s ease;
}
.rb-rodape__lista a:hover,
.rb-rodape .wp-block-categories a:hover {
	opacity: .68;
	translate: 2px 0;
}
.rb-rodape__lista a:focus-visible,
.rb-rodape .wp-block-categories a:focus-visible { outline-color: #000; }

/* A contagem da categoria é discreta, mas não pode ficar ilegível: preto a 55%
   sobre o ciano compõe #2f6572 e dá 4,27 — abaixo do mínimo. A 65% dá 5,89. */
.rb-rodape .wp-block-categories li {
	color: rgb(0 0 0 / 65%);
	font-size: var(--wp--preset--font-size--meta);
}

/* ------------------------------------- faixa 2: credencial + redes */

.rb-rodape__selos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	padding-block: 26px;
	border-block: 2px solid rgb(0 0 0 / 14%);
}

.rb-rodape__inpi {
	display: flex;
	align-items: center;
	gap: 14px;
	min-inline-size: 0;
}
.rb-rodape__inpi img { display: block; inline-size: 186px; block-size: auto; flex: none; }

/* régua vertical curta separando o selo da frase — é o que impede os dois de
   lerem como uma coisa só */
.rb-rodape__credencial {
	margin: 0;
	padding-inline-start: 14px;
	border-inline-start: 2px solid rgb(0 0 0 / 14%);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	line-height: 1.4;
	color: #000;
}

.rb-rodape__social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rb-rodape__social a {
	display: grid;
	place-items: center;
	inline-size: 40px; block-size: 40px;
	border: 2px solid #000;
	border-radius: 50%;
	color: #000;
	transition: background-color .22s ease, color .22s ease, translate .22s ease;
}
.rb-rodape__social a:hover {
	background: #000;
	color: var(--wp--preset--color--cyan);
	translate: 0 -2px;
}

/* ------------------------------------------------------ faixa 3: legal */

.rb-rodape__legal {
	display: grid;
	gap: 4px;
	padding-block-start: 24px;
	text-align: center;
}
.rb-rodape__legal p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: #000;
}
.rb-rodape__legal-blog {
	font-size: var(--wp--preset--font-size--meta) !important;
	font-weight: 400 !important;
	color: rgb(0 0 0 / 68%) !important;
}

/* --------------------------------------------------------------- responsivo */

@media (max-width: 1024px) {
	.rb-rodape__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 32px; }
	.rb-rodape__col { padding-block-start: 0; }
}

@media (max-width: 680px) {
	.rb-rodape { padding: 48px 20px 30px; }
	.rb-rodape__topo { grid-template-columns: 1fr; gap: 30px; padding-block-end: 30px; }
	.rb-rodape__sobre { max-inline-size: none; }
	/* empilhado, o selo e as redes ficam centralizados — alinhar à esquerda
	   deixaria as redes soltas na borda */
	.rb-rodape__selos { justify-content: center; text-align: center; }
	.rb-rodape__inpi { justify-content: center; }
}

@media (max-width: 520px) {
	/* lado a lado nesta largura sobram ~110px para a frase, que quebra em três
	   linhas e desalinha do selo — empilhado, os dois respiram */
	.rb-rodape__inpi { flex-direction: column; gap: 10px; }
	.rb-rodape__credencial {
		padding-inline-start: 0;
		padding-block-start: 10px;
		border-inline-start: 0;
		border-block-start: 2px solid rgb(0 0 0 / 14%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rb-rodape__lista a, .rb-rodape .wp-block-categories a,
	.rb-rodape__social a { transition-duration: .01ms !important; }
	.rb-rodape__lista a:hover, .rb-rodape__social a:hover { translate: 0; }
}