/**
 * IL GUSCIO — la faccia della homepage sulle nostre pagine.
 *
 * ------------------------------------------------------------------
 * COME E' SCRITTO, E PERCHE' COSI'.
 *
 * Questo foglio deve vincere su un tema che non conosco. Ci sono due
 * modi di farlo e uno solo è quello giusto:
 *
 *   · SBAGLIATO: `!important` su tutto. Funziona oggi e domani rende
 *     impossibile cambiare qualsiasi cosa, comprese le nostre.
 *   · GIUSTO: `!important` SOLO sulle poche regole che devono battere
 *     il tema per forza (nascondere la barra, allargare il contenuto),
 *     e tutto il resto scritto normale, sotto a `body.fpe-guscio` — che
 *     è già più specifico di quello che scrive un tema.
 *
 * E tutto vive dentro a `body.fpe-guscio`, che compare SOLO sulle
 * pagine che contengono una nostra scorciatoia. Gli articoli e le
 * pagine di categoria non lo vedono nemmeno.
 */

/* I gettoni arrivano da `fpe-radici.css`, dichiarati una volta sola per
   tutto il sito. Qui non se ne ridichiara nemmeno uno: era proprio la
   copia di quel blocco a portarsi dietro il difetto del colore che si
   citava da solo. */
body.fpe-guscio {
	/* `!important` SOLO QUI, e per il motivo scritto in cima a questo
	   file: e' una delle poche regole che devono battere il tema.
	 *
	 * IL DIFETTO CHE RIPARA, trovato dal banco `pagine.js` il 16
	 * settembre (era rosso da prima, e nessuno lo guardava): il tema di
	 * prova scrive `body { background-color: transparent !important }`.
	 * Senza `!important` da questa parte, quella riga vince comunque —
	 * `!important` batte tutto quello che non lo e', a qualunque
	 * ordine — e il guscio si ritrova a disegnare testo chiaro sul
	 * fondo del tema. Che, se il tema e' chiaro, vuol dire testo
	 * bianco su bianco: la pagina diventa vuota.
	 *
	 * Il colore invece NON e' `!important`: il fondo deve vincere, ma
	 * chi vuole cambiare il colore del testo dev'essere ancora libero
	 * di farlo. */
	background-color: #050b14 !important;
	color: #e8eefb;
}

/* =====================================================================
 * 1. VIA LA BARRA LATERALE
 * ---------------------------------------------------------------------
 * L'elenco è lungo perché i temi la chiamano in dieci modi diversi e
 * non so quale sia il suo. Sono tutti nomi che vogliono dire «colonna
 * di widget di fianco al contenuto»: nessuno di questi nomi viene mai
 * usato per il contenuto vero.
 *
 * `!important` qui è necessario: il tema la sua barra la mostra con
 * regole sue, e senza questo resterebbe.
 * ===================================================================== */

/* SULLE CATEGORIE LA BARRA RESTA (`.fpe-con-barra`): aprendo
   «Grammatica», quella colonna di articoli è quello che uno sta
   cercando. Toglierla sarebbe applicare una regola invece di guardare
   la pagina. */
body.fpe-guscio:not( .fpe-con-barra ) #secondary,
body.fpe-guscio:not( .fpe-con-barra ) #sidebar,
body.fpe-guscio:not( .fpe-con-barra ) .sidebar,
body.fpe-guscio:not( .fpe-con-barra ) .widget-area,
body.fpe-guscio:not( .fpe-con-barra ) .site-sidebar,
body.fpe-guscio:not( .fpe-con-barra ) .sidebar-area,
body.fpe-guscio:not( .fpe-con-barra ) .sidebar-primary,
body.fpe-guscio:not( .fpe-con-barra ) .secondary-sidebar,
body.fpe-guscio:not( .fpe-con-barra ) aside.widget-area,
body.fpe-guscio:not( .fpe-con-barra ) .col-md-4.sidebar,
body.fpe-guscio .fp-footer-sink { display: none !important; }

/* Dove la barra resta, il contenuto non deve prendersi tutto: se no le
   si siede sopra. */
body.fpe-con-barra #primary,
body.fpe-con-barra .content-area { width: auto !important; max-width: none !important; }

/* La barra, però, vestita come il resto: pannelli di vetro invece di
   scatole bianche col titolo blu. */
/* LA FORZA GIUSTA, e perché serve proprio qui.
   Il tema scrive `#secondary .widget { background:#fff }`. Un
   IDENTIFICATIVO batte qualsiasi numero di classi: `body.fpe-guscio
   .widget` perdeva, e i widget restavano scatole bianche. Si nominano
   quindi gli stessi identificativi — non con `!important`, ma con la
   stessa moneta con cui paga il tema. */
body.fpe-guscio .widget,
body.fpe-guscio #secondary .widget,
body.fpe-guscio #sidebar .widget,
body.fpe-guscio .widget-area .widget {
	background: var( --fpe-vetro );
	border: 1px solid var( --fpe-bordo );
	border-radius: var( --fpe-r-lg );
	overflow: hidden;
	color: var( --fpe-text );
}
body.fpe-guscio .widget-title,
body.fpe-guscio #secondary .widget-title,
body.fpe-guscio #sidebar .widget-title,
body.fpe-guscio .widget h2 {
	background: transparent;
	color: var( --fpe-accent );
	font-size: .84rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 14px 16px 6px;
	margin: 0;
}
body.fpe-guscio .widget a,
body.fpe-guscio #secondary .widget a { color: #dbe7f8; }
body.fpe-guscio #secondary input,
body.fpe-guscio #secondary button { border-radius: 10px; }
body.fpe-guscio .widget a:hover { color: var( --fpe-accent ); }

/* =====================================================================
 * 2. IL CONTENUTO SI PRENDE TUTTA LA LARGHEZZA
 * ---------------------------------------------------------------------
 * Tolta la barra resterebbe il buco: il contenuto continuerebbe a stare
 * nella sua colonna stretta con mezza pagina vuota di fianco. È
 * esattamente l'aspetto «pagina fatta male» da cui si parte.
 * ===================================================================== */

body.fpe-guscio #primary,
body.fpe-guscio #main,
body.fpe-guscio .content-area,
body.fpe-guscio .site-main,
body.fpe-guscio .site-content,
body.fpe-guscio .entry-content,
body.fpe-guscio .col-md-8,
body.fpe-guscio .col-lg-8 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	float: none !important;
}

/* IL RIQUADRO BIANCO DEL TEMA VA SPENTO.
   Quasi tutti i temi mettono uno sfondo bianco sul contenuto. Con il
   testo chiaro della homepage sopra, il risultato e' bianco su bianco:
   la pagina sembra vuota. `!important` qui serve, perche' quel bianco
   il tema lo scrive con regole sue. */
body.fpe-guscio .site-content,
body.fpe-guscio .content-area,
body.fpe-guscio .site-main,
body.fpe-guscio .entry-content,
body.fpe-guscio article,
body.fpe-guscio .hentry,
body.fpe-guscio .post,
body.fpe-guscio .page,
body.fpe-guscio .type-page {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* =====================================================================
 * 3bis. LA TESTATA
 * ---------------------------------------------------------------------
 * Quella del tema sta sopra al menu, con la data e l'autore: su una
 * pagina che e' un'applicazione non dicono niente a nessuno. La
 * nascondiamo e la rifacciamo noi sotto al menu.
 * ===================================================================== */

/* Sulle NOSTRE pagine la testata del tema si nasconde e la rifacciamo
   noi: «pubblicato il 9 settembre da Francesco» sopra a un test non
   dice niente a nessuno.
   Su tutte le altre — categorie, ricerca, pagine sue — il titolo del
   tema resta dov'è e lo VESTIAMO: è il suo, e nasconderlo vorrebbe dire
   lasciare la pagina senza nome. */
body.fpe-guscio-nostra .entry-header,
body.fpe-guscio-nostra .page-header,
body.fpe-guscio-nostra .entry-title,
body.fpe-guscio-nostra .page-title,
/* Gli altri nomi con cui i temi chiamano la stessa fascia. Non è un
   elenco di indovinelli: sono i nomi che usano i temi di questa
   famiglia (il sito gira su «newsup»). Quello che non c'è non fa
   danno, e il titolo doppio lo toglie comunque `FPE_Guscio::titolo()`
   in PHP, che funziona con qualunque tema. */
body.fpe-guscio-nostra .mag-single-header,
body.fpe-guscio-nostra .mag-post-title,
body.fpe-guscio-nostra .single-title,
body.fpe-guscio-nostra .page-title-bar,
body.fpe-guscio-nostra .title-bar,
body.fpe-guscio-nostra .breadcrumb,
body.fpe-guscio-nostra .breadcrumbs,
body.fpe-guscio-nostra .mag-breadcrumb { display: none; }

body.fpe-guscio .entry-title,
body.fpe-guscio .page-title,
body.fpe-guscio .archive-title,
body.fpe-guscio h1.entry-title {
	font-size: clamp( 1.5rem, 4vw, 2.2rem );
	font-weight: 900;
	line-height: 1.12;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .01em;
	padding-left: 16px;
	border-left: 6px solid var( --fpe-accent );
	text-shadow: 0 2px 14px rgba( 2, 6, 16, .9 );
	text-wrap: balance;
}
body.fpe-guscio .archive-description,
body.fpe-guscio .taxonomy-description { color: var( --fpe-dim ); }

body.fpe-guscio .fpe-testata {
	display: block;
	max-width: 1400px;
	margin: 0 auto 22px;
	padding-inline: clamp( 12px, 3vw, 26px );
	box-sizing: border-box;
}
body.fpe-guscio .fpe-testata h1 {
	display: block;
	margin: 0;
	font-size: clamp( 1.5rem, 4vw, 2.2rem );
	font-weight: 900;
	line-height: 1.12;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .01em;
	padding-left: 16px;
	border-left: 6px solid var( --fpe-accent );
	text-shadow: 0 2px 14px rgba( 2, 6, 16, .9 );
	text-wrap: balance;
}

/* Il contenuto vero, incolonnato al centro con la stessa misura della
   homepage. Sopra i 1400 pixel il testo non si allarga più: righe
   lunghe due schermi non si leggono. */
body.fpe-guscio .entry-content,
body.fpe-guscio .page-content {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp( 12px, 3vw, 26px );
	box-sizing: border-box;
}

/* =====================================================================
 * 3. IL MENU
 * ---------------------------------------------------------------------
 * Vetro, accento, e le stesse curve morbide della homepage. Si appiccica
 * in cima quando si scorre: su una pagina lunga — la galleria, un
 * percorso di quaranta attività — tornare in cima per cambiare sezione
 * è la cosa che fa chiudere la pagina.
 * ===================================================================== */

body.fpe-guscio .fpe-menu {
	position: sticky;
	top: 0;
	z-index: 60;
	margin: 0;
	padding: 10px clamp( 10px, 3vw, 22px );
	background: rgba( 6, 12, 26, .82 );
	backdrop-filter: blur( 16px ) saturate( 150% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 150% );
	border-bottom: 1px solid var( --fpe-bordo );
	box-shadow: 0 14px 34px -26px rgba( 0, 0, 0, .95 );
}

body.fpe-guscio .fpe-menu-dentro {
	max-width: 1400px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

body.fpe-guscio .fpe-menu-marchio {
	flex: 0 0 auto;
	font-weight: 900;
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #eaf4ff;
	text-decoration: none;
	padding: 10px 0;
	white-space: nowrap;
}
body.fpe-guscio .fpe-menu-marchio:hover { color: var( --fpe-accent ); }

/* LE VOCI SI SCORRONO DI LATO se non ci stanno, invece di andare a capo
   e far diventare il menu alto tre righe. Su un telefono con sei
   materie è la differenza fra un menu e un muro. */
body.fpe-guscio .fpe-menu-voci {
	display: flex;
	gap: 6px;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
	flex: 1 1 auto;
	padding: 2px;
}
body.fpe-guscio .fpe-menu-voci::-webkit-scrollbar { display: none; }

body.fpe-guscio .fpe-menu-voce {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 15px;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	color: #cfe0f6;
	text-decoration: none;
	border: 1px solid transparent;
	white-space: nowrap;
	transition:
		background .35s var( --fpe-molla ),
		border-color .35s var( --fpe-molla ),
		color .35s var( --fpe-molla ),
		transform .35s var( --fpe-molla );
}
body.fpe-guscio .fpe-menu-voce:hover {
	background: rgba( 255, 255, 255, .07 );
	border-color: var( --fpe-bordo );
	color: #fff;
	transform: translateY( -2px );
}
/* DOVE SEI ADESSO. Un menu che non lo dice costringe a ricordarselo. */
body.fpe-guscio .fpe-menu-voce.is-qui {
	color: var( --fpe-accent );
	border-color: var( --fpe-accent );
	background: rgba( 56, 189, 248, .12 );
}

body.fpe-guscio .fpe-menu-test {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: .86rem;
	font-weight: 700;
	background: var( --fpe-accent );
	color: #06131f;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .35s var( --fpe-molla ), box-shadow .35s var( --fpe-molla );
}
body.fpe-guscio .fpe-menu-test:hover {
	transform: translateY( -2px ) scale( 1.02 );
	box-shadow: 0 14px 30px -12px rgba( 56, 189, 248, .8 );
}

@media ( max-width: 620px ) {
	body.fpe-guscio .fpe-menu-marchio { display: none; }
	body.fpe-guscio .fpe-menu { margin-bottom: 18px; }
}

/* La galassia riempie lo schermo da sola: lì il menu starebbe sopra al
   cielo e ruberebbe spazio ai comandi. Ci si esce col suo pulsante. */
body.fpe-in-galassia .fpe-menu { display: none; }

/* =====================================================================
 * 4. LA PAGINA VESTITA COME LA HOMEPAGE
 * ---------------------------------------------------------------------
 * Fondo trasparente, così si vede il cielo animato che il plugin mette
 * su tutto il sito; testo chiaro; titoli con la barretta d'accento.
 * ===================================================================== */

body.fpe-guscio .entry-content > h2,
body.fpe-guscio .entry-content > h3 { color: #f3f8ff; }
body.fpe-guscio .entry-content > p { color: #cbd9ee; }

body.fpe-guscio .entry-content > a,
body.fpe-guscio .entry-content > p a { color: var( --fpe-accent ); }

/* la data, l'autore, i «meta» del tema: qui non dicono niente a nessuno */
body.fpe-guscio-nostra .entry-meta,
body.fpe-guscio-nostra .entry-footer,
body.fpe-guscio-nostra .post-navigation,
body.fpe-guscio-nostra .comments-area,
body.fpe-guscio .breadcrumb,
body.fpe-guscio .breadcrumbs { display: none; }

/* =====================================================================
 * 6. GLI ELENCHI DI ARTICOLI (categorie, ricerca)
 * ---------------------------------------------------------------------
 * Sono la parte di sito che si vede di più dopo la homepage, e finora
 * erano schede bianche su fondo scuro. Stesso vetro di tutto il resto.
 * ===================================================================== */

/* SI NOMINA L'ARTICOLO, NON DOVE STA.
   Prima c'era scritto `.site-main > article`: dipendeva da come il tema
   incastra i contenitori, e con un tema diverso non si applicava
   niente. `article.hentry` invece è l'articolo, ovunque lo metta. */
body.fpe-guscio article.hentry,
body.fpe-guscio article.post,
body.fpe-guscio .site-main > article {
	background: var( --fpe-vetro ) !important;
	border: 1px solid var( --fpe-bordo ) !important;
	border-radius: var( --fpe-r-lg );
	padding: 18px 20px;
	margin-bottom: 16px;
	transition: transform .35s var( --fpe-molla ), border-color .35s var( --fpe-molla );
}
body.fpe-guscio article.hentry:hover,
body.fpe-guscio article.post:hover {
	transform: translateY( -3px );
	border-color: rgba( 140, 200, 255, .4 ) !important;
}

/* IL TITOLO DI UN ARTICOLO IN ELENCO NON È IL TITOLO DELLA PAGINA.
   Con la stessa misura di quello grande, dieci articoli in fila
   diventano dieci titoli enormi e non si capisce più qual è la pagina.
   Qui è più piccolo, e la barretta si assottiglia. */
body.fpe-guscio article .entry-title,
body.fpe-guscio article h2 {
	font-size: clamp( 1.05rem, 2.2vw, 1.28rem );
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	border-left-width: 4px;
	padding-left: 12px;
	margin: 0 0 4px;
}

/* I LINK NON SONO BLU SOTTOLINEATI. Il tema li scrive col suo azzurro
   da pagina bianca: su fondo scuro sono illeggibili, e sottolineati
   sembrano una pagina del 2004. */
body.fpe-guscio article a,
body.fpe-guscio article .entry-title a,
body.fpe-guscio article h2 a {
	color: #eaf2ff;
	text-decoration: none;
	transition: color .3s var( --fpe-molla );
}
body.fpe-guscio article a:hover,
body.fpe-guscio article .entry-title a:hover { color: var( --fpe-accent ); }

body.fpe-guscio article .entry-meta,
body.fpe-guscio article .entry-summary,
body.fpe-guscio article p { color: var( --fpe-dim ); }
body.fpe-guscio article .entry-meta { font-size: .8rem; color: var( --fpe-faint ); }

/* la paginazione */
body.fpe-guscio .nav-links a,
body.fpe-guscio .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var( --fpe-bordo );
	color: #dbe7f8; text-decoration: none;
	transition: background .35s var( --fpe-molla ), color .35s var( --fpe-molla );
}
body.fpe-guscio .page-numbers.current,
body.fpe-guscio .nav-links a:hover { background: var( --fpe-accent ); color: #06131f; border-color: var( --fpe-accent ); }

/* i campi: ricerca, commenti */
body.fpe-guscio input[type="text"],
body.fpe-guscio input[type="search"],
body.fpe-guscio input[type="email"],
body.fpe-guscio textarea,
body.fpe-guscio select {
	background: rgba( 255, 255, 255, .05 );
	border: 1px solid var( --fpe-bordo );
	border-radius: 12px;
	color: #eaf2ff;
	padding: 12px 14px;
	min-height: 44px;
}
body.fpe-guscio input::placeholder, body.fpe-guscio textarea::placeholder { color: var( --fpe-muted ); }
body.fpe-guscio input[type="submit"],
body.fpe-guscio button[type="submit"] {
	background: var( --fpe-accent ); color: #06131f; border: 0;
	border-radius: 999px; padding: 12px 22px; min-height: 44px;
	font-weight: 700; cursor: pointer;
}

/* =====================================================================
 * 5. IL RIQUADRO DEI DATI
 * ---------------------------------------------------------------------
 * È l'unica cosa in fondo alla pagina, e deve sembrare parte della
 * casa invece che un avviso legale appiccicato.
 * ===================================================================== */

body.fpe-guscio .fpe-dati {
	max-width: 1400px;
	margin: 34px auto 0;
	padding: 22px 24px;
	border-radius: var( --fpe-r );
	border: 1px solid var( --fpe-bordo );
	background: var( --fpe-vetro );
	backdrop-filter: blur( 12px );
	box-sizing: border-box;
}
body.fpe-guscio .fpe-dati h2,
body.fpe-guscio .fpe-dati h3 { margin-top: 0; color: #f3f8ff; }
body.fpe-guscio .fpe-dati a { color: var( --fpe-accent ); }

@media ( prefers-reduced-motion: reduce ) {
	body.fpe-guscio .fpe-menu-voce,
	body.fpe-guscio .fpe-menu-test { transition: none; }
}