/* =========================================================================
   BÍBLIA EM DETALHES — base
   Reset editorial, acessibilidade e os tokens que o theme.json não cobre.

   ⚠️ As cores, fontes, tamanhos e espaços NÃO ficam aqui: eles nascem do
   theme.json e chegam como variáveis --wp--preset--*. Dentro do WordPress
   quem gera essas variáveis é o próprio WordPress; na prévia local quem gera
   é o montador, lendo o MESMO theme.json. Por isso não existe risco de a
   prévia e o site ficarem com cores diferentes.
   ========================================================================= */

:root {
	/* Tokens de forma — a especificação pede raio discreto e borda no lugar de sombra. */
	--bd-raio: 4px;
	--bd-raio-medio: 8px;
	--bd-borda: 1px solid var(--wp--preset--color--borda);
	--bd-borda-fina: 1px solid color-mix(in srgb, var(--wp--preset--color--borda) 70%, transparent);

	/* Movimento. Curto e discreto: hover sutil só no desktop. */
	--bd-transicao: 180ms cubic-bezier(0.2, 0, 0.2, 1);

	/* Medida de leitura do artigo — a especificação pede 680–760px. */
	--bd-medida: 720px;

	/* Proporção das capas. */
	--bd-capa: 16 / 9;
}

/* ---------- reset curto ---------- */

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

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

body {
	margin: 0;
	background-color: var(--wp--preset--color--fundo);
	color: var(--wp--preset--color--texto);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

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

/* A capa nunca distorce: corta, não estica. */
figure img {
	object-fit: cover;
}

/* Tipografia não quebra palavra no meio à toa, mas também não estoura a caixa. */
h1, h2, h3, h4, h5, h6, p, li, figcaption {
	overflow-wrap: break-word;
	text-wrap: pretty;
}

h1, h2, h3 {
	text-wrap: balance;
}

/* ---------- acessibilidade ---------- */

/*
  Foco sempre visível. A especificação exige isso, e é a primeira coisa que
  some quando alguém escreve `outline: none` por estética. ⛔ Não remover.
*/
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--oliva);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Link do corpo do texto não depende só de cor — leva sublinhado. */
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--bd-transicao);
}

/* Pular para o conteúdo — só aparece no teclado. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--texto);
	color: var(--wp--preset--color--branco);
	font-size: var(--wp--preset--font-size--pequeno);
	text-decoration: none;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.bd-so-leitor-de-tela {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
  Quem pediu menos movimento no sistema recebe menos movimento.
  O hero respeita isso também, no CSS dele e no JS.
*/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- impressão ---------- */

@media print {
	.bd-cabecalho,
	.bd-rodape,
	.bd-hero,
	.bd-compartilhar {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}