/**
 * Cabecera fija: transparente sobre la imagen de cabecera, negra al desplazarse.
 * Ajusta los colores en las variables de :root.
 */
:root {
	--sbv-header-bg: #000000;                  /* fondo al hacer scroll */
	--sbv-header-scrim: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); /* velo sobre la imagen, arriba del todo (pon "transparent" para quitarlo) */
	--sbv-header-link: #ffffff;                /* enlaces del menú */
	--sbv-header-link-hover: #ec008c;          /* hover / activo */
	--sbv-header-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	--sbv-header-speed: 0.3s;
	--sbv-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

/* ---- Cabecera fija en todo el sitio ---- */
#masthead.site-header {
	position: fixed;
	top: var(--sbv-admin-bar);
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--sbv-header-bg);
	box-shadow: var(--sbv-header-shadow);
	transition: background-color var(--sbv-header-speed) ease, box-shadow var(--sbv-header-speed) ease;
}

/* Las filas internas de Astra traen su propio fondo: lo anulamos para que mande #masthead */
#masthead .ast-above-header-bar,
#masthead .ast-primary-header-bar,
#masthead .ast-below-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar,
#masthead .main-header-bar {
	background: transparent !important;
	border-bottom: 0 !important;
	transition: padding var(--sbv-header-speed) ease;
}

/* En páginas interiores el contenido empieza debajo de la cabecera (altura calculada por JS) */
body:not(.sbv-header-overlay) {
	padding-top: var(--sbv-header-height, 0px);
}

/* ---- Páginas con imagen de cabecera: transparente arriba del todo, negra al hacer scroll ---- */
body.sbv-header-overlay:not(.sbv-scrolled):not(.ast-main-header-nav-open) #masthead.site-header {
	background: var(--sbv-header-scrim);
	box-shadow: none;
}

/* Colores de enlaces / iconos sobre fondo oscuro o imagen */
#masthead .main-header-menu > .menu-item > .menu-link,
#masthead .ast-header-account-wrap,
#masthead .ast-header-search .astra-search-icon,
#masthead .ast-site-header-cart .ast-cart-menu-wrap,
#masthead .site-title a,
#masthead .menu-toggle {
	color: var(--sbv-header-link) !important;
	transition: color var(--sbv-header-speed) ease;
}
#masthead .menu-toggle .ast-mobile-svg,
#masthead .menu-toggle svg {
	fill: var(--sbv-header-link) !important;
}
#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--sbv-header-link-hover) !important;
}

/* Al hacer scroll la cabecera se compacta un poco */
body.sbv-scrolled #masthead .ast-primary-header-bar .site-primary-header-wrap {
	min-height: 60px;
}
body.sbv-scrolled #masthead .custom-logo-link img {
	max-height: 50px;
	width: auto;
	transition: max-height var(--sbv-header-speed) ease;
}

/* Admin bar en móvil (<600px) deja de ser fija: evitamos el hueco */
@media (max-width: 600px) {
	body.admin-bar.sbv-scrolled #masthead.site-header {
		top: 0;
	}
}