/**
 * QV Top Bar — stili frontend.
 * I colori arrivano dalle custom property --qv-tb-bg / --qv-tb-text,
 * impostate inline sull'elemento in base alle opzioni.
 */

/*
 * La barra sta sopra l'header e ne segue la stessa dinamica: l'header del
 * tema e' position:fixed a top:0, quindi una barra nel flusso normale gli
 * finirebbe sotto e resterebbe invisibile. La barra e' percio' fissa anche
 * lei, e header + contenuto scendono di quanto la barra occupa.
 *
 *   --qv-tb-height  altezza reale della barra, misurata da top-bar.js
 *   --qv-tb-top     quanto scende la barra per non finire sotto la
 *                   barra amministrazione di WordPress (0 per i visitatori)
 */
.qv-top-bar {
	background: var(--qv-tb-bg, #9b113b);
	color: var(--qv-tb-text, #fff);
	position: fixed;
	top: var(--qv-tb-top, 0px);
	left: 0;
	width: 100%;
	/* Sotto l'header (1000) e sotto l'overlay del menu mobile (1001):
	   non si sovrappongono, ma se il menu si apre deve coprire anche lei. */
	z-index: 999;
	padding: 10px 20px;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* L'header scende di quanto occupa la barra. */
body.qv-has-top-bar .custom-header {
	top: calc(var(--qv-tb-top, 0px) + var(--qv-tb-height, 40px));
}

/* Il contenuto compensa header + barra (il tema da solo compensa solo l'header). */
body.qv-has-top-bar #content,
body.qv-has-top-bar .site-content {
	padding-top: calc(var(--header-height, 0px) + var(--qv-tb-top, 0px) + var(--qv-tb-height, 40px));
}

/* Le notifiche WooCommerce del tema si agganciano sotto l'header: seguono. */
body.qv-has-top-bar .custom-wc-notices-wrapper {
	top: calc(var(--header-height, 0px) + var(--qv-tb-top, 0px) + var(--qv-tb-height, 40px));
}

/*
 * I messaggi si sovrappongono nella stessa cella di griglia: cosi' la barra
 * prende l'altezza del messaggio piu' alto e non "salta" a ogni cambio.
 */
.qv-top-bar__track {
	display: grid;
	max-width: 1400px;
	margin: 0 auto;
}

.qv-top-bar__msg {
	grid-area: 1 / 1;
	opacity: 0;
	/* visibility toglie i messaggi nascosti anche dal giro dei TAB:
	   senza, i link non visibili resterebbero raggiungibili da tastiera. */
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* Prima esce il vecchio, poi entra il nuovo: in dissolvenza incrociata i
   due testi stavano a meta' opacita' uno sopra l'altro e si leggeva male. */
.qv-top-bar__msg.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0.35s;
}

/* I link ereditano il colore del testo, restando riconoscibili. */
.qv-top-bar a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.qv-top-bar a:hover,
.qv-top-bar a:focus {
	text-decoration: none;
	opacity: 0.85;
}

.qv-top-bar a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.qv-top-bar {
		font-size: 13px;
		padding: 8px 14px;
	}
}

/* Chi ha chiesto meno animazioni ottiene il cambio secco, senza dissolvenza. */
@media (prefers-reduced-motion: reduce) {
	.qv-top-bar__msg {
		transition: none;
	}
}