/* ==========================================================================
   BASE — atalhos das variáveis, reset, tipografia, utilitários

   ⚠ As CORES estão todas em assets/css/cores.css.
   Fontes, tamanhos e espaçamentos vêm do theme.json: os atalhos abaixo
   (--fonte, --texto-*…) só encurtam os nomes que o WordPress gera.
   ========================================================================== */

:root {
	/* Cores, sombras, gradientes e sobreposições: assets/css/cores.css */

	/* Tipografia (theme.json → settings.typography) */
	--fonte:     var(--wp--preset--font-family--principal);
	--texto-2xs: var(--wp--preset--font-size--2-xs);
	--texto-xs:  var(--wp--preset--font-size--xs);
	--texto-sm:  var(--wp--preset--font-size--sm);
	--texto-rotulo: var(--wp--preset--font-size--rotulo);
	--texto-md:  var(--wp--preset--font-size--md);
	--texto-base: var(--wp--preset--font-size--base);
	--texto-lg:  var(--wp--preset--font-size--lg);
	--texto-xl:  var(--wp--preset--font-size--xl);
	--texto-destaque: var(--wp--preset--font-size--destaque);
	--titulo-3:  var(--wp--preset--font-size--titulo-3);
	--titulo-2:  var(--wp--preset--font-size--titulo-2);
	--titulo-destaque: var(--wp--preset--font-size--titulo-destaque);
	--titulo-1:  var(--wp--preset--font-size--titulo-1);
	--titulo-secao: var(--wp--preset--font-size--titulo-secao);
	--titulo-hero:  var(--wp--preset--font-size--titulo-hero);
	--preco:          var(--wp--preset--font-size--preco);
	--preco-destaque: var(--wp--preset--font-size--preco-destaque);
	--titulo-display: var(--wp--preset--font-size--titulo-display);

	/* Espaçamentos (theme.json → settings.spacing) */
	--esp-xs:  var(--wp--preset--spacing--10);
	--esp-s:   var(--wp--preset--spacing--20);
	--esp-m:   var(--wp--preset--spacing--30);
	--esp-l:   var(--wp--preset--spacing--40);
	--esp-xl:  var(--wp--preset--spacing--50);

	/* Outros (theme.json → settings.custom) */
	--raio-sm:        var(--wp--custom--raio--pequeno);
	--raio-md:        var(--wp--custom--raio--medio);
	--raio-lg:        var(--wp--custom--raio--grande);
	--container:      var(--wp--custom--container);
	--gutter:         var(--wp--custom--gutter);

	/* Movimento (theme.json → settings.custom.movimento) */
	--mov-curva:       var(--wp--custom--movimento--curva);
	--mov-curva-suave: var(--wp--custom--movimento--curva-suave);
	--mov-duracao:     var(--wp--custom--movimento--duracao);
	--mov-rapido:      var(--wp--custom--movimento--duracao-rapida);
	--mov-distancia:   var(--wp--custom--movimento--distancia);
	--mov-intervalo:   var(--wp--custom--movimento--intervalo);
	--mov-desfoque:    var(--wp--custom--movimento--desfoque);

	--header-h: 90px;
}

/* Reset ------------------------------------------------------------------ */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 12px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--fonte);
	color: var(--cor-texto);
	background: var(--cor-branco);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img {
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fonte);
	color: inherit;
}

a {
	color: var(--cor-bronze);
	text-underline-offset: 3px;
}

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

:focus-visible {
	outline: 2px solid var(--cor-primaria);
	outline-offset: 3px;
}

button,
input,
select,
textarea {
	font: inherit;
}

/* Só se o modo de animações for "desligado" (Personalizar → HL Marketing Digital → Animações) */
@media (prefers-reduced-motion: reduce) {
	html.hl-mov-desligado { scroll-behavior: auto; }
	html.hl-mov-desligado *,
	html.hl-mov-desligado *::before,
	html.hl-mov-desligado *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Utilitários ------------------------------------------------------------ */

.hl-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hl-skip-link:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--cor-escuro);
	color: var(--cor-branco);
	border-radius: var(--raio-sm);
}

/* Quebras de linha só no desktop */
@media (max-width: 900px) {
	.hl-br { display: none; }
}

/* Alinhamentos do editor (artigos) */
.alignleft  { float: left;  margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }

.wp-caption-text,
figcaption {
	font-size: var(--texto-sm);
	color: var(--cor-cinza);
}