/* ============================================================================
   base.css — reset, tipografia e utilitários do tema Inriqueza
   ----------------------------------------------------------------------------
   O que o theme.json NÃO cobre. Ele já define fonte, cor e espaçamento dos
   blocos; aqui entram as regras que valem para o documento inteiro e as poucas
   classes utilitárias que os patterns usam.

   Este arquivo também é carregado DENTRO do editor (add_editor_style em
   functions.php), então nada aqui pode depender de marcação que só existe no
   site público.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* `clip` e não `hidden`, e a diferença é a que fazia o cabeçalho não grudar.
 *
 * Pela especificação, quando um eixo do `overflow` deixa de ser `visible` o OUTRO vira `auto`. Com
 * `overflow-x: hidden`, o `body` passava a computar `overflow-y: auto` e virava um CONTÊINER DE
 * ROLAGEM. Um `position: sticky` gruda no contêiner de rolagem mais próximo — que passou a ser o
 * `body`, cuja caixa nunca rola (quem rola é o documento). Resultado medido em 19/09 no site no ar:
 * rolando 1200px, o topo do cabeçalho ia para −1168px, ou seja, subia junto com o conteúdo.
 *
 * `overflow-x: clip` corta igual e **não** cria contêiner de rolagem — `overflow-y` continua
 * `visible`. As duas linhas são de propósito: navegador antigo que não conhece `clip` descarta a
 * segunda e fica com `hidden`, o que preserva o corte horizontal (o sticky é que não funciona lá).
 *
 * Esta era só METADE do defeito; a outra está em blocos.css, no wrapper do template-part. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

/* A troca de tema é transição, não corte seco — e limitada a cor, para não
   animar layout. `.theme-switching` desliga tudo durante a troca programática
   inicial (ver theme-toggle.js), senão a primeira pintura anima do nada. */
body,
.wp-block-group,
.wp-block-column,
.inriqueza-card { transition: background-color var(--t-base) ease, color var(--t-base) ease; }
.theme-switching * { transition: none !important; }

img, svg, video { max-width: 100%; height: auto; }

/* --- Tipografia -----------------------------------------------------------
   Os títulos já vêm do theme.json (elements.heading). Aqui só o que ele não
   alcança: equilíbrio de quebra de linha e a medida de leitura. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Aqui havia um `max-width: 68ch` nos parágrafos do artigo, para medida de
   leitura. Foi removido: o layout `constrained` do WordPress CENTRALIZA o filho
   mais estreito, então o parágrafo saía 31px à direita do título — desalinhado
   com tudo o mais na página. A medida de leitura já vem do `contentSize` de
   760px do theme.json, que a 16px dá ~74 caracteres por linha. Uma restrição
   só, no lugar certo. */

/* Olho de seção — o versalete espaçado que abre cada bloco do site. */
.eyebrow,
.is-style-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-subtle);
  margin-bottom: 0.75rem;
}

/* Parágrafo de abertura de seção. */
.lead,
.is-style-lead {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.175rem);
  color: var(--text-muted);
  line-height: 1.65;
}

/* --- Números --------------------------------------------------------------
   Mesma regra do Modelador: toda cifra alinha em colunas. Vale para as tabelas
   que aparecem em artigos do blog. */
.num,
[data-num],
.wp-block-table td:not(:first-child) {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.wp-block-table td:not(:first-child) { text-align: right; }

/* --- Foco visível ---------------------------------------------------------
   Nunca removido. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* --- Pular para o conteúdo ------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100%;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.6rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast) ease;
}
.skip-link:focus { top: 0.75rem; }

/* --- Rolagem discreta ----------------------------------------------------- */
.thin-scrollbar { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}