/**
 * Cabeçalho e rodapé do site público.
 *
 * Mesma convenção da galeria e da ficha: as variáveis --azs-* têm valor de
 * reserva e o valor de verdade vem dos tokens --az-* do Kit Global do
 * Elementor. Ver docs/KIT-GLOBAL-ELEMENTOR.md.
 *
 * Contrastes na paleta verde profunda, medidos com a fórmula da WCAG 2.1:
 *
 *   cabeçalho, sobre #101715
 *     texto  #e6e9e5  14.84
 *     apoio  #93a29c   6.83
 *     teal   #7fbfc4   8.79
 *     #0b1211 sobre o botão teal #7fbfc4  9.16
 *
 *   rodapé, sobre #0b110f
 *     texto  #f0efea  16.56
 *     apoio  #a9bec0   9.82
 *     borda  #22302c   1.39  <- divisória, nunca texto
 *
 * Todos os valores de texto passam de 4.5:1, que é o piso da WCAG AA para
 * corpo. A borda fica abaixo de 3:1 de propósito: ela separa blocos, não
 * carrega informação, e subir o contraste dela transformaria o rodapé numa
 * grade de linhas competindo com o texto.
 *
 * Cuidado que a inversão da paleta trouxe: na versão clara o botão cheio era
 * teal escuro com texto branco. Agora o botão é teal claro, e branco sobre
 * #7fbfc4 dá 1,62:1 — ilegível. Por isso existe --azs-acao-texto. Se alguém
 * voltar a escrever `color: #fff` num botão cheio, quebra.
 */

:root {
	--azs-raio: var(--az-raio, 3px);
	--azs-vao: var(--az-vao, 8px);
	--azs-fundo: var(--az-fundo, #101715);
	--azs-borda: var(--az-borda, #2a3531);
	--azs-texto: var(--az-texto, #e6e9e5);
	--azs-apoio: var(--az-apoio, #93a29c);
	--azs-teal: var(--az-teal, #7fbfc4);
	--azs-teal-escuro: var(--az-teal-forte, var(--az-teal-escuro, #a3d5d8));
	--azs-display: var(--az-display, 'Instrument Serif', Georgia, serif);
	--azs-corpo: var(--az-corpo, "DM Sans", system-ui, sans-serif);
	--azs-olho: var(--az-olho, 0.16em);

	/*
	 * Cor do texto DENTRO do botão cheio. Existe porque na paleta clara o
	 * botão era teal escuro com texto branco, e na paleta verde profunda o
	 * botão é teal claro. Branco sobre #7fbfc4 dá 1,62:1, ilegível. Com
	 * #0b1211 dá 9,16:1.
	 */
	--azs-acao-texto: var(--az-acao-texto, #0b1211);

	/* Só existem dentro do rodapé, a faixa mais escura da página. */
	--azs-rodape-fundo: var(--az-fundo-2, #0b110f);
	--azs-rodape-texto: #f0efea;
	--azs-rodape-apoio: #a9bec0;
	--azs-rodape-borda: #22302c;

	--azs-topo-altura: 72px;
}

/* ---------------------------------------------------------------- atalho */

/*
 * O link de pular conteúdo fica fora da tela até receber foco pelo teclado.
 * Usar `left: -9999px` esconderia dele o leitor de tela em alguns
 * navegadores; `clip-path` com tamanho 1px mantém o elemento no fluxo de
 * acessibilidade e invisível para quem usa o mouse.
 */
.az-pular {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.az-pular:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--azs-teal-escuro);
	color: var(--azs-acao-texto);
	border-radius: var(--azs-raio);
	font-family: var(--azs-corpo);
	font-size: 0.9rem;
	text-decoration: none;
}

/* -------------------------------------------------------------- cabeçalho */

.az-topo {
	background: var(--azs-fundo);
	border-bottom: 1px solid var(--azs-borda);
	font-family: var(--azs-corpo);
}

.az-topo--fixo {
	position: sticky;
	top: 0;
	/*
	 * 30 fica acima do conteúdo da página e abaixo da barra de administração
	 * do WordPress e do painel do Elementor, que usam valores muito maiores.
	 */
	z-index: 30;
}

.az-topo__faixa {
	display: flex;
	align-items: center;
	gap: calc(var(--azs-vao) * 3);
	max-width: 1200px;
	min-height: var(--azs-topo-altura);
	margin: 0 auto;
	padding: 0 calc(var(--azs-vao) * 3);
}

.az-topo__marca {
	flex: 0 0 auto;
	color: var(--azs-texto);
	text-decoration: none;
}

.az-marca {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--azs-vao) * 1.25);
}

.az-marca__simbolo {
	flex: 0 0 auto;
	color: var(--azs-teal);
}

.az-marca__texto {
	font-family: var(--azs-display);
	font-size: 1.32rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1;
	white-space: nowrap;
}

/* O "Homes" em itálico dá a inflexão editorial da Direção A sem precisar de
   uma segunda fonte no cabeçalho. */
.az-marca__texto em {
	font-style: italic;
	font-weight: 400;
}

.az-topo__nav {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	gap: calc(var(--azs-vao) * 3);
}

.az-topo__lista {
	display: flex;
	align-items: center;
	gap: calc(var(--azs-vao) * 3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.az-topo__lista li {
	margin: 0;
}

.az-topo__lista a {
	display: inline-block;
	padding: 6px 0;
	color: var(--azs-texto);
	font-size: 0.945rem;
	line-height: 1.2;
	text-decoration: none;
	/* A sublinha nasce transparente e ganha cor no hover. Animar a cor em vez
	   de aparecer e desaparecer evita o pulo de 1px na linha de base. */
	border-bottom: 1px solid transparent;
	transition: border-color 140ms ease, color 140ms ease;
}

.az-topo__lista a:hover,
.az-topo__lista a:focus-visible {
	color: var(--azs-teal);
	border-bottom-color: var(--azs-teal);
}

.az-topo__lista .current-menu-item > a {
	color: var(--azs-teal);
	border-bottom-color: var(--azs-teal);
}

.az-topo__cta {
	flex: 0 0 auto;
	padding: 11px 20px;
	background: var(--azs-teal);
	color: var(--azs-acao-texto);
	border-radius: var(--azs-raio);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 140ms ease;
}

.az-topo__cta:hover,
.az-topo__cta:focus-visible {
	background: var(--azs-teal-escuro);
	color: var(--azs-acao-texto);
}

/*
 * O botão de menu só existe quando o JS assumiu o controle. Sem JS o menu
 * inteiro fica visível e este botão nunca aparece, então a navegação continua
 * funcionando com o JavaScript bloqueado.
 */
.az-topo__alterna {
	display: none;
}

:where(.az-topo) :focus-visible {
	outline: 2px solid var(--azs-teal);
	outline-offset: 3px;
}

/* ------------------------------------------------------ cabeçalho, celular */

@media (max-width: 900px) {
	:root {
		--azs-topo-altura: 60px;
	}

	/*
	 * O menu recolhido é o estado PADRÃO, não um estado que um script precisa
	 * chegar e produzir. Antes estas regras estavam presas a uma classe
	 * `.az-topo--js` que o `site.js` acrescentava, e o `site.js` carrega no
	 * rodapé: media a 390px, a barra pintava com 234px de altura e o menu
	 * inteiro aberto, e só então caía para 61px. Salto de 173px empurrando o
	 * conteúdo, em todo carregamento de página no celular.
	 *
	 * Quem não tem JavaScript continua navegando: o `<noscript>` impresso pelo
	 * shortcode devolve o menu e esconde o botão.
	 */

	.az-topo__faixa {
		flex-wrap: wrap;
		gap: 0;
		padding: 0 calc(var(--azs-vao) * 2);
	}

	.az-topo__marca {
		margin-right: auto;
	}

	/* 44px é o alvo confortável de toque; a medição a 390px dava 34px. */
	.az-topo__alterna {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		gap: calc(var(--azs-vao) * 0.75);
		padding: 8px 10px;
		margin-right: calc(var(--azs-vao) * -1.25);
		background: none;
		border: 0;
		color: var(--azs-texto);
		font-family: inherit;
		font-size: 0.9rem;
		cursor: pointer;
	}

	/* Três traços feitos com um elemento e duas sombras, para não poluir o HTML
	   com spans decorativos que o leitor de tela teria de ignorar. */
	.az-topo__alterna-traco {
		width: 18px;
		height: 1.5px;
		background: currentColor;
		box-shadow: 0 -5.5px 0 currentColor, 0 5.5px 0 currentColor;
	}

	.az-topo__alterna[aria-expanded="true"] .az-topo__alterna-traco {
		box-shadow: none;
		/* Vira um X. A rotação sozinha deixaria só um traço; o ::after fecha o
		   segundo braço. */
		transform: rotate(45deg);
		position: relative;
	}

	.az-topo__alterna[aria-expanded="true"] .az-topo__alterna-traco::after {
		content: "";
		position: absolute;
		inset: 0;
		background: currentColor;
		transform: rotate(-90deg);
	}

	.az-topo__nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: calc(var(--azs-vao) * 2);
		border-top: 1px solid var(--azs-borda);
	}

	.az-topo__nav[data-aberto="1"] {
		display: flex;
	}

	.az-topo__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/*
	 * `block` e não `inline-block`: no desktop a sublinha do hover deve ter a
	 * largura da palavra, mas aqui a borda é uma divisória de lista. Com
	 * inline-block ela para onde o texto para, e a lista vira uma escada de
	 * linhas de tamanhos diferentes. Como efeito colateral bom, a área de toque
	 * passa a ocupar a linha inteira em vez de só as letras.
	 */
	.az-topo__lista a {
		display: block;
		padding: 14px 0;
		font-size: 1.02rem;
		border-bottom: 1px solid var(--azs-borda);
	}

	.az-topo__lista a:hover,
	.az-topo__lista a:focus-visible,
	.az-topo__lista .current-menu-item > a {
		border-bottom-color: var(--azs-borda);
	}

	.az-topo__cta {
		margin-top: calc(var(--azs-vao) * 2);
		text-align: center;
	}
}

/* ----------------------------------------------------------------- rodapé */

.az-rodape {
	background: var(--azs-rodape-fundo);
	color: var(--azs-rodape-texto);
	font-family: var(--azs-corpo);
	font-size: 0.945rem;
	line-height: 1.55;
}

.az-rodape__faixa {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: calc(var(--azs-vao) * 5);
	max-width: 1200px;
	margin: 0 auto;
	padding: calc(var(--azs-vao) * 7) calc(var(--azs-vao) * 3) calc(var(--azs-vao) * 5);
}

.az-marca--rodape {
	color: var(--azs-rodape-texto);
}

/* No fundo escuro o teal do símbolo some. Ele passa a acompanhar o texto. */
.az-marca--rodape .az-marca__simbolo {
	color: inherit;
}

.az-rodape__linha {
	max-width: 34ch;
	margin: calc(var(--azs-vao) * 2) 0 0;
	color: var(--azs-rodape-apoio);
}

.az-rodape__bloco {
	min-width: 0;
}

.az-rodape__titulo {
	margin: 0 0 calc(var(--azs-vao) * 2);
	font-family: var(--azs-corpo);
	/* 0.75rem = 12px, o piso. 0.735rem dava 11.76px medido. */
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--azs-olho);
	color: var(--azs-rodape-apoio);
}

.az-rodape__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.az-rodape__lista li + li {
	margin-top: calc(var(--azs-vao) * 1.25);
}

/*
 * `inline-block` com respiro vertical: medido a 390px, estes links saíam com
 * 21px de altura, abaixo do mínimo de 24px do WCAG 2.5.8 para alvo de toque. A
 * borda de baixo é a sublinha do hover, então o padding fica só em cima e o de
 * baixo vira `min-height`, para a sublinha não descolar da palavra.
 */
.az-rodape__lista a,
.az-rodape a {
	display: inline-block;
	min-height: 25px;
	padding-top: 4px;
	color: var(--azs-rodape-texto);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 140ms ease;
}

.az-rodape__lista a:hover,
.az-rodape__lista a:focus-visible {
	border-bottom-color: currentColor;
}

.az-rodape :focus-visible {
	outline: 2px solid var(--azs-rodape-texto);
	outline-offset: 3px;
}

/*
 * Identificação da pessoa jurídica.
 *
 * A Resolução COFECI 458/1995, art. 2º, manda o número do CRECI acompanhar o
 * nome no anúncio, com a letra J para pessoa jurídica, e o CRECI-RJ orienta
 * que ele não fique menor que 25% do tamanho da fonte do nome. Aqui os dois
 * ficam no mesmo parágrafo e o número herda o tamanho do nome (1em), muito
 * acima do piso de 25%. Se alguém reduzir o CRECI depois, o `em` faz a
 * proporção acompanhar em vez de quebrar em silêncio.
 */
.az-rodape__identificacao {
	margin: calc(var(--azs-vao) * 3) 0 0;
}

.az-rodape__razao {
	display: block;
}

.az-rodape__creci {
	display: inline-block;
	margin-top: calc(var(--azs-vao) * 0.5);
	font-size: 1em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--azs-rodape-texto);
}

.az-rodape__cnpj {
	margin: calc(var(--azs-vao) * 0.5) 0 0;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--azs-rodape-apoio);
}

.az-rodape__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--azs-vao) calc(var(--azs-vao) * 4);
	max-width: 1200px;
	margin: 0 auto;
	padding: calc(var(--azs-vao) * 3);
	border-top: 1px solid var(--azs-rodape-borda);
	font-size: 0.86rem;
	color: var(--azs-rodape-apoio);
}

.az-rodape__direitos,
.az-rodape__aviso {
	margin: 0;
}

@media (max-width: 900px) {
	.az-rodape__faixa {
		grid-template-columns: 1fr;
		gap: calc(var(--azs-vao) * 5);
		padding: calc(var(--azs-vao) * 5) calc(var(--azs-vao) * 2) calc(var(--azs-vao) * 4);
	}

	.az-rodape__base {
		padding: calc(var(--azs-vao) * 3) calc(var(--azs-vao) * 2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.az-topo__lista a,
	.az-topo__cta,
	.az-rodape a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Convivência com o tema Hello Elementor

   O `theme.css` do tema traz `.page-content a { text-decoration: underline }`.
   Esse seletor vale 0-1-1 e vence a classe dos botões, que vale 0-1-0 -- então
   os botões das páginas Anuncie e Seja parceiro apareciam sublinhados no site,
   embora o bloco pedisse `text-decoration: none`. Não aparecia no protótipo
   local porque lá o `theme.css` não existe.

   As regras abaixo empatam em contagem de classes e ganham por serem mais
   específicas. Só valem para os botões: link dentro de texto corrido continua
   sublinhado, que é acessibilidade e não enfeite.
   -------------------------------------------------------------------------- */

.page-content a.az-anuncie__acao,
.page-content a.az-parceiro__acao {
	text-decoration: none;
}