/*
 * TFCM Rivista – stili comuni della pagina rivista (desktop e mobile).
 *
 * Caricato SOLO sulla pagina rivista, insieme a:
 *   rivista-desktop.css  (media: min-width = breakpoint)
 *   rivista-mobile.css   (media: max-width < breakpoint)
 *
 * Tutto è parametrizzato con variabili CSS: per ritoccare, ridefinisci le variabili
 * in Elementor › Impostazioni sito › CSS personalizzato, ad esempio:
 *   body.tfcm-rivista { --tfcm-pannello-w: 160px; --tfcm-cornice-max-w: 1200px; }
 *   (meglio body.tfcm-rivista di :root: vince a prescindere dall'ordine di caricamento dei CSS)
 *
 * Nota sugli !important: Elementor applica a container e widget regole con alta
 * specificità (variabili --width, --padding, display flex…). Dove il layout della
 * rivista deve imporsi usiamo !important, sempre con valori presi da variabili.
 */

:root {
	/* Colori (--tfcm-bg, --tfcm-bg-prev, --tfcm-bg-next sono scritti dal plugin per ogni pagina) */
	--tfcm-testo: #000;
	--tfcm-bordo-colore: #000;

	/* Layout desktop */
	--tfcm-layout-pad-x: clamp(16px, 2vw, 32px);
	--tfcm-layout-gap: clamp(16px, 2vw, 40px);
	--tfcm-adminbar: 0px;

	/* Cornice (area di lettura) */
	--tfcm-cornice-ratio: 1 / 1;                /* proporzione larghezza / altezza delle pagine */
	--tfcm-cornice-ratio-copertina: 210 / 297;  /* proporzione della copertina (A4) */
	--tfcm-cornice-max-w: 1400px;               /* larghezza massima */
	--tfcm-cornice-formato-durata: 450ms;       /* cambio di formato copertina/pagina (Fase 2) */
	--tfcm-cornice-padding: clamp(10px, 1.4vw, 22px); /* margine interno */
	--tfcm-cornice-spazio-y: clamp(12px, 2.5vh, 32px); /* spazio sopra e sotto la cornice */
	--tfcm-cornice-bordo: 1px;                  /* solo con .tfcm-cornice--bordo */
	/* Scrollbar personalizzata (desktop): i colori e le misure arrivano da Rivista › Impostazioni */
	--tfcm-scrollbar-w: 4px;                    /* larghezza del cursore */
	--tfcm-scrollbar-offset: 4px;               /* distanza dal bordo sinistro del pannello */
	--tfcm-scrollbar-area: 14px;                /* area cliccabile (più larga del cursore) */
	--tfcm-scrollbar-min: 28px;                 /* altezza minima del cursore */
	--tfcm-scrollbar-thumb: rgba(51, 51, 51, .4);
	--tfcm-scrollbar-thumb-hover: rgba(51, 51, 51, .7);

	/* Pannello destro */
	--tfcm-pannello-w: clamp(110px, 10vw, 180px);
	--tfcm-pannello-w-hover: var(--tfcm-pannello-w); /* calcolato dal JS */
	--tfcm-pannello-pad-y: 24px;
	--tfcm-pannello-pad-x: 16px;
	--tfcm-pannello-gap: 28px;
	--tfcm-pannello-z: 50;

	/* Transizioni di pannello (hover) e sfondo */
	--tfcm-transizione-durata: 450ms;
	--tfcm-transizione-easing: cubic-bezier(.22, .61, .36, 1);

	/* Frecce e focus */
	--tfcm-freccia-size: 44px;
	--tfcm-freccia-icona: 28px;
	--tfcm-focus: 2px solid currentColor;
	--tfcm-focus-offset: 3px;

	/* Navigatore volumi e anteprima flottante */
	--tfcm-volumi-gap: .35em;
	--tfcm-anteprima-w: 200px;
	--tfcm-anteprima-distanza: 16px;
	--tfcm-anteprima-durata: 220ms;
	--tfcm-anteprima-ombra: 0 8px 28px rgba(0, 0, 0, .18);

	/* Cambio pagina: tenda di colore (la durata arriva da Rivista › Impostazioni) */
	--tfcm-uscita-durata: 350ms;
	--tfcm-tenda-durata: var(--tfcm-uscita-durata);
	--tfcm-tenda-easing: cubic-bezier(.7, 0, .3, 1);
	--tfcm-tenda-z: 200;

	/* Cambio pagina: ingresso della nuova pagina */
	--tfcm-ingresso-durata: 420ms;
	--tfcm-ingresso-easing: cubic-bezier(.22, .61, .36, 1);
	--tfcm-ingresso-shift: 24px;
	--tfcm-ingresso-ritardo: 160ms;            /* ritardo di pannello e indice */
	--tfcm-ingresso-ui-durata: 320ms;          /* comparsa di pannello e indice */

	/* Apertura / chiusura della copertina */
	--tfcm-copertina-durata: 900ms;             /* rotazione E tenda: stessa durata */
	--tfcm-copertina-easing: cubic-bezier(.55, .05, .3, 1); /* rotazione E tenda: stesso easing */
	--tfcm-copertina-uscita-durata: 240ms;      /* dissolvenza della pagina prima di tornare alla copertina */
	--tfcm-copertina-angolo: -100deg;           /* in gradi */
	--tfcm-copertina-prospettiva: 2200px;
	--tfcm-copertina-scurimento: .55;          /* luminosità a fine rotazione */
	--tfcm-copertina-ombra: 0 24px 40px rgba(0, 0, 0, .35); /* sintassi di drop-shadow(): x y sfocatura colore */

	/* Effetto fusione */
	--tfcm-fusione-contrasto: 1.05;
	--tfcm-fusione-intensita: 1;

	/* Immagini e frammenti nel contenuto */
	--tfcm-img-spazio: 1.5em;
	--tfcm-img-piccola: 50%;
	--tfcm-img-circolare: 180px;
	--tfcm-frammento-spazio: 2em;
	--tfcm-frammento-bordo: 1px solid currentColor;

	/* Mobile */
	--tfcm-mobile-margine: 12px;
	--tfcm-barra-h: 60px;
}

/* ---------------------------------------------------------------------------
 * Body e testi
 * ------------------------------------------------------------------------ */

body.tfcm-rivista {
	background: var(--tfcm-bg, #fff) !important;
	color: var(--tfcm-testo) !important;
	transition: background-color var(--tfcm-transizione-durata) var(--tfcm-transizione-easing);
}

/* I testi della rivista sono sempre neri (anche se il Kit di Elementor dice altro). */
body.tfcm-rivista :is(.tfcm-layout, .e-off-canvas) :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite, a, .elementor-heading-title, .elementor-widget-text-editor, .elementor-icon-list-text) {
	color: var(--tfcm-testo) !important;
}

/* I wrapper "boxed" di Elementor non devono interferire con il layout. */
:is(.tfcm-layout, .tfcm-col-sx, .tfcm-cornice, .tfcm-pannello) > .e-con-inner {
	display: contents !important;
}

/* ---------------------------------------------------------------------------
 * Classi helper
 * ------------------------------------------------------------------------ */

body:not(.tfcm-e-copertina) .tfcm-solo-copertina,
body:not(.tfcm-e-articolo) .tfcm-solo-articolo,
body.tfcm-ha-testatina .tfcm-solo-senza-testatina {
	display: none !important;
}

/* Fallback di .tfcm-nascondi-se-vuoto (di norma il widget non viene proprio stampato). */
.tfcm-nascondi-se-vuoto:has(.tfcm-vuoto) {
	display: none !important;
}

.tfcm-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Cornice: solo l'area di lettura sul colore della pagina
 * (niente bordo, ombra o sfondo propri; il bordo è facoltativo con .tfcm-cornice--bordo)
 * ------------------------------------------------------------------------ */

.tfcm-cornice {
	position: relative !important;
	box-sizing: border-box !important;
	background: transparent !important;
	box-shadow: none;
	padding: var(--tfcm-cornice-padding) !important;
}

/*
 * Nessun contorno di focus attorno alla pagina: né sulla cornice (focalizzabile con tabindex="-1"
 * per lo scroll da tastiera) né sui contenitori di Elementor al suo interno (Loop Grid, loop item,
 * container), in nessuno stato. Il focus resta visibile su frecce, volumi, indice e hamburger.
 */
.tfcm-cornice,
.tfcm-cornice:is(:focus, :focus-visible, :focus-within),
.tfcm-cornice :is(.e-con, .e-con-inner, .elementor, .elementor-widget-loop-grid, .elementor-widget-container, .elementor-loop-container, .e-loop-item):is(:focus, :focus-visible, :focus-within) {
	outline: none !important;
}

.tfcm-cornice:is(:focus, :focus-visible, :focus-within),
.tfcm-cornice :is(.e-con, .e-con-inner, .elementor, .elementor-widget-loop-grid, .elementor-widget-container, .elementor-loop-container, .e-loop-item):is(:focus, :focus-visible, :focus-within) {
	box-shadow: none !important;
}

/* Focus visibile e discreto sugli elementi di navigazione (anche se tema o Kit lo tolgono). */
:is(.tfcm-nav__link, .tfcm-volumi__link, .tfcm-indice__corrente):focus-visible,
.tfcm-hamburger:focus-visible,
.tfcm-hamburger :is(a, button, [role="button"], [tabindex]):focus-visible {
	outline: var(--tfcm-focus) !important;
	outline-offset: var(--tfcm-focus-offset) !important;
}

.tfcm-cornice--bordo {
	border: var(--tfcm-cornice-bordo) solid var(--tfcm-bordo-colore) !important;
}

/* Copertina: nessun padding, l'immagine riempie la cornice. */
body.tfcm-e-copertina .tfcm-cornice {
	padding: 0 !important;
}

/* Il Loop Grid dentro la cornice occupa tutta la larghezza. */
:is(.tfcm-cornice, .tfcm-cornice > .e-con-inner) > :not(.e-con-inner) {
	width: 100%;
	max-width: none;
}

/* Stili del contenuto (immagini, frammenti): vedi contenuto.css, caricato prima di questo file. */

/* ---------------------------------------------------------------------------
 * Pannello (colori comuni a desktop e mobile)
 * ------------------------------------------------------------------------ */

.tfcm-pannello {
	background: var(--tfcm-bg-next, #fff) !important;
	z-index: var(--tfcm-pannello-z) !important;
	transition:
		width var(--tfcm-transizione-durata) var(--tfcm-transizione-easing),
		background-color var(--tfcm-transizione-durata) var(--tfcm-transizione-easing) !important;
}

/* Sull'ultima pagina la successiva non esiste: si usa il colore della precedente. */
body.tfcm-ultima .tfcm-pannello {
	background: var(--tfcm-bg-prev, #fff) !important;
}

/* ---------------------------------------------------------------------------
 * [tfcm_nav]
 * ------------------------------------------------------------------------ */

.tfcm-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.tfcm-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-width: var(--tfcm-freccia-size);
	min-height: var(--tfcm-freccia-size);
	color: var(--tfcm-testo) !important;
	text-decoration: none !important;
	background: transparent;
	border-radius: 999px;
}

.tfcm-nav__icona {
	display: block;
	width: var(--tfcm-freccia-icona);
	height: var(--tfcm-freccia-icona);
	transition: transform 200ms ease;
}

.tfcm-nav__link.is-disabled {
	opacity: .25;
	cursor: default;
}

.tfcm-nav__link:focus-visible {
	outline: var(--tfcm-focus);
	outline-offset: var(--tfcm-focus-offset);
}

@media (hover: hover) {
	a.tfcm-nav__link--prev:hover .tfcm-nav__icona {
		transform: translateX(-3px);
	}

	a.tfcm-nav__link--next:hover .tfcm-nav__icona {
		transform: translateX(3px);
	}
}

/* ---------------------------------------------------------------------------
 * [tfcm_volumi]
 * ------------------------------------------------------------------------ */

.tfcm-volumi__lista {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tfcm-volumi-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.tfcm-volumi__voce {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.tfcm-volumi__voce::before,
.tfcm-volumi__voce::marker {
	content: none !important;
}

.tfcm-volumi__link {
	display: inline-block;
	padding: .15em .1em;
	color: var(--tfcm-testo) !important;
	text-decoration: none !important;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
}

.tfcm-volumi__voce.is-current .tfcm-volumi__link {
	font-weight: 700;
	border-bottom-color: currentColor;
}

.tfcm-volumi__voce.is-bozza .tfcm-volumi__link {
	font-style: italic;
	opacity: .6;
}

.tfcm-volumi__link:focus-visible {
	outline: var(--tfcm-focus);
	outline-offset: var(--tfcm-focus-offset);
}

@media (hover: hover) {
	.tfcm-volumi__link:hover {
		border-bottom-color: currentColor;
	}
}

.tfcm-volumi--menu .tfcm-volumi__lista {
	align-items: flex-start;
	gap: .6em;
	font-size: 1.25em;
}

/* Anteprima flottante (creata da rivista.js, solo su dispositivi con hover). */
.tfcm-volumi-anteprima {
	position: fixed;
	z-index: calc(var(--tfcm-pannello-z) + 2);
	width: var(--tfcm-anteprima-w);
	aspect-ratio: 210 / 297;
	background: #fff;
	box-shadow: var(--tfcm-anteprima-ombra);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-50%) scale(.96);
	transform-origin: right center;
	transition:
		opacity var(--tfcm-anteprima-durata) ease,
		transform var(--tfcm-anteprima-durata) ease;
}

.tfcm-volumi-anteprima img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tfcm-volumi-anteprima.is-visibile {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

/* ---------------------------------------------------------------------------
 * [tfcm_indice] con "Vai alla pagina"
 *   Il numero corrente è un pulsante; al clic rivista.js lo sostituisce con un campo.
 * ------------------------------------------------------------------------ */

.tfcm-indice {
	color: var(--tfcm-testo);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* Pulsante e campo ricevono stili globali dal Kit di Elementor e dal tema: la specificità (0,2,0)
   batte le regole del Kit (es. .elementor-kit-N button). Le proprietà di box hanno !important; quelle
   tipografiche no, così la Tipografia scelta in Rivista › Impostazioni (o da Elementor) può applicarsi. */
.tfcm-indice .tfcm-indice__corrente,
.tfcm-indice .tfcm-indice__campo {
	display: inline-block;
	box-sizing: content-box !important;
	width: auto;
	min-width: 2ch;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
	text-align: center;
	color: inherit !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	vertical-align: baseline;
}

.tfcm-indice .tfcm-indice__corrente {
	cursor: pointer;
	text-decoration: underline dotted transparent;
	text-underline-offset: .2em;
	transition: text-decoration-color 150ms ease;
}

@media (hover: hover) {
	.tfcm-indice__corrente:hover {
		text-decoration-color: currentColor;
	}
}

.tfcm-indice__corrente:focus-visible {
	outline: var(--tfcm-focus);
	outline-offset: var(--tfcm-focus-offset);
}

/* Il campo: stesso stile tipografico, solo una sottile linea sotto. */
.tfcm-indice .tfcm-indice__campo {
	width: 3ch;
	border-bottom: 1px solid currentColor !important;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.tfcm-indice__campo::-webkit-outer-spin-button,
.tfcm-indice__campo::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.tfcm-indice__campo::selection {
	color: var(--tfcm-bg, #fff);
	background: var(--tfcm-testo);
}

/* ---------------------------------------------------------------------------
 * Cambio pagina
 *
 * Uscita (classi sul body, prima di cambiare pagina):
 *   .tfcm-uscita + .tfcm-uscita--avanti | --indietro
 *   + .tfcm-uscita--apri-copertina   (si lascia la copertina in avanti)
 *   + .tfcm-uscita--chiudi-copertina (si torna alla copertina)
 *   La "tenda" di colore è l'elemento .tfcm-tenda creato da rivista.js.
 *
 * Ingresso (classi su <html> e <body>, messe prima del primo paint):
 *   .tfcm-ingresso + .tfcm-ingresso--avanti | --indietro
 *   + .tfcm-ingresso--apri-copertina | --chiudi-copertina
 * ------------------------------------------------------------------------ */

/* Tenda: copre lo schermo con il colore della pagina di destinazione. */
.tfcm-tenda {
	position: fixed;
	inset: 0;
	z-index: var(--tfcm-tenda-z);
	pointer-events: none;
	background: var(--tfcm-bg, #fff);
	clip-path: inset(0 0 0 100%);
	will-change: clip-path;
}

/* In avanti la tenda nasce dal pannello e resta sotto di esso: sembra il pannello che si allarga. */
.tfcm-tenda--avanti {
	z-index: calc(var(--tfcm-pannello-z) - 1);
}

@media (prefers-reduced-motion: no-preference) {

	/*
	 * Copertina che si apre (si lascia la copertina in avanti) e si richiude (si torna alla copertina).
	 * Rotazione e tenda sono animate da rivista.js con la Web Animations API, partono nello stesso
	 * frame e usano la stessa durata e lo stesso easing (--tfcm-copertina-durata / -easing).
	 * Qui ci sono solo l'asse di rotazione e il livello: la cornice sta sopra la tenda.
	 */
	body.tfcm-uscita--apri-copertina .tfcm-cornice,
	.tfcm-ingresso--chiudi-copertina .tfcm-cornice {
		z-index: var(--tfcm-pannello-z) !important;
		transform-origin: left center !important;
		backface-visibility: hidden;
	}

	/* Ritorno alla copertina, prima del cambio pagina: la pagina corrente sfuma. */
	body.tfcm-uscita--chiudi-copertina :is(.tfcm-cornice, .tfcm-col-sx, .tfcm-pannello) {
		opacity: 0 !important;
		transition: opacity var(--tfcm-copertina-uscita-durata) ease !important;
	}

	/*
	 * Arrivo sulla copertina: dal primo paint la copertina è "aperta" (invisibile) e lo schermo è coperto
	 * dal colore della pagina appena lasciata (impostato dallo script nel <head>). Poi rivista.js richiude
	 * la copertina e ritira la tenda insieme. Se il JS non partisse, dopo 4 secondi tutto torna normale.
	 */
	html.tfcm-ingresso--chiudi-copertina .tfcm-cornice {
		transform: perspective(var(--tfcm-copertina-prospettiva)) rotateY(var(--tfcm-copertina-angolo));
		animation: tfcm-sicurezza-cornice 1ms linear 4s forwards;
	}

	html.tfcm-ingresso--chiudi-copertina:not(.tfcm-chiudi-avviato)::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: calc(var(--tfcm-pannello-z) - 1);
		background: var(--tfcm-tenda-ritorno, var(--tfcm-bg-next, #fff));
		pointer-events: none;
		animation: tfcm-sicurezza-tenda 1ms linear 4s forwards;
	}

	/* Ingresso: il contenuto entra con un leggero fade/slide, pannello e colonna sinistra con un piccolo ritardo. */
	.tfcm-ingresso:not(.tfcm-ingresso--chiudi-copertina) .tfcm-cornice {
		animation: tfcm-entra-destra var(--tfcm-ingresso-durata) var(--tfcm-ingresso-easing) both;
	}

	.tfcm-ingresso--indietro:not(.tfcm-ingresso--chiudi-copertina) .tfcm-cornice {
		animation-name: tfcm-entra-sinistra;
	}

	/* Sulla copertina che si richiude il pannello resta visibile (come nell'apertura) e la colonna
	   sinistra viene scoperta dalla tenda: niente dissolvenza. */
	.tfcm-ingresso:not(.tfcm-ingresso--chiudi-copertina) :is(.tfcm-pannello, .tfcm-col-sx) {
		animation: tfcm-compari var(--tfcm-ingresso-ui-durata) ease var(--tfcm-ingresso-ritardo) both;
	}
}

@keyframes tfcm-entra-destra {
	from {
		opacity: 0;
		transform: translateX(var(--tfcm-ingresso-shift));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes tfcm-entra-sinistra {
	from {
		opacity: 0;
		transform: translateX(calc(-1 * var(--tfcm-ingresso-shift)));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes tfcm-compari {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes tfcm-sicurezza-cornice {
	to {
		transform: none;
	}
}

@keyframes tfcm-sicurezza-tenda {
	to {
		visibility: hidden;
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Scrollbar personalizzata (desktop, puntatore fine)
 *
 * Il binario .tfcm-scrollbar è figlio del pannello, appena fuori dal suo bordo sinistro:
 * segue il pannello anche quando si allarga in hover. Altezza e posizione verticale sono
 * quelle della cornice (le calcola rivista.js). La scrollbar nativa della cornice viene
 * nascosta solo quando il JS ha attivato quella personalizzata (body.tfcm-scrollbar-custom).
 * ------------------------------------------------------------------------ */

.tfcm-scrollbar {
	display: none;
}

body.tfcm-scrollbar-custom .tfcm-pannello > .tfcm-scrollbar {
	position: absolute !important;
	top: 0;
	right: calc(100% + var(--tfcm-scrollbar-offset));
	left: auto !important;
	z-index: 1;
	display: block;
	width: var(--tfcm-scrollbar-area) !important;
	max-width: none !important;
	height: 0;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0;
	pointer-events: none;
	touch-action: none;
	transition: opacity 200ms ease;
}

body.tfcm-scrollbar-custom .tfcm-pannello > .tfcm-scrollbar.is-visibile {
	opacity: 1;
	pointer-events: auto;
}

.tfcm-scrollbar__thumb {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--tfcm-scrollbar-w);
	min-height: var(--tfcm-scrollbar-min);
	border-radius: 999px;
	background: var(--tfcm-scrollbar-thumb);
	transition: background-color 150ms ease;
	will-change: transform;
}

.tfcm-scrollbar__thumb:hover,
.tfcm-scrollbar.is-trascinamento .tfcm-scrollbar__thumb {
	background: var(--tfcm-scrollbar-thumb-hover);
}

body.tfcm-scrollbar-custom .tfcm-cornice {
	scrollbar-width: none !important;
}

body.tfcm-scrollbar-custom .tfcm-cornice::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
}

/* Durante il cambio pagina il cursore sparisce. */
body.tfcm-uscita .tfcm-scrollbar {
	opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	body.tfcm-rivista,
	.tfcm-pannello,
	.tfcm-volumi-anteprima,
	.tfcm-nav__icona,
	.tfcm-indice__corrente,
	.tfcm-scrollbar,
	.tfcm-scrollbar__thumb {
		transition: none !important;
	}

	.tfcm-tenda {
		display: none !important;
	}
}