/* ==========================================================================
   TIPOGRAFIA GERAL — texto da página, títulos, links e etiquetas
   ==========================================================================

   O QUE CONTROLA
   - Fonte, cor e tamanho do texto de todo o site.
   - Estilo básico dos títulos (h1 a h6) fora do artigo.
   - Links em geral.
   - "Etiqueta" de editoria (o texto pequeno em maiúsculas acima dos títulos,
     com o fio dourado à esquerda).

   Os textos DENTRO do artigo têm estilo próprio em components/conteudo.css.
   Tamanhos e fontes: base/variaveis.css (seções 3 e 4).
   ========================================================================== */

body {
	background: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: var(--fonte-corpo);
	font-size: var(--texto-base);
	line-height: var(--altura-linha-interface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv11", "ss01"; /* Inter: "a" de um andar e números mais legíveis. */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fonte-titulos);
	font-weight: var(--peso-negrito);
	line-height: var(--altura-linha-titulo);
	letter-spacing: var(--espacamento-titulo);
	color: var(--cor-texto);
	text-wrap: balance; /* Quebra os títulos em linhas de tamanho parecido. */
}

a {
	color: var(--cor-primaria);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--cor-primaria-hover);
}

strong,
b {
	font-weight: var(--peso-semi);
}

::selection {
	background: var(--cor-dourado-claro);
	color: var(--cor-texto);
}

/* Foco visível para quem navega pelo teclado (acessibilidade). */
:focus-visible {
	outline: 2px solid var(--cor-foco);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   ETIQUETA DE EDITORIA (ex.: "— CONCURSOS")
   -------------------------------------------------------------------------- */
.etiqueta {
	position: relative;
	z-index: 1; /* Fica clicável mesmo sobre o link que cobre o card. */
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--fonte-corpo);
	font-size: var(--texto-pequeno);
	font-weight: var(--peso-semi);
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--cor-primaria);
	text-decoration: none;
}

.etiqueta::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 2px;
	background: var(--cor-destaque);
	border-radius: 2px;
	flex-shrink: 0;
}

a.etiqueta:hover {
	color: var(--cor-primaria-hover);
	text-decoration: underline;
	text-decoration-color: var(--cor-destaque);
}