/* ==========================================================================
   Menu principal (templates/header.php): painel largo ou dropdown simples.
   Substitui o antigo .mega-menu do _header.scss. Ficheiro à parte para não recompilar o style.css
   (o compilador Sass daqui gera um style.css diferente do teu); pode passar para um parcial SCSS.
   Painel: itens com subitens de 3.º nível, mais de 7 subitens ou destaque com imagem.
   ========================================================================== */

#menu .menu-topo { list-style: none; margin: 0; padding: 0; }

/* anula regras genéricas antigas de "nav li" (altura fixa, laranja no hover, "ponte" em todos os li) */
#menu li { height: auto; line-height: 1.4; border-bottom: 0; }
#menu li:hover { color: inherit; }
#menu li:hover::after { content: none; }

#menu .menu-item { position: relative; }
/* o painel largo posiciona-se em relação ao header (toda a largura), não ao item */
#menu .menu-item.com-painel { position: static; }

#menu .menu-link {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
/* sublinhado que cresce no item ativo */
#menu .menu-link::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 4px;
	height: 2px;
	background: var(--bs-rosa, #e4007b);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
#menu .menu-item:hover > .menu-link,
#menu .menu-item:focus-within > .menu-link { color: var(--bs-rosa, #e4007b); }
#menu .menu-item:hover > .menu-link::before,
#menu .menu-item:focus-within > .menu-link::before { transform: scaleX(1); }
/* ponte invisível: o rato pode descer do link até ao painel sem o fechar */
#menu .com-painel > .menu-link::after,
#menu .com-dropdown > .menu-link::after {
	content: '';
	position: absolute;
	left: -12px; right: -12px; top: 100%;
	height: 30px;
}

/* --- abrir/fechar: pequeno atraso a abrir, tolerância a fechar (não "pisca" com o rato de passagem) --- */
#menu .menu-painel,
#menu .menu-dropdown {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease .2s, transform .18s ease .2s, visibility 0s linear .38s;
	z-index: 1030;
}
#menu .menu-item:hover > .menu-painel,
#menu .menu-item:focus-within > .menu-painel,
#menu .menu-item:hover > .menu-dropdown,
#menu .menu-item:focus-within > .menu-dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s ease .08s, transform .18s ease .08s, visibility 0s linear .08s;
}
/* rato num item e foco do teclado noutro: fica só o do rato (senão abriam dois sobrepostos) */
#menu .menu-topo:has(> .menu-item:hover) > .menu-item:focus-within:not(:hover) > .menu-painel,
#menu .menu-topo:has(> .menu-item:hover) > .menu-item:focus-within:not(:hover) > .menu-dropdown {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
}

/* --- painel largo --- */
#menu .menu-painel {
	position: absolute;
	left: 0; right: 0; top: 100%;
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .22);
	font-weight: 400;
	font-size: 1rem;
}
#menu .menu-painel > .cont { padding-top: 28px; padding-bottom: 24px; }
#menu .menu-painel-grelha { display: grid; grid-template-columns: 1fr; gap: 40px; }
#menu .menu-painel-grelha.com-destaque { grid-template-columns: 1fr 260px; }
#menu .menu-colunas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 26px 36px;
	align-content: start;
}
#menu .menu-coluna-titulo {
	display: block;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #eee;
	color: #303030;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
#menu .menu-coluna-titulo:hover { color: var(--bs-rosa, #e4007b); }
#menu .menu-coluna ul { list-style: none; margin: 0; padding: 0; }
#menu .menu-coluna li { padding: 4px 0; font-size: .92rem; font-weight: 400; }
#menu .menu-coluna li a {
	display: inline-block;
	color: #555;
	text-decoration: none;
	transition: color .15s ease, transform .15s ease;
}
#menu .menu-coluna li a:hover { color: var(--bs-rosa, #e4007b); transform: translateX(2px); }
#menu .menu-coluna .menu-mais { font-weight: 600; font-size: .85rem; color: #303030; }

#menu .menu-destaque { display: block; color: #303030; text-decoration: none; }
#menu .menu-destaque img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	transition: transform .3s ease;
}
#menu .menu-destaque:hover img { transform: scale(1.02); }
#menu .menu-destaque span { display: block; padding-top: 10px; font-weight: 700; }
#menu .menu-destaque:hover span { color: var(--bs-rosa, #e4007b); }

#menu .menu-ver-tudo {
	display: inline-block;
	margin-top: 22px;
	color: var(--bs-rosa, #e4007b);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}

/* --- dropdown simples (poucos subitens) --- */
#menu .menu-dropdown {
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 10px 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .22);
}
#menu .com-dropdown.abre-esquerda .menu-dropdown { left: auto; right: -18px; }
#menu .menu-dropdown li { font-size: .92rem; font-weight: 400; }
#menu .menu-dropdown a {
	display: block;
	padding: 8px 18px;
	color: #333;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
#menu .menu-dropdown a:hover { background: #f5f5f5; color: var(--bs-rosa, #e4007b); }

@media (prefers-reduced-motion: reduce) {
	#menu .menu-painel, #menu .menu-dropdown, #menu .menu-link::before { transition: none !important; }
}