#site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	isolation: isolate;
	/* glassmorphism muito suave — menos opaco do que antes, para se
	   sentir mesmo como vidro (não como um fundo sólido com blur) */
	background: rgba(247, 246, 241, 0.55);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	transition: border-color var(--dur-sm) var(--ease-premium), padding var(--dur-sm) var(--ease-premium), background var(--dur-sm) ease;
}

#site-header.is-scrolled {
	background: rgba(247, 246, 241, 0.85);
	border-bottom-color: var(--color-border);
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-xs);
	transition: padding var(--dur-sm) var(--ease-premium);
}

#site-header.is-scrolled .header-inner {
	padding-block: 0.5rem;
}

.site-logo img {
	height: 48px;
	width: auto;
	transition: height var(--dur-sm) var(--ease-premium);
}

#site-header.is-scrolled .site-logo img {
	height: 38px;
}

.site-logo a {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.site-logo img {
		height: 40px;
	}

	#site-header.is-scrolled .site-logo img {
		height: 32px;
	}
}

.header-status {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	/* reserva espaço para o botão do menu, que agora é position:fixed e
	   já não ocupa lugar no layout flex do header (ver .menu-toggle) */
	margin-right: 64px;
}

.header-badge {
	margin: 0;
}

/* ============ Badge "disponível" reutilizável ============ */
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	padding: 0.35rem 0.85rem 0.35rem 0.55rem;
	border-radius: var(--radius-pill);
	/* vidro suave em vez de fundo sólido — o peso de texto sobe (800)
	   para compensar o fundo mais translúcido e manter a legibilidade */
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.hero-badge span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(226, 72, 12, 0.25);
}

/* O badge do header é sempre um <a> (ver header.php) — feedback de hover
   no mesmo idioma "vidro" já usado em .btn-glass/.btn-glass-dark. */
.header-badge {
	transition: background var(--dur-sm) var(--ease-premium), border-color var(--dur-sm) var(--ease-premium);
}

.header-badge:hover {
	background: rgba(255, 255, 255, 0.55);
	border-color: rgba(255, 255, 255, 0.85);
}

/* ============ Botão de menu — sempre visível, nunca "invisível" ============ */
/* O botão do menu vive fora do <header> (ver header.php) — position:fixed
   e z-index muito acima de tudo o resto do site (o valor mais alto usado
   em qualquer outro sítio é 999, do cursor personalizado), para nunca
   mais poder ficar tapado por nada, seja qual for a página. */
.menu-toggle {
	position: fixed;
	/* 0.68rem: centra o botão (44px) com o logo (48px) + padding do
	   header no estado normal — ver os outros 3 estados abaixo
	   (scrolled / mobile / mobile scrolled), cada um com uma altura
	   de conteúdo diferente. Antes disto era um valor "a olho" (1.1rem)
	   que só coincidia por acaso num dos 4 estados. */
	top: 0.68rem;
	/* em ecrãs mais largos que o container (1240px), acompanha a
	   margem real do conteúdo em vez de ficar colado à margem física
	   do ecrã — sem isto, ficava "à deriva", longe do resto do header,
	   em monitores grandes */
	right: max(var(--space-sm), calc((100vw - var(--container-max)) / 2 + var(--space-sm)));
	z-index: 9999;
	width: 44px;
	height: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	transition: background var(--dur-sm) ease, border-color var(--dur-sm) ease, transform var(--dur-sm) var(--ease-snap), top var(--dur-sm) ease;
}

.menu-toggle.is-scrolled {
	/* header encolhe (padding 0.5rem + logo 38px) — botão sobe consigo */
	top: 0.32rem;
}

/* Ajuste para a admin bar do WordPress (visível só quando autenticado):
   ela empurra a página toda para baixo, mas um elemento position:fixed
   fica sempre relativo ao ecrã e não a acompanha — por isso o botão
   soma aqui a mesma altura que a admin bar ocupa. Os valores e o
   breakpoint (782px) são os mesmos que o próprio WordPress usa para a
   admin bar (ver admin-bar.css do core). */
body.admin-bar .menu-toggle {
	top: calc(0.68rem + 32px);
}

body.admin-bar .menu-toggle.is-scrolled {
	top: calc(0.32rem + 32px);
}

@media (max-width: 600px) {
	.menu-toggle {
		/* mobile: logo 40px em vez de 48px */
		top: 0.43rem;
		right: var(--space-xs);
	}

	.menu-toggle.is-scrolled {
		/* mobile scrolled: logo 32px */
		top: 0.13rem;
	}

	.header-status {
		margin-right: 60px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .menu-toggle {
		top: calc(0.43rem + 46px);
	}

	body.admin-bar .menu-toggle.is-scrolled {
		top: calc(0.13rem + 46px);
	}
}

.menu-toggle:hover {
	border-color: var(--color-accent);
	transform: translateY(-1px);
}

.menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform 0.3s var(--ease-snap), opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] {
	background: var(--color-text);
	border-color: var(--color-text);
}

.menu-toggle[aria-expanded="true"] span {
	background: var(--color-bg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ============ Scrim (fundo a escurecer o resto da página) ============ */
.nav-scrim {
	position: fixed;
	inset: 0;
	/* acima do #site-header (200) — agora que vive fora dele (ver
	   header.php), precisa de o cobrir visualmente quando o menu abre */
	z-index: 210;
	background: rgba(11, 12, 7, 0.35);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-md) var(--ease-premium), visibility var(--dur-md);
}

body.menu-is-open .nav-scrim {
	opacity: 1;
	visibility: visible;
}

/* ============ Painel lateral — sempre com fundo 100% opaco ============ */
.nav-overlay {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 220;
	width: min(420px, 92vw);
	visibility: hidden;
	pointer-events: none;
}

.nav-overlay.is-open {
	visibility: visible;
	pointer-events: auto;
}

.nav-panel {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border-left: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
	padding: 5.5rem var(--space-md) var(--space-md);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--dur-lg) var(--ease-premium);
}

.nav-overlay.is-open .nav-panel {
	transform: translateX(0);
}

.nav-panel .eyebrow {
	color: var(--color-text-faint);
}

.nav-panel .eyebrow::before {
	background: var(--color-text-faint);
}

.nav-panel-links {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.nav-panel-links a {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 600;
	letter-spacing: var(--ls-tight);
	line-height: 1.4;
	color: var(--color-text);
	transition: color var(--dur-sm) ease, transform var(--dur-sm) var(--ease-snap);
	display: inline-block;
}

.nav-panel-links a:hover {
	color: var(--color-accent-dark);
	transform: translateX(5px);
}

.nav-panel-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

.nav-panel-lang {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

/* o markup interno do seletor é gerado pelo TranslatePress — a cor,
   as bandeiras e o espaçamento entre idiomas configuram-se em
   Definições > TranslatePress > Seletor de Idioma, no wp-admin */
.nav-panel-lang .trp-language-switcher-container {
	margin-top: var(--space-3xs);
}

.nav-panel-contact a {
	font-weight: 600;
	font-size: var(--fs-base);
}

.nav-panel-contact a:hover {
	color: var(--color-accent-dark);
}

.nav-panel-footer {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-xs);
	color: var(--color-text-faint);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

body.menu-is-open {
	overflow: hidden;
}