/* Corrige o empilhamento e o comportamento dos menus suspensos do
   Elementor (Cadastro, mega menu de Produtos) nas páginas do wizard de
   cadastro, que bootstrapam o WordPress fora do fluxo normal de
   renderização de uma página Elementor — por isso o JS que normalmente
   cuida de hover/posicionamento desses menus não roda aqui.
   Usado por cadastro-empresa.php, cadastro-veterinario.php e
   cadastro-mensagem.php — mantenha os três em sincronia com este
   arquivo em vez de duplicar este CSS inline neles. */

/* O container do header tem uma animação de entrada configurada no
   Elementor (classe .elementor-invisible, visibility:hidden até o JS de
   animação rodar no carregamento padrão da página). Fora do fluxo normal,
   esse JS nunca dispara — força visível só dentro do header. */
.elementor-location-header .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

/* O header (sticky) e os menus suspensos precisam ficar sempre acima da
   faixa "hero" da página — sem isso, o menu suspenso abre por baixo do
   conteúdo da página. */
body .elementor-location-header {
	position: relative !important;
	z-index: 100000 !important;
	/* A caixa do header tem altura fixa (125px) menor que o conteúdo real
	   (logo + ícones sociais + menu, ~163px) porque o JS do Elementor que
	   normalmente recalcula essa altura não roda nesta página (ver topo do
	   arquivo). O menu então vaza pra fora da própria caixa do header e,
	   com o z-index acima, passa a pintar por cima do hero logo abaixo. */
	height: auto !important;
	min-height: 165px !important;
}
body .elementor-nav-menu__container,
body #mega-menu-produtos,
body .mega_menu_show {
	position: relative !important;
	z-index: 100001 !important;
}

/* O submenu ".elementor-nav-menu--dropdown" (ul.sub-menu) precisa
   continuar "position: absolute" (como o próprio Elementor define) pra
   não ocupar espaço no fluxo do menu horizontal. Se ele virar "relative",
   o <li> pai alarga pra caber o submenu inteiro, empurrando os itens
   seguintes do menu pra uma segunda linha — e o submenu fica solto,
   deslocado do item que o abriu. */
body .elementor-nav-menu--main li.menu-item-has-children > .elementor-nav-menu--dropdown {
	position: absolute !important;
	z-index: 100001 !important;
}

/* Esse menu nunca teve fundo sólido de verdade — nunca aparecia porque
   sempre abria sobre fundo claro no resto do site. Aqui, sobre uma faixa
   escura (hero), a transparência fica visível. Força um fundo branco. */
body #mega-menu-produtos,
body #mega-menu-produtos-container,
body .mega_menu_show,
body .elementor-nav-menu--dropdown {
	background-color: #fff !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}

/* O submenu "Cadastro" (ul.sub-menu.elementor-nav-menu--dropdown) depende
   do JS do Elementor pra aparecer no hover, e esse JS não roda por
   completo nesta página. Força via CSS puro, sem depender do JS.
   Exclui o item ".produtos-menu" (a classe fica no <li>, não no
   dropdown): esse item já tem seu próprio mega menu com JS dedicado
   (sempre funcionou aqui, ver jQuery('.produtos-menu').mouseover(...) no
   rodapé do tema) — o submenu padrão do Elementor por baixo dele é só um
   placeholder vazio e nunca deveria aparecer; forçar o display nele
   criava uma caixinha branca vazia por cima do mega menu de verdade (ou,
   se não excluído corretamente, chegava a empurrar o mega menu de
   verdade pra aparecer fora de hora). */
body li.menu-item-has-children:not(.produtos-menu):hover > .elementor-nav-menu--dropdown {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* A posição horizontal do submenu normalmente vem de uma variável CSS
   calculada em JS pelo Elementor no carregamento da página — como esse
   JS não roda aqui, a variável fica indefinida e o navegador posiciona o
   submenu num lugar arbitrário. Fixa a posição manualmente, relativa ao
   próprio item do menu. */
body li.menu-item-has-children:not(.produtos-menu) > .elementor-nav-menu--dropdown {
	left: 0 !important;
	right: auto !important;
	top: 100% !important;
	margin-top: 0 !important;
}