/*
 * 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 {
	/* Solo position:relative, MAI overflow:hidden qui: alcuni temi
	   (BlackBoard-Max, a differenza di prosilver) tengono il menu a
	   tendina delle notifiche DENTRO .headerbar invece che in .navbar
	   fuori da essa — un overflow:hidden sull'intera fascia tagliava
	   quel menu quando si espandeva oltre i suoi bordi, rendendolo
	   invisibile/non cliccabile. L'overflow va contenuto solo sul
	   nostro stesso layer, sotto, non sull'intera .headerbar. */
	position: relative;
}

.zp-customhead-layers {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* z-index:0 (MAI negativo): .headerbar del tema dipinge un proprio
	   background-color/gradient pieno e opaco (stylesheet.css). Un
	   figlio con z-index negativo finisce DIETRO quel background del
	   genitore stesso — non solo dietro agli altri figli — quindi le
	   immagini risultavano generate nel markup ma invisibili sempre,
	   coperte dal grigio del tema, indipendentemente da browser/tema
	   (bug scoperto con verifica diretta in locale). Con z-index:0 il
	   layer sta sopra al background di .headerbar ma sotto a .inner,
	   che qui sotto riceve z-index:1 per restarci sopra esplicitamente. */
	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, i pulsanti zp_headlink): deve restare sopra al layer di
 * sfondo (z-index:0, sopra), quindi z-index:1 qui. Uno stacking-context
 * proprio (position:relative + z-index) è inevitabile in questo punto,
 * ma resta comunque INTERNO a .headerbar — non compete con elementi
 * esterni come il dropdown notifiche in .navbar (contesto separato,
 * fratello di .headerbar, non figlio): la causa originale del bug
 * "notifiche non cliccabili" era altrove (vedi commit precedenti), non
 * qui.
 */
.headerbar .inner {
	position: relative;
	z-index: 1;
}