/*
 * CSS utilitário compartilhado — controles de Tipografia
 * (blocks/src/shared/tipografia-controls.js).
 *
 * Classes GLOBAIS (não amarradas a nenhum bloco específico) — qualquer
 * bloco que use <TipografiaControls>/getTipografiaClassName() aplica essas
 * mesmas classes, sem duplicar CSS por bloco. "Padrão" (nenhuma classe
 * aplicada) nunca muda o CSS que o bloco já tinha antes.
 *
 * Carregado por wp_enqueue_style('spic-bloco-tipografia') em qualquer
 * render.php que use esses controles (blocos estáticos incluem o handle no
 * array de "style" do block.json).
 *
 * Cada seletor é escrito EM DOBRO (ex.: `.spic-tipografia-tamanho-grande.
 * spic-tipografia-tamanho-grande`) só pra ganhar especificidade (0-2-0) —
 * garante que a escolha do Inspector vença o CSS-base de cada bloco
 * (ex.: `.spic-cards-destaque__titulo{font-family:Venn}`, também 0-1-0)
 * mesmo se esse arquivo carregar ANTES do CSS do bloco no `<head>` (a ordem
 * de enfileiramento entre handles de css/blocos/*.css não é garantida —
 * depende da ordem alfabética do glob() em spic_register_blocos_css()).
 * Sem isso, a cor/fonte/etc. escolhida podia "não fazer nada" dependendo só
 * do nome do arquivo do bloco — bug real, encontrado ao testar
 * spic/titulo-descricao (glob ordena "tipografia.css" ANTES de
 * "titulo-descricao.css").
 */

/*
 * --- Cor (classe `spic-cor-<valor>`) --- 2026-10-16
 * Usada pelos blocos da página "Modernização São Simão" (cards-icone,
 * numeros-destaque, linha-do-tempo, casa-de-forca, novidades, mascote-balao)
 * via getTipografiaClassName(attributes, '<prefixo>', 'spic-cor') /
 * spic_get_tipografia_class($attributes, '<prefixo>', 'spic-cor'). Um lugar
 * só pra cor de texto desses blocos — cor nova na paleta (shared/cores.js)
 * entra AQUI uma vez, não em cada CSS de bloco. Blocos mais antigos
 * continuam com a própria convenção (`titulo-<cor>`/`texto-<cor>`).
 */
.spic-cor-navy.spic-cor-navy {
	color: var(--spic-navy);
}

.spic-cor-blue.spic-cor-blue {
	color: var(--spic-blue);
}

.spic-cor-azul-claro.spic-cor-azul-claro {
	color: var(--spic-azul-claro);
}

.spic-cor-lime.spic-cor-lime {
	color: var(--spic-lime);
}

.spic-cor-green.spic-cor-green {
	color: var(--spic-green);
}

.spic-cor-red.spic-cor-red {
	color: var(--spic-red);
}

.spic-cor-preto.spic-cor-preto {
	color: var(--spic-preto);
}

.spic-cor-branco.spic-cor-branco {
	color: #fff;
}

/* --- Tamanho (P/M/G/GG) --- */
.spic-tipografia-tamanho-pequeno.spic-tipografia-tamanho-pequeno {
	font-size: 16px;
}

.spic-tipografia-tamanho-medio.spic-tipografia-tamanho-medio {
	font-size: 20px;
}

.spic-tipografia-tamanho-grande.spic-tipografia-tamanho-grande {
	font-size: 28px;
}

/* M+ / G+ (2026-10-19) — medidas do layout Modernização São Simão */
.spic-tipografia-tamanho-medio-mais.spic-tipografia-tamanho-medio-mais {
	font-size: 22px;
}

.spic-tipografia-tamanho-grande-mais.spic-tipografia-tamanho-grande-mais {
	font-size: 32px;
}

.spic-tipografia-tamanho-extra-grande.spic-tipografia-tamanho-extra-grande {
	font-size: 40px;
}

/* --- Peso --- */
.spic-tipografia-peso-leve.spic-tipografia-peso-leve {
	font-weight: 300;
}

.spic-tipografia-peso-normal.spic-tipografia-peso-normal {
	font-weight: 400;
}

.spic-tipografia-peso-medio.spic-tipografia-peso-medio {
	font-weight: 600;
}

.spic-tipografia-peso-negrito.spic-tipografia-peso-negrito {
	font-weight: 700;
}

/* --- Espaçamento entre letras --- */
.spic-tipografia-espacamento-nenhum.spic-tipografia-espacamento-nenhum {
	letter-spacing: 0;
}

.spic-tipografia-espacamento-medio.spic-tipografia-espacamento-medio {
	letter-spacing: 0.08em;
}

.spic-tipografia-espacamento-largo.spic-tipografia-espacamento-largo {
	letter-spacing: 0.15em;
}

/* --- Transformação de texto --- */
.spic-tipografia-transformacao-maiusculas.spic-tipografia-transformacao-maiusculas {
	text-transform: uppercase;
}

.spic-tipografia-transformacao-minusculas.spic-tipografia-transformacao-minusculas {
	text-transform: lowercase;
}

.spic-tipografia-transformacao-capitalizado.spic-tipografia-transformacao-capitalizado {
	text-transform: capitalize;
}

/*
 * --- Fonte --- mesmas declarações de .font-venn/.font-encode
 * (style.min.css) — repetidas aqui como classe própria pra não depender de
 * combinar 2 classes no mesmo elemento.
 */
.spic-tipografia-fonte-venn.spic-tipografia-fonte-venn {
	font-family: Venn;
	font-style: normal;
	font-weight: 400;
}

.spic-tipografia-fonte-encode.spic-tipografia-fonte-encode {
	font-family: Encode;
	font-style: normal;
}

@media screen and (max-width: 767px) {
	.spic-tipografia-tamanho-grande-mais.spic-tipografia-tamanho-grande-mais {
		font-size: 26px;
	}
}

/* GG (40px) no celular vira 28px (2026-10-23): título do hero ocupava 5 linhas em 390px. */
@media screen and (max-width: 767px) {
	.spic-tipografia-tamanho-extra-grande.spic-tipografia-tamanho-extra-grande {
		font-size: 28px;
	}
}