/*
 * Zafira Signature - cabecalho (Elementor Theme Builder template "Zafira
 * Header", post ID 40) em tablet/mobile, contra o Figma "Zafira 1 page
 * website 2026-08" (fileKey XsQQteAhA9JiEdcq631DRw):
 *   - fechado: node 234:1958 -> apenas logo + icone hamburger a direita
 *     (sem o botao "Falar Connosco", que so aparece dentro do menu aberto).
 *   - aberto: node 236:2312 -> painel navy (#0F3C53) a ecra inteiro, links
 *     centrados (Montserrat Medium 12px maiusculas, tracking 2.16px,
 *     #E9E3D5), separador e botao "Falar Connosco" por baixo.
 *
 * O botao "Falar Connosco" (widget .elementor-element-cx00008) e escondido
 * no cabecalho fechado via controlo nativo Elementor "Hide On Tablet/Mobile"
 * (_elementor_data). Este ficheiro trata do que os controlos nativos do
 * widget nav-menu (Elementor Pro) nao cobrem: o dropdown ocupar o ecra
 * inteiro e ficar centrado verticalmente (por omissao o dropdown e uma
 * caixa pequena ancorada ao botao de menu), e mostrar o botao "Falar
 * Connosco" dentro desse overlay quando o menu esta aberto.
 */

@media (max-width: 1024px) {

	/* Icone do menu (hamburger/X) e logotipo: cor consistente com os links
	 * do Figma, e sempre por cima do overlay do dropdown (z-index 2 > 1)
	 * dentro do stacking context do cabecalho (cx00001, position:fixed),
	 * para que ambos continuem visiveis quando o menu esta aberto (tal
	 * como no node 236:2312 do Figma). */
	.elementor-location-header .elementor-menu-toggle {
		color: #E9E3D5;
		fill: #E9E3D5;
		position: relative;
		z-index: 2 !important;
	}

	.elementor-location-header .elementor-element-cx00002 {
		position: relative;
		z-index: 2 !important;
	}

	/* Correcao de stacking context: cx00003 (linha interior do cabecalho,
	 * onde vivem o nav-menu e o botao) herda "--z-index:999" da custom
	 * property definida pelo Elementor em cx00001 (o container "position:
	 * fixed" do cabecalho, .e-con{z-index:var(--z-index)}), porque custom
	 * properties atravessam a arvore do DOM. Isso torna cx00003 um novo
	 * stacking context a z-index 999, o que faz o overlay do dropdown (la
	 * dentro) tapar o logo (cx00002, irmao de cx00003 fora desse contexto)
	 * quando o menu abre. Repor para auto anula essa heranca acidental. */
	.elementor-location-header .elementor-element-cx00003 {
		--z-index: auto;
		z-index: auto !important;
	}

	/* Painel do dropdown movel: caixa pequena por omissao -> overlay a
	 * ecra inteiro, fundo navy solido, links centrados vertical/horizontal.
	 * z-index baixo (1): o backdrop-filter do cabecalho (cx00001) torna-o
	 * "containing block"/stacking context dos seus descendentes fixed, por
	 * isso basta ficar acima do logo/toggle nesse contexto local (z-index
	 * 2 acima) e nao e preciso um valor grande tipo 9998. */
	.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		max-height: 0;
		height: 100dvh !important;
		margin: 0 !important;
		background-color: #0F3C53 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		overflow-y: auto !important;
		z-index: 1 !important;
	}

	.elementor-location-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		max-height: 100dvh !important;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 38px;
		min-height: 100%;
		padding: 96px 24px 48px;
		box-sizing: border-box;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
		background: transparent !important;
		text-align: center;
		justify-content: center;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.highlighted {
		background: transparent !important;
		color: #E9E3D5 !important;
		opacity: 0.7;
	}

	/* Separador fino sob o ultimo link, antes do botao (linha do Figma). */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu {
		border-bottom: 1px solid rgba(233, 227, 213, 0.35);
		padding-bottom: 40px;
	}

	/* Botao "Falar Connosco": escondido no cabecalho fechado (Hide On
	 * Tablet/Mobile nativo do Elementor) mas reaproveitado dentro do
	 * overlay do menu aberto, centrado por baixo do separador. `top`/`left`
	 * usam unidades de viewport (dvh/vw), nao percentagem, porque o
	 * backdrop-filter no cabecalho (cx00001) torna-o "containing block"
	 * dos descendentes fixed - percentagens ficariam relativas aos ~78px
	 * do cabecalho em vez do ecra inteiro. Degrada de forma segura em
	 * navegadores sem :has() (o botao fica apenas escondido). */
	body:has(.elementor-location-header .elementor-menu-toggle.elementor-active) .elementor-location-header .elementor-element-cx00008 {
		display: flex !important;
		position: fixed !important;
		left: 50vw;
		top: 50dvh;
		transform: translate(-50%, 170px);
		width: auto !important;
		max-width: none !important;
		z-index: 1 !important;
		font-size: 12px !important;
		letter-spacing: 1.68px !important;
		white-space: nowrap;
	}
}