/*
 * Nessuna di queste regole si applica se l'estensione non inietta il
 * markup .zp-customhead-layers (vedi listener.php): senza immagini
 * caricate/abilitate, .headerbar resta esattamente quella del tema.
 */

/*
 * Forza la scrollbar verticale sempre presente: senza questo, la pagina
 * può passare da "senza scrollbar" a "con scrollbar" un istante dopo il
 * primo render (mentre le immagini di sfondo finiscono di caricare e la
 * pagina guadagna qualche pixel di altezza), spostando lateralmente
 * l'intero layout di quanto è larga la scrollbar (~15-17px) — visibile
 * soprattutto sulla fascia header, larga quanto la pagina.
 */
html {
	overflow-y: scroll;
}

.headerbar {
	position: relative;
	overflow: hidden;
}

.zp-customhead-layers {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.zp-customhead-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity var(--zp-customhead-crossfade, 1400ms) ease-in-out;
}

.zp-customhead-slide.active {
	opacity: 1;
}

.zp-customhead-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, var(--zp-customhead-scrim-opacity, 0.35)) 0%,
		rgba(0, 0, 0, calc(var(--zp-customhead-scrim-opacity, 0.35) * 0.45)) 45%,
		rgba(0, 0, 0, calc(var(--zp-customhead-scrim-opacity, 0.35) * 1.3)) 100%
	);
}

/*
 * .headerbar .inner è il contenuto nativo del tema (logo, titolo,
 * ricerca): va sempre sopra ai layer e allo scrim, invariato.
 */
.headerbar .inner {
	position: relative;
	z-index: 2;
}