/**
 * Seletor de língua (WPML) — dropdown no menu principal (.mmp-menu)
 * -------------------------------------------------------------------------
 * Markup do WPML dentro do widget Menu do Elementor:
 *   li.wpml-ls-menu-item.wpml-ls-current-language > a   bandeira atual
 *     ul.sub-menu.elementor-nav-menu--dropdown
 *       li.wpml-ls-menu-item > a                        outras línguas
 *
 * O widget não tem estilos de dropdown definidos, por isso o Elementor
 * usava os de origem: 12em de largura, borda transparente de 8px à
 * esquerda, padding 13/20 e fundo #3f444b no hover. Aqui o submenu passa
 * a ser um painel branco estreito, centrado por baixo da bandeira.
 *
 * O SmartMenus (JS do menu do Elementor) posiciona o submenu com estilos
 * inline (top, left, margin-left, margin-top, larguras). Os !important
 * servem só para ganhar a esses estilos inline.
 */

/* O #main-header tem view-transition-name (ver transicoes.css), e isso
   torna-o um contexto de empilhamento. Sem z-index, a secção a seguir ao
   header pintava por cima de tudo o que sai dele, e o dropdown ficava
   cortado. O header sticky já tem z-index próprio (999, header.css). */
#main-header {
	z-index: 20;
}

/* Item da língua atual: bandeira e seta (quando o widget tem o ícone de
   submenu ativo) na mesma linha, centradas com o texto dos outros itens.
   O style.css põe os links do menu em inline-block, e a seta do Elementor
   (display: flex) caía para a linha de baixo. */
.mmp-menu .elementor-nav-menu--main .elementor-nav-menu > .wpml-ls-menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5em;
}

.mmp-menu .elementor-nav-menu--main .elementor-nav-menu > .wpml-ls-menu-item > a .sub-arrow {
	padding-inline-start: 6px;
}

/* As bandeiras nunca encolhem. O reset do tema pai põe
   img { max-width: 100% }, e num painel com largura calculada pelo
   conteúdo isso deixava a bandeira com 0px: o painel abria vazio. */
.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item .wpml-ls-flag {
	max-width: none;
	flex-shrink: 0;
}

.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu {
	top: 100% !important;
	left: 50% !important;
	right: auto !important;
	margin: 12px 0 0 !important;
	transform: translateX(-50%);
	width: max-content !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 6px 0;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Ponte invisível sobre o intervalo de 12px entre a bandeira e o painel:
   o rato passa de um para o outro sem sair do item, e o dropdown não
   fecha pelo caminho. */
.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -13px;
	height: 13px;
}

/* Sem o sublinhado de hover dos itens do menu (style.css) dentro do painel. */
.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu > li::before {
	display: none;
}

.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 0;
	background-color: transparent;
	color: var(--e-global-color-primary, #000);
	line-height: 1;
	white-space: nowrap;
}

.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu a:hover,
.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu a:focus,
.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu a.highlighted {
	background-color: #f4f4f4;
	color: var(--e-global-color-primary, #000);
}

.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu a:focus-visible {
	outline: 2px solid var(--e-global-color-accent, #C1504D);
	outline-offset: -2px;
}

/* Bandeira como bloco: sem o espaço da linha de base por baixo. */
.mmp-menu .elementor-nav-menu--main .wpml-ls-menu-item > .sub-menu .wpml-ls-flag {
	display: block;
}
