/**
 * Submenu do Mega Menu — estética e animação de entrada inspiradas na Skydio.
 * Renderizado por inc/submenu-mega.php, comportamento em js/submenu-mega.js.
 *
 * Sequência ao abrir o dropdown (tempos em --dg-submenu-*):
 *   1. o card branco do dropdown "desce" (revela de cima para baixo);
 *   2. a lista desliza levemente da direita e, somado a isso, o conteúdo de
 *      cada item (texto + seta) entra da esquerda com fade ("fade in left"),
 *      um após o outro, de cima para baixo — o de cima chega primeiro;
 *   3. cada linha divisória (superior e inferior) fica parada no lugar e
 *      "corre" da esquerda até o fim, como na Skydio, em cascata e com fade
 *      in próprio;
 *   4. o texto de cada item sobe por trás de uma máscara, logo após a sua
 *      linha, também com fade in próprio;
 *   5. a seta aparece por último.
 *
 * Tudo com @keyframes: o Elementor alterna o dropdown entre display:none e
 * flex, e isso reinicia as animações a cada abertura sem precisar de JS.
 *
 * Assim como na Skydio, a animação roda mesmo com "reduzir movimento" ligado
 * no sistema — é curta, não pisca e não se repete.
 *
 * Para ajustar no Elementor, sobrescreva as variáveis no container:
 *   selector .dg-submenu { --dg-submenu-destaque: #ff6600; }
 */

.dg-submenu {
	--dg-submenu-cor: #020202;
	--dg-submenu-cor-sub: #5b5b5b;
	--dg-submenu-destaque: #1888ca;
	--dg-submenu-linha: rgba(2, 2, 2, 0.3); /* marcada, para a corrida aparecer */
	--dg-submenu-fonte: "DM Sans", sans-serif;
	--dg-submenu-tamanho: 18px;
	--dg-submenu-tamanho-sub: 15px;
	--dg-submenu-espaco: 18px;

	/* Animações. --dg-submenu-lento multiplica TODOS os tempos (durações e
	   atrasos): 1 = ritmo original, 2 = duas vezes mais lento. */
	--dg-submenu-lento: 1.6;
	--dg-submenu-inicio: calc(120ms * var(--dg-submenu-lento));  /* espera o card começar a descer */
	--dg-submenu-cascata: calc(55ms * var(--dg-submenu-lento));  /* intervalo entre um item e o próximo */
	--dg-submenu-distancia: 140px; /* de quão à esquerda o conteúdo do item parte */
	--dg-submenu-linha-duracao: calc(1.4s * var(--dg-submenu-lento)); /* tempo da linha correr até o fim */
	--dg-submenu-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--dg-submenu-ease-saida: cubic-bezier(0.22, 1, 0.36, 1);

	width: 100%;
	font-family: var(--dg-submenu-fonte);
}

.dg-submenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Card do dropdown --------------------------------------------------- */

/*
 * O card branco (container filho do dropdown que contém o shortcode) se revela
 * de cima para baixo, como o painel da Skydio crescendo em altura. fill-mode
 * "backwards" solta o clip-path no fim, para não cortar a sombra do card.
 *
 * !important porque o card tem a classe .animated (entrada "Fade In" do
 * Elementor), e o Elementor zera .animated com !important quando o sistema
 * está com "reduzir movimento".
 */
.e-n-menu-content > .e-con > .e-con:has(.dg-submenu) {
	/* Mesmo valor de --dg-submenu-lento do .dg-submenu (o card fica fora dele). */
	--dg-submenu-lento: 1.6;

	animation: dg-submenu-card calc(0.5s * var(--dg-submenu-lento)) cubic-bezier(0.65, 0, 0.35, 1) backwards !important;
}

/* ---- Lista principal ---------------------------------------------------- */

.dg-submenu__lista {
	animation: dg-submenu-deslizar calc(0.6s * var(--dg-submenu-lento)) var(--dg-submenu-ease-saida) backwards;
	animation-delay: var(--dg-submenu-inicio);
}

.dg-submenu__lista > .dg-submenu__item {
	position: relative;
}

/*
 * Fade in left no conteúdo do item (texto + seta), na ordem da lista (--i).
 * Fica no conteúdo, e não no <li>, para as linhas não serem arrastadas junto:
 * elas ficam paradas e só "correm" até o fim.
 */
.dg-submenu__lista > .dg-submenu__item > .dg-submenu__link,
.dg-submenu__lista > .dg-submenu__item > .dg-submenu__linha {
	animation: dg-submenu-fade-esquerda calc(0.9s * var(--dg-submenu-lento)) var(--dg-submenu-ease-saida) backwards;
	animation-delay: calc(var(--dg-submenu-inicio) + var(--i, 0) * var(--dg-submenu-cascata));
}

/* Linha superior de cada item e inferior do último — "desenham" da esquerda. */
.dg-submenu__lista > .dg-submenu__item::before,
.dg-submenu__lista > .dg-submenu__item:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--dg-submenu-linha);
	transform-origin: left center;
	transition: background-color calc(0.3s * var(--dg-submenu-lento)) ease-in-out;
	/* Corre da esquerda até o fim (scaleX) e, somado a isso, faz fade in próprio. */
	animation:
		dg-submenu-linha var(--dg-submenu-linha-duracao) var(--dg-submenu-ease) both,
		dg-submenu-aparecer calc(0.7s * var(--dg-submenu-lento)) ease-out both;
	animation-delay: calc(var(--dg-submenu-inicio) + var(--i, 0) * var(--dg-submenu-cascata));
}

.dg-submenu__lista > .dg-submenu__item::before {
	top: 0;
}

.dg-submenu__lista > .dg-submenu__item:last-child::after {
	bottom: 0;
	animation-delay: calc(var(--dg-submenu-inicio) + (var(--i, 0) + 1) * var(--dg-submenu-cascata));
}

/* A linha fica azul no item em hover e na de baixo dele (topo do próximo). */
.dg-submenu__lista > .dg-submenu__item:hover::before,
.dg-submenu__lista > .dg-submenu__item:hover + .dg-submenu__item::before,
.dg-submenu__lista > .dg-submenu__item:last-child:hover::after {
	background-color: var(--dg-submenu-destaque);
}

/* Texto + seta lado a lado, a seta logo depois do texto. */
.dg-submenu__linha {
	display: flex;
	align-items: center;
	gap: 2px;
}

.dg-submenu__link {
	display: block;
	padding: var(--dg-submenu-espaco) 0;
	font-size: var(--dg-submenu-tamanho);
	font-weight: 500;
	line-height: 1.2;
	color: var(--dg-submenu-cor);
	text-decoration: none;
	transition: color calc(0.3s * var(--dg-submenu-lento)) ease-in-out;
}

.dg-submenu__linha > .dg-submenu__link {
	flex: 0 1 auto;
}

.dg-submenu__link:hover,
.dg-submenu__link:focus-visible,
.dg-submenu__item.is-atual > .dg-submenu__link,
.dg-submenu__item.is-atual > .dg-submenu__linha > .dg-submenu__link,
.dg-submenu__item.is-ancestral > .dg-submenu__linha > .dg-submenu__link,
.dg-submenu__item.is-aberto > .dg-submenu__linha > .dg-submenu__link {
	color: var(--dg-submenu-destaque);
}

/* Máscara + texto: o texto sobe de baixo para cima logo depois da sua linha. */
.dg-submenu__mascara {
	display: block;
	overflow: hidden;
	/* Fade in próprio do texto, somado à subida (e ao fade) do .dg-submenu__texto. */
	animation: dg-submenu-aparecer calc(0.8s * var(--dg-submenu-lento)) ease-out both;
	animation-delay: calc(var(--dg-submenu-inicio) + 120ms * var(--dg-submenu-lento) + var(--i, 0) * var(--dg-submenu-cascata));
}

.dg-submenu__mascara > .dg-submenu__texto {
	/* inline-block: a máscara recorta só a largura do texto. */
	display: inline-block;
	vertical-align: top;
	animation: dg-submenu-texto calc(0.55s * var(--dg-submenu-lento)) var(--dg-submenu-ease-saida) both;
	animation-delay: calc(var(--dg-submenu-inicio) + 120ms * var(--dg-submenu-lento) + var(--i, 0) * var(--dg-submenu-cascata));
}

/* ---- Texto do item ------------------------------------------------------ */

/* Sem sublinhado em nenhum nível: o destaque do hover é só a mudança de cor. */
.dg-submenu__texto {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

/* ---- Seta ">" ----------------------------------------------------------- */

/* Especificidade alta para anular o estilo de <button> do Hello Elementor/Kit. */
.dg-submenu button.dg-submenu__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: var(--dg-submenu-cor);
	cursor: pointer;
	transition: color calc(0.3s * var(--dg-submenu-lento)) ease-in-out;
	animation: dg-submenu-seta calc(0.45s * var(--dg-submenu-lento)) var(--dg-submenu-ease-saida) both;
	animation-delay: calc(var(--dg-submenu-inicio) + 300ms * var(--dg-submenu-lento) + var(--i, 0) * var(--dg-submenu-cascata));
}

.dg-submenu button.dg-submenu__toggle:hover,
.dg-submenu button.dg-submenu__toggle:focus {
	background: transparent;
	color: var(--dg-submenu-destaque);
	border: 0;
}

.dg-submenu button.dg-submenu__toggle:focus-visible {
	outline: 2px solid var(--dg-submenu-destaque);
	outline-offset: 1px;
}

/* Chevron desenhado com duas bordas de um quadrado girado 45°. */
.dg-submenu__toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -4px 0 0 -5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform calc(0.35s * var(--dg-submenu-lento)) var(--dg-submenu-ease), margin calc(0.35s * var(--dg-submenu-lento)) var(--dg-submenu-ease);
}

.dg-submenu .dg-submenu__item:hover > .dg-submenu__linha > .dg-submenu__toggle,
.dg-submenu .dg-submenu__item.is-aberto > .dg-submenu__linha > .dg-submenu__toggle {
	color: var(--dg-submenu-destaque);
}

/* Aberto: ">" gira para baixo. */
.dg-submenu__item.is-aberto > .dg-submenu__linha > .dg-submenu__toggle::before {
	margin: -6px 0 0 -3.5px;
	transform: rotate(135deg);
}

/* ---- Painel dos subitens ------------------------------------------------ */

.dg-submenu__painel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows calc(0.45s * var(--dg-submenu-lento)) var(--dg-submenu-ease);
}

.dg-submenu__item.is-aberto > .dg-submenu__painel {
	grid-template-rows: 1fr;
}

.dg-submenu__painel-inner {
	min-height: 0;
	overflow: hidden;
}

.dg-submenu__sublista {
	padding: 0 0 var(--dg-submenu-espaco) 0;
}

.dg-submenu__sublista .dg-submenu__link {
	padding: 7px 0;
	font-size: var(--dg-submenu-tamanho-sub);
	font-weight: 400;
	color: var(--dg-submenu-cor-sub);
}

.dg-submenu__sublista .dg-submenu__link:hover,
.dg-submenu__sublista .dg-submenu__link:focus-visible,
.dg-submenu__sublista .dg-submenu__item.is-atual > .dg-submenu__link {
	color: var(--dg-submenu-destaque);
}

/* Terceiro nível em diante: recuo leve. */
.dg-submenu__sublista .dg-submenu__sublista {
	padding: 0 0 4px 14px;
}

/* Subitens entram em sequência quando o painel abre. */
.dg-submenu__sublista > .dg-submenu__item {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity calc(0.25s * var(--dg-submenu-lento)) ease-out, transform calc(0.25s * var(--dg-submenu-lento)) ease-out;
}

.dg-submenu__item.is-aberto > .dg-submenu__painel > .dg-submenu__painel-inner > .dg-submenu__sublista > .dg-submenu__item {
	opacity: 1;
	transform: none;
	transition-duration: calc(0.4s * var(--dg-submenu-lento));
	transition-delay: calc((80ms + var(--j, 0) * 40ms) * var(--dg-submenu-lento));
}

/* ---- Avisos (só para editores) ----------------------------------------- */

.dg-submenu-aviso {
	margin: 0;
	padding: 10px 12px;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	font-size: 13px;
	color: #3c0a0b;
}

/* ---- Animações ---------------------------------------------------------- */

@keyframes dg-submenu-card {
	from {
		clip-path: inset(0 0 100% 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes dg-submenu-deslizar {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes dg-submenu-fade-esquerda {
	from {
		opacity: 0;
		transform: translateX(calc(var(--dg-submenu-distancia) * -1));
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes dg-submenu-aparecer {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dg-submenu-linha {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes dg-submenu-texto {
	from {
		opacity: 0;
		transform: translateY(105%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dg-submenu-seta {
	from {
		opacity: 0;
		transform: translateX(-6px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.dg-submenu {
		--dg-submenu-tamanho: 17px;
		--dg-submenu-espaco: 15px;
	}

	/* Alvo de toque maior. */
	.dg-submenu button.dg-submenu__toggle {
		width: 36px;
		height: 36px;
	}
}