/*
 * Destaque do item "Faça uma Doação" no menu.
 *
 * Vale para todo o site, então este arquivo é minúsculo e carregado sempre — o CSS
 * do formulário continua saindo só nas páginas que têm o widget.
 *
 * Aplica-se a qualquer item de menu com a classe `pse-menu-destaque`, que é definida
 * em Aparência → Menus (campo "Classes CSS" do item).
 */

:root {
	--pse-menu-fundo: #ffbe1a;
	--pse-menu-fundo-hover: #e9a800;

	/*
	 * Texto em verde escuro da marca, não branco: branco sobre #FFBE1A dá ~1,8:1 de
	 * contraste (o mínimo da WCAG é 4,5:1) e some no fundo âmbar — foi o que apareceu
	 * no teste. O verde sobre âmbar passa com folga e mantém a identidade.
	 * Para voltar ao branco, basta trocar esta linha por `#fff`.
	 */
	--pse-menu-texto: #0f471e;
}

/* `a` explícito e dupla classe para vencer o estilo de menu do Elementor. */
.pse-menu-destaque > a,
.pse-menu-destaque.menu-item > a,
.pse-menu-destaque > .elementor-item,
li.pse-menu-destaque > a.elementor-item {
	padding: 10px 20px;
	border-radius: 6px;
	background-color: var( --pse-menu-fundo );
	color: var( --pse-menu-texto );
	fill: var( --pse-menu-texto );
	font-weight: 700;
	transition: background-color 0.15s ease;
}

.pse-menu-destaque > a:hover,
.pse-menu-destaque > a:focus,
.pse-menu-destaque > .elementor-item:hover,
.pse-menu-destaque > .elementor-item:focus,
li.pse-menu-destaque > a.elementor-item:hover,
li.pse-menu-destaque > a.elementor-item.elementor-item-active {
	background-color: var( --pse-menu-fundo-hover );
	color: var( --pse-menu-texto );
	fill: var( --pse-menu-texto );
}

/*
 * O Elementor desenha um sublinhado animado nos itens do menu; sobre um botão
 * cheio ele fica solto no meio do fundo âmbar.
 */
.pse-menu-destaque > .elementor-item::before,
.pse-menu-destaque > .elementor-item::after {
	display: none !important;
}

/* No menu sanfona do celular o botão ocupa a largura toda. */
@media ( max-width: 767px ) {
	.pse-menu-destaque > a,
	.pse-menu-destaque > .elementor-item {
		display: block;
		text-align: center;
	}
}