/*
Theme Name: LRCM 2026
Theme URI: http://192.168.0.14:3000/Veertualia/LRCM-Wordpress-Theme
Description: Theme for La ragazza col mattarello. Child of Savona Blog Pro: inherits the structure and rewrites the appearance — Italian flag tricolor for color, Archivo and Literata for fonts, WP Recipe Maker and Translatium recipe cards made identical.
Author: Veertualia
Author URI: https://www.veertualia.com/
Template: savona-blog-pro
Version: 2026.1.0
Text Domain: lrcm2026
*/

/* ══════════════════════════════════════════════════════════════════
   LA RAGAZZA COL MATTARELLO — VISUAL SYSTEM
   Direction "Signboard": black for structure, tricolor for color,
   serif for reading.
   ══════════════════════════════════════════════════════════════════

   COLOR — The three colors are the official Italian flag colors,
   set by decree in 2003: green #008C45, white #F4F5F0,
   red #CD212A. They are not decorative; each has a role:

        red     what you click — links, buttons, current state
        green   what informs — categories, times, recipe data
        black   structure — text, rules, borders
        white   the field, most of the page

   They never appear in the same role, and this is what keeps
   the tricolor far from a trattoria tablecloth: you read it
   as a whole page, not as a flag.

   Black is true black, #000. A grayish near-black would soften
   the contrast the page is built on.

   TYPOGRAPHY — Two families, roles separated.

        Archivo    headings, navigation, labels, buttons.
                   Variable width: 82 for logotype, 96 for
                   cards, 108-112 for large headings. One family
                   that behaves like three.
        Literata   article body text. Serif, designed for
                   screen, and on 800 words of recipe it doesn't tire like
                   a sans-serif would.

   The typographic scale remains the one set in September: anchored to
   18px, √1.5 ratio, steps at 27 and 40.5. It worked, and
   redesigning it would have meant reopening the two
   values the site was already calibrated to.
   ────────────────────────────────────────────────────────────────── */

:root {
	/* ── Tricolor ── */
	--lrcm-verde: #008C45;
	--lrcm-verde-scuro: #007036;
	--lrcm-rosso: #CD212A;
	--lrcm-rosso-scuro: #A3161E;
	--lrcm-avorio: #F4F5F0;

	/* ── Roles ── */
	--lrcm-accent: var( --lrcm-rosso );
	--lrcm-accent-dark: var( --lrcm-rosso-scuro );
	--lrcm-info: var( --lrcm-verde );
	--lrcm-ink: #000;
	--lrcm-text: #1c1c1c;
	--lrcm-muted: #6b6b6b;
	--lrcm-heading: #000;
	--lrcm-surface: #fff;
	--lrcm-border: #e3e3df;

	/* ── Fonts ── */
	--lrcm-display: "Archivo", system-ui, -apple-system, sans-serif;
	--lrcm-body: "Literata", Georgia, "Times New Roman", serif;

	/* ── Scale — base 18px, √1.5 ratio, in rem ── */
	--lrcm-s-1: 0.919rem;   /* 14.70 */
	--lrcm-s0:  1.125rem;   /* 18.00 */
	--lrcm-s1:  1.378rem;   /* 22.05 */
	--lrcm-s2:  1.6875rem;  /* 27.00 */
	--lrcm-s3:  2.067rem;   /* 33.08 */
	--lrcm-s4:  2.531rem;   /* 40.50 */

	--lrcm-lh-tight: 1.2;
	--lrcm-lh-title: 1.25;
	--lrcm-lh-body: 1.75;

	/* ── Form — sharp corners, no shadows ── */
	--lrcm-radius: 0;
	--lrcm-rule: 3px;
	--lrcm-rule-strong: 5px;
	--lrcm-gap: 1.25rem;
	--lrcm-measure: 66ch;
}

/* ══ 1. THE STRIPE ════════════════════════════════════════════════

   Weighted tricolor 14 / 72 / 14: all three bands are there, but
   white dominates and colors stay at the edges. Your eye completes
   the flag on its own without anyone waving it.

   Pure CSS. The old itabg.png is no longer needed.
   ────────────────────────────────────────────────────────────────── */

#stripe {
	height: 10px;
	z-index: 101;
	background-image: linear-gradient(
		90deg,
		var( --lrcm-verde ) 0 14%,
		var( --lrcm-avorio ) 14% 86%,
		var( --lrcm-rosso ) 86% 100%
	);
	background-size: auto;
	border-bottom: 1px solid var( --lrcm-border );
}

/* ══ 2. TESTATA E NAVIGAZIONE ═════════════════════════════════════

   La riga nera sotto il menu e' la sola cosa pesante della testata:
   regge la pagina come il bordo di un'insegna, e permette a tutto il
   resto di stare leggero.
   ────────────────────────────────────────────────────────────────── */

#page-header .entry-header {
	background-image: none !important;
	background-color: var( --lrcm-surface );
	padding: 22px 0 14px;
}

/* The logo.
   The Customizer sets `.entry-header` to 200px height and the brand
   fit inside at natural size, much smaller than available space.
   Here the image grows for real — it's the `img` tag that needs action,
   not the link wrapping it — up to two-thirds of the column, which is
   760px on 1140px width. */
#page-header .header-logo .logo-img {
	display: inline-block;
	max-width: 760px;
	width: 100%;
}

#page-header .header-logo .logo-img img {
	width: 100%;
	max-width: 760px;
	height: auto;
	display: block;
}

#page-header .entry-header {
	height: auto !important;
	min-height: 0;
}

#page-header .header-logo br {
	display: none;
}

#page-header .site-description {
	font-family: var( --lrcm-display );
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var( --lrcm-muted );
	margin: 10px 0 0;
	text-transform: none;
}

/* The line under the menu is the only heavy element in the header: it
   holds the page like a signboard border. In black it worked, but above
   is the tricolor stripe and below a column of black text — three dark
   weights in a row, and the header took on a tone that's not right for
   a cooking blog. In red it does the same structural work and ties the
   line to the red band above on the right. */
#main-nav {
	background: var( --lrcm-surface );
	border-bottom: 4px solid var( --lrcm-accent );
	border-top: 0;
	box-shadow: none;
}

#main-nav #main-menu > li > a,
#main-nav #mobile-menu > li > a {
	font-family: var( --lrcm-display );
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var( --lrcm-ink );
}

/* The language switcher is a top-level item like the others and must
   weight the same. WPML wraps the language name in its own `span` that
   inherits from WPML instead of the menu: if you don't declare it here,
   that one item breaks out in a different size and weight from neighbors. */
#main-nav #main-menu > li.wpml-ls-item > a,
#main-nav #main-menu > li.wpml-ls-item > a span,
#main-nav #main-menu > li.wpml-ls-item > a .wpml-ls-native,
#main-nav #main-menu > li.wpml-ls-item > a .wpml-ls-display {
	font-family: var( --lrcm-display ) !important;
	font-size: 16.5px !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em;
	text-transform: none !important;
}

#main-nav #main-menu > li > a:hover,
#main-nav #main-menu > li.current-menu-item > a,
#main-nav #main-menu > li.current-menu-parent > a,
#main-nav #main-menu > li.current-post-parent > a,
#main-nav #main-menu > li.current-post-ancestor > a {
	color: var( --lrcm-accent );
}

#main-nav .sub-menu {
	border: 1px solid var( --lrcm-border );
	border-top: var( --lrcm-rule ) solid var( --lrcm-ink );
	box-shadow: none;
	border-radius: 0;
}

/* Inside a dropdown all items have the same rank, so they get
   the same size: categories, pages, and WPML's language switcher. The
   selector reaches inside because WPML wraps the language name in a `span`
   with its own font size — that was
   rendere la lista disomogenea. */
#main-nav .sub-menu a,
#main-nav .sub-menu a span,
#main-nav .sub-menu .wpml-ls-native,
#main-nav .sub-menu .wpml-ls-display {
	font-family: var( --lrcm-display ) !important;
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none !important;
	color: var( --lrcm-text );
}

#main-nav .sub-menu li > a {
	padding-top: 9px;
	padding-bottom: 9px;
}

#main-nav .sub-menu a:hover,
#main-nav .sub-menu li:hover > a {
	color: var( --lrcm-accent );
}

/* La bandierina è già il segno della lingua: il nome che la segue non ha
   bisogno anche del maiuscoletto per farsi notare. */
#main-nav .wpml-ls-flag {
	vertical-align: -2px;
	margin-right: 7px;
}

#main-nav .main-nav-socials a,
#main-nav .main-nav-icons a,
#main-nav .mobile-menu-btn {
	color: var( --lrcm-ink );
}

#main-nav .main-nav-socials a:hover {
	color: var( --lrcm-accent );
}

/* ══ 3. LA SCALA, APPLICATA ═══════════════════════════════════════

   Su `#page-content` e con `!important`: non e' eleganza, e' l'unico
   modo di avere l'ultima parola su plugin che dichiarano i propri
   corpi con `!important` a loro volta. Una scala che perde il confronto
   con WPRM non e' una scala.
   ────────────────────────────────────────────────────────────────── */

#page-content h1,
#page-content .entry-title,
#page-content .post-title {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s4 ) !important;
	line-height: var( --lrcm-lh-tight ) !important;
	font-weight: 800;
	font-variation-settings: "wdth" 108;
	letter-spacing: -0.03em;
	color: var( --lrcm-heading );
}

#page-content h2 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s3 ) !important;
	line-height: var( --lrcm-lh-title ) !important;
	font-weight: 700;
	font-variation-settings: "wdth" 104;
	letter-spacing: -0.02em;
	color: var( --lrcm-heading );
}

#page-content h3 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s2 ) !important;
	line-height: var( --lrcm-lh-title ) !important;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var( --lrcm-heading );
}

#page-content h4 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s1 ) !important;
	line-height: var( --lrcm-lh-title ) !important;
	font-weight: 700;
	color: var( --lrcm-heading );
}

#page-content h5,
#page-content h6 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s0 ) !important;
	line-height: var( --lrcm-lh-title ) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --lrcm-muted );
	text-transform: none;
}

/* Il grassetto enfatizza, non ingrandisce. */
#page-content strong,
#page-content b,
#page-content em,
#page-content i {
	font-size: inherit !important;
	line-height: inherit;
}

/* ── Il corpo del testo ────────────────────────────────────────────
   Literata, una misura sola, e una riga che non supera i 66 caratteri.
   La misura sta sugli elementi di testo e non sul contenitore, cosi'
   immagini, video e schede restano larghi quanto la colonna.
   ────────────────────────────────────────────────────────────────── */

#page-content p,
#page-content li,
#page-content blockquote,
#page-content dd {
	font-family: var( --lrcm-body );
	font-size: var( --lrcm-s0 ) !important;
	line-height: var( --lrcm-lh-body );
	color: var( --lrcm-text );
}

.post-content > p,
.post-content > ul,
.post-content > ol,
.post-content > blockquote,
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var( --lrcm-measure );
}

#page-content blockquote {
	border-left: var( --lrcm-rule ) solid var( --lrcm-accent );
	padding-left: 1.2em;
	margin-left: 0;
	font-style: normal;
}

/* ── I titoli dei widget ───────────────────────────────────────────

   Erano bandierine rosse a fondo pieno con la codina triangolare, decise
   nel Customizer. Erano il pezzo di pagina che gridava di piu': cinque
   rettangoli rossi lungo la colonna destra, ciascuno col peso visivo del
   titolo dell'articolo. E ora che il rosso ha un mestiere preciso —
   quello che si clicca — un'etichetta rossa che non e' un link dice la
   cosa sbagliata.

   Prendono lo stesso segno delle schede: filetto rosso a sinistra, testo
   nero. La colonna laterale diventa una fila di blocchi marcati come il
   contenuto, che e' quello che sono.

   Il tema li marca come h2 — nella struttura della pagina e' corretto —
   ma la scala dell'articolo li porterebbe a 33px, dove griderebbero piu'
   di cio' che affiancano: stanno un gradino sopra il corpo del testo.

   Sul Customizer si vince solo con `!important`: il suo CSS sta in un
   blocco `<style>` che arriva dopo i fogli di stile, quindi a parita' di
   specificita' la spunta lui.
   ────────────────────────────────────────────────────────────────── */

#page-content .savona-widget .widget-title,
#page-content .widget-title {
	background: transparent !important;
	border: 0;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	padding: 1px 0 1px 14px;
	margin: 0 0 16px;
	text-align: left !important;
}

/* La codina triangolare del vecchio banderuolo. */
#page-content .savona-widget .widget-title::after,
#page-content .savona-widget .widget-title::before,
#page-content .widget-title h2::before,
#page-content .widget-title h2::after {
	display: none !important;
	border: 0 !important;
}

#page-content .savona-widget .widget-title h1,
#page-content .savona-widget .widget-title h2,
#page-content .savona-widget .widget-title h3,
#page-content .savona-widget .widget-title h4,
#page-content .widget-title h1,
#page-content .widget-title h2,
#page-content .widget-title h3,
#page-content .widget-title h4,
#page-content .savona-widget > h2,
#page-content .savona-widget > h3 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s1 ) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	font-variation-settings: "wdth" 96;
	letter-spacing: -0.015em;
	text-transform: none !important;
	text-align: left !important;
	display: block !important;
	width: 100%;
	color: var( --lrcm-ink ) !important;
	background: transparent !important;
	margin: 0;
	padding: 0;
}

/* ── La colonna laterale parla piano ──────────────────────────────
   Il grazie è il carattere della lettura lunga, e la sidebar non è
   lettura lunga: sono richiami, uno dopo l'altro. Archivo più piccolo
   li tiene distinti dall'articolo anche quando finiscono uno accanto
   all'altro sulla stessa riga dello schermo.
   ────────────────────────────────────────────────────────────────── */

#page-content .savona-widget p,
#page-content .savona-widget li,
#page-content .savona-widget a,
#page-content .savona-widget span,
#page-content .savona-widget div,
#page-content .widget p,
#page-content .widget li,
#page-content .widget a {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s-1 ) !important;
	line-height: 1.45;
}

#page-content .savona-widget {
	margin-bottom: 38px;
}

/* Un elenco di richiami si legge per righe: un filetto fra l'uno e
   l'altro fa piu' lavoro del puntino che li precedeva. */
#page-content .savona-widget ul {
	padding-left: 0;
	margin: 0;
}

#page-content .savona-widget li {
	list-style: none;
	border-bottom: 1px solid var( --lrcm-border );
	padding: 7px 0;
}

#page-content .savona-widget li:last-child {
	border-bottom: 0;
}

#page-content .savona-widget a,
#page-content .widget a {
	text-decoration: none;
}

#page-content .savona-widget a:hover,
#page-content .widget a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ══ 4. L'ARTICOLO ════════════════════════════════════════════════ */

/* Il tema centra la testata dell'articolo e manda il titolo in maiuscolo.
   Entrambe le cose vanno tolte: il maiuscolo su titoli lunghi come quelli
   di questo blog costa una riga in più e cancella le maiuscole proprie —
   "Sicília", "Bolonia" — che nel titolo di una ricetta sono informazione.
   E una colonna di testo allineata a sinistra si legge con un punto di
   partenza fisso per ogni riga, che al centro non esiste. */
#page-content .post-header,
#page-content .post-header .post-title,
#page-content .post-header .post-meta,
#page-content .post-header .post-categories {
	text-align: left;
}

#page-content .post-header .post-title,
#page-content .post-title,
#page-content h1,
#page-content h2,
#page-content h3,
#page-content h4 {
	text-transform: none;
}

.post-header .post-title {
	margin: 0.15em 0 0.35em;
}

#page-content .post-header .post-title a,
#page-content .blog-post .post-title a,
#page-content .post-item-grid h4 a,
#page-content .visible-related-posts h4 a,
#page-content .savona-widget h4 a {
	color: var( --lrcm-ink ) !important;
	text-decoration: none;
}

#page-content .post-header .post-title a:hover,
#page-content .blog-post .post-title a:hover,
#page-content .post-item-grid h4 a:hover,
#page-content .visible-related-posts h4 a:hover,
#page-content .savona-widget h4 a:hover {
	color: var( --lrcm-accent ) !important;
}

#page-content .post-meta {
	font-style: normal;
}

/* Le categorie informano: verde, e distanti dal rosso dei link. */
#page-content .post-categories,
#page-content .post-categories a {
	font-family: var( --lrcm-display );
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var( --lrcm-info ) !important;
}

#page-content .post-categories a:hover {
	color: var( --lrcm-verde-scuro ) !important;
}

/* Data e commenti stanno fra due filetti: e' la riga che separa il
   titolo dal racconto. */
.post-meta {
	font-family: var( --lrcm-display );
	font-size: 13px;
	color: var( --lrcm-muted );
	border-top: 1px solid var( --lrcm-ink );
	border-bottom: 1px solid var( --lrcm-ink );
	padding: 9px 0;
	margin: 0 0 1.6em;
}

#page-content .post-meta a {
	color: var( --lrcm-muted ) !important;
	text-decoration: none;
}

#page-content .post-meta a:hover {
	color: var( --lrcm-accent ) !important;
}

.post-media {
	margin-bottom: 1.8em;
}

.post-media img {
	border-radius: 0;
}

/* ══ 5. I RIQUADRI ════════════════════════════════════════════════

   Scheda ricetta, videobox, indice, riquadro affiliazione: quattro
   pannelli di pari grado dentro lo stesso articolo. Stessa forma —
   fondo bianco, lati sottili, filetto nero in testa, spigoli vivi — e
   titoli tutti sul gradino s2, qualunque tag usi il software che li
   genera.
   ────────────────────────────────────────────────────────────────── */

/* The index is the one panel whose styling is contested. Easy Table of
   Contents ships `#ez-toc-container { border: 1px solid #aaa; display:
   table }` and a `.ez-toc-transparent` class, at the same specificity as
   the rule below — so the winner is decided by load order alone, and the
   order differs between environments: in production the plugin's
   stylesheet is enqueued after the theme's, locally before it. The same
   CSS was therefore producing a red panel on one machine and the
   plugin's grey box on the other.

   Marking the contested declarations settles it in the theme's favour
   whatever order the two stylesheets end up in. */
#ez-toc-container,
#ez-toc-container.ez-toc-transparent {
	display: block !important;
	background: var( --lrcm-surface ) !important;
	border: 0 !important;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent ) !important;
	border-radius: var( --lrcm-radius ) !important;
	box-shadow: none !important;
	padding: var( --lrcm-gap ) !important;
	width: auto !important;
}

.videobox,
#ez-toc-container,
.lrcm-panel {
	background: var( --lrcm-surface );
	border: 0;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	border-radius: var( --lrcm-radius );
	padding: var( --lrcm-gap );
	margin: 2.2rem 0;
	box-shadow: none;
	float: none;
	width: auto;
	font-size: inherit;
	line-height: inherit;
}

#page-content .videobox h2,
#page-content .videobox h3,
#page-content .videobox h4,
#page-content .ez-toc-title,
#page-content .lrcm-panel > h2,
#page-content .lrcm-panel > h3 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s2 ) !important;
	line-height: var( --lrcm-lh-title ) !important;
	font-weight: 700 !important;
	font-variation-settings: "wdth" 96;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	color: var( --lrcm-ink ) !important;
	text-align: left;
	margin: 0 0 0.6em;
}

/* Un secondo titolo dentro lo stesso riquadro apre una sezione nuova. */
#page-content .videobox h2 ~ h3,
#page-content .videobox h3 ~ h3,
#page-content .videobox .row h3 {
	margin-top: 1.6em;
}

/* L'indice e' navigazione, non un elenco puntato. */
#ez-toc-container ul,
.ez-toc-list {
	margin: 0;
	padding-left: 1.1em;
}

#page-content #ez-toc-container li,
#page-content .ez-toc-list li {
	font-family: var( --lrcm-display );
	font-size: var( --lrcm-s-1 ) !important;
	line-height: 1.5;
	margin: 0.3em 0;
}

/* Il riquadro affiliazione torna sulla scala insieme agli altri. */
#page-content .vrtl-aff-box,
#page-content .vrtl-aff-box .vrtl-product,
#page-content .vrtl-aff-box .vrtl-product-info,
#page-content .vrtl-aff-box a {
	font-size: var( --lrcm-s0 ) !important;
}

#page-content .vrtl-aff-box h2,
#page-content .vrtl-aff-box h3,
#page-content .vrtl-aff-box h4 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s2 ) !important;
	text-transform: none !important;
}

/* ══ 5b. LE DUE SCHEDE RICETTA ════════════════════════════════════

   Sul sito convivono due schede: quella di WP Recipe Maker e quella che
   Translatium genera per i post tradotti. Fanno lo stesso mestiere, quindi
   devono essere la stessa cosa — non due cose simili.

   Per questo ogni regola qui sotto nomina entrambe le famiglie di classi.
   Non è ripetizione: è l'unico modo perché le due schede restino identiche
   quando fra sei mesi qualcuno cambierà un colore o una misura. Se
   avessero due blocchi di regole separati, comincerebbero a divergere il
   giorno stesso.

   Translatium è il modello: la sua struttura — titolo, foto, sommario,
   griglia dei dati, sezioni — è quella a cui il modello `lrcm-basic-2` di
   WPRM è stato riportato.

        contenitore     .vrtl-recipe            .wprm-recipe
        titolo          __title                 -name
        foto            __figure                -image
        sommario        __summary               -summary
        griglia dati    __meta                  -meta-container
        cella           __meta-item             -block-container
        etichetta       __meta-label            -details-label
        valore          __meta-value            -details, -servings, …
        titolo sezione  __heading               -header
        ingredienti     __ingredients           -ingredients
        passaggi        __steps                 -instructions
        note            __notes                 -notes

   Le regole partono da `#page-content` perché il CSS del modello WPRM è
   scritto sulle classi: un id in testa basta a passargli davanti.
   ────────────────────────────────────────────────────────────────── */

/* La scheda di Translatium è costruita per essere ristilata dalle proprie
   variabili: qui vengono agganciate a quelle del sito, e il resto della
   sua foglia di stile si adegua da sola. */
.vrtl-recipe {
	--vrtl-recipe-accent: var( --lrcm-accent );
	--vrtl-recipe-text: var( --lrcm-text );
	--vrtl-recipe-muted: var( --lrcm-muted );
	--vrtl-recipe-bg: var( --lrcm-surface );
	--vrtl-recipe-border: var( --lrcm-border );
	--vrtl-recipe-radius: 0;
	--vrtl-recipe-gap: var( --lrcm-gap );
	--vrtl-recipe-font: var( --lrcm-body );
}

/* ── Il contenitore ──────────────────────────────────────────────── */

#page-content .vrtl-recipe,
#page-content .wprm-recipe {
	background: var( --lrcm-surface ) !important;
	border: 0 !important;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent ) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 0 18px !important;
	margin: 2.2rem 0 !important;
	max-width: none !important;
	font-family: var( --lrcm-body ) !important;
	font-size: var( --lrcm-s0 ) !important;
	line-height: var( --lrcm-lh-body ) !important;
	color: var( --lrcm-text ) !important;
}

#page-content .wprm-recipe-container {
	background: transparent;
	border: 0;
	padding: 0;
}

/* The vertical rhythm comes from a single rule, not from spacers placed
   between blocks manually. */
#page-content .vrtl-recipe > * + *,
#page-content .wprm-recipe > * + * {
	margin-top: var( --lrcm-gap );
}

#page-content .wprm-recipe .wprm-spacer {
	display: none !important;
}

/* ── Title, image, summary ──────────────────────────────────────── */

#page-content .vrtl-recipe__title,
#page-content .wprm-recipe .wprm-recipe-name {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s2 ) !important;
	line-height: var( --lrcm-lh-title ) !important;
	font-weight: 700 !important;
	font-variation-settings: "wdth" 96;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
	text-align: left !important;
	color: var( --lrcm-ink ) !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

#page-content .vrtl-recipe__figure,
#page-content .wprm-recipe .wprm-recipe-image {
	margin: 0;
	width: 100%;
}

#page-content .vrtl-recipe__figure img,
#page-content .wprm-recipe .wprm-recipe-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 0 !important;
	border-radius: 0 !important;
}

#page-content .vrtl-recipe__summary,
#page-content .vrtl-recipe__summary p,
#page-content .wprm-recipe .wprm-recipe-summary,
#page-content .wprm-recipe .wprm-recipe-summary p {
	font-family: var( --lrcm-body ) !important;
	font-size: var( --lrcm-s0 ) !important;
	line-height: var( --lrcm-lh-body ) !important;
	color: var( --lrcm-muted ) !important;
	margin: 0;
}

/* ── The data grid ─────────────────────────────────────────── */

#page-content .vrtl-recipe__meta,
#page-content .wprm-recipe .wprm-recipe-meta-container {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	gap: 0.8rem 1.5rem !important;
	border: 0 !important;
	border-top: 1px solid var( --lrcm-ink ) !important;
	border-bottom: 1px solid var( --lrcm-ink ) !important;
	border-radius: 0 !important;
	list-style: none !important;
	margin: 0;
	padding: 12px 0 !important;
}

#page-content .vrtl-recipe__meta-item,
#page-content .wprm-recipe .wprm-recipe-block-container {
	display: block !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	list-style: none !important;
}

/* Il modello di Translatium separa etichetta e valore con un `<br>`. Con
   l'etichetta gia' dichiarata a blocco quel ritorno a capo aggiunge una
   riga vuota, e la griglia esce piu' larga di quella di WPRM. */
#page-content .vrtl-recipe__meta br {
	display: none;
}

#page-content .vrtl-recipe__meta-label,
#page-content .wprm-recipe .wprm-recipe-details-label {
	display: block !important;
	font-family: var( --lrcm-display ) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: left !important;
	color: var( --lrcm-info ) !important;
}

#page-content .vrtl-recipe__meta-value,
#page-content .wprm-recipe .wprm-recipe-time,
#page-content .wprm-recipe .wprm-recipe-servings,
#page-content .wprm-recipe .wprm-recipe-nutrition-with-unit,
#page-content .wprm-recipe .wprm-recipe-course,
#page-content .wprm-recipe .wprm-recipe-cuisine,
#page-content .wprm-recipe .wprm-recipe-keyword,
#page-content .wprm-recipe .wprm-recipe-author,
#page-content .wprm-recipe .wprm-recipe-cost {
	display: block !important;
	font-family: var( --lrcm-display ) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	color: var( --lrcm-ink ) !important;
	font-variant-numeric: tabular-nums;
}

/* Number and unit are a single value — "10 minuti", non "10" e a capo
   "minuti". Inside the cell they stay inline, and what makes a block is the
   container holding them together. */
#page-content .wprm-recipe .wprm-recipe-details-unit,
#page-content .wprm-recipe .wprm-recipe-time .wprm-recipe-details,
#page-content .wprm-recipe .wprm-recipe-servings .wprm-recipe-details-unit {
	display: inline !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

/* No icons: in the other card aren't there, e three identical clocks
   next to three times distinguish nothing. */
#page-content .wprm-recipe .wprm-recipe-icon {
	display: none !important;
}

/* ── Equipment, inside the grid ───────────────────────────

   In Translatium le attrezzature sono una cella dei dati come tutte le
   altre. WPRM non le espone fra i campi del contenitore — ho provato:
   `equipment` in `selected_fields` non produce niente, perche' quella
   lista accetta solo autore, costo, razioni, tempi, valori nutrizionali e
   tassonomie della ricetta, e le attrezzature non sono una tassonomia
   della ricetta.

   Restano quindi uno shortcode a se', messo subito dopo il contenitore e
   vestito da ultima riga della griglia: il titolo diventa un'etichetta
   verde, l'elenco diventa un valore su una riga sola, e il filetto di
   chiusura della striscia si sposta qui sotto.
   ────────────────────────────────────────────────────────────────── */

#page-content .wprm-recipe .wprm-recipe-meta-container:has( + .wprm-recipe-equipment-container ) {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

#page-content .wprm-recipe .wprm-recipe-equipment-container {
	border-bottom: 1px solid var( --lrcm-ink );
	padding: 0 0 12px !important;
	margin-top: 0.8rem !important;
}

#page-content .wprm-recipe .wprm-recipe-equipment-container .wprm-recipe-equipment-header {
	font-family: var( --lrcm-display ) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: left !important;
	color: var( --lrcm-info ) !important;
	margin: 0 !important;
	padding: 0 !important;
}

#page-content .wprm-recipe .wprm-recipe-equipment {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Le attrezzature are a single value, non un elenco da spuntare: stanno
   su una riga, separate da una virgola. */
#page-content .wprm-recipe .wprm-recipe-equipment-item {
	display: inline !important;
	list-style: none !important;
	list-style-type: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#page-content .wprm-recipe .wprm-recipe-equipment-item:not( :last-child )::after {
	content: ", ";
}

#page-content .wprm-recipe .wprm-recipe-equipment-name {
	display: inline !important;
	font-family: var( --lrcm-display ) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var( --lrcm-ink ) !important;
}

/* ── Section headings ─────────────────────────────────────────── */

#page-content .vrtl-recipe__heading,
#page-content .wprm-recipe .wprm-recipe-header {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s1 ) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
	text-align: left !important;
	color: var( --lrcm-ink ) !important;
	border: 0 !important;
	margin: 0 0 0.7rem !important;
	padding: 0 !important;
}

#page-content .vrtl-recipe__group-name,
#page-content .wprm-recipe .wprm-recipe-group-name,
#page-content .wprm-recipe .wprm-recipe-ingredient-group h4,
#page-content .wprm-recipe .wprm-recipe-instruction-group h4 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s0 ) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: left !important;
	color: var( --lrcm-muted ) !important;
	margin: 1.2rem 0 0.4rem !important;
	padding: 0 !important;
}

/* ── Ingredients ─────────────────────────────────────────────── */

#page-content .vrtl-recipe__ingredients,
#page-content .wprm-recipe .wprm-recipe-ingredients {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* The border between rows does the bullet-point job:
   keeping both means marking twice where the row starts. */
#page-content .vrtl-recipe__ingredient,
#page-content .wprm-recipe .wprm-recipe-ingredient {
	list-style: none !important;
	border-bottom: 1px solid var( --lrcm-border ) !important;
	margin: 0 !important;
	padding: 0.5rem 0 !important;
	font-family: var( --lrcm-body ) !important;
	font-size: var( --lrcm-s0 ) !important;
	line-height: 1.5 !important;
}

#page-content .vrtl-recipe__ingredient:last-child,
#page-content .wprm-recipe .wprm-recipe-ingredients > li:last-child {
	border-bottom: 0 !important;
}

#page-content .vrtl-recipe__amount,
#page-content .vrtl-recipe__unit,
#page-content .wprm-recipe .wprm-recipe-ingredient-amount,
#page-content .wprm-recipe .wprm-recipe-ingredient-unit {
	font-family: var( --lrcm-display ) !important;
	font-weight: 700 !important;
	color: var( --lrcm-ink ) !important;
	font-variant-numeric: tabular-nums;
}

#page-content .vrtl-recipe__ingredient-note,
#page-content .wprm-recipe .wprm-recipe-ingredient-notes {
	color: var( --lrcm-muted ) !important;
	font-style: italic;
	font-size: inherit !important;
}

/* ── Steps ──────────────────────────────────────────────────── */

#page-content .vrtl-recipe__steps,
#page-content .wprm-recipe .wprm-recipe-instructions {
	margin: 0 !important;
	padding-left: 1.6rem !important;
	list-style: decimal !important;
}

#page-content .vrtl-recipe__step,
#page-content .wprm-recipe .wprm-recipe-instruction {
	margin: 0 0 0.9rem 0 !important;
	padding-left: 0.4rem !important;
	font-family: var( --lrcm-body ) !important;
	font-size: var( --lrcm-s0 ) !important;
	line-height: var( --lrcm-lh-body ) !important;
	list-style: decimal !important;
}

/* Here numbering is information — it's a real sequence — quindi si
   vede: red and Archivo weight instead of text gray. */
#page-content .vrtl-recipe__step::marker,
#page-content .wprm-recipe .wprm-recipe-instruction::marker {
	font-family: var( --lrcm-display );
	font-weight: 800;
	color: var( --lrcm-accent );
}

#page-content .vrtl-recipe__step img,
#page-content .wprm-recipe .wprm-recipe-instruction img {
	display: block;
	height: auto;
	max-width: 100%;
	margin-top: 0.5rem;
}

/* ── The notes ─────────────────────────────────────────────────────── */

#page-content .vrtl-recipe__notes,
#page-content .wprm-recipe .wprm-recipe-notes {
	background: var( --lrcm-avorio ) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0.9rem 1.1rem !important;
}

#page-content .vrtl-recipe__notes p,
#page-content .wprm-recipe .wprm-recipe-notes p {
	font-family: var( --lrcm-body ) !important;
	font-size: var( --lrcm-s0 ) !important;
	line-height: var( --lrcm-lh-body ) !important;
	margin: 0;
}

/* ── Il video ────────────────────────────────────────────────────── */

#page-content .vrtl-recipe__video,
#page-content .wprm-recipe .wprm-recipe-video {
	aspect-ratio: 16 / 9;
	text-align: left !important;
}

#page-content .vrtl-recipe__video iframe,
#page-content .wprm-recipe .wprm-recipe-video iframe {
	border: 0;
	width: 100%;
	height: 100%;
}

/* ── Quello che ha solo WPRM ─────────────────────────────────────── */

/* Print and rating don't exist in the Translatium card, but
   they need: take the shape of site buttons instead of their own. */
#page-content .wprm-recipe .wprm-recipe-print,
#page-content .wprm-recipe-link {
	display: table !important;
	width: auto !important;
	max-width: max-content;
	font-family: var( --lrcm-display ) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-align: left !important;
	text-transform: none !important;
	background-color: var( --lrcm-accent ) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 11px 20px !important;
	text-decoration: none !important;
}

#page-content .wprm-recipe .wprm-recipe-print:hover,
#page-content .wprm-recipe-link:hover {
	background-color: var( --lrcm-ink ) !important;
	color: #fff !important;
}

#page-content .wprm-recipe .wprm-recipe-rating {
	text-align: left !important;
}

#page-content .wprm-recipe .wprm-rating-star svg *,
#page-content .wprm-recipe .wprm-recipe-rating svg * {
	fill: var( --lrcm-accent ) !important;
}

/* ── Narrow screens ─────────────────────────────────────────────── */

@media ( max-width: 600px ) {
	#page-content .vrtl-recipe,
	#page-content .wprm-recipe {
		padding-left: 14px !important;
	}

	#page-content .vrtl-recipe__meta,
	#page-content .wprm-recipe .wprm-recipe-meta-container {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

/* ══ 6. IL RITMO VERTICALE ════════════════════════════════════════

   I margini sono in `em`, quindi legati al corpo del titolo a cui
   appartengono: un titolo grande si prende piu' aria di uno piccolo
   senza che nessuno debba deciderlo due volte.
   ────────────────────────────────────────────────────────────────── */

#page-content h2,
#page-content h3,
#page-content h4 {
	margin: 1.7em 0 0.5em;
}

#page-content h2:first-child,
#page-content h3:first-child,
#page-content h4:first-child,
#page-content .videobox > *:first-child,
#page-content .lrcm-panel > *:first-child {
	margin-top: 0;
}

/* ══ 7. I LINK ════════════════════════════════════════════════════

   Il tema li dipinge #030303 con `!important` da due regole diverse,
   una delle quali contiene un id. Un link invisibile non e' un link.

   Rosso dove il fondo e' chiaro. Colore E sottolineatura, perche' chi
   non distingue il rosso deve comunque vedere che si clicca.
   ────────────────────────────────────────────────────────────────── */

#page-content a {
	color: var( --lrcm-accent ) !important;
}

#page-content a:hover,
#page-content a:focus-visible {
	color: var( --lrcm-accent-dark ) !important;
}

.post-content a,
.entry-content a,
.archive-description a,
.videobox a,
.vrtl-recipe a,
#ez-toc-container a,
.ez-toc-list a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.post-content a:hover,
.entry-content a:hover,
.archive-description a:hover,
.videobox a:hover,
.vrtl-recipe a:hover,
#ez-toc-container a:hover,
.ez-toc-list a:hover {
	text-decoration-thickness: 2px;
}

/* Un link attorno a un'immagine non si porta dietro la sottolineatura. */
#page-content a:has( > img ),
#page-content a:has( > figure ),
#page-content .post-item-grid a,
#page-content .post-item-frontpage a {
	text-decoration: none;
}

#page-content a:focus-visible,
#main-nav a:focus-visible {
	outline: 2px solid var( --lrcm-accent );
	outline-offset: 2px;
}

/* ══ 8. LE SCHEDE E GLI ARCHIVI ═══════════════════════════════════

   Nessuna cornice, nessuna ombra: un filetto nero sopra l'immagine e
   basta. Le schede si distinguono per allineamento, non per contorno.
   ────────────────────────────────────────────────────────────────── */

.post-item-grid,
.post-item-frontpage {
	margin-bottom: 34px;
	background: transparent;
	box-shadow: none;
	border: 0;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	padding-left: 18px;
}

.post-item-grid .post-media,
.post-item-frontpage .post-media {
	margin-bottom: 0.9em;
}

/* Il filetto rosso è il segno comune: sta a sinistra di tutto ciò che è
   una scheda — un articolo in griglia, un riquadro dentro l'articolo, un
   blocco della home. Verticale e spesso, perché quello che deve fare è
   dire dove comincia il blocco, e a sinistra è dove l'occhio torna a ogni
   riga. */
.post-item-grid .post-title,
.post-item-grid h2,
.post-item-frontpage h3 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s1 ) !important;
	line-height: 1.22 !important;
	font-weight: 700;
	font-variation-settings: "wdth" 96;
	letter-spacing: -0.02em;
	margin: 0 0 0.3em;
}

.post-item-meta,
.post-item-grid .post-meta {
	font-family: var( --lrcm-display );
	font-size: 12.5px;
	color: var( --lrcm-muted );
	border: 0;
	padding: 0;
}

.cs-archive-header h1,
.page-header h1 {
	font-family: var( --lrcm-display );
	font-weight: 800;
	font-variation-settings: "wdth" 108;
	letter-spacing: -0.03em;
	color: var( --lrcm-ink );
}

.cs-archive-header hr,
.page-header hr {
	border: 0;
	border-top: var( --lrcm-rule ) solid var( --lrcm-ink );
	margin: 1.1rem auto;
	max-width: 80px;
}

/* ── 8b. Archive pages ────────────────────────────────────────────

   On a single post the drop cap, the related-posts block and the
   author/share footer all earn their place. On an archive page they
   are dead weight: the reader is browsing, not reading, and every
   related-posts block inside every card adds three more thumbnails to
   a page that is already a wall of thumbnails.                      */

/* The parent theme sets an 80 px Open Sans drop cap via ::first-letter.
   On an archive card it dominates the three-line excerpt; kill it.     */
.archive .blog-post .post-content p::first-letter,
.category .blog-post .post-content p::first-letter {
	float: none !important;
	font-size: inherit !important;
	line-height: inherit !important;
	padding: 0 !important;
	margin: 0 !important;
}

.archive .blog-post .post-content,
.category .blog-post .post-content {
	font-family: var( --lrcm-body );
	font-size: var( --lrcm-s0 );
	line-height: var( --lrcm-lh-body );
	color: var( --lrcm-text );
}

/* The "Read more" link is a button — same treatment as every other.
   Needs #page-content to beat the id-level link color rule.         */
#page-content .blog-post .read-more a {
	display: inline-block;
	font-family: var( --lrcm-display );
	font-size: 14px !important;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	background-color: var( --lrcm-accent ) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0;
	padding: 10px 22px;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

#page-content .blog-post .read-more a:hover {
	background-color: var( --lrcm-ink ) !important;
	color: #fff !important;
}

/* Author and share row. */
.blog-post .post-footer {
	border-top: 1px solid var( --lrcm-ink );
	padding: 14px 0 8px;
	margin-top: 1.2em;
}

.blog-post .post-author,
.blog-post .post-author a {
	font-family: var( --lrcm-display );
	font-size: 13px;
	color: var( --lrcm-muted );
	text-decoration: none;
}

.blog-post .post-author a:hover {
	color: var( --lrcm-accent );
}

.blog-post .post-share a {
	color: var( --lrcm-accent );
	transition: color 0.15s ease;
}

.blog-post .post-share a:hover {
	color: var( --lrcm-ink );
}

/* Related posts belong on single pages, not on archive listings. */
.archive .blog-post .visible-related-posts,
.category .blog-post .visible-related-posts {
	display: none;
}

/* ══ 9. BOTTONI E PAGINAZIONE ═════════════════════════════════════ */

/* Un bottone è la forma più letterale di "questo si clicca", quindi è
   rosso come i link. In nero era una mattonata: il peso di un elemento
   strutturale su una cosa che invece invita ad agire.
   Il nero resta per il passaggio del mouse, così il bottone reagisce
   scurendosi invece di cambiare colore. */
#page-content input[type="submit"],
#page-content button[type="submit"],
#page-content #submit,
#page-content .comment-form #submit,
#page-content .btn,
#respond #submit,
.load_more,
#page-content .blog-pagination.numeric a,
#page-content .blog-pagination.load-more a,
#page-content .wprm-recipe-jump,
#page-content .wprm-recipe-print {
	font-family: var( --lrcm-display );
	font-size: 14px !important;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	background-color: var( --lrcm-accent ) !important;
	color: #fff !important;
	border: 0;
	border-radius: 0;
	padding: 13px 26px;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

#page-content input[type="submit"]:hover,
#page-content button[type="submit"]:hover,
#page-content #submit:hover,
#respond #submit:hover,
#page-content .btn:hover,
.load_more:hover,
#page-content .blog-pagination.numeric a:hover,
#page-content .blog-pagination.load-more a:hover {
	background-color: var( --lrcm-ink ) !important;
	color: #fff !important;
}

#page-content .blog-pagination.numeric span {
	background-color: var( --lrcm-ink ) !important;
	color: #fff !important;
	border-radius: 0;
	padding: 13px 26px;
}

.single-post .previous-post i,
.single-post .next-post i,
.single-navigation i,
.savona-single-nav i,
#page-content .single-navigation i {
	background-color: var( --lrcm-accent ) !important;
	color: #fff !important;
}

/* ══ 10. POST CORRELATI ═══════════════════════════════════════════ */

.visible-related-posts {
	padding: 30px 0 34px;
	border-bottom: 0;
	border-top: var( --lrcm-rule ) solid var( --lrcm-ink );
}

.sticky .visible-related-posts {
	border: none;
	padding-bottom: 0;
}

#page-content .visible-related-posts h3 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s0 ) !important;
	font-weight: 700;
	font-variation-settings: "wdth" 92;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: left;
	line-height: 1.2;
	margin-bottom: 22px;
}

.visible-related-posts h4 {
	margin-top: 8px;
}

.visible-related-posts section {
	float: left;
	width: calc( ( 100% - ( 2 * 23px ) ) / 3 );
	margin-right: 23px;
}

.visible-related-posts section:last-of-type {
	margin-right: 0 !important;
}

/* ══ 11. VALUTAZIONI ══════════════════════════════════════════════ */

.post-ratings {
	width: 100%;
	opacity: 1;
	text-align: left;
	color: var( --lrcm-text );
}

.post-ratings-loading {
	display: none;
	height: 16px;
}

.post-ratings-image,
.post-ratings img,
.post-ratings-loading img,
.post-ratings-image img {
	display: initial !important;
	border: 0;
	padding: 0;
	margin: 0;
}

.post-ratings-comment-author {
	font-weight: normal;
	font-style: italic;
}

/* ══ 12. PIEDE DI PAGINA ══════════════════════════════════════════

   Nero pieno, e la fascia rovesciata in testa: verde e rosso si
   scambiano di posto rispetto a quella di apertura, cosi' la pagina si
   chiude come si e' aperta senza ripetersi identica.
   ────────────────────────────────────────────────────────────────── */

/* Il piede era gia rosso, deciso nel Customizer, e in un rosso diverso:
   il vecchio #c91f1f del marchio invece del #CD212A della bandiera. Due
   rossi quasi uguali nella stessa pagina sono peggio di un rosso solo —
   non si leggono come due scelte, si leggono come un errore. Qui viene
   allineato a quello della bandiera.

   Resta rosso. Bastano queste due righe per farlo nero, se preferisci:
   `background-color: var( --lrcm-ink )` qui e il filetto dei titoli in
   rosso invece che in avorio.

   Niente fascia tricolore in testa: il blocco rosso contro il bianco del
   contenuto e gia un bordo, e la banda ci avrebbe messo un rosso accanto
   a un altro rosso. */
#page-footer {
	background-color: var( --lrcm-accent ) !important;
	color: rgba( 255, 255, 255, 0.86 );
	border-top: 0;
}

#page-footer a {
	color: #fff !important;
}

#page-footer a:hover {
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Nel piede il fondo è nero, quindi il filetto rosso a sinistra ci sta
   anche meglio che nella colonna laterale. */
#page-footer .savona-widget .widget-title,
#page-footer .widget-title {
	background: transparent !important;
	border: 0;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-avorio );
	padding: 1px 0 1px 12px;
	margin: 0 0 14px;
	text-align: left !important;
}

#page-footer .savona-widget .widget-title::after,
#page-footer .savona-widget .widget-title::before {
	display: none !important;
	border: 0 !important;
}

#page-footer .savona-widget .widget-title h2,
#page-footer .savona-widget .widget-title h3,
#page-footer .widget-title h2,
#page-footer .widget-title h3,
#page-footer .savona-widget > h2 {
	font-family: var( --lrcm-display ) !important;
	font-size: var( --lrcm-s0 ) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	text-align: left !important;
	display: block !important;
	width: 100%;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: #fff !important;
	background: transparent !important;
	margin: 0;
	padding: 0;
}

#page-footer p,
#page-footer li {
	font-family: var( --lrcm-display );
	font-size: 14px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.86 );
}

.footer-copyright {
	border-top: 1px solid rgba( 255, 255, 255, 0.28 );
	padding-top: 18px;
}

.copyright-info {
	vertical-align: text-bottom;
	font-family: var( --lrcm-display );
	font-size: 13px;
}

.copyright-info img {
	display: inline-block;
	vertical-align: bottom;
}

/* Il bottone "torna su" e rosso, ma finisce spesso sopra il piede, che
   ora e rosso anche lui: senza un contorno chiaro li sparirebbe. Il
   filetto bianco lo definisce sul rosso e non si vede sul bianco, dove a
   definirlo basta il pieno. */
.scrolltop {
	background-color: var( --lrcm-accent ) !important;
	border: 2px solid #fff !important;
	border-radius: 0 !important;
	color: #fff !important;
}

/* ══ 13. HOME — sezioni ereditate ═════════════════════════════════

   front-page.php e video_section_frontpage.php usano ancora queste
   classi. Restano, ripulite: niente ombre, niente sfondi in parallasse
   — `background-attachment: fixed` costava un ridisegno a ogni scroll e
   su mobile non veniva nemmeno onorato.
   ────────────────────────────────────────────────────────────────── */

.home-wrapper {
	overflow: hidden;
	background-image: none;
}

.content_section {
	height: 100%;
	padding: 10px;
}

.fill {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
}

.frame {
	background-color: var( --lrcm-surface );
	box-shadow: none;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	padding: 0 0 0 14px;
}

.central-wrapper {
	background-color: var( --lrcm-surface );
	padding-top: 20px;
	margin: 30px 0;
}

.imageinsert {
	min-height: 520px;
}

.bg-1 {
	background: url( 'img/slide01n.jpg' ) no-repeat center center;
	background-size: cover;
}

.vignette {
	box-shadow: none;
}

.r3-image {
	height: 250px;
}

.r4-image {
	height: 300px;
}

.r3-caption,
.r4-caption {
	text-align: center;
	padding-top: 16px;
}

.fullwidth_img img {
	min-width: 100%;
	width: 100%;
	height: auto;
}

.centertext {
	text-align: center;
}

.vspaced {
	padding-top: 15px;
	padding-bottom: 15px;
}

.post-content {
	text-align: left !important;
}

.logo-img {
	max-width: 980px;
}

/* ══ 13b. HOME — LA NUOVA IMPAGINAZIONE ═══════════════════════════

   Le classi `lrcm-*` appartengono a `front-page.php`, riscritto: non
   ereditano piu' dalla griglia di Bootstrap del tema genitore, ma usano
   una griglia CSS e i token del sistema. Le sezioni 13 e 15 restano per
   i template che ancora le usano.

   Il trattamento e' quello del resto del sito: filetto rosso a sinistra
   sui blocchi, Archivo per cio' che si conta e si clicca, Literata per
   cio' che si legge, verde per cio' che informa, spigoli vivi.
   ────────────────────────────────────────────────────────────────── */

.lrcm-home {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px 3rem;
}

.lrcm-home__section {
	margin-top: 3.4rem;
}

/* I titoli di sezione portano lo stesso segno dei titoli dei widget e
   delle schede: un filetto rosso a sinistra, niente fondo. */
#page-content .lrcm-home__heading {
	font-family: var( --lrcm-display );
	font-size: var( --lrcm-s2 );
	font-variation-settings: "wdth" 96;
	font-weight: 700;
	line-height: var( --lrcm-lh-title );
	letter-spacing: -0.015em;
	text-transform: none;
	text-align: left;
	color: var( --lrcm-ink );
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	padding-left: 14px;
	margin: 0 0 1.4rem;
}

/* ── La ricetta in apertura ──────────────────────────────────────

   Prende il posto dello slider: stessa funzione, senza JavaScript e
   senza lo spostamento del layout mentre il plugin si sveglia. */

/* Foto sopra, testo sotto, e il filetto rosso che tiene insieme tutto il
   blocco — lo stesso trattamento delle schede piu' in basso.

   Erano affiancati, e non poteva funzionare: due colonne dentro una riga
   sola prendono l'altezza della piu' alta, e la piu' alta era il testo.
   Il titolo di questa ricetta occupa sei righe e chiede 441px, la foto ne
   dava 332, e il filetto — che segue la riga, non la foto — finiva 109px
   piu' in basso. Non e' una misura da correggere: dipende da quanto e'
   lungo il titolo della ricetta pubblicata quel giorno, e cambia da sola.
   Impilati, il caso non si presenta con nessun titolo e con nessuna
   proporzione di foto. */

.lrcm-hero {
	margin-top: 2rem;
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	padding-left: 18px;
}

.lrcm-hero__link {
	display: block;
	text-decoration: none !important;
}

/* La foto intera, non ritagliata: queste immagini portano la banda
   tricolore sul bordo destro, e un `object-fit: cover` la tagliava via. */
.lrcm-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}

.lrcm-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	padding-top: 1.1rem;
}

/* Verde: dice di che cosa si tratta, non e' un comando. */
.lrcm-hero__kicker {
	font-family: var( --lrcm-display );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var( --lrcm-info );
	margin: 0;
}

#page-content .lrcm-hero__title {
	font-family: var( --lrcm-display );
	font-size: var( --lrcm-s3 );
	font-variation-settings: "wdth" 104;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-transform: none;
	color: var( --lrcm-ink );
	margin: 0;
}

.lrcm-hero__link:hover .lrcm-hero__title {
	color: var( --lrcm-accent );
}

/* ── Il bottone ──────────────────────────────────────────────────
   Stessa forma del bottone di stampa della scheda ricetta. */

#page-content .lrcm-button {
	display: inline-block;
	font-family: var( --lrcm-display );
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	text-decoration: none !important;
	background-color: var( --lrcm-accent );
	color: #fff !important;
	border: 0;
	border-radius: 0;
	padding: 11px 20px;
}

#page-content .lrcm-button:hover,
.lrcm-hero__link:hover .lrcm-button {
	background-color: var( --lrcm-ink );
	color: #fff !important;
}

/* ── Le quattro categorie ────────────────────────────────────────── */

.lrcm-tiles {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.25rem;
}

.lrcm-tile {
	display: block;
	text-decoration: none !important;
}

.lrcm-tile__image {
	display: block;
	aspect-ratio: 1 / 1;
	background-color: var( --lrcm-avorio );
	background-size: cover;
	background-position: center;
}

.lrcm-tile__label {
	display: block;
	font-family: var( --lrcm-display );
	font-size: var( --lrcm-s1 );
	font-variation-settings: "wdth" 96;
	font-weight: 700;
	line-height: 1.2;
	color: var( --lrcm-ink );
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	padding-left: 12px;
	margin-top: 0.7rem;
}

.lrcm-tile:hover .lrcm-tile__label {
	color: var( --lrcm-accent );
}

/* ── Le schede delle ricette ─────────────────────────────────────── */

.lrcm-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 2rem 1.5rem;
	margin-bottom: 1.8rem;
}

.lrcm-grid--three {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.lrcm-card {
	border-left: var( --lrcm-rule-strong ) solid var( --lrcm-accent );
	padding-left: 14px;
}

.lrcm-card__link {
	display: block;
	text-decoration: none !important;
}

.lrcm-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

#page-content .lrcm-card__title {
	font-family: var( --lrcm-display );
	font-size: var( --lrcm-s1 );
	font-variation-settings: "wdth" 96;
	font-weight: 700;
	line-height: var( --lrcm-lh-title );
	letter-spacing: -0.015em;
	text-transform: none;
	color: var( --lrcm-ink );
	margin: 0.8rem 0 0;
}

.lrcm-card__link:hover .lrcm-card__title {
	color: var( --lrcm-accent );
}

.lrcm-card__meta {
	font-family: var( --lrcm-display );
	font-size: 13px;
	color: var( --lrcm-muted );
	margin: 0.4rem 0 0;
	font-variant-numeric: tabular-nums;
}

/* ── La ricerca ──────────────────────────────────────────────────── */

.lrcm-home__section--search .gsc-control-cse {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* ── Schermi stretti ─────────────────────────────────────────────── */

@media ( max-width: 900px ) {
	.lrcm-grid--three {
		grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.lrcm-home {
		padding: 0 16px 2rem;
	}

	.lrcm-home__section {
		margin-top: 2.4rem;
	}

	.lrcm-tiles {
		grid-template-columns: repeat( 2, 1fr );
		gap: 1rem;
	}

	/* Due per riga anche sul telefono: a una sola colonna le nove ricette
	   diventavano cinquemila pixel di scorrimento, ed e' la sezione che
	   deve restare percorribile con il pollice. */
	.lrcm-grid,
	.lrcm-grid--three {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 1.5rem 0.9rem;
	}

	#page-content .lrcm-card__title {
		font-size: var( --lrcm-s0 );
		margin-top: 0.6rem;
	}

	.lrcm-card {
		padding-left: 10px;
	}
}

/* ══ 14. RICERCA GOOGLE ═══════════════════════════════════════════ */

.gsc-input-box {
	border: 1px solid var( --lrcm-ink ) !important;
	border-radius: 0 !important;
}

.gsc-search-box-tools .gsc-search-box .gsc-input {
	margin: 0 !important;
}

.gsc-input-box tr {
	height: 50px;
}

table.gsc-search-box {
	margin: 0 !important;
}

.gsc-search-box table tr {
	border: 0 !important;
}

/* ══ 15. SMART SLIDER ═════════════════════════════════════════════
   Gli slider hanno fondi fotografici scuri: la' il rosso non tiene il
   contrasto e il testo resta bianco. */

#page-content #n2-ss-3 a,
#page-content #n2-ss-5 a,
#page-content #n2-ss-6 a,
#featured-slider a,
.slider-title a,
.slider-categories a,
.slider-read-more a {
	color: #fff !important;
}

.slider-title h1,
.slider-title h2,
.slider-title h3,
.slider-categories h3,
.slider-read-more h3 {
	color: #fff;
}

/* ══ 16. SCHERMI STRETTI ══════════════════════════════════════════

   La scala si comprime dalla radice: cambiando una variabile scendono
   tutti i gradini insieme, e le proporzioni restano quelle.
   ────────────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {
	#page-header .header-logo .logo-img {
		max-width: 88vw;
	}

	.visible-related-posts section {
		float: none;
		width: 100%;
		margin-right: 0 !important;
		margin-bottom: 22px;
	}
}

@media only screen and ( max-width: 48em ) {
	#lrcm_front_logo {
		display: none;
	}
}

@media ( max-width: 600px ) {
	:root {
		--lrcm-s0: 1.0625rem;   /* 17.00 */
		--lrcm-s1: 1.3rem;      /* 20.80 */
		--lrcm-s2: 1.594rem;    /* 25.50 */
		--lrcm-s3: 1.952rem;    /* 31.23 */
		--lrcm-s4: 2.125rem;    /* 34.00 — il titolo si comprime piu' degli
		                           altri: a 40px su 360 di larghezza andrebbe
		                           a capo tre volte. */
		--lrcm-gap: 1rem;
	}

	#stripe {
		height: 8px;
	}

	.imageinsert {
		min-height: 320px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#page-content a,
	.load_more,
	#page-content .blog-pagination a {
		transition: none;
	}
}