/* NG Megamenu — transforma dropdowns longos (6+ itens) do menu principal (#top-menu) de uma
coluna unica (saia da tela, exige scroll) num painel largo com colunas legiveis. So atua no
menu desktop (#top-menu); o menu mobile do Divi fica intocado (continua acordeao vertical).

Historico de correcoes 09-11-2026 (usuario testou e corrigiu varias vezes na mesma sessao):
1) 1a versao: so colunas, sem nenhum acabamento visual.
2) Redesign com barra verde, coluna "Formas de Preparo" com fundo tintado, hover com barra
   deslizante - ainda achado "amador".
3) Adicionados icones de emoji por item - usuario rejeitou ("parecendo site de adolescente").
   REMOVIDOS. Sem emoji/icone em lugar nenhum deste menu.
4) Texto quebrando em 2 linhas pra itens longos, ao lado de itens de 1 linha so, deixava a
   grade com degraus ("torto e desalinhado"). Fix definitivo: `white-space:nowrap` em todo
   item (nunca quebra linha) + painel bem mais largo (so a largura evita quebra, nao faz
   sentido pedir "nowrap" sem espaco pra caber o rotulo mais longo dos 12 idiomas - alguns
   passam de 28 caracteres, ex. "Immunity and Antiviral Action", "Système Nerveux et
   Cognition"). O painel ficou maior na tela de proposito - pedido explicito do usuario
   ("aumenta a desgraca do megamenu na tela se for o caso").
5) Coluna "Formas de Preparo" achada "sem simetria" - a causa era o `align-items:stretch` no
   container flex esticando o fundo tintado pra bater a altura da coluna de Usos (bem mais
   alta, 4 linhas x 3 colunas), deixando so 2 itens colados no topo com um vao vazio enorme
   embaixo. Fix: conteudo da coluna de preparo centralizado verticalmente, e os itens
   passaram a usar o MESMO estilo de lista simples da coluna de usos (sem cartao com borda
   branca) - as duas colunas compartilham a mesma linguagem visual, diferindo so pela cor de
   fundo e pelo divisor. */

:root{
	--ng-mega-accent:#359138;
	--ng-mega-accent-2:#4a6b2e;
	--ng-mega-ink:#2e3b25;
	--ng-mega-muted:#7c8a70;
	--ng-mega-border:rgba(90,110,70,.16);
	--ng-mega-prep-bg:#f6f9f1;
}

#top-menu .menu-item-has-children > .sub-menu.ng-megamenu{
	display:flex;
	align-items:stretch;
	width:1150px;
	max-width:calc(100vw - 40px);
	padding:0;
	gap:0;
	border-radius:14px;
	overflow:hidden;
	box-shadow:0 24px 48px -16px rgba(20,30,10,.28),0 6px 18px rgba(20,30,10,.08);
	border-top:3px solid var(--ng-mega-accent);
	/* O Divi mantem pointer-events:auto no dropdown mesmo fechado (opacity:0), pra nao perder o
	hover quando o mouse desce do link ate o menu - mas a caixa fechada do "Usos e Preparos" e
	MUITO alta (~600px, uma por item empilhado) e fica logo abaixo do menu, cobrindo conteudo da
	pagina (cards, sidebar) de forma invisivel porem clicavel/hoverable. Achado ao vivo 09-11
	(usuario, de/ja): passar o mouse em "Mais Avaliados" ou nos cards de familia, longe do menu,
	abria o megamenu sozinho. Fix: pointer-events:none por padrao, so liberado quando o proprio
	<li> (a area VISIVEL do link) esta em hover/foco - a caixa invisivel nunca mais intercepta
	cliques/hover de conteudo por baixo dela. */
	pointer-events:none;
	/* posicao padrao (centrada sob o item) - o JS recalcula pra pixel exato no mouseenter/focus
	pra nunca deixar o painel cortar na borda da tela (achado ao vivo 09-11: centralizado por
	porcentagem cortava a direita em telas medias, com "Usos e Preparos" perto da borda). */
	left:50%;
	transform:translateX(-50%);
}

#top-menu .menu-item-has-children:hover > .sub-menu.ng-megamenu,
#top-menu .menu-item-has-children:focus-within > .sub-menu.ng-megamenu{
	pointer-events:auto;
}

.ng-mega-col-usos{flex:3;min-width:0;padding:26px 30px 28px;}
.ng-mega-col-prep{
	flex:1;min-width:260px;padding:26px 30px 28px;
	background:var(--ng-mega-prep-bg);
	border-left:1px solid var(--ng-mega-border);
	display:flex;flex-direction:column;justify-content:center;
}

.ng-mega-heading{
	display:flex;align-items:center;gap:8px;
	font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
	color:var(--ng-mega-muted);margin:0 0 16px;white-space:nowrap;
}
.ng-mega-heading::before{
	content:"";width:14px;height:2px;border-radius:2px;
	background:var(--ng-mega-accent);flex:none;
}

.ng-megamenu .ng-mega-grid{
	/* o Divi trata qualquer <ul> aninhado dentro de .sub-menu como um flyout de submenu de
	2o nivel (position:absolute + opacity:0 + visibility:hidden nos filhos) - precisa forcar de
	volta pro fluxo normal e visivel, senao a grade fica sem altura no pai e totalmente
	transparente mesmo com os filhos em opacity:1 (achado ao vivo 09-11). */
	position:static !important;
	opacity:1 !important;
	visibility:visible !important;
	display:grid;
	grid-template-columns:repeat(3,max-content);
	column-gap:32px;
	row-gap:4px;
	list-style:none;margin:0;padding:0;
}
.ng-megamenu .ng-mega-grid.ng-mega-grid-single{
	grid-template-columns:max-content;
	row-gap:4px;
}

.ng-megamenu .ng-mega-grid > li{width:auto;visibility:visible !important;}
.ng-megamenu .ng-mega-grid > li > a{
	position:relative;
	display:block;
	/* nunca quebra linha - cada item do menu e um rotulo curto, quebrar em 2 linhas ao lado de
	itens de 1 linha so deixava a grade com degraus/desalinhada (achado ao vivo 09-11). O painel
	e largo o bastante (1150px) pra caber o rotulo mais longo dos 12 idiomas sem cortar. */
	white-space:nowrap;
	padding:9px 14px 9px 16px;margin:0 -14px;border-radius:7px;
	line-height:1.3;font-size:14px;color:var(--ng-mega-ink);
	transition:background-color .15s ease,color .15s ease;
	visibility:visible !important;
}
.ng-megamenu .ng-mega-grid > li > a::before{
	content:"";position:absolute;left:2px;top:50%;
	width:3px;height:0;border-radius:2px;background:var(--ng-mega-accent);
	transform:translateY(-50%);transition:height .15s ease;
}
.ng-megamenu .ng-mega-grid > li > a:hover,
.ng-megamenu .ng-mega-grid > li > a:focus{
	background:#eef5e6;color:var(--ng-mega-accent-2);
}
.ng-megamenu .ng-mega-grid > li > a:hover::before,
.ng-megamenu .ng-mega-grid > li > a:focus::before{
	height:60%;
}

@media (max-width:1250px){
	#top-menu .menu-item-has-children > .sub-menu.ng-megamenu{width:960px;}
	.ng-megamenu .ng-mega-grid{grid-template-columns:repeat(2,max-content);}
}
@media (max-width:760px){
	#top-menu .menu-item-has-children > .sub-menu.ng-megamenu{width:94vw;}
	.ng-mega-col-usos,.ng-mega-col-prep{padding:20px 22px 22px;}
	.ng-megamenu .ng-mega-grid{grid-template-columns:max-content;column-gap:0;}
	.ng-megamenu .ng-mega-grid > li > a{white-space:normal;}
}

html[data-ng-theme="dark"] #top-menu .menu-item-has-children > .sub-menu.ng-megamenu{background:#20261a;box-shadow:0 24px 48px -16px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.3);}
html[data-ng-theme="dark"] .ng-mega-col-prep{background:#1b2115;border-color:#39462f;}
html[data-ng-theme="dark"] .ng-mega-heading{color:#8a9480;}
html[data-ng-theme="dark"] .ng-megamenu .ng-mega-grid > li > a{color:#dce6d2;}
html[data-ng-theme="dark"] .ng-megamenu .ng-mega-grid > li > a:hover,
html[data-ng-theme="dark"] .ng-megamenu .ng-mega-grid > li > a:focus{background:#2a331f;color:#afcb37;}
@media (prefers-color-scheme: dark){
	html:not([data-ng-theme="light"]) #top-menu .menu-item-has-children > .sub-menu.ng-megamenu{background:#20261a;box-shadow:0 24px 48px -16px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.3);}
	html:not([data-ng-theme="light"]) .ng-mega-col-prep{background:#1b2115;border-color:#39462f;}
	html:not([data-ng-theme="light"]) .ng-mega-heading{color:#8a9480;}
	html:not([data-ng-theme="light"]) .ng-megamenu .ng-mega-grid > li > a{color:#dce6d2;}
	html:not([data-ng-theme="light"]) .ng-megamenu .ng-mega-grid > li > a:hover,
	html:not([data-ng-theme="light"]) .ng-megamenu .ng-mega-grid > li > a:focus{background:#2a331f;color:#afcb37;}
}