/* ==========================================================================
   IL CIELO — che si veda davvero, e da tutti i dispositivi.
   ==========================================================================

   Disegnare le stelle non basta: se sopra ci sta un foglio bianco largo
   quanto lo schermo, il cielo c'è ma non lo vede nessuno. Su un telefono
   da 390 pixel questo è esattamente quello che succede.

   Qui si fanno tre cose:

   1. si dà al sito un fondo scuro VERO, anche dove il tema non ce l'ha,
      perché un cielo stellato su fondo bianco non è un cielo;
   2. si lascia una cornice di respiro attorno al foglio, così le stelle
      si vedono anche sul telefono — poca, ma continua, come un
      passe-partout attorno a un quadro;
   3. si tolgono i fondi opachi che il tema mette ai suoi contenitori e
      che coprirebbero tutto.

   Il numero delle stelle non sta qui: lo decide il codice guardando che
   macchina ha chi arriva.
   ========================================================================== */

/* Il fondo del sito. Serve un colore VERO sotto alla tela: la tela è
   trasparente, e su bianco le stelle bianche non si vedono. */
body.fpe-cielo-on {
	background-color: var(--fpe-cielo-fondo, #0b1120) !important;
	background-image:
		radial-gradient(1200px 680px at 22% -8%, rgba(56, 189, 248, .13), transparent 60%),
		radial-gradient(900px 620px at 88% 12%, rgba(192, 132, 252, .10), transparent 62%) !important;
	background-attachment: fixed !important;
}

/*
 * I contenitori del tema.
 *
 * Newsup dà uno sfondo pieno alle sue fasce: se restano, il cielo resta
 * dietro a un muro. Si spengono SOLO quelli, e solo quando il cielo è
 * acceso — il contenuto vero ha già il suo foglio e non perde niente.
 */
body.fpe-cielo-on .site,
body.fpe-cielo-on .site-content,
body.fpe-cielo-on .site-main,
body.fpe-cielo-on .site-inner,
body.fpe-cielo-on .content-area,
body.fpe-cielo-on #content,
body.fpe-cielo-on #primary,
body.fpe-cielo-on #main,
body.fpe-cielo-on #page,
body.fpe-cielo-on .entry-content,
body.fpe-cielo-on .entry-header,
body.fpe-cielo-on .post-header,
body.fpe-cielo-on .page-header,
body.fpe-cielo-on .post-content,
body.fpe-cielo-on .mag-content,
body.fpe-cielo-on .main-content,
body.fpe-cielo-on article.post,
body.fpe-cielo-on article.page,
body.fpe-cielo-on .hentry,
body.fpe-cielo-on [class*="mg-blog-post"],
body.fpe-cielo-on [class*="mg-post"],
body.fpe-cielo-on [class*="single-post-box"],
/* Letti dal sorgente vero di Newsup, non indovinati:
   page.php usa `.container-fluid` (non `.container`) e il riquadro bianco
   attorno al contenuto e' `.mg-card-box`. Erano i due che mi mancavano. */
body.fpe-cielo-on .container,
body.fpe-cielo-on .container-fluid,
body.fpe-cielo-on .mg-card-box,
body.fpe-cielo-on .mg-breadcrumb-section,
body.fpe-cielo-on .pagebuilder-content,
body.fpe-cielo-on .fullwidth-class,
body.fpe-cielo-on .row {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   IL TITOLO DELL'ARTICOLO

   Non è dentro al foglio e non può esserci: lo stampa il tema, prima del
   contenuto, e il plugin il contenuto lo prende quando il titolo è già
   uscito. Invece di combattere per portarlo dentro — che vuol dire
   spostare pezzi di pagina col codice, e si vede lo scatto — lo si veste
   per il posto dove sta: sopra al cielo.

   Diventa una scelta invece che un incidente: il titolo grande e chiaro
   sulle stelle, e sotto il foglio bianco dove si legge la lezione.
   -------------------------------------------------------------------------- */

body.fpe-cielo-on .entry-title,
body.fpe-cielo-on .post-title,
body.fpe-cielo-on .entry-title a,
body.fpe-cielo-on .post-title a,
body.fpe-cielo-on h1.title,
body.fpe-cielo-on .page-title {
	color: #f8fafc !important;
	text-shadow: 0 2px 20px rgba(2, 6, 23, .6);
}
body.fpe-cielo-on .entry-title a:hover,
body.fpe-cielo-on .post-title a:hover { color: var(--fp-accent, #38bdf8) !important; }

/* La riga con la data, l'autore, la categoria. */
body.fpe-cielo-on .entry-meta,
body.fpe-cielo-on .post-meta,
body.fpe-cielo-on .entry-meta span,
body.fpe-cielo-on .post-meta span,
body.fpe-cielo-on .posted-on,
body.fpe-cielo-on .byline,
body.fpe-cielo-on .author-meta,
body.fpe-cielo-on .breadcrumb,
body.fpe-cielo-on .breadcrumb a,
body.fpe-cielo-on .breadcrumbs,
body.fpe-cielo-on .breadcrumbs a { color: #94a3b8 !important; }

body.fpe-cielo-on .entry-meta a,
body.fpe-cielo-on .post-meta a,
body.fpe-cielo-on .posted-on a,
body.fpe-cielo-on .byline a { color: var(--fp-accent, #38bdf8) !important; }

/* Sull'articolo singolo il titolo prende la stessa larghezza del foglio e
   ci si mette in asse: due blocchi allineati, non due cose diverse. */
body.fpe-cielo-on.single .entry-header,
body.fpe-cielo-on.single .post-header,
body.fpe-cielo-on.page .entry-header {
	max-width: min(var(--fpe-foglio-largo, 860px), calc(100% - var(--fpe-respiro, 28px) * 2));
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   LA CORNICE DI RESPIRO

   Il foglio non tocca i bordi: attorno resta una striscia di cielo. Sul
   computer è larga, sul telefono è sottile ma c'è — ed è la differenza
   fra «lo sfondo esiste» e «lo sfondo si vede».
   -------------------------------------------------------------------------- */

body.fpe-cielo-on .fpe-foglio {
	margin-left: auto;
	margin-right: auto;
	max-width: min(var(--fpe-foglio-largo, 860px), calc(100% - var(--fpe-respiro, 28px) * 2));
}

@media (max-width: 768px) {
	body.fpe-cielo-on .fpe-foglio {
		--fpe-respiro: 12px;
		border-radius: 14px;
	}
}

/* Sopra e sotto al foglio il cielo si vede sempre: è lì che si nota. */
body.fpe-cielo-on .fpe-foglio {
	margin-top: clamp(14px, 3vw, 34px);
	margin-bottom: clamp(20px, 4vw, 46px);
}

/* --------------------------------------------------------------------------
   IL FOGLIO SUL CIELO

   Un foglio bianco pieno su un cielo stellato è un ritaglio incollato.
   Un filo di trasparenza in alto, dove il testo non c'è mai, lo fa
   sembrare appoggiato — e le stelle continuano dentro per un attimo,
   invece di fermarsi sul bordo.

   La trasparenza sta SOLO nella cornice superiore, mai sotto al testo:
   la leggibilità non si tocca.
   -------------------------------------------------------------------------- */

body.fpe-cielo-on .fpe-foglio::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 96px;
	border-radius: inherit;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: linear-gradient(180deg, rgba(56, 189, 248, .10), transparent);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Chi ha chiesto meno animazioni riceve un cielo fermo, non nessun cielo:
   lo sfondo resta, si ferma solo il movimento (lo fa il codice).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.fpe-cielo-on { background-attachment: scroll !important; }
}

/* La tela non si smorza. Nessuno la sbiadisce, per nessun motivo: è già
   successo una volta (il gatto aveva una velatura che si chiamava come
   lei) e sul telefono il cielo era sparito. */
.fpe-tela-cielo { opacity: 1 !important; height: 100% !important; }

/* In stampa il cielo sparisce: la carta è bianca. */
@media print {
	.fpe-tela-cielo { display: none !important; }
	body.fpe-cielo-on { background: #fff !important; }
}