/*
 * Cabeçalho global (RF01–RF04).
 * Markup: parts/header.html
 *
 * Nav horizontal a partir de 900px (Notebooks+). Hambúrguer até 899px (Mobile + Tablet).
 */

.wp-site-blocks > .almar-cabecalho {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	border-bottom: 1px solid rgb(244 241 236 / 0.1);
	transition: background-color 0.3s ease;
	/*
	 * Sólido é o PADRÃO. O menu é claro (rgb(244 241 236 / 0.8)); sobre o
	 * branco-quente das páginas de fundo claro — blog, arquivo, busca, página, 404 —
	 * ele simplesmente desaparecia enquanto o visitante não rolava.
	 */
	background-color: var(--wp--preset--color--fundo-principal);
}

/*
 * Transparente é a EXCEÇÃO, e quem a declara é o conteúdo: só onde existe um hero
 * escuro subindo por baixo do cabeçalho (margem negativa) há o que deixar aparecer.
 * O :has() acerta a Home, as listagens, o post e qualquer página onde o cliente
 * inserir um desses patterns — sem body class, sem JS. Num navegador sem :has() a
 * regra é descartada e o cabeçalho fica sólido: a falha cai para o lado legível.
 *
 * Sem backdrop-filter: ele cria containing block e prende o overlay mobile
 * (position:fixed) à altura do cabeçalho sticky após scroll.
 */
body:has(.almar-hero, .almar-blog-hero, .almar-post-hero) .wp-site-blocks > .almar-cabecalho:not(.is-scrolled) {
	background-color: transparent;
}

.almar-cabecalho.is-scrolled {
	background-color: var(--wp--preset--color--fundo-principal);
}

.almar-cabecalho .wp-block-site-logo img {
	height: 72px;
	width: auto;
	max-width: none;
	/* O logo original é escuro; sobre o hero ele precisa ser branco. */
	filter: brightness(0) invert(1);
}

.almar-cabecalho .wp-block-navigation {
	--navigation-layout-align: center;
}

.almar-cabecalho .wp-block-navigation-item__content {
	color: rgb(244 241 236 / 0.8) !important;
	text-decoration: none;
	transition: color 0.25s ease;
}

.almar-cabecalho .wp-block-navigation-item:not(.almar-nav-cta) .wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
}

.almar-cabecalho .wp-block-navigation-item:not(.almar-nav-cta) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--wp--preset--color--teal-destaque);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}

.almar-cabecalho .wp-block-navigation-item__content:hover,
.almar-cabecalho .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--teal-destaque) !important;
	text-decoration: none;
}

.almar-cabecalho .wp-block-navigation-item:not(.almar-nav-cta) .wp-block-navigation-item__content:hover::after,
.almar-cabecalho .wp-block-navigation-item:not(.almar-nav-cta) .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

.almar-cabecalho .wp-block-navigation__responsive-container-open,
.almar-cabecalho .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--branco-quente);
	transition: color 0.25s ease, opacity 0.25s ease;
}

.almar-cabecalho .wp-block-navigation__responsive-container-open:hover,
.almar-cabecalho .wp-block-navigation__responsive-container-open:focus-visible,
.almar-cabecalho .wp-block-navigation__responsive-container-close:hover,
.almar-cabecalho .wp-block-navigation__responsive-container-close:focus-visible {
	color: var(--wp--preset--color--teal-destaque);
	opacity: 0.9;
}

/*
 * O CTA existe duas vezes: como botão no desktop e como item do menu no overlay
 * mobile — o overlay do core/navigation não aceita um core/button dentro.
 * Cada um aparece só onde o outro não está.
 */
.almar-cabecalho .almar-nav-cta {
	display: none;
}

/*
 * E as duas versões só aparecem onde há para onde ir. O CTA aponta para #contato, que é
 * uma âncora na própria página: a Home traz a seção de contato, e o single.html a inclui
 * ao fim do post. Nas listagens — blog, arquivo, busca — ela não existe, e o botão levava
 * a lugar nenhum. Em vez de listar templates, a regra pergunta pelo destino.
 *
 * O :not(:has(#contato)) carrega a especificidade do id, então vence o `display: block`
 * que o overlay mobile aplica ao item do menu logo abaixo.
 */
body:not(:has(#contato)) .almar-cabecalho .wp-block-buttons.almar-cabecalho__cta,
body:not(:has(#contato)) .almar-cabecalho .almar-nav-cta {
	display: none;
}

.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .almar-nav-cta {
	display: block;
}

/* Mobile + Tablet — hambúrguer e overlay. */
@media (max-width: 899px) {
	.almar-cabecalho .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.almar-cabecalho .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.almar-cabecalho .wp-block-buttons.almar-cabecalho__cta {
		display: none;
	}
}

.almar-cabecalho .wp-block-navigation__responsive-container-close {
	top: var(--almar-margem-lateral);
	right: var(--almar-margem-lateral);
	padding: 8px;
}

.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	/*
	 * O core não aplica border-box aqui (só no close/dialog/content). Sem isto o
	 * width: 100% soma o padding e o overlay fica 2× --almar-margem-lateral mais
	 * largo que a viewport: o miolo — e o menu centralizado dentro dele — nasce
	 * deslocado um padding para a direita. O mesmo vale para a altura.
	 */
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	height: 100dvh;
	background-color: var(--wp--preset--color--fundo-principal);
	color: var(--wp--preset--color--branco-quente);
	padding: var(--almar-margem-lateral);
}

/*
 * O container é flex column, mas entre ele e o conteúdo o core interpõe
 * close > dialog, ambos display:block e de altura automática — o `flex: 1` do
 * conteúdo não tinha o que esticar e o menu encostava no topo. Esticando a
 * cadeia, o justify-content: center abaixo ganha altura para centralizar.
 * O dialog segue position:relative (core), que ancora o botão de fechar.
 */
.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

/*
 * O nav desktop usa justifyContent: right; no overlay isso empurra os itens
 * para a borda. Centralizamos só no menu aberto — o desktop mantém o alinhamento.
 */
.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-top: 0;
}

.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: center;
	width: 100%;
}

/*
 * A lista cresce (flex-grow: 1) até ocupar todo o conteúdo, então centralizar o
 * conteúdo não basta: sem isto o core mantém justify-content: flex-start e os
 * itens ficam colados no topo, com a sobra toda embaixo.
 */
.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center;
}

.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--branco-quente);
	font-size: var(--wp--preset--font-size--headline-sm);
	letter-spacing: normal;
	text-align: center;
	transition: color 0.25s ease, transform 0.25s ease;
}

.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.almar-nav-cta) .wp-block-navigation-item__content::after {
	bottom: -4px;
}

.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.almar-cabecalho .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	transform: translateY(-2px);
}