/**
 * Menu do celular como painel de aplicativo.
 *
 * O OceanWP só alterna `display` inline em #mobile-dropdown e põe a classe
 * `opened` no gatilho — a mecânica de abrir/fechar continua dele. Aqui o painel
 * vira tela cheia, com trava de rolagem, área segura do aparelho e alvos de
 * toque no tamanho certo.
 *
 * Medidas em px: a raiz deste site é 10px, então `rem` não vale 16px aqui.
 */

@media only screen and (max-width: 767px) {
	/* ---------------------------------------------------------------
	   O painel
	   --------------------------------------------------------------- */

	#mobile-dropdown {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
		max-width: none;
		height: 100dvh;
		/* aparelhos sem suporte a dvh caem no vh */
		max-height: 100vh;
		margin: 0;
		padding: 0;
		overflow: hidden auto;
		background: #fff;
		/* a rolagem do painel não “vaza” para a página atrás */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Entrada: sobe e revela. O `display` é ligado de uma vez pelo tema, então
	   a animação dispara no momento em que o elemento passa a existir na tela. */
	#mobile-dropdown {
		animation: cme-menu-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	@keyframes cme-menu-in {
		from {
			opacity: 0;
			transform: translate3d(0, 14px, 0);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	/* Trava a página atrás enquanto o painel está aberto. */
	html.cme-menu-open,
	html.cme-menu-open body {
		overflow: hidden;
		overscroll-behavior: none;
	}

	/* O painel recebe o foco ao abrir; ele não precisa de anel próprio. */
	#mobile-dropdown:focus {
		outline: none;
	}

	/* O botão flutuante do WhatsApp usa z-index 999999999 e pairava sobre o
	   painel. Sai de cena enquanto o menu está aberto e volta ao fechar. */
	html.cme-menu-open .wa__btn_popup,
	html.cme-menu-open .wa__popup_chat_box,
	html.cme-menu-open .wa__button_text {
		display: none;
	}

	/* ---------------------------------------------------------------
	   Barra de topo do painel (injetada pelo JS)
	   --------------------------------------------------------------- */

	.cme-menu-bar {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
		background: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	}

	.cme-menu-bar__logo img {
		display: block;
		width: auto;
		max-width: 150px;
		height: auto;
	}

	/* O botão herdava `color:#fff` do menu (traço branco sobre fundo branco) —
	   por isso o X sumia. A cor vai declarada com a profundidade do painel
	   para vencer essa herança. */
	#mobile-dropdown .cme-menu-bar .cme-menu-close,
	.cme-menu-close {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #1b1b1b;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.2s ease;
	}

	.cme-menu-close:hover,
	.cme-menu-close:active {
		background: rgba(0, 0, 0, 0.05);
	}

	.cme-menu-close:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	/* Sem flex-shrink:0 o SVG era espremido pelo contêiner flex e chegava a
	   4px de largura — o X existia, mas com o tamanho de um traço. */
	.cme-menu-close svg {
		flex: 0 0 auto;
		width: 20px;
		min-width: 20px;
		height: 20px;
		stroke: currentColor;
		fill: none;
	}

	/* ---------------------------------------------------------------
	   Busca no topo do painel
	   ---------------------------------------------------------------
	   Com o painel em tela cheia o campo do cabeçalho fica coberto, então
	   aqui ele não é repetição — é o único visível no momento. */

	#mobile-dropdown .aws-container {
		display: block;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 14px 16px;
		line-height: 0;
	}

	#mobile-dropdown .aws-search-form,
	#mobile-dropdown .aws-wrapper {
		width: 100%;
	}

	#mobile-dropdown .aws-search-field {
		box-sizing: border-box;
		width: 100%;
		height: 46px;
		line-height: normal;
		font-size: 15px;
	}

	/* ---------------------------------------------------------------
	   Itens
	   --------------------------------------------------------------- */

	#mobile-dropdown .navigation,
	#mobile-dropdown ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* espaço final para o indicador de home do aparelho */
	#mobile-dropdown .navigation {
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
	}

	#mobile-dropdown ul li {
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	#mobile-dropdown ul li a {
		display: flex;
		align-items: center;
		min-height: 54px;
		padding: 0 16px;
		font-size: 15px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #1b1b1b;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.18s ease;
	}

	#mobile-dropdown ul li a:active {
		background: rgba(0, 0, 0, 0.04);
	}

	/* Submenu: recuo e peso menor, para o nível se ler sem depender do "+". */
	#mobile-dropdown ul li ul li a {
		min-height: 46px;
		padding-left: 32px;
		font-size: 13px;
		letter-spacing: 0.06em;
		color: #5a5a5a;
	}

	#mobile-dropdown ul li ul li {
		border-bottom-color: rgba(0, 0, 0, 0.04);
	}

	/* O "+" que abre o submenu vira um alvo de toque de verdade. */
	#mobile-dropdown .dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		margin: 0;
		border: 0;
		background: transparent;
		-webkit-tap-highlight-color: transparent;
	}

	/* ---------------------------------------------------------------
	   Movimento reduzido
	   --------------------------------------------------------------- */

	@media (prefers-reduced-motion: reduce) {
		#mobile-dropdown {
			animation: none;
		}

		#mobile-dropdown ul li a,
		.cme-menu-close {
			transition: none;
		}
	}
}