/* ===========================================================================
   redazione.css - gli stili che il REDATTORE applica dal menu «Stili» del
   pannello (lcRaptor 6.1: `$rap_editor_styles` in gestione/config.inc.php).

   🔴 UN SOLO FILE PER DUE POSTI, ed e' il punto: il sito lo carica dopo
   sbam.css, e l'editor del pannello lo carica DENTRO l'area di scrittura
   (`$rap_editor_content_css`). Se le due copie divergessero, il menu direbbe
   una cosa e la pagina ne farebbe un'altra - cioe' lo strumento mentirebbe.

   🔴 Le variabili portano il RIPIEGO dopo la virgola: in pagina il :root del
   tema c'e' (site.css), dentro l'editor no - li' vale il valore letterale.

   Perche' esiste: il selettore di TinyMCE offre «Paragrafo» e i titoli, e
   basta. Chi vuole del testo grande e centrato per un annuncio prende un
   <h2>, che pero' e' un TITOLO: entra nella struttura della pagina e si
   veste da titolo (qui: maiuscolo con il filetto sotto). Su cinque righe di
   annuncio il risultato e' un muro di maiuscole.
   =========================================================================== */

/* == Annuncio: il blocco grande e centrato ==================================
   Misure prese dal sito vecchio, dove l'h2 del corpo era Oswald 20px/700,
   interlinea 1.5, centrato e NON maiuscolo - cioe' esattamente l'effetto che
   Antonio otteneva. Il colore qui e' quello del testo del tema (#333,
   12,63:1) e non il grigio #808080 del vecchio tema, che su bianco sta a
   3,5:1 e passerebbe solo perche' e' testo grande. */
.annuncio {
	margin: var(--s4, 32px) 0;
	font-family: var(--f-titoli, "Oswald", "Arial Narrow", sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
	color: var(--testo, #333333);
}
.annuncio a { color: var(--rosso-testo, #c62828); }

/* == Richiamo: l'invito a bottone ===========================================
   E' la forma dei 59 «Scarica QUI Sbam! Comics nr. NN» del blog, che oggi
   sono <h2> centrati con dentro un link rosso. Il paragrafo si centra e il
   link che contiene prende l'aspetto del bottone del tema (.btn di
   site.css): stessi valori, riscritti qui perche' site.css e' la consegna e
   non si tocca, e perche' questo foglio deve reggersi da solo nell'editor. */
.richiamo {
	margin: var(--s4, 32px) 0;
	text-align: center;
}
.richiamo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s1, 8px);
	min-height: 44px;
	padding: 10px var(--s3, 24px);
	border: 2px solid transparent;
	background: var(--rosso, #dd3333);
	color: var(--bianco, #ffffff);
	font-family: var(--f-titoli, "Oswald", "Arial Narrow", sans-serif);
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.richiamo a:hover,
.richiamo a:focus-visible {
	background: #b82424;
	color: var(--bianco, #ffffff);
}