/* =========================================================
   TSG — base
   Variáveis de layout, resets leves e utilitários transversais.
   Cor, fonte e espaçamento saem de theme.json: aqui só se consome
   var(--wp--preset--*) e var(--wp--custom--*). Nenhum hex.
   ========================================================= */

:root {
	/* O JS mede o cabeçalho e sobrescreve este valor (assets/js/cabecalho.js).
	   94px = pílula de 70px + 2×12px de respiro da faixa: um valor inicial razoável,
	   para a página ter layout correto mesmo sem JS. */
	--tsg-altura-cabecalho: 94px;
}

/* Âncora que não some sob o cabeçalho fixo. :where() mantém a especificidade baixa,
   permitindo que uma seção ajuste ou remova a compensação quando necessário. */
:where(.wp-site-blocks [id]) {
	scroll-margin-top: calc(
		var(--tsg-altura-cabecalho) + var(--wp--preset--spacing--20)
	);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip, não hidden: contém overflow horizontal sem transformar o body em container
	   de scroll, o que quebraria a rolagem suave das âncoras. */
	overflow-x: clip;
}

/* O blockGap global do Gutenberg cria margem entre o template-part do cabeçalho e
   o main. Como o cabeçalho é fixed e sai do fluxo, essa margem expõe uma faixa do
   fundo do body antes do hero. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

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

/* ---------------------------------------------------------
   Acessibilidade
   --------------------------------------------------------- */

/* Foco sempre visível. Site público de concessão pública: WCAG não é opcional. */
.wp-site-blocks :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--marca);
	outline-offset: 3px;
	border-radius: var(--wp--custom--raio-botao);
}

/* Sobre fundo escuro o anel azul da marca some — clareia para manter o contraste. */
.wp-site-blocks .has-fundo-escuro-background-color :where(a, button, input, [tabindex]):focus-visible,
.wp-site-blocks .tsg-abertura :where(a, button, input, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--destaque-claro);
}

/* Texto só para leitor de tela. O core define isso para alguns blocos, mas não como
   utilitário do tema — e o rodapé e o seletor de idiomas dependem dele. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* Skip link "Pular para o conteúdo": o WordPress o injeta sozinho em temas de bloco
   (wp-includes/block-template.php), apontando para o primeiro <main>. Só o visual
   quando recebe foco é nosso. */
.wp-site-blocks .skip-link:focus,
.skip-link:focus {
	position: fixed !important;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	clip: auto;
	clip-path: none;
	background-color: var(--wp--preset--color--fundo-escuro);
	color: var(--wp--preset--color--branco);
	border-radius: var(--wp--custom--raio-botao);
	box-shadow: var(--wp--custom--sombra-forte);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	text-decoration: none;
}

/* main recebe foco programático pelo skip link, mas não deve mostrar anel ao clique. */
.wp-site-blocks main:focus {
	outline: none;
}
html {
	font-size: calc(100% * var(--tsg-escala-texto, 1));
}

.tsg-acessibilidade {
	position: fixed;
	right: var(--wp--preset--spacing--20);
	bottom: var(--wp--preset--spacing--20);
	z-index: 50;
}

.tsg-acessibilidade__gatilho,
.tsg-acessibilidade__painel button {
	border: 1px solid var(--wp--preset--color--marca);
	background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--marca);
	font: inherit;
	cursor: pointer;
}

.tsg-acessibilidade__gatilho {
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--raio-pill);
	font-weight: 700;
	box-shadow: var(--wp--custom--sombra);
}

.tsg-acessibilidade__painel {
	position: absolute;
	right: 0;
	bottom: 58px;
	width: 220px;
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--custom--linha);
	border-radius: var(--wp--custom--raio);
	background: var(--wp--preset--color--branco);
	box-shadow: var(--wp--custom--sombra-forte);
}

.tsg-acessibilidade__titulo {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.tsg-acessibilidade__painel button {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: var(--wp--custom--raio-botao);
	text-align: left;
}

html.tsg-alto-contraste {
	filter: contrast(1.35) saturate(0.85);
}

html.tsg-alto-contraste a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}