/**
 * Block Header Behavior — frontend styles.
 *
 * @package
 */

/* Gives overlay headers a predictable containing block in block themes. */
.wp-site-blocks {
	position: relative;
}

/* Sticky: stays at top while scrolling. */
.site-header.header--sticky,
header.site-header.header--sticky {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background: var(--bhb-header-scrolled-bg, transparent);
	box-shadow: var(--bhb-header-scrolled-shadow, none);
}

/*
 * Overlay: cabeçalho sobre o hero.
 * Usamos sempre `position: fixed` (não alternar absolute → sticky ao rolar): essa troca
 * reflowava o layout e gerava a "piscada" com o fundo opaco antes do conteúdo estabilizar.
 * Com fixed, só fundo e sombra mudam quando .is-scrolled é aplicado.
 *
 * Temas podem desligar o fixed em breakpoints mobile com CSS próprio carregado
 * depois deste handle (ex. iawp ≤799px → position:relative + pad-top:0).
 * Não há breakpoint embutido aqui — decisão de produto.
 */
.site-header.header--overlay,
header.site-header.header--overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	background: transparent;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Após scroll: mesmo posicionamento; fundo e sombra só se o tema definir as vars.
 * Default da sombra = none (não forçar hairline): temas com border-bottom próprio
 * (ex. outline 1px) duplicavam a borda com o antigo fallback 0 1px 0 …. */
.site-header.header--overlay.is-scrolled,
header.site-header.header--overlay.is-scrolled {
	background: var(--bhb-header-scrolled-bg, #ffffff);
	box-shadow: var(--bhb-header-scrolled-shadow, none);
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.site-header.header--overlay,
	header.site-header.header--overlay {
		transition: none;
	}
}