/*
 * Header — V2 (estrutura), refinado na V3.1. Ver specs/design.md ("Header"),
 * specs/site.md ("Header — Desktop/Mobile") e memoria.md ("Header + Hero").
 *
 * V2: sem cap de largura de 1440px (mesma lógica full-bleed do Hero) — o
 * Header usa a largura real da viewport com padding, não fica preso a uma
 * "ilha central". Logo, navegação e CTA aumentados de escala.
 *
 * V3.1: o padding lateral passou a usar exatamente a mesma fórmula do
 * `padding-inline` do `.hero` (clamp(16px, 4vw, 64px)) em vez de valores por
 * breakpoint independentes — a borda esquerda da logo e a borda do canvas
 * fotográfico do Hero agora se alinham em qualquer largura, reforçando que
 * Header e Hero pertencem à mesma composição.
 */

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	background: var(--color-verde-profundo);
	color: var(--color-branco);
	padding: 12px 20px;
	transform: translateY(-100%);
	transition: transform var(--motion-micro) var(--motion-ease);
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	background: var(--color-bg);
	position: relative;
	z-index: 80;
}

/*
 * ALINHAMENTO NORMALIZADO (polimento premium): o Header usava
 * `clamp(16px, 4vw, 64px)` de padding e ignorava o container do site. Em
 * 1920px isso colocava a logo em 64px enquanto TODO o conteúdo das seções
 * começava em 312px — 248px de desencontro, visível numa tela grande.
 *
 * Agora o Header usa exatamente o mesmo container das demais seções
 * (max-width + paddings do sistema). A fotografia do Hero continua
 * full-bleed; o que passou a alinhar é o CONTEÚDO — que é o que o olho
 * compara.
 */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: var(--header-height-mobile);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-mobile);
}

@media (min-width: 768px) {
	.site-header__inner {
		padding-inline: var(--container-pad-tablet);
	}
}

@media (min-width: 1024px) {
	.site-header__inner {
		padding-inline: var(--container-pad-notebook);
	}
}

@media (min-width: 1440px) {
	.site-header__inner {
		padding-inline: var(--container-pad-desktop);
	}
}

@media (min-width: 1024px) {
	.site-header__inner {
		height: var(--header-height);
	}
}

.site-header__brand {
	display: inline-flex;
	align-items: center;
	flex: none;
}

/*
 * Logo — assets novos em alta resolução (700px nativos), fornecidos pela
 * ARPAN. A limitação anterior (raster de 158×59px, que impedia aumentar a
 * marca sem borrar) deixou de existir. `height` controlado + `width:auto`
 * preserva a proporção de cada arquivo, que difere levemente entre as duas
 * variantes — por isso nunca fixamos width e height juntos no CSS.
 */
.site-header__brand {
	position: relative;
}

.site-header__logo {
	height: 40px;
	width: auto;
	display: block;
	transition: opacity var(--motion-micro) var(--motion-ease);
}

@media (min-width: 768px) {
	.site-header__logo {
		height: 46px;
	}
}

@media (min-width: 1024px) {
	.site-header__logo {
		height: 52px;
	}
}

/*
 * Troca de variante por CSS (sem JS, sem trocar src): a branca fica sobre a
 * fotografia; ao rolar, o Header ganha superfície clara e a colorida assume.
 * A segunda variante é sobreposta em position:absolute para as duas
 * ocuparem o mesmo espaço, sem "pulo" de layout na troca.
 */
.site-header__logo--branca {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	translate: 0 -50%;
	opacity: 0;
	pointer-events: none;
}

.site-header--overlay:not(.is-scrolled) .site-header__logo--cor {
	opacity: 0;
}

.site-header--overlay:not(.is-scrolled) .site-header__logo--branca {
	opacity: 1;
}

.site-header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.site-header__nav {
		display: block;
	}

	.site-header__nav-list {
		display: flex;
		align-items: center;
		gap: clamp(24px, 2.2vw, 40px);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-header__nav-list a {
		font-family: var(--font-body);
		font-size: 1rem;
		font-weight: 500;
		color: var(--color-text-muted);
		text-decoration: none;
		padding-block: 4px;
		border-bottom: 1px solid transparent;
		transition: color var(--motion-micro) var(--motion-ease), border-color var(--motion-micro) var(--motion-ease);
	}

	.site-header__nav-list a:hover,
	.site-header__nav-list a:focus-visible {
		color: var(--color-brand-deep);
		border-bottom-color: var(--color-brand-deep);
	}

	/* Item ativo (páginas internas): mesmo tratamento já usado no hover —
	   nenhum estilo novo introduzido no sistema. Na Home nenhum item recebe
	   esta classe, então o Header aprovado não muda visualmente. */
	.site-header__nav-list a.is-active {
		color: var(--color-brand-deep);
		font-weight: 600;
		border-bottom-color: var(--color-brand-deep);
	}
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex: none;
}

.site-header__cta {
	display: none;
	padding: 14px 28px;
	font-size: 0.95rem;
}

@media (min-width: 560px) {
	.site-header__cta {
		display: inline-flex;
	}
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	cursor: pointer;
	padding: 0;
}

@media (min-width: 1024px) {
	.site-header__toggle {
		display: none;
	}
}

.site-header__toggle-box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 16px;
}

.site-header__toggle-bar {
	display: block;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--motion-micro) var(--motion-ease), opacity var(--motion-micro) var(--motion-ease);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.site-header-mobile {
	position: fixed;
	inset: 0;
	top: var(--header-height-mobile);
	background: var(--color-bg);
	padding: var(--space-7) var(--container-pad-mobile) var(--space-8);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-8px);
	visibility: hidden;
	transition: opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease), visibility 0s linear var(--motion-reveal);
	z-index: 70;
}

.site-header-mobile.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	transition: opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease), visibility 0s linear 0s;
}

.site-header-mobile__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/*
 * BUG CORRIGIDO (contraste 1,36:1): este seletor — `.site-header-mobile__list a`,
 * especificidade (0,1,1) — vencia `.button--primary` (0,1,0) e pintava o texto
 * do botão "Associe-se" de grafite sobre o verde profundo do próprio botão.
 * A causa era a regra global da lista alcançar também o CTA; por isso o
 * `:not(.button)` em vez de um override pontual de cor no botão.
 */
.site-header-mobile__list a:not(.button) {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	text-decoration: none;
	display: block;
	/* Área de toque confortável sem inflar o espaçamento visual. */
	padding-block: 6px;
	transition: color var(--motion-micro) var(--motion-ease);
}

.site-header-mobile__list a:not(.button):hover,
.site-header-mobile__list a:not(.button):focus-visible {
	color: var(--color-brand-deep);
}

/* Item ativo também no menu mobile — antes só o desktop marcava. */
.site-header-mobile__list a.is-active {
	color: var(--color-brand-deep);
}

/* CTA do menu mobile: largura total e altura de toque confortável. */
.site-header-mobile__cta {
	display: flex;
	width: 100%;
	min-height: 54px;
}

.site-header-mobile__cta-item {
	padding-top: var(--space-5);
	margin-top: var(--space-2);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
	.site-header-mobile {
		display: none !important;
	}
}

body.has-mobile-nav-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.site-header-mobile,
	.site-header__toggle-bar,
	.skip-link {
		transition: none !important;
	}
}

/* ============================================================
   Header sobre o Hero (Home) — modo overlay
   ------------------------------------------------------------
   Na Home a fotografia começa no topo da página e o Header vive sobre ela.
   Nas páginas internas o Header continua claro e institucional. Os dois
   estados compartilham altura, logo, alinhamento, navegação, CTA e
   hamburger — muda só a superfície.
   ============================================================ */

.site-header--overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	background: transparent;
}

/* Quando a admin bar do WordPress existe, ela desloca o body — o header
   absoluto precisa acompanhar para não cobrir/descolar do topo do Hero. */
body.admin-bar .site-header--overlay {
	inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header--overlay {
		inset-block-start: 46px;
	}
}

/*
 * Legibilidade da navegação sobre a fotografia: um véu vertical MUITO suave
 * no topo, não uma faixa. Sem blur, sem glassmorphism — apenas o suficiente
 * para a marca e os links nunca competirem com o céu da imagem.
 */
.site-header--overlay::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 190%;
	background: linear-gradient(
		to bottom,
		rgba(8, 30, 22, 0.52) 0%,
		rgba(8, 30, 22, 0.34) 38%,
		rgba(8, 30, 22, 0.14) 68%,
		rgba(8, 30, 22, 0) 100%
	);
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--motion-micro) var(--motion-ease);
}

.site-header--overlay .site-header__inner {
	position: relative;
	z-index: 1;
}

.site-header--overlay .site-header__nav-list a {
	color: rgba(245, 243, 237, 0.86);
}

.site-header--overlay .site-header__nav-list a:hover,
.site-header--overlay .site-header__nav-list a:focus-visible,
.site-header--overlay .site-header__nav-list a.is-active {
	color: var(--color-branco);
	border-bottom-color: var(--color-branco);
}

/* CTA sobre a fotografia: off-white sólido com texto verde profundo —
   mesma solução de contraste já validada no Hero. */
.site-header--overlay .site-header__cta {
	background: var(--color-off-white);
	color: var(--color-brand-deep);
}

.site-header--overlay .site-header__cta:hover,
.site-header--overlay .site-header__cta:focus-visible {
	background: var(--color-branco);
	color: var(--color-brand-deep);
}

.site-header--overlay .site-header__toggle-bar {
	background: var(--color-branco);
}

.site-header--overlay :focus-visible {
	outline-color: var(--color-branco);
}

/* ---------- Estado após o scroll ----------
   Superfície clara sólida (sem blur pesado): institucional, legível, e o
   conteúdo da página passa por baixo sem transparecer. */

.site-header--overlay.is-scrolled {
	position: fixed;
	background: rgba(245, 243, 237, 0.94);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid rgba(7, 61, 43, 0.08);
	animation: arpan-header-desce var(--motion-reveal) var(--motion-ease) both;
}

.site-header--overlay.is-scrolled::before {
	opacity: 0;
}

.site-header--overlay.is-scrolled .site-header__nav-list a {
	color: var(--color-text-muted);
}

.site-header--overlay.is-scrolled .site-header__nav-list a:hover,
.site-header--overlay.is-scrolled .site-header__nav-list a:focus-visible,
.site-header--overlay.is-scrolled .site-header__nav-list a.is-active {
	color: var(--color-brand-deep);
	border-bottom-color: var(--color-brand-deep);
}

.site-header--overlay.is-scrolled .site-header__cta {
	background: var(--color-brand-deep);
	color: var(--color-branco);
}

.site-header--overlay.is-scrolled .site-header__cta:hover,
.site-header--overlay.is-scrolled .site-header__cta:focus-visible {
	background: var(--color-brand);
	color: var(--color-branco);
}

.site-header--overlay.is-scrolled .site-header__toggle-bar {
	background: var(--color-brand-deep);
}

.site-header--overlay.is-scrolled :focus-visible {
	outline-color: var(--color-brand-deep);
}

@keyframes arpan-header-desce {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

/* Com o menu mobile aberto o Header precisa de superfície própria mesmo
   antes do scroll — o painel abre logo abaixo dele. */
.site-header--overlay.has-menu-open {
	background: var(--color-bg);
}

.site-header--overlay.has-menu-open::before {
	opacity: 0;
}

.site-header--overlay.has-menu-open .site-header__logo--cor {
	opacity: 1;
}

.site-header--overlay.has-menu-open .site-header__logo--branca {
	opacity: 0;
}

.site-header--overlay.has-menu-open .site-header__toggle-bar {
	background: var(--color-brand-deep);
}

@media (prefers-reduced-motion: reduce) {
	.site-header--overlay.is-scrolled {
		animation: none;
	}

	.site-header__logo {
		transition: none;
	}
}


/* ============================================================
   Botão de menu (hamburger) — acabamento
   ============================================================ */

.site-header__toggle {
	transition:
		background-color var(--motion-micro) var(--motion-ease),
		border-color var(--motion-micro) var(--motion-ease);
}

/*
 * Sobre a fotografia, a caixa com borda clara lia como um "botão colado"
 * na imagem. Vira uma superfície translúcida muito discreta, que mantém a
 * área de toque e o contraste das barras sem competir com a foto.
 */
.site-header--overlay:not(.is-scrolled):not(.has-menu-open) .site-header__toggle {
	background: rgba(8, 30, 22, 0.28);
	border-color: rgba(245, 243, 237, 0.5);
}

.site-header--overlay:not(.is-scrolled):not(.has-menu-open) .site-header__toggle:hover,
.site-header--overlay:not(.is-scrolled):not(.has-menu-open) .site-header__toggle:focus-visible {
	background: rgba(8, 30, 22, 0.44);
	border-color: var(--color-branco);
}

/* Área de toque confortável no mobile sem engordar visualmente o botão. */
@media (max-width: 1023px) {
	.site-header__toggle {
		width: 44px;
		height: 44px;
	}
}


/* ============================================================
   Instagram (@arpanbr) — ícone discreto no topo
   ------------------------------------------------------------
   Monoline, `currentColor`: acompanha os estados do Header (claro nas
   páginas internas, branco sobre a fotografia da Home, verde profundo após
   o scroll) sem regra de cor própria por superfície além das abaixo. Alvo
   de toque de 44px no mobile; 40px no desktop.
   ============================================================ */

.site-header__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	color: var(--color-brand-deep);
	border-radius: var(--radius-button);
	transition:
		color var(--motion-micro) var(--motion-ease),
		background-color var(--motion-micro) var(--motion-ease);
}

.site-header__social:hover,
.site-header__social:focus-visible {
	color: var(--color-brand);
	background-color: rgba(7, 61, 43, 0.06);
}

.site-header__social-icon {
	display: block;
}

@media (min-width: 1024px) {
	.site-header__social {
		width: 40px;
		height: 40px;
		/* Aproxima o ícone do CTA sem inflar o espaçamento do grupo. */
		margin-right: calc(var(--space-2) * -1);
		color: var(--color-text-muted);
	}

	.site-header__social:hover,
	.site-header__social:focus-visible {
		color: var(--color-brand-deep);
	}
}

/* Home — sobre a fotografia (modo overlay, antes do scroll). */
.site-header--overlay:not(.is-scrolled):not(.has-menu-open) .site-header__social {
	color: rgba(245, 243, 237, 0.9);
}

.site-header--overlay:not(.is-scrolled):not(.has-menu-open) .site-header__social:hover,
.site-header--overlay:not(.is-scrolled):not(.has-menu-open) .site-header__social:focus-visible {
	color: var(--color-branco);
	background-color: rgba(8, 30, 22, 0.32);
}

/* Home — depois do scroll / com o menu aberto: superfície clara. */
.site-header--overlay.is-scrolled .site-header__social,
.site-header--overlay.has-menu-open .site-header__social {
	color: var(--color-brand-deep);
}

@media (min-width: 1024px) {
	.site-header--overlay.is-scrolled .site-header__social {
		color: var(--color-text-muted);
	}

	.site-header--overlay.is-scrolled .site-header__social:hover,
	.site-header--overlay.is-scrolled .site-header__social:focus-visible {
		color: var(--color-brand-deep);
	}
}