/*
 * Almar Comunicação — base global.
 *
 * Variáveis de layout, resets leves e utilitários transversais.
 * Cores, fontes e espaçamentos vêm dos presets (--wp--preset--*).
 *
 * Breakpoints (desktop-first; design base 1440px)
 * Mobile:     max-width 767px
 * Tablet:     768px – 899px
 * Notebooks:  900px – 1280px
 * Desktop:    1281px – 2079px (estilos sem @media)
 * UltraWide:  min-width 2080px
 */

:root {
	/* O JS mede o cabeçalho e sobrescreve; 104px = logo 72px + 2x16px de padding. */
	--almar-altura-cabecalho: 104px;
	--almar-margem-lateral: clamp(16px, 5vw, 64px);
	--almar-largura-total: 1280px;
}

/* As seções controlam o próprio respiro vertical; nada de emenda entre elas. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* RF05 — rolagem suave até a âncora, sem esconder o título sob o cabeçalho. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.wp-site-blocks [id] {
	scroll-margin-top: calc(var(--almar-altura-cabecalho) + 16px);
}

/*
 * O <mark> é o que o editor produz ao colorir um trecho de texto. Sem fundo
 * explícito ele herda o amarelo do navegador — e o KSES remove um
 * "background-color: transparent" inline ao gravar o post.
 */
mark.has-inline-color {
	background-color: transparent;
}