/**
 * Compatibilidade Elementor <-> tema.
 *
 * Carregado DEPOIS do CSS do Elementor (ver mdl_elementor_compat_assets(),
 * prioridade 100 em wp_enqueue_scripts), porque o CSS do Elementor e do Kit
 * carregam a seguir ao mdl-app e, em caso de empate de especificidade, ganha
 * quem carrega por último.
 */

/* -------------------------------------------------------------------------
 * 1. Largura e espaçamento do container
 *
 * As secções do tema são full-bleed e já trazem o seu próprio
 * max-w-container-max e padding interno. O container do Elementor à volta
 * não pode acrescentar largura máxima, padding nem margens, senão o layout
 * fica encaixado e desalinhado face ao template PHP.
 * ---------------------------------------------------------------------- */

.mdl-section-wrap,
.mdl-section-wrap > .e-con-inner {
	--content-width: 100%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.mdl-section-wrap > .elementor-element,
.mdl-section-wrap > .e-con-inner > .elementor-element {
	margin: 0;
	width: 100%;
	max-width: none;
}

/* As secções já trazem o seu próprio py-*; o Elementor não acrescenta gap. */
.mdl-section-wrap .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* O mesmo, para containers criados à mão que contenham uma secção do tema.
 * Ignorado por browsers sem :has(), onde a classe .mdl-section-wrap resolve. */
.e-con:has(.mdl-section) {
	--content-width: 100%;
	max-width: none;
	padding: 0;
}

/* Várias secções usam elementos absolutos que saem da caixa (blurs, o "8"
 * gigante, a faixa em -skew). O wrapper do widget não pode recortá-los. */
.elementor-widget-container:has(> .mdl-section) {
	overflow: visible;
}

/* -------------------------------------------------------------------------
 * 2. Visibilidade dentro do editor
 *
 * .reveal-on-scroll arranca a opacity:0 e só é revelado por main.js quando
 * entra no viewport. No editor, o Elementor substitui os nós no DOM a cada
 * seleção ou alteração e os nós novos nunca chegam a ser observados — o
 * conteúdo desaparecia e não havia nada visível para clicar.
 *
 * A animação fica intacta no site publicado; só se desliga dentro do editor.
 * ---------------------------------------------------------------------- */

.mdl-elementor-editing .reveal-on-scroll {
	opacity: 1;
	transform: none;
	transition: none;
}

/* -------------------------------------------------------------------------
 * 3. Tipografia
 *
 * O Kit do Elementor emite regras como `.elementor-kit-N h1 { font-family }`,
 * com especificidade (0,1,1). As classes Tailwind do tema estão nos próprios
 * elementos e valem (0,1,0) — perderiam.
 *
 * Só é preciso repor os elementos que NÃO têm classe própria, ou seja, os que
 * dependem de herança. O `:not([class])` garante isso e leva a especificidade
 * a (0,2,1), acima do Kit. Elementos com classe Tailwind ficam intocados por
 * esta regra — é deliberado: se o dono do site definir tipografia em
 * Site Settings, essa é uma escolha explícita dele.
 * ---------------------------------------------------------------------- */

.mdl-section :is(h1, h2, h3, h4, h5, h6, p, span, a, li, em, strong):not([class]) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Margens de títulos e parágrafos sem classe: o tema controla o espaçamento
 * com space-y-* no elemento pai, por isso qualquer margem herdada do Kit
 * duplica o espaço. Os que têm classe (mb-4, mb-6, ...) mantêm a sua. */
.mdl-section :is(h1, h2, h3, h4, h5, h6, p, ul, ol):not([class]) {
	margin: 0;
	padding: 0;
}

/* Os links do tema trazem o seu próprio estilo; o Kit define cor e
 * sublinhado em `a` e nunca deve ganhar aos links das secções. */
.mdl-section a:not([class]) {
	color: inherit;
	text-decoration: none;
}