/*
 * NAVASTA — menu do site.
 *
 * Tudo aqui começa por .nvs- para não haver hipótese de bater com o CSS do
 * Elementor ou do tema. As cores das duas versões estão nas variáveis do topo
 * de cada uma: para mudar um cinzento, mexe-se num sítio só.
 *
 * Estrutura:
 *   .nvs-menu          — a camada fixa ao topo do ecrã
 *     .nvs-menu__caixa — a caixa com contorno: é ela que tem fundo e cantos
 *       .nvs-menu__barra  — a linha do logótipo, itens e botão
 *       .nvs-menu__painel — no telemóvel, o cartão que desce de dentro da caixa
 *
 * Medido a 375, 768, 1024, 1280, 1366, 1440 e 1920.
 */

/* ---------------------------------------------------------------
   Variáveis — a versão escura (menu branco, fundo escuro)
   --------------------------------------------------------------- */

.nvs-menu {
	--nvs-texto: #ffffff;
	--nvs-texto-hover: rgba(255, 255, 255, 0.65);
	--nvs-caixa-fundo: rgba(20, 20, 20, 0.55);

	/*
	 * Com o cartão aberto a caixa fica opaca. Translúcida é bonito numa barra
	 * fina; por trás de três linhas de texto, deixa o conteúdo da página a
	 * atravessar as letras e ninguém lê nada.
	 */
	--nvs-caixa-fundo-aberto: #0e0e0e;
	--nvs-caixa-borda: rgba(255, 255, 255, 0.18);
	--nvs-linha: rgba(255, 255, 255, 0.14);
	--nvs-toque: rgba(255, 255, 255, 0.07);
	--nvs-foco: #ffffff;

	/* O botão é prateado nas duas versões: é decisão de marca, não descuido. */
	--nvs-botao-fundo: radial-gradient(at 50% 0%, #ffffff 0%, #a0a0a0 100%);

	/*
	 * O site tem hoje #3d3d3d. Sobre a ponta mais escura do gradiente
	 * (#a0a0a0) isso dá 4,15 de contraste, e o mínimo legal para texto de
	 * 15px é 4,5. Um degrau mais escuro chega: #333333 dá 4,83.
	 * É a única coisa em que este botão se afasta do que está no site, e foi
	 * medido, não arredondado. Para voltar atrás, muda-se esta linha.
	 */
	--nvs-botao-texto: #333333;
	--nvs-botao-peso: 600;
	--nvs-botao-borda: 1px solid #ffffff;
	--nvs-botao-sombra: 0 0 8px 1px rgba(255, 255, 255, 0.47);
	--nvs-botao-espaco: 12px 24px;

	/* Ritmo vertical em múltiplos de 8, como no capítulo 14 do plano. */
	--nvs-gap: 32px;

	/*
	 * Cantos quase direitos, não uma cápsula. É assim no site e é uma decisão
	 * de marca: o arredondado a toda a altura dá um ar de aplicação, e este
	 * não é o tom da Navasta. Se algum dia se quiser mudar, é só esta linha.
	 */
	--nvs-raio: 12px;

	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	position: fixed;
	z-index: 9999;
	top: 16px;
	left: 0;
	right: 0;
	width: 100%;
	padding: 0 16px;              /* a faixa lateral, igual em todos os ecrãs */
	box-sizing: border-box;

	/*
	 * Os dois !important não são preguiça, são necessários.
	 *
	 * O menu é colado dentro de um contentor — do Elementor, ou do conteúdo
	 * da página. Esses contentores limitam a largura do que têm dentro e
	 * centram-no. Como o menu é fixo ao ecrã, herdava uma largura de caixa e
	 * ficava com meio ecrã, com o botão a sair-lhe pela direita fora. Isto
	 * aconteceu mesmo, no ensaio, antes de estas duas linhas existirem.
	 */
	max-width: none !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------
   Variáveis — a versão clara (menu preto, fundo claro)
   --------------------------------------------------------------- */

.nvs-menu--claro {
	--nvs-texto: #1a1a1a;
	--nvs-texto-hover: #6b6b6b;
	--nvs-caixa-fundo: rgba(255, 255, 255, 0.82);
	--nvs-caixa-fundo-aberto: #ffffff;
	--nvs-caixa-borda: rgba(0, 0, 0, 0.12);
	--nvs-linha: rgba(0, 0, 0, 0.10);
	--nvs-toque: rgba(0, 0, 0, 0.05);
	--nvs-foco: #1a1a1a;

	--nvs-botao-fundo: radial-gradient(#ffffff 0%, #b5b5b5 100%);

	/* Pela mesma razão: o #4b4b4b do site dá 4,25 sobre #b5b5b5; este dá 5,55. */
	--nvs-botao-texto: #3a3a3a;
	--nvs-botao-peso: 700;
	--nvs-botao-borda: 1px solid rgba(0, 0, 0, 0.14);
	--nvs-botao-sombra: none;
	--nvs-botao-espaco: 15px 30px;
}

.nvs-menu *,
.nvs-menu *::before,
.nvs-menu *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Blindagem — o menu vive dentro do Elementor, e o Elementor tem
   opinião sobre imagens e listas
   ---------------------------------------------------------------

   O Elementor e os temas metem na página regras do género
   `img { width: 100%; height: auto; }`. São mais fortes do que as minhas e,
   quando o menu foi colado num widget de shortcode, o logótipo saiu a
   1264×200 e a barra ficou com 970px de altura — o menu ocupava o ecrã todo.

   Aqui repõe-se o que é estrutura do menu, com peso suficiente para ganhar.
   Os !important são só nas medidas do logótipo, que é onde a coisa parte de
   vez; tudo o resto resolve-se com especificidade.
   --------------------------------------------------------------- */

.nvs-menu .nvs-menu__logo img {
	width: auto !important;
	height: 36px !important;
	max-width: 190px !important;
	min-width: 0;
	object-fit: contain;
}

/*
 * Estes seletores levam duas classes de propósito. Com uma só — `.nvs-menu ul`
 * — empatavam com o `.entry-content ul` do tema, e num empate ganha quem vem
 * escrito depois: o tema, que imprime o CSS dele já dentro do <head>. O empate
 * custou 30px de altura à barra, vindos de uma margem de lista.
 */
.nvs-menu .nvs-menu__itens,
.nvs-menu .nvs-menu__painel-itens {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvs-menu .nvs-menu__itens li,
.nvs-menu .nvs-menu__painel-itens li {
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.nvs-menu .nvs-menu__itens li::before,
.nvs-menu .nvs-menu__itens li::marker,
.nvs-menu .nvs-menu__painel-itens li::before,
.nvs-menu .nvs-menu__painel-itens li::marker {
	content: none;
	display: none;
}

.nvs-menu .nvs-menu__itens a,
.nvs-menu .nvs-menu__painel-itens a,
.nvs-menu .nvs-menu__logo,
.nvs-menu .nvs-menu__botao {
	box-shadow: none;
	text-decoration: none;
	border-bottom: 0;
}

/*
 * O botão do ícone, em todos os estados.
 *
 * No telemóvel ficava azul ao tocar: parte é o realce de toque do browser,
 * que por omissão é um véu azulado, e parte são os estilos de <button> do
 * tema, que têm fundo próprio. Os dois desligam-se aqui.
 */
.nvs-menu .nvs-menu__abrir,
.nvs-menu .nvs-menu__abrir:hover,
.nvs-menu .nvs-menu__abrir:focus,
.nvs-menu .nvs-menu__abrir:active {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--nvs-texto);
	text-shadow: none;
	filter: none;
}

/*
 * O véu azul ao tocar. Aplica-se ao menu inteiro, não só ao botão: os itens do
 * cartão e o botão Orçamento apanhavam-no da mesma maneira. O que fica no
 * lugar dele é o realce próprio, cinzento, que já está definido mais abaixo.
 */
.nvs-menu,
.nvs-menu a,
.nvs-menu button {
	-webkit-tap-highlight-color: transparent;
}

/*
 * O contentor onde o menu foi colado, depois de o JavaScript o esvaziar.
 *
 * O menu é fixo ao ecrã e não ocupa espaço nenhum — mas o contentor do
 * Elementor que o segura ocupa, com o espaçamento e o fundo dele. Era isso
 * que fazia uma faixa preta de 88px a empurrar a imagem de entrada para
 * baixo, em vez de o menu ficar por cima dela.
 */
.nvs-contentor-do-menu {
	min-height: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------
   A caixa — o contorno que a barra e o cartão partilham
   --------------------------------------------------------------- */

.nvs-menu__caixa {
	/*
	 * A caixa vai quase de ponta a ponta, como no site: uma faixa estreita de
	 * cada lado e mais nada. O limite de 1760px só existe para um ecrã muito
	 * largo não esticar o menu até ficar com o logótipo e os itens em pontas
	 * opostas do campo de visão.
	 */
	max-width: 1760px;
	margin: 0 auto;
	background: var(--nvs-caixa-fundo);
	border: 1px solid var(--nvs-caixa-borda);
	border-radius: var(--nvs-raio);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow: hidden;           /* o cartão não pode sair pelos cantos fora */
	transition: background-color 0.2s ease;
}

.nvs-menu--aberto .nvs-menu__caixa {
	background: var(--nvs-caixa-fundo-aberto);
}

.nvs-menu__barra {
	display: flex;
	align-items: center;
	gap: var(--nvs-gap);
	padding: 10px 14px 10px 20px;
}

.nvs-menu__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: auto;      /* empurra tudo o resto para a direita */
	line-height: 0;
}

/*
 * Os dois logótipos estão os dois no HTML e é o CSS que escolhe qual se vê.
 * As duas regras têm de ter o mesmo peso, senão a que liga ganha sempre à que
 * desliga e aparecem os dois ao mesmo tempo — foi o que aconteceu no ensaio.
 */
/*
 * O !important aqui é obrigatório, não é exagero.
 *
 * Cada logótipo leva um `style` embutido no HTML — é ele que segura o tamanho
 * no instante antes de o CSS chegar, e evita que o logótipo apareça ao tamanho
 * natural do ficheiro. Só que um `style` embutido ganha a qualquer seletor,
 * por mais classes que ele tenha: sem estes !important, os dois logótipos
 * apareciam ao mesmo tempo no telemóvel.
 */
.nvs-menu .nvs-menu__logo .nvs-menu__logo-grande {
	display: block !important;
}

.nvs-menu .nvs-menu__logo .nvs-menu__logo-pequeno {
	display: none !important;
}

/* ---------------------------------------------------------------
   Itens em linha — só no computador
   --------------------------------------------------------------- */

.nvs-menu__itens {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--nvs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvs-menu__itens a {
	display: flex;
	align-items: center;
	min-height: 44px;        /* alvo de toque, mesmo tendo o texto 16px */
	padding: 0 2px;
	color: var(--nvs-texto);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.18s ease;
}

.nvs-menu__itens a:hover,
.nvs-menu__itens a:focus-visible {
	color: var(--nvs-texto-hover);
}

.nvs-menu .nvs-menu__itens a[aria-current='page'] {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* ---------------------------------------------------------------
   O botão Orçamento
   --------------------------------------------------------------- */

.nvs-menu__botao {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--nvs-botao-espaco);
	background: var(--nvs-botao-fundo);
	color: var(--nvs-botao-texto);
	font-size: 15px;
	font-weight: var(--nvs-botao-peso);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border: var(--nvs-botao-borda);
	border-radius: 5px;
	box-shadow: var(--nvs-botao-sombra);
	transition: transform 0.18s ease, filter 0.18s ease;
}

.nvs-menu__botao:hover,
.nvs-menu__botao:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: var(--nvs-botao-texto);
}

/* ---------------------------------------------------------------
   Foco — tem de se ver, e vê-se nas duas versões
   --------------------------------------------------------------- */

.nvs-menu a:focus-visible,
.nvs-menu button:focus-visible {
	outline: 2px solid var(--nvs-foco);
	outline-offset: -2px;     /* para dentro: a caixa corta o que sai fora */
	border-radius: 3px;
}

/* Texto que só os leitores de ecrã leem. */
.nvs-menu__so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------
   Botão de abrir (as três barras) — escondido no computador
   --------------------------------------------------------------- */

.nvs-menu__abrir {
	display: none;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--nvs-texto);
	cursor: pointer;
}

.nvs-menu__barras,
.nvs-menu__barras::before,
.nvs-menu__barras::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.nvs-menu__barras::before,
.nvs-menu__barras::after {
	content: '';
	position: absolute;
}

.nvs-menu__barras::before {
	transform: translateY(-7px);
}

.nvs-menu__barras::after {
	transform: translateY(7px);
}

/*
 * Aberto: as três barras viram um X. O botão de fechar é o mesmo de abrir, e
 * é por isso que não há um × à parte dentro do cartão — um segundo botão a
 * fazer o mesmo é mais uma coisa para desalinhar, que é o que se vê hoje.
 */
.nvs-menu--aberto .nvs-menu__barras {
	background: transparent;
}

.nvs-menu--aberto .nvs-menu__barras::before {
	transform: rotate(45deg);
}

.nvs-menu--aberto .nvs-menu__barras::after {
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------------
   Telemóvel e tablet em pé — até 1023px
   --------------------------------------------------------------- */

@media (max-width: 1023px) {

	.nvs-menu .nvs-menu__logo img {
		height: 32px !important;
		max-width: 150px !important;
	}

	.nvs-menu__itens,
	.nvs-menu__botao--barra {
		display: none;
	}

	.nvs-menu__abrir {
		display: flex;
	}

	.nvs-menu__barra {
		padding: 8px 8px 8px 16px;
		gap: 16px;
	}

	.nvs-menu .nvs-menu__logo .nvs-menu__logo-grande {
		display: none !important;
	}

	.nvs-menu .nvs-menu__logo .nvs-menu__logo-pequeno {
		display: block !important;
	}

	/*
	 * O cartão. Desce de dentro da caixa, encostado à barra e com o mesmo
	 * contorno — não é uma camada a tapar o site. O menu antigo repetia aqui
	 * o logótipo, punha o × ao meio e o botão a flutuar à direita; isto é a
	 * mesma ideia, arrumada: uma coluna só, tudo alinhado ao mesmo eixo.
	 */
	.nvs-menu__painel {
		padding: 8px;
		border-top: 1px solid var(--nvs-linha);
		animation: nvs-descer 0.22s ease;
	}

	.nvs-menu__painel[hidden] {
		display: none;
	}

	.nvs-menu .nvs-menu__painel-itens {
		margin: 0 0 8px;
	}

	/* A linha toda é tocável, não só as letras. Num telemóvel a diferença
	   entre acertar e falhar é esta. */
	.nvs-menu__painel-itens li {
		width: 100%;
	}

	.nvs-menu__painel-itens a {
		display: flex;
		align-items: center;
		justify-content: center;   /* centrados, como o Manuel pediu */
		text-align: center;
		min-height: 56px;
		padding: 0 12px;
		color: var(--nvs-texto);
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-decoration: none;
		border-radius: 6px;
	}

	.nvs-menu__painel-itens a:hover,
	.nvs-menu__painel-itens a:focus-visible {
		background: var(--nvs-toque);
	}

	.nvs-menu .nvs-menu__painel-itens a[aria-current='page'] {
		background: var(--nvs-toque);
		text-decoration: underline;
		text-underline-offset: 6px;
	}

	.nvs-menu__botao--painel {
		display: flex;
		width: 100%;
		min-height: 52px;
		font-size: 16px;
		letter-spacing: 0.04em;
	}
}

/* Telemóvel estreito. */
@media (max-width: 420px) {

	.nvs-menu {
		top: 12px;
		padding: 0 12px;
	}

	.nvs-menu .nvs-menu__logo img {
		height: 28px !important;
	}
}

/* ---------------------------------------------------------------
   Ecrãs grandes
   --------------------------------------------------------------- */

@media (min-width: 1024px) {

	.nvs-menu {
		padding: 0 32px;      /* a faixa lateral que se vê no site */
	}
}

@media (min-width: 1440px) {

	.nvs-menu {
		top: 24px;
	}

	.nvs-menu__barra {
		padding: 12px 16px 12px 24px;
	}

	.nvs-menu .nvs-menu__logo img {
		height: 40px !important;
	}
}

/* ---------------------------------------------------------------
   Quem pediu ao sistema menos animações, recebe menos animações
   --------------------------------------------------------------- */

@keyframes nvs-descer {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

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

	.nvs-menu *,
	.nvs-menu *::before,
	.nvs-menu *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}