/*
 * Mega menu do cabeçalho, e o acordeão que ele vira na gaveta do celular.
 *
 * Fica fora das folhas de bloco de propósito: o mesmo componente é montado
 * pelo site-header (desktop) e pelo drawer-menu (celular). Repetir as regras
 * nas duas folhas seria a mesma CSS divergindo na primeira vez que alguém
 * ajustasse uma delas.
 *
 * Depende de lm-base.css: todos os apelidos de token (--ink, --paper,
 * --line, --accent, --gutter) vêm de lá.
 */

/* ---------------------------------------------------------------------
 * BARRA
 * ------------------------------------------------------------------ */

.lm-mega {
	position: relative;
}

/*
 * Dentro do cabeçalho, quem ancora o painel é o próprio <header>, e não a
 * <nav>: a nav ocupa só a faixa entre a marca e a lupa, e um painel preso
 * nela sai com uns 400px de largura — a coluna de preview fica com uma
 * palavra por linha. O .site-header já é position:sticky, então serve de
 * bloco de contenção sem precisar de mais nada.
 *
 * O `position: relative` acima continua valendo para quando o bloco
 * desktop-nav for inserido sozinho, fora do cabeçalho.
 */
.site-header .lm-mega {
	position: static;
}

.lm-mega__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-mega__raiz {
	list-style: none;
}

.lm-mega__gatilho {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 120ms ease, border-color 120ms ease;
}

.lm-mega__gatilho:hover,
.lm-mega__gatilho:focus-visible,
.lm-mega__raiz--aberto .lm-mega__gatilho {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.lm-mega__gatilho[aria-current="page"] {
	color: var(--accent);
}

.lm-mega__seta {
	transition: transform 160ms ease;
}

.lm-mega__raiz--aberto .lm-mega__seta {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
 * PAINEL
 *
 * Sai do fluxo e ocupa a largura do cabeçalho, não a do <li> que o abriu —
 * por isso ele mora num container irmão da <ul>, e não dentro do item.
 * ------------------------------------------------------------------ */

.lm-mega__paineis {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
}

/*
 * Alinhado à caixa de conteúdo do cabeçalho — os mesmos 40px de recuo que a
 * marca e a lupa respeitam. Sem isto o painel encostaria na borda do cartão
 * branco da página.
 */
.site-header .lm-mega__paineis {
	left: 40px;
	right: 40px;
}

.lm-mega__painel {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
	margin-top: 10px;
	overflow: hidden;
}

.lm-mega__grade {
	display: grid;
	grid-template-columns: minmax(190px, 1fr) minmax(0, 1.6fr);
	align-items: stretch;
}

.lm-mega__grade[data-colunas="3"] {
	grid-template-columns: minmax(180px, 0.9fr) minmax(170px, 0.9fr) minmax(0, 1.5fr);
}

.lm-mega__col {
	padding: 20px;
	min-width: 0;
}

.lm-mega__col--filhos,
.lm-mega__col--netos {
	border-right: 1px solid var(--line);
	list-style: none;
	margin: 0;
}

.lm-mega__col--filhos li,
.lm-mega__col--netos li {
	list-style: none;
}

.lm-mega__col--netos ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-mega__col--filhos a,
.lm-mega__col--netos a {
	display: block;
	padding: 8px 10px;
	margin: 0 -10px;
	border-radius: 6px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.lm-mega__col--filhos a:hover,
.lm-mega__col--filhos a:focus-visible,
.lm-mega__col--netos a:hover,
.lm-mega__col--netos a:focus-visible,
.lm-mega__col--filhos a[data-lm-mega-ativo],
.lm-mega__col--netos a[data-lm-mega-ativo] {
	background: var(--surface, rgba(0, 0, 0, 0.04));
	color: var(--accent);
}

/* ---------------------------------------------------------------------
 * PREVIEW — a terceira coluna
 * ------------------------------------------------------------------ */

.lm-mega__texto {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-soft);
}

.lm-mega__materias {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lm-mega__materias li {
	list-style: none;
	min-width: 0;
}

.lm-mega__materias a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.lm-mega__thumb {
	flex: 0 0 64px;
	width: 64px;
	min-width: 0;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
	background: var(--surface, rgba(0, 0, 0, 0.05));
}

.lm-mega__thumb img {
	width: 100%;
	height: 48px;
	object-fit: cover;
	display: block;
}

/* Sem foto a moldura fica só como espaço reservado, e não como caixa vazia. */
.lm-mega__thumb:empty {
	height: 48px;
	opacity: 0.5;
}

.lm-mega__materia-texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lm-mega__materia-titulo {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

.lm-mega__materias a:hover .lm-mega__materia-titulo,
.lm-mega__materias a:focus-visible .lm-mega__materia-titulo {
	color: var(--accent);
}

.lm-mega__materia-data {
	font-size: 12px;
	color: var(--ink-soft);
}

.lm-mega__cta {
	display: inline-block;
	margin-top: 16px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--paper);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.lm-mega__cta:hover,
.lm-mega__cta:focus-visible {
	filter: brightness(0.92);
}

/*
 * A troca do preview não pode mexer na altura do painel: com alturas
 * diferentes por item, passar o mouse pela lista faz a caixa pular e o
 * ponteiro sai de cima dela sozinho, fechando o menu na cara de quem está
 * lendo. A coluna empilha todos os previews na mesma célula do grid e a
 * altura fica sendo a do maior.
 */
.lm-mega__col--preview {
	display: grid;
}

.lm-mega__preview {
	grid-area: 1 / 1;
}

.lm-mega__preview[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
 * ACORDEÃO — a mesma árvore na gaveta do celular
 * ------------------------------------------------------------------ */

.lm-mega-acordeao,
.lm-mega-acordeao ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-mega-acordeao li {
	list-style: none;
	border-bottom: 1px solid var(--line);
}

.lm-mega-acordeao summary,
.lm-mega-acordeao__folha a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.lm-mega-acordeao summary::-webkit-details-marker {
	display: none;
}

.lm-mega-acordeao__no[open] > summary {
	color: var(--accent);
}

.lm-mega-acordeao__no[open] > summary .lm-mega-acordeao__seta {
	transform: rotate(180deg);
}

.lm-mega-acordeao__seta {
	flex: 0 0 auto;
	transition: transform 160ms ease;
}

.lm-mega-acordeao__corpo {
	padding: 0 0 14px 12px;
}

.lm-mega-acordeao__tudo {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
}

.lm-mega-acordeao__preview {
	margin-bottom: 12px;
}

.lm-mega-acordeao [data-nivel="2"] > summary,
.lm-mega-acordeao [data-nivel="3"] > summary {
	font-weight: 500;
	font-size: 14.5px;
}

@media (prefers-reduced-motion: reduce) {

	.lm-mega__seta,
	.lm-mega-acordeao__seta,
	.lm-mega__gatilho {
		transition: none;
	}
}