/**
 * Dropdowns do menu principal (desktop) — layout unico para todos.
 * Markup: template-parts/layout/header-content.php  (.dropdown > .container > colunas)
 * Comportamento: js/menu-dropdown.js
 *
 * Os 6 paineis (Estude, Trabalhe, Destinos, Assessorias, Blog, Experimento) usam o mesmo molde:
 * largura total, grid de 3 colunas (lista | imagem | chamada), mesma proporcao de imagem e espacamento.
 */

@media (min-width: 1024px) {
	/* acima do degrade do header (#gradient, z-index 10000) */
	.dropdown {
		z-index: 10001 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		padding: 0 !important;
		background: #fff !important;
		border-top: 4px solid #6a1b9a;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .18) !important;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
	}

	.dropdown > .container {
		display: grid !important;
		grid-template-columns: 240px minmax(0, 1fr) 300px !important;
		gap: 40px !important;
		align-items: center !important;
		width: 100%;
		max-width: 1200px !important;
		margin: 0 auto !important;
		padding: 28px 32px !important;
		min-height: 356px; /* mesma altura nos 6 paineis */
	}

	.dropdown > .container > * {
		grid-column: auto !important;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		align-self: center;
	}

	/* coluna da lista */
	.dropdown > .container > div:first-child {
		display: flex;
		flex-direction: column;
		gap: 2px;
		align-self: start;
	}

	.dropdown > .container p:first-child {
		margin: 0 0 8px;
		font-size: 16px;
		line-height: 1.25;
	}

	.dropdown a:not([class*="border-"]) {
		display: block;
		margin: 0 !important;
		padding: 6px 0;
		font-size: 15px;
		line-height: 1.3;
		color: #1f1f1f;
		transition: color .15s ease;
	}

	.dropdown a:not([class*="border-"]):hover {
		color: #6a1b9a;
	}

	/* imagem: mesma proporcao em todos (arquivos 612x258), sem esticar */
	.dropdown img {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-height: 260px;
		aspect-ratio: 612 / 258;
		object-fit: cover;
		border-radius: 12px;
	}

	/* coluna da chamada ("Encontre a loja mais proxima...") */
	.dropdown > .container > div:last-child:not(:first-child) {
		display: flex;
		flex-direction: column;
		align-items: flex-start !important;
		justify-content: center;
		gap: 14px;
		text-align: left;
	}

	.dropdown > .container > div:last-child:not(:first-child) p {
		margin: 0;
		font-size: 17px;
		line-height: 1.35;
		text-align: left !important;
	}

	.dropdown > .container > div:last-child:not(:first-child) a[class*="border-"] {
		display: block;
		width: 100%;
		padding: 10px 16px;
		font-size: 16px;
		text-align: center;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.dropdown > .container {
		grid-template-columns: 200px minmax(0, 1fr) 240px !important;
		gap: 28px !important;
		padding: 24px !important;
	}
}

/* No mobile as listas aparecem dentro do proprio item do menu */
@media (max-width: 1023px) {
	.dropdown {
		display: none !important;
	}
}

/* ---- Cabecalho (desktop): ocupa mais a tela e nao quebra linha nos itens ---- */
@media (min-width: 1024px) {
	/* barra do cabecalho usa mais largura (o container padrao do Tailwind fica em 1024px nessa faixa) */
	#masthead #gradient > .container {
		max-width: min(96vw, 1440px) !important;
		justify-content: space-between !important;
		gap: 16px;
	}

	/* nav ocupa o espaco livre entre logo e botao */
	#masthead #menu {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}

	#masthead #menu > div {
		width: 100%;
		justify-content: center;
	}

	/* itens: uma linha, distribuidos na largura disponivel */
	#masthead #menuItems {
		justify-content: space-between;
		gap: 14px;
		width: 100%;
	}

	#masthead #menuItems > a {
		white-space: nowrap !important;
		flex: 0 0 auto;
	}
}

/* faixa 1024 a 1439: texto do menu um pouco menor */
@media (min-width: 1024px) and (max-width: 1439px) {
	#masthead #menuItems > a,
	#masthead #menuItems > a * {
		font-size: 15px !important;
		line-height: 20px !important;
	}
	#masthead #menuItems > a img {
		width: 0.7rem !important;
	}
}

/* 1440 para cima: tamanho normal, sem quebra */
@media (min-width: 1440px) {
	#masthead #menuItems > a,
	#masthead #menuItems > a * {
		font-size: 16px !important;
		line-height: 24px !important;
	}
}

/* ---- Liquid glass no cabecalho ao rolar ---- */
#masthead #gradient.is-scrolled {
	background: rgba(106, 27, 154, 0.55) !important;
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -1px 0 rgba(255, 255, 255, 0.12);
	border-radius: 0 0 22px 22px;
	height: auto !important;
	min-height: 0 !important;
	transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

#masthead #gradient.is-scrolled > .container {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* ---- Menu do celular: secoes com titulo, subitens legiveis e alvos de toque maiores ---- */
@media (max-width: 1023px) {
	#masthead #menu {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: min(88vw, 380px) !important;
		height: 100vh !important;
		min-height: 100vh !important;
		padding: 0 !important;
		background: #ffffff !important;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 10001 !important;
	}

	#masthead #menu > div:first-of-type {
		padding: 64px 0 28px;
	}

	/* botao fechar: circulo fixo, centralizado */
	#masthead #menu-close {
		position: absolute !important;
		top: 16px !important;
		right: 16px !important;
		width: 28px !important;
		height: 28px !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		line-height: 1 !important;
		font-size: 13px !important;
		border-radius: 9999px !important;
		background: #5b1f7a !important;
		color: #ffffff !important;
		cursor: pointer;
	}

	#masthead #menuItems {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	/* titulo de cada secao (link principal) */
	#masthead #menuItems > a {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		padding: 16px 22px 12px;
		border-top: 1px solid #ececec;
		color: #5b1f7a !important;
		font-size: 18px !important;
		line-height: 24px !important;
		text-decoration: none;
	}

	#masthead #menuItems > a:first-child {
		border-top: 0;
	}

	/* seta do desktop nao aparece no celular: os subitens ja estao visiveis */
	#masthead #menuItems > a > img {
		display: none !important;
	}

	/* lista de subitens: irmao logo abaixo do titulo */
	#masthead #menuItems > div {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 22px 10px;
	}

	#masthead #menuItems > div > a {
		display: block;
		width: 100%;
		font-family: var(--font-regular) !important;
		font-weight: 400 !important;
		padding: 10px 0 10px 12px;
		border-top: 1px solid #f3f3f3;
		color: #333333 !important;
		font-size: 16px !important;
		line-height: 22px !important;
		text-decoration: none;
	}

	/* sem linha logo abaixo do titulo: so o primeiro subitem fica sem divisoria */
	#masthead #menuItems > div > a:first-child {
		border-top: 0 !important;
	}

	#masthead #menuItems > div > a:active,
	#masthead #menuItems > div > a:hover {
		color: #5b1f7a !important;
	}
}
/* Titulo de cada painel do menu (ex.: "Estude no exterior"): maior e roxo, para ficar claro que e o titulo */
@media (min-width: 1024px) {
	#masthead .dropdown > .container > div > p:first-child {
		font-size: 22px !important;
		line-height: 28px !important;
		color: #5b1f7a !important;
		margin: 0 0 12px !important;
		font-weight: 400 !important;
	}
}