/* Blu Basilico — main.css
   Mobile-first: gli stili base valgono da 360px; le media query aggiungono a 600, 900 e 1200.
   Token con gli stessi nomi di theme.json. Nessun build. */

/* ---------- Token ---------- */
:root {
	--carta: #FCFBF7;
	--inchiostro: #16233A;
	--grigio: #5B6473;
	--linea: #E4E1D8;
	--blu: #1F6FEB;          /* fondo dei pulsanti: il bianco sopra sta a 4,63:1 */
	--blu-testo: #1A5FD0;    /* testo e link su carta: 5,65:1, il blu pieno si ferma a 4,48:1 */
	--profondo: #0F2A4A;
	--basilico: #2D6A4F;
	--mare: #1F6FEB;
	--youtube: #FF0000;
	--chiaro: #FFFFFF;
	/* Terracotta solo per richiami (Dolci): il tono pieno #D95D39 non arriva ad AA, questo sta a 8,2:1. */
	--terracotta: #8C2B14;
	--terracotta-tenue: #FCECE7;
	/* Superfici calde delle schede e delle fasce editoriali. */
	--pannello: #F4EFEA;
	--pannello-caldo: #ECE4DA;

	--font-titoli: "Newsreader", Georgia, "Times New Roman", serif;
	--font-testo: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--peso-titoli: 500;

	--testo: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
	--testo-interlinea: 1.6;
	/* Newsreader è più stretto e leggero di Fraunces: scala alzata di 2 px (h1 36→54, h2 28→36, h3 22→26, card 24). */
	--h1: clamp(2.25rem, 1.5rem + 2.8vw, 3.375rem);
	--h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	--h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	--card-titolo: 1.5rem;
	/* Su telefono nessun testo sotto 16px; da 600px i meta scendono a 14 e i meta delle card a 13. */
	--meta: 1rem;
	--meta-card: 1rem;

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 1rem;
	--sp-4: 1.5rem;
	--sp-5: 2rem;
	--sp-6: 3rem;
	--sp-7: 4rem;
	--sp-8: 6rem;

	--contenitore: 1200px;
	--lettura: 68ch;
	--breakout: 960px;
	--margine: clamp(1rem, 4vw, 2rem);
	--raggio: 8px;
	--tocco: 44px;
}

@media (min-width: 600px) {
	:root { --meta: 0.875rem; --meta-card: 0.8125rem; }
}
@media (min-width: 900px) {
	:root { --testo-interlinea: 1.65; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* `overflow-x: clip` sul body non si propaga al viewport: senza questa riga un contenitore che scorre
   (la griglia delle zone) trascina con sé tutta la pagina. `clip` invece di `hidden` per non rompere sticky. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
	margin: 0;
	background: var(--carta);
	color: var(--inchiostro);
	font-family: var(--font-testo);
	font-size: var(--testo);
	line-height: var(--testo-interlinea);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--blu-testo); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
	font-family: var(--font-titoli);
	font-weight: var(--peso-titoli);
	
	color: var(--inchiostro);
	margin: 0 0 var(--sp-3);
	text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.05; }
h2 { font-size: var(--h2); line-height: 1.15; }
h3 { font-size: var(--h3); line-height: 1.25; }
p, ul, ol, figure { margin: 0 0 var(--sp-3); }
figure { margin-left: 0; margin-right: 0; }

input, button, select, textarea { font: inherit; }
input[type="search"], input[type="email"], input[type="text"], input[type="url"], input[type="tel"], textarea, select { font-size: max(1rem, 1em); } /* niente zoom automatico su iOS */

.nascosto, .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.salta {
	position: absolute; left: var(--sp-3); top: -100px;
	display: inline-flex; align-items: center; min-height: var(--tocco);
	background: var(--blu); color: var(--chiaro);
	padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); z-index: 100;
}
.salta:focus { top: var(--sp-3); }

/* ---------- Layout ---------- */
.contenitore { width: min(100% - 2 * var(--margine), var(--contenitore)); margin-inline: auto; }
.lettura { width: min(100% - 2 * var(--margine), var(--lettura)); margin: var(--sp-6) auto; }
.lettura__testa { margin-bottom: var(--sp-4); }
.lettura__immagine img { border-radius: var(--raggio); width: 100%; }
.lettura__testo > * + * { margin-top: var(--sp-3); }
.lettura__testo img { border-radius: var(--raggio); }
.lettura__testo table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.breakout { width: min(100% - 2 * var(--margine), var(--breakout)); margin: 0 auto var(--sp-5); }
.sezione { margin: var(--sp-7) auto; }
.sezione__titolo { margin-bottom: var(--sp-4); }

.griglia { display: grid; gap: var(--sp-5) var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .griglia { grid-template-columns: repeat(3, 1fr); } }
/* Le immagini con width/height in HTML non devono allargare le celle di griglia e flex. */
.griglia > *, .tessere > *, .feature-lista > *, .site-header__interno > * { min-width: 0; }

/* ---------- Pulsanti ---------- */
.bottone {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--tocco);
	background: var(--blu); color: var(--chiaro);
	font-weight: 500; font-size: 1rem; line-height: 1;
	padding: 0.75em 1.25em; border: 0; border-radius: var(--raggio);
	text-decoration: none; cursor: pointer;
}
.bottone:hover { background: #1859bd; color: var(--chiaro); }

/* ---------- Header ----------
   Fisso in alto, e da 8px di scorrimento si stringe: 56px, logo piccolo, ombra leggera e sfondo
   carta al 95% con una velatura. È `sticky`, non `fixed`: resta nel flusso, quindi al passaggio
   fra normale e compatta non c'è nessun salto di layout da compensare.
   Sul telefono la testata si toglie di mezzo scorrendo verso il basso e torna scorrendo in su:
   chi cucina guarda il procedimento, non il menu. */
.site-header {
	position: sticky; top: 0; z-index: 30;
	background: var(--carta); border-bottom: 1px solid var(--linea);
	transition: transform 200ms ease, box-shadow 160ms ease, background-color 160ms ease;
	will-change: transform;
}
.site-header__interno {
	display: flex; align-items: center; gap: var(--sp-2);
	min-height: 64px; padding-block: var(--sp-2);
	transition: min-height 160ms ease, padding-block 160ms ease;
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tocco); color: var(--inchiostro); text-decoration: none; margin-right: auto; }
.brand__mascotte { width: 37px; height: 44px; transition: width 160ms ease, height 160ms ease; }
.brand__nome { font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: 1.5rem; transition: font-size 160ms ease; }

/* Compatta: 56px in tutto, logo più piccolo, ombra L2, carta al 95% con velatura. */
.site-header--compatta {
	background: color-mix(in srgb, var(--carta) 95%, transparent);
	box-shadow: 0 4px 14px rgba(15, 42, 74, 0.10);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
	.site-header--compatta { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.site-header--compatta .site-header__interno { min-height: 56px; padding-block: 4px; }
.site-header--compatta .brand__mascotte { width: 27px; height: 32px; }
.site-header--compatta .brand__nome { font-size: 1.25rem; }

/* Nascosta scorrendo in giù (solo telefono: lo decide il JS, che sopra i 900px non la tocca). */
.site-header--via { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
	.site-header, .site-header__interno, .brand__mascotte, .brand__nome { transition: none; }
	.site-header--via { transform: none; }
}
/* Il menu aperto vince su tutto: la testata non deve sparire mentre lo si legge. */
.site-header.nav-aperta, .site-header:has(.nav-toggle[open]) { transform: none; }

/* L'ancora sotto una testata fissa: senza questo, «Vai alla ricetta» porta il titolo sotto il menu. */
:target, [id] { scroll-margin-top: 80px; }

/* Il pulsante blu della testata: c'è sempre, anche nella versione compatta. */
.nav-invia { order: 1; min-height: 44px; padding: 0 1.1em; display: inline-flex; align-items: center; font-size: 0.9375rem; white-space: nowrap; }
.nav-invia__corto { display: none; }
@media (max-width: 479px) {
	/* Non ci sta tutto: resta il testo corto. */
	.nav-invia__lungo { display: none; }
	.nav-invia__corto { display: inline; }
	.nav-invia { padding: 0 0.8em; font-size: 0.875rem; }
}
/* Sul telefono nella barra ci sono marchio, pulsante, ricerca e menu: il nome del sito si
   stringe e non va a capo, se no la testata diventa alta due righe. */
@media (max-width: 599px) {
	.brand { min-width: 0; }
	.brand__mascotte { width: 27px; height: 32px; }
	.brand__nome { font-size: 1.0625rem; white-space: nowrap; }
	.nav-toggle__testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.site-header--compatta .brand__mascotte { width: 24px; height: 29px; }
}
@media (max-width: 359px) {
	/* Telefoni piccolissimi: il pulsante c'è comunque, il nome del sito sparisce. */
	.brand__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.nav-invia { padding: 0 0.6em; }
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.nav-toggle__pulsante, .ricerca-toggle__pulsante {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-width: var(--tocco); min-height: var(--tocco);
	padding: 0 var(--sp-2); border-radius: var(--raggio); color: var(--inchiostro);
	font-weight: 500; font-size: 1rem;
}
.nav-toggle__icona { width: 22px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.nav-toggle__icona::before, .nav-toggle__icona::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.nav-toggle__icona::before { top: -7px; }
.nav-toggle__icona::after { top: 7px; }
.nav-toggle[open] .nav-toggle__icona { background: transparent; }
.nav-toggle[open] .nav-toggle__icona::before { top: 0; transform: rotate(45deg); }
.nav-toggle[open] .nav-toggle__icona::after { top: 0; transform: rotate(-45deg); }

/* Pannello mobile: tutta altezza, ricerca in testa, voci a 48px. Si apre con <details>, si chiude con Esc o tap fuori (JS). */
.nav {
	display: none;
	position: fixed; inset: 0; z-index: 40;
	background: var(--carta);
	padding: calc(64px + var(--sp-3)) var(--margine) var(--sp-5);
	overflow-y: auto;
}
.site-header:has(.nav-toggle[open]) .nav,
.site-header.nav-aperta .nav { display: block; }
.site-header:has(.nav-toggle[open]) .nav-toggle,
.site-header.nav-aperta .nav-toggle { position: relative; z-index: 50; }
.nav__ricerca { margin-bottom: var(--sp-4); }
.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.nav__lista a {
	display: flex; align-items: center; min-height: 48px;
	color: var(--inchiostro); text-decoration: none; font-weight: 500; font-size: 1.125rem;
	border-bottom: 1px solid var(--linea);
}
.nav__lista li:last-child a { border-bottom: 0; }
.nav__lista a:hover, .nav__lista .current-menu-item > a { color: var(--blu-testo); }

.ricerca-toggle { order: 2; }
.nav-toggle { order: 3; }
.ricerca-toggle__pannello {
	position: absolute; right: 0; top: 100%; z-index: 20;
	width: min(100%, 420px);
	background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio);
	padding: var(--sp-3); margin-top: var(--sp-2);
}
.ricerca { display: flex; gap: var(--sp-2); }
.ricerca__campo {
	flex: 1; min-width: 0; min-height: var(--tocco);
	color: var(--inchiostro); background: var(--chiaro);
	border: 1px solid var(--linea); border-radius: var(--raggio); padding: 0.6em 0.9em;
}
.ricerca__campo:focus { border-color: var(--blu); outline: none; box-shadow: 0 0 0 2px var(--blu); }

@media (min-width: 900px) {
	.site-header__interno { gap: var(--sp-3); min-height: 72px; }
	.nav-toggle { display: none; }
	.nav { display: block; position: static; padding: 0; margin-inline: auto; background: transparent; overflow: visible; }
	.nav__ricerca { display: none; }
	.nav__lista { flex-direction: row; gap: var(--sp-4); }
	.nav__lista a { min-height: var(--tocco); min-width: var(--tocco); justify-content: center; border-bottom: 0; font-size: 1rem; padding: 0; }
}

/* ---------- Card ricetta ---------- */
/* Il contenitore è <article> per le ricette e <a> per community e ristoranti: le regole valgono
   per entrambi, il link sta su .card__link quando serve. Pannello caldo, filo sottile, nessuna ombra. */
.card {
	display: block; color: var(--inchiostro); text-decoration: none;
	background: var(--pannello); border: 1px solid var(--linea);
	border-radius: var(--raggio); overflow: hidden;
}
.card__link { display: block; color: inherit; text-decoration: none; }
.card:hover .card__titolo { color: var(--blu-testo); }
.card:focus-visible, .card__link:focus-visible { outline: 2px solid var(--blu); outline-offset: -3px; }
.card__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--linea); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; }
.card__corpo { display: block; padding: var(--sp-3); }
/* La card e' il contenitore di riferimento: la meta si adatta a quanto e' larga la card,
   non a quanto e' larga la finestra. Sotto i 280px la difficolta' esce e restano tempo e
   categoria, che sono le due cose che si guardano davvero. */
.card { container-type: inline-size; }
.card__meta {
	display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-1) var(--sp-3);
	font-size: var(--meta-card); line-height: 1.4; color: var(--grigio); margin: 0;
	white-space: nowrap; overflow: hidden;
}
.card__fatto, .card__categoria { display: inline-flex; align-items: center; gap: 5px; }
/* Tempo e difficolta' non si stringono mai: tagliati a meta' parola non vogliono dire niente.
   Se lo spazio non basta cede la categoria, che con i puntini si legge lo stesso. */
.card__fatto { flex: none; }
.card__categoria { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 279px) { .card__fatto--difficolta { display: none; } }
.icona--piccola { width: 15px; height: 15px; flex: none; }
.card__titolo {
	display: block;
	font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: var(--card-titolo); line-height: 1.2;
	
	margin: var(--sp-1) 0 0;
}
.card__intro {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	color: var(--grigio); font-size: 1rem; margin: var(--sp-2) 0;
}
.card--grande .card__titolo { font-size: var(--h2); line-height: 1.15; }
.card--grande .card__foto { aspect-ratio: 16 / 10; }
.card--grande .card__corpo { padding: var(--sp-4); }
/* Variante in riga: miniatura a sinistra, testo a destra, senza pannello. */
.card--lista { background: transparent; border: 0; border-radius: 0; }
.card--lista .card__link { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.card--lista .card__foto { border-radius: var(--raggio); }
.card--lista .card__corpo { padding: 0; }
.card--lista .card__titolo { font-size: 1.125rem; line-height: 1.25; }
@media (min-width: 900px) { .card--lista .card__link { grid-template-columns: 120px minmax(0, 1fr); } }
.segno { width: 8px; height: 8px; border-radius: 50%; background: var(--grigio); display: inline-block; flex: none; }
.segno--mare { background: var(--mare); }
.segno--terra { background: var(--basilico); }

/* ---------- Facade video ---------- */
.facade { margin: 0 0 var(--sp-4); }
.facade__quadro {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: var(--raggio); background: var(--profondo);
}
.facade__anteprima { width: 100%; height: 100%; object-fit: cover; }
.facade__play, .facade__link {
	position: absolute; inset: 0; width: 100%; height: 100%;
	display: grid; place-items: center;
	background: transparent; border: 0; padding: 0; cursor: pointer;
}
.facade__play-sfondo { fill: var(--youtube); }
.facade__play:hover .facade__play-sfondo { fill: #cc0000; }
.facade__play:focus-visible, .facade__link:focus-visible { outline: 2px solid var(--blu); outline-offset: -4px; }
.facade__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade__didascalia { font-size: var(--meta); color: var(--grigio); margin-top: var(--sp-2); }
/* Senza foto in evidenza e senza anteprima scaricata: si disegna qui, non si chiede a YouTube. */
.facade__quadro--senza-foto {
	background: linear-gradient(160deg, var(--profondo), #1b3f68);
}
.facade__segnaposto {
	position: absolute; inset: 0; margin: 0;
	display: grid; place-items: center; text-align: center;
	padding: var(--sp-4) var(--sp-3) 4.5rem;
	color: #fff; font-family: var(--font-titoli, inherit); font-size: 1.25rem; line-height: 1.3;
}
/* Avviso del consenso: copre l'anteprima solo quando serve. */
.facade__avviso[hidden] { display: none; }
.facade__avviso {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--sp-2); text-align: center; padding: var(--sp-3);
	background: rgba(15, 42, 74, 0.94); color: #fff;
}
.facade__avviso-testo { margin: 0; max-width: 32ch; font-size: 1rem; }
.facade__avviso-note { margin: 0; font-size: var(--meta); }
.facade__avviso-note a { color: #fff; }
.facade__quadro--avviso .facade__play { display: none; }

/* ---------- Riga meta e riga autore ---------- */
.meta-riga { font-size: var(--meta); color: var(--grigio); margin: 0; }
.meta-riga a { color: inherit; }
.autore { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--meta); color: var(--grigio); margin: 0; }
.autore__avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea); background: var(--chiaro); object-fit: contain; }
.autore__nome { color: var(--inchiostro); font-weight: 500; }

/* ---------- Vetro smerigliato (card sovrapposte) ---------- */
.vetro {
	background: rgba(252, 251, 247, 0.92); color: var(--inchiostro);
	border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--raggio);
	padding: var(--sp-4);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.vetro { background: rgba(252, 251, 247, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.etichetta {
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 0.8em;

	background: var(--carta); border: 1px solid var(--linea); border-radius: 999px;
	color: var(--inchiostro); text-decoration: none; font-size: var(--meta); font-weight: 500;
}
/* Da sola è solo un'etichetta; quando è un link dev'essere un bersaglio da 44px. */
a.etichetta { min-height: var(--tocco); }

/* ---------- Home: griglie e intestazioni di sezione ---------- */
@media (min-width: 900px) { .griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.testa {
	display: grid; gap: var(--sp-1) var(--sp-4); grid-template-columns: minmax(0, 1fr);
	border-bottom: 1px solid var(--linea); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
}
.testa__titolo { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); }
.testa__tutti { display: inline-flex; align-items: center; gap: 0.35em; min-height: var(--tocco); font-size: 1rem; font-weight: 500; text-decoration: none; }
.testa__tutti:hover { text-decoration: underline; }
.testa__nota, .testa__sottotitolo { margin: 0; color: var(--grigio); font-size: var(--meta); max-width: 62ch; }
@media (min-width: 600px) {
	.testa { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
	.testa__sottotitolo { grid-column: 1 / -1; }
	.testa__nota { text-align: right; }
}

/* Occhiello: etichetta breve in maiuscoletto sopra un titolo, non testo di lettura. */
.occhiello {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-testo); font-size: var(--meta-card); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
	color: var(--grigio); margin: 0 0 var(--sp-1);
}
.occhiello--mare { color: var(--blu-testo); }
.occhiello--terra { color: var(--basilico); }
.occhiello--terracotta { color: var(--terracotta); }
.occhiello--chiaro { color: #DCE3EE; }

/* ---------- Home: hero ---------- */
.home-hero { margin: var(--sp-4) auto var(--sp-6); }
.home-hero__occhiello { margin: 0 0 var(--sp-3); color: var(--grigio); font-size: var(--meta); }
.home-hero__griglia { display: grid; gap: var(--sp-3); }
.home-hero__principale { position: relative; border-radius: var(--raggio); overflow: hidden; background: var(--profondo); }
.home-hero__principale .facade { margin: 0; }
.home-hero__principale .facade__quadro { border-radius: 0; aspect-ratio: 4 / 3; }
.home-hero__principale .facade__didascalia { display: none; }
.home-hero__vetro { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index: 2; padding: var(--sp-3); }
/* Sotto i 700px la foto e' alta 270px e il vetro ne coprirebbe due terzi, play compreso:
   li' scende sotto la foto, in colonna, e il video resta tutto visibile. */
@media (max-width: 699px) {
	.home-hero__vetro { position: static; margin-top: var(--sp-2); padding: var(--sp-3) 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
	.home-hero__principale { background: none; }
}
.home-hero__titolo { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.375rem); line-height: 1.1; margin: var(--sp-2) 0; }
.home-hero__titolo a { color: inherit; text-decoration: none; }
.home-hero__titolo a:hover { color: var(--blu-testo); }
/* Le tre ricette a fianco sono card in riga con il pannello caldo intorno. */
.home-hero__laterali { display: grid; gap: var(--sp-3); }
.home-hero__laterali .card { background: var(--pannello); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-2); }
.home-hero__laterali .card__link { height: 100%; }
.home-hero__laterali .card__foto { aspect-ratio: auto; height: 100%; min-height: 96px; }
@media (min-width: 900px) {
	.home-hero__griglia { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: var(--sp-4); align-items: stretch; }
	/* Il quadro riempie la colonna: l'altezza la decide la colonna di destra, non il rapporto della foto. */
	.home-hero__principale { min-height: 460px; }
	.home-hero__principale .facade__quadro { position: absolute; inset: 0; aspect-ratio: auto; }
	/* Stretto apposta: il play sta al centro della foto, e il vetro deve fermarsi prima.
	   Con 320px il bordo destro resta a sinistra del pulsante sia a 1440 sia a 1024. */
	.home-hero__vetro { left: var(--sp-4); right: auto; bottom: var(--sp-4); max-width: min(38%, 300px); }
	.home-hero__titolo { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
	.home-hero__laterali { grid-template-rows: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Home: fascia community ---------- */
.fascia-community { background: var(--profondo); color: #DCE3EE; padding: var(--sp-6) 0; }
.fascia-community__griglia { display: grid; gap: var(--sp-4); }
.fascia-community__media img { width: 100%; border-radius: var(--raggio); }
.fascia-community__testo :is(h1, h2) { color: var(--chiaro); font-size: var(--h2); margin: 0 0 var(--sp-3); }
.fascia-community__testo p { margin: 0 0 var(--sp-4); }
.fascia-community__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.fascia-community .briciole { color: #B8C3D4; margin-bottom: var(--sp-2); }
.fascia-community .briciole a, .fascia-community .briciole .last { color: #DCE3EE; }
.fascia-community__azioni a:not(.bottone) { display: inline-flex; align-items: center; min-height: var(--tocco); color: var(--chiaro); }
.fascia-community__punti {
	display: grid; gap: var(--sp-2) var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: var(--meta);
}
.fascia-community__punti li { display: flex; align-items: baseline; gap: 8px; }
.fascia-community__punti li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7FA9F5; }
@media (min-width: 900px) {
	.fascia-community { padding: var(--sp-7) 0; }
	.fascia-community__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: center; }
	.fascia-community__testo { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--raggio); padding: var(--sp-5); }
}

/* ---------- Home: riga che scorre in orizzontale ---------- */
/* Card verticali 3:4 da 260px. Sul desktop la quinta sbuca dal bordo destro; su telefono la
   riga esce dai margini del contenitore, così si vede il bordo della card successiva e si
   capisce che c'è altro da vedere. */
.scorri {
	display: flex; gap: var(--sp-3); list-style: none; margin: 0; padding: 0 0 var(--sp-2);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity; scroll-behavior: smooth;
	scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.scorri:focus-visible { outline: 2px solid var(--blu); outline-offset: 4px; }
.scorri__voce { flex: 0 0 260px; scroll-snap-align: start; }
.card--verticale { height: 100%; }
.card--verticale .card__foto { aspect-ratio: 3 / 4; }
@media (max-width: 599px) {
	.scorri { margin-inline: calc(var(--margine) * -1); padding-inline: var(--margine); scroll-padding-inline: var(--margine); }
	.scorri__voce { flex-basis: 240px; }
}
.testa__azioni { display: flex; align-items: center; gap: var(--sp-3); }
.frecce { display: flex; gap: var(--sp-1); }
.frecce__bottone {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; border-radius: 50%;
	background: var(--pannello); border: 1px solid var(--linea); color: var(--inchiostro); cursor: pointer;
}
.frecce__bottone:hover:not(:disabled) { background: var(--chiaro); color: var(--blu-testo); border-color: var(--blu-testo); }
.frecce__bottone:disabled { opacity: 0.35; cursor: default; }
.frecce__bottone svg { width: 20px; height: 20px; }

/* ---------- Home: tessere fotografiche ---------- */
.tessere { display: grid; gap: var(--sp-3); }
@media (min-width: 600px) { .tessere--due { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 900px) {
	.tessere--salute { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: var(--sp-4); }
	.tessere--salute > :first-child { grid-row: 1 / 3; }
	.tessere--salute .tessera { aspect-ratio: auto; min-height: 230px; }
}
.tessera { position: relative; border-radius: var(--raggio); overflow: hidden; background: var(--profondo); aspect-ratio: 16 / 10; }
.tessera img { width: 100%; height: 100%; object-fit: cover; }
.tessera__link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.tessera__pannello { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block; padding: var(--sp-5) var(--sp-3) var(--sp-3); }
.tessera__titolo { margin: 0; font-size: 1.375rem; line-height: 1.2; }
.tessera--grande .tessera__titolo { font-size: var(--h2); }
/* Scuro: la sfumatura sta sul pannello, così non copre mai la foto per intero. */
.tessera--scuro .tessera__pannello { background: linear-gradient(to top, rgba(15, 42, 74, 0.94) 0%, rgba(15, 42, 74, 0.6) 55%, rgba(15, 42, 74, 0) 100%); }
/* Le due tessere grandi dei "Primi di terra": titolo piu' presente e sfumatura che si chiude
   piu' in fretta nel terzo inferiore, dove ci sta il testo. */
.tessere--due .tessera__titolo { font-size: 26px; line-height: 1.15; }
.tessere--due .tessera--scuro .tessera__pannello {
	padding-top: var(--sp-6);
	background: linear-gradient(to top, rgba(15, 42, 74, 0.97) 0%, rgba(15, 42, 74, 0.9) 20%, rgba(15, 42, 74, 0.5) 60%, rgba(15, 42, 74, 0) 100%);
}
.tessera--scuro .tessera__titolo { color: var(--chiaro); }
.tessera--scuro .tessera__link:hover .tessera__titolo { text-decoration: underline; text-underline-offset: 0.15em; }
.tessera--scuro .tessera__link:focus-visible { outline: 2px solid var(--chiaro); outline-offset: -4px; }
/* Vetro: pannello chiaro appoggiato in basso sulla foto. */
.tessera--vetro { aspect-ratio: 3 / 4; }
.tessera--vetro .tessera__pannello {
	left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
	background: rgba(252, 251, 247, 0.94); border-radius: var(--raggio); padding: var(--sp-3);
}
.tessera--vetro .tessera__link:hover .tessera__titolo { color: var(--blu-testo); }

/* ---------- Home: tessere "Di stagione" ---------- */
.tessera--stagione { aspect-ratio: auto; min-height: 440px; }
.tessera--stagione img { position: absolute; inset: 0; }
.tessera--stagione .tessera__pannello { padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.tessera--stagione .tessera__titolo { color: var(--chiaro); font-size: var(--h2); margin-bottom: var(--sp-3); }
.tessera__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; }
.tessera__secondo { display: inline-flex; align-items: center; min-height: var(--tocco); color: var(--chiaro); font-size: var(--meta); }
.tessera__richiamo {
	position: absolute; left: var(--sp-3); top: var(--sp-3); z-index: 2;
	display: inline-flex; align-items: center; min-height: var(--tocco); padding: 0 0.9em; border-radius: 999px;
	background: rgba(252, 251, 247, 0.94); color: var(--inchiostro); text-decoration: none;
	font-size: var(--meta-card); font-weight: 500;
}
.chip-riga--chiara { margin-bottom: var(--sp-4); }
.chip-riga--chiara .chip { background: rgba(15, 42, 74, 0.78); border-color: rgba(255, 255, 255, 0.35); color: var(--chiaro); }
.chip-riga--chiara .chip:hover { background: var(--chiaro); border-color: var(--chiaro); color: var(--blu-testo); }
.chip-riga--chiara .chip--altri { background: var(--blu); border-color: var(--blu); }
.tessera--terra .chip--altri { background: var(--basilico); border-color: var(--basilico); }

/* ---------- Home: una ricetta in evidenza e un elenco ---------- */
.feature-lista { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .feature-lista { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: var(--sp-5); align-items: start; } }
/* La tessera in evidenza è larga circa 650px: con il 3/4 verticale diventava alta più del
   triplo dell'elenco accanto. Qui sta in orizzontale, così le due colonne finiscono quasi
   insieme e la foto non viene ingrandita oltre la sua misura. */
.feature-lista__primo .tessera--vetro { aspect-ratio: 16 / 10; }
.righe { list-style: none; margin: 0; padding: 0; }
/* Indice da rivista: il numero e' un segno tipografico, non un dato. Sta fuori dal link,
   percio' non lo legge nessuno screen reader e nessuno ci clicca sopra. */
.righe--testo { counter-reset: voce; }
.righe--testo .righe__voce { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; counter-increment: voce; }
.righe--testo .righe__voce::before {
	content: counter(voce, decimal-leading-zero);
	font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: 28px; line-height: 1;
	color: var(--blu); font-variant-numeric: tabular-nums;
}
.righe__voce { padding: var(--sp-3) 0; border-bottom: 1px solid var(--linea); }
.righe__voce:first-child { padding-top: 0; }
.righe__voce:last-child { border-bottom: 0; }
.riga { display: grid; gap: var(--sp-1) var(--sp-4); align-content: center; min-height: var(--tocco); color: var(--inchiostro); text-decoration: none; }
.riga__titolo { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.riga:hover .riga__titolo { color: var(--blu-testo); }
.riga__meta { font-size: var(--meta); color: var(--grigio); }
@media (min-width: 600px) {
	.riga { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
	.riga__meta { text-align: right; }
}

.fascia-dolci { background: var(--pannello-caldo); margin-top: var(--sp-7); }
.fascia-dolci .sezione { margin-block: 0; padding-block: var(--sp-7); }
.fascia-dolci .card { background: var(--carta); }
	display: block; background: var(--carta); border-radius: var(--raggio);
	padding: var(--sp-4); margin: 0;
}

/* ---------- Di stagione: selettore del mese ---------- */
.stagione__testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stagione__testa .sezione__titolo { margin: 0; }
.stagione__testa > * { min-width: 0; }
.stagione__mesi { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 100%; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.stagione__mesi::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .stagione__mesi { flex: 0 1 auto; } }
.stagione__mese {
	position: relative; /* contiene lo span .nascosto (assoluto) dentro lo scroller */
	display: inline-flex; align-items: center; justify-content: center;
	flex: none; min-width: var(--tocco); min-height: var(--tocco); padding: 0 10px;
	background: transparent; border: 1px solid transparent; border-radius: var(--raggio);
	color: var(--grigio); font-size: var(--meta); font-weight: 500; text-decoration: none; cursor: pointer;
}
.stagione__mese:hover { color: var(--inchiostro); border-color: var(--linea); }
.stagione__mese--attivo, .stagione__mese[aria-current="true"] { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }

/* ---------- Badge e chip ---------- */
.badge-riga { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 0.3em 0.7em;
	border: 1px solid var(--linea); border-radius: 999px; background: var(--chiaro);
	font-size: var(--meta); color: var(--grigio); line-height: 1.3;
}
.badge--buono { border-color: rgba(46, 125, 79, 0.35); color: var(--basilico); }
.badge--attenzione { border-color: rgba(31, 111, 235, 0.35); color: var(--blu-testo); }
.badge--piccolo { font-size: var(--meta-card); padding: 0.2em 0.55em; }
.chip-riga { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: var(--tocco); padding: 0 0.9em;
	border: 1px solid var(--linea); border-radius: 999px; background: var(--carta);
	color: var(--inchiostro); text-decoration: none; font-size: var(--meta);
}
/* Sfondo bianco all'hover: il blu su `carta` sta a 4,48:1, appena sotto AA. */
.chip:hover { border-color: var(--blu); color: var(--blu-testo); background: var(--chiaro); }

/* ---------- FAQ e rimandi alle schede (anche negli articoli) ---------- */
.faq__voce { border-bottom: 1px solid var(--linea); }
.faq__domanda { padding: var(--sp-3) 0; cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); min-height: var(--tocco); align-items: center; }
.faq__domanda::-webkit-details-marker { display: none; }
.faq__domanda::after { content: "+"; color: var(--grigio); font-size: 1.25rem; }
.faq__voce[open] .faq__domanda::after { content: "−"; }
.faq__risposta { margin: 0 0 var(--sp-3); color: var(--grigio); max-width: 68ch; }

/* Link agli ingredienti dentro la scheda ricetta */
.scheda__ingrediente-link { color: inherit; text-decoration: underline; text-decoration-color: var(--linea); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.scheda__ingrediente-link:hover { color: var(--blu-testo); text-decoration-color: currentColor; }

/* ---------- Archivio e paginazione ---------- */
.archivio { margin: var(--sp-6) auto; }
.archivio__testa { margin-bottom: var(--sp-5); }
.archivio__descrizione { color: var(--grigio); max-width: var(--lettura); }
.pagination { margin-top: var(--sp-6); font-size: 1rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--tocco); min-height: var(--tocco); padding: 0 0.9em;
	border: 1px solid var(--linea); border-radius: var(--raggio); text-decoration: none; color: var(--inchiostro);
}
.pagination .page-numbers.current { background: var(--blu); border-color: var(--blu); color: var(--chiaro); }

/* ---------- 404 ---------- */
.pagina-404 { margin: var(--sp-7) auto; }
.pagina-404__testo { color: var(--grigio); max-width: var(--lettura); }
.pagina-404__ricerca { max-width: 520px; margin: var(--sp-4) 0 var(--sp-7); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--profondo); color: #DCE3EE;
	margin-top: var(--sp-8); padding: var(--sp-6) 0 var(--sp-4);
	font-size: 1rem;
}
.site-footer a { color: var(--chiaro); }
.site-footer__colonne { display: grid; gap: var(--sp-5); }
.site-footer__marchio { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.site-footer__nome { font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: 1.5rem; color: var(--chiaro); }
.site-footer__lista { list-style: none; margin: 0; padding: 0; }
.site-footer__lista a { display: flex; align-items: center; min-height: var(--tocco); }
.site-footer__fondo {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4);
	margin-top: var(--sp-5); padding-top: var(--sp-3);
	border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: var(--meta); color: #B8C3D4;
}
.site-footer__fondo p { margin: 0; }
.site-footer__legali { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); list-style: none; margin: 0; padding: 0; }
.site-footer .bottone--chiaro { background: var(--chiaro); color: var(--profondo); }
.site-footer .bottone--chiaro:hover { background: #DCE3EE; }
@media (min-width: 600px) { .site-footer__colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 900px) { .site-footer__colonne { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--sp-6); } }

/* ---------- Newsletter (doppio consenso: qui si raccoglie, poi si conferma via e-mail) ---------- */
.newsletter { margin: 0; }
.newsletter__titolo { margin: 0 0 var(--sp-2); }
.newsletter__riga { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.newsletter__etichetta { flex-basis: 100%; font-size: var(--meta); }
.newsletter input[type="email"] {
	flex: 1 1 12ch; min-width: 0; min-height: var(--tocco);
	padding: 0.4em 0.7em; border: 1px solid var(--linea); border-radius: var(--raggio);
	background: var(--chiaro); color: var(--inchiostro);
}
.newsletter__consenso { margin: 0 0 var(--sp-2); font-size: var(--meta); line-height: 1.45; }
.newsletter__consenso label { display: flex; gap: var(--sp-2); align-items: flex-start; }
.newsletter__consenso input { margin-top: 0.25em; flex: 0 0 auto; }
.newsletter__nota { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: #B8C3D4; }
.newsletter__esito { margin: 0 0 var(--sp-2); font-size: var(--meta); font-weight: 500; }
.newsletter__esito--errore { color: #FFD9D6; }
/* Fuori dal footer (shortcode in una pagina) i colori sono quelli del testo normale. */
.entry-content .newsletter__nota, .lettura .newsletter__nota { color: var(--grigio); }

/* ---------- "In arrivo": al posto di un modulo, quando i moduli sono spenti ---------- */
.in-arrivo { margin: var(--sp-6) auto; }
.in-arrivo__riquadro {
	max-width: 62ch; margin: 0 auto; padding: var(--sp-5);
	background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio);
}
.in-arrivo__titolo { margin: var(--sp-1) 0 var(--sp-3); font-size: 1.75rem; }
.in-arrivo__testo { margin: 0 0 var(--sp-3); }
.in-arrivo__punti { margin: 0 0 var(--sp-4); padding-left: 1.2em; }
.in-arrivo__punti li { margin-bottom: var(--sp-2); }
.in-arrivo__azione { margin: 0 0 var(--sp-3); }
.in-arrivo__scrivi { margin: 0; font-size: var(--meta); color: var(--grigio); }

/* Le due righe di informativa sotto il modulo di contatto e sotto quello dei commenti. */
.modulo-privacy, .comment-privacy {
	margin: var(--sp-3) 0; font-size: 0.875rem; line-height: 1.5; color: var(--grigio); max-width: 68ch;
}

/* ---------- Pagina ricetta ---------- */
.ricetta__testa { margin-top: var(--sp-5); margin-bottom: var(--sp-4); }
.briciole { font-size: var(--meta); color: var(--grigio); margin-bottom: var(--sp-3); }
.briciole a { color: inherit; text-decoration: none; }
.briciole a:hover { color: var(--blu-testo); text-decoration: underline; }
.briciole .separator { margin: 0 0.4em; }
.briciole .last { color: var(--inchiostro); }
.ricetta__titolo { margin-bottom: var(--sp-3); }
.ricetta__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.vai-ricetta { display: inline-flex; align-items: center; min-height: var(--tocco); font-weight: 500; }
.ricetta__video { margin-top: 0; }
.ricetta__video .facade__quadro { border-radius: 0; }
@media (max-width: 599px) {
	/* Su telefono il video va da bordo a bordo, senza margini laterali. */
	.ricetta__video, .ricetta__foto { width: 100%; }
	.ricetta__video .facade__didascalia { padding-inline: var(--margine); }
}
.ricetta__foto img { width: 100%; border-radius: 0; }
.ricetta__intro { margin-top: 0; margin-bottom: var(--sp-5); }
.ricetta__note { margin-top: var(--sp-5); }
.invito-canale { margin-top: var(--sp-5); color: var(--grigio); font-size: 1rem; }
.invito-canale a { display: inline-flex; align-items: center; gap: 6px; margin-left: 0.4em; min-height: var(--tocco); }
.correlate { margin-top: var(--sp-7); }
.correlate .sezione__titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.correlate__tutte { display: inline-flex; align-items: center; min-height: var(--tocco); font-family: var(--font-testo); font-size: 1rem; font-weight: 500; }
@media (min-width: 600px) {
	.ricetta__video .facade__quadro, .ricetta__foto img { border-radius: var(--raggio); }
}

/* Pillola "Vai alla ricetta": fissa in basso a destra su telefono, sparisce quando la scheda è in vista */
.pillola {
	position: fixed; right: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); z-index: 25;
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25em;
	background: var(--blu); color: var(--chiaro); border-radius: 24px; text-decoration: none; font-weight: 500; font-size: 1rem;
}
.pillola.pillola--nascosta { display: none; }
/* La pillola sta in basso a destra e la barra dei file del modulo occupa tutta la riga in fondo:
   sulle pagine dove ci fossero tutte e due, la pillola sale sopra la barra. */
body:has(.invio__totale:not([hidden])) .pillola { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .pillola { display: none; } }

/* ---------- Scheda WPRM (template "blubasilico") ---------- */
.ricetta__scheda { width: min(100% - 2 * var(--margine), var(--breakout)); margin: 0 auto; }
.wprm-recipe-template-blubasilico {
	background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio);
	padding: var(--sp-4) var(--margine); scroll-margin-top: var(--sp-3);
	font-family: var(--font-testo); font-size: 1.0625rem; line-height: 1.6; color: var(--inchiostro);
}
.wprm-recipe-template-blubasilico h2, .wprm-recipe-template-blubasilico h3 { font-family: var(--font-titoli); font-weight: var(--peso-titoli); }
.wprm-recipe-template-blubasilico .wprm-recipe-name { font-size: var(--h2); margin: 0 0 var(--sp-2); }
.wprm-recipe-template-blubasilico .wprm-recipe-header { font-size: var(--h3); margin: var(--sp-5) 0 var(--sp-3); }
.wprm-recipe-template-blubasilico .wprm-recipe-header + * { border-top: 0; }
.wprm-recipe-template-blubasilico .wprm-recipe-instructions-container, .wprm-recipe-template-blubasilico .wprm-recipe-notes-container, .wprm-recipe-template-blubasilico .wprm-nutrition-label-container { border-top: 1px solid var(--linea); }
.wprm-recipe-template-blubasilico .wprm-recipe-group-name { font-size: 1.25rem; margin: var(--sp-3) 0 var(--sp-2); color: var(--inchiostro); }
.scheda__testa { display: flex; flex-direction: column-reverse; gap: var(--sp-2); }
.scheda__strumenti { display: flex; gap: var(--sp-3); font-size: var(--meta); }
.scheda__strumenti a, .scheda__salva {
	display: inline-flex; align-items: center; justify-content: center; min-height: var(--tocco); min-width: var(--tocco);
	background: none; border: 0; padding: 0; color: var(--blu-testo); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; font-size: var(--meta);
}
.wprm-recipe-template-blubasilico .wprm-recipe-summary { color: var(--grigio); margin-bottom: var(--sp-3); }
.scheda__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: var(--sp-3) 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-size: 1rem; }
.scheda__meta-voce { display: flex; flex-direction: column; gap: 2px; }
.scheda__meta-voce:empty { display: none; }
.scheda__meta .wprm-recipe-details-label { display: block; font-size: var(--meta); color: var(--grigio); }
.scheda__meta .wprm-recipe-block-container-columns { display: flex; flex-direction: column; }
.porzioni { display: inline-flex; align-items: center; gap: 2px; }
.porzioni__meno, .porzioni__piu { width: var(--tocco); height: var(--tocco); border: 1px solid var(--linea); background: var(--chiaro); border-radius: var(--raggio); color: var(--inchiostro); font-size: 1.25rem; cursor: pointer; }
.porzioni__valore { min-width: 2ch; text-align: center; font-weight: 500; }
.wprm-recipe-template-blubasilico .wprm-recipe-ingredient-group, .wprm-recipe-template-blubasilico .wprm-recipe-instruction-group { margin-bottom: var(--sp-3); }
.wprm-recipe-template-blubasilico ul.wprm-recipe-ingredients { list-style: none; margin: 0; padding: 0; }
.wprm-recipe-template-blubasilico li.wprm-recipe-ingredient { position: relative; padding: 0.35em 0 0.35em 2.25rem; min-height: var(--tocco); border-bottom: 1px solid var(--linea); display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.3em; }
/* La casella copre tutta la riga (area di tocco a tutta larghezza, almeno 44px); il quadratino è disegnato da ::before. */
.spunta { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.wprm-recipe-template-blubasilico li.wprm-recipe-ingredient::before {
	content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 22px; height: 22px; border: 1.5px solid var(--grigio); border-radius: 5px; background: var(--chiaro); box-sizing: border-box;
}
.wprm-recipe-template-blubasilico li.ingrediente--fatto::before {
	background: var(--blu); border-color: var(--blu);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
	background-size: 16px; background-position: center; background-repeat: no-repeat;
}
.wprm-recipe-template-blubasilico li.wprm-recipe-ingredient:has(.spunta:focus-visible)::before { outline: 2px solid var(--blu); outline-offset: 2px; }
.ingrediente--fatto > :not(.spunta) { color: var(--grigio); text-decoration: line-through; }
.wprm-recipe-template-blubasilico .wprm-recipe-ingredient-amount, .wprm-recipe-template-blubasilico .wprm-recipe-ingredient-unit { font-weight: 500; }
.wprm-recipe-template-blubasilico .wprm-recipe-ingredient-notes { color: var(--grigio); }
/* WPRM sbiadisce le note al 70%: sul nostro grigio il contrasto scende a 3,2:1, sotto AA.
   Il selettore ricalca il suo per vincere a parità di peso (public-modern.css si carica dopo). */
.wprm-recipe-template-blubasilico .wprm-recipe-ingredients-container .wprm-recipe-ingredient-notes-faded,
.wprm-recipe-template-blubasilico .wprm-recipe-equipment-container .wprm-recipe-equipment-notes-faded { opacity: 1; }
@media (min-width: 900px) {
	.wprm-recipe-template-blubasilico ul.wprm-recipe-ingredients { columns: 2; column-gap: var(--sp-6); }
	.wprm-recipe-template-blubasilico li.wprm-recipe-ingredient { break-inside: avoid; }
}
/* Numeri dei passaggi (e degli elenchi numerati nelle note): cerchio 28px su telefono, 32px da 600px,
   bordo linea, sfondo carta, numero in Figtree 15px 600 blu, testo 12px dopo il cerchio. */
.wprm-recipe-template-blubasilico ul.wprm-recipe-instructions { list-style: none; margin: 0; padding: 0; counter-reset: passaggio; }
.wprm-recipe-template-blubasilico li.wprm-recipe-instruction,
.ricetta__note ol > li, .wprm-recipe-template-blubasilico .wprm-recipe-notes ol > li {
	counter-increment: passaggio; position: relative; padding: 0 0 var(--sp-4) calc(var(--cerchio) + 12px); list-style: none;
}
.ricetta__note ol, .wprm-recipe-template-blubasilico .wprm-recipe-notes ol { counter-reset: passaggio; padding: 0; margin: 0; }
.wprm-recipe-template-blubasilico li.wprm-recipe-instruction::before,
.ricetta__note ol > li::before, .wprm-recipe-template-blubasilico .wprm-recipe-notes ol > li::before {
	content: counter(passaggio); display: flex; align-items: center; justify-content: center;
	position: absolute; left: 0; top: calc((1.0625rem * 1.6 - var(--cerchio)) / 2);
	width: var(--cerchio); height: var(--cerchio); border-radius: 50%;
	border: 1px solid var(--linea); background: var(--carta);
	font-family: var(--font-testo); font-weight: 600; font-size: 0.9375rem; line-height: 1; color: var(--blu-testo);
}
.wprm-recipe-template-blubasilico, .ricetta__note { --cerchio: 28px; }
@media (min-width: 600px) { .wprm-recipe-template-blubasilico, .ricetta__note { --cerchio: 32px; } }
.wprm-recipe-template-blubasilico .wprm-recipe-instruction-text { font-size: 1.0625rem; line-height: 1.6; }
.wprm-recipe-template-blubasilico .wprm-recipe-instruction-image { margin-top: var(--sp-2); }
.wprm-recipe-template-blubasilico .wprm-recipe-instruction-image img { border-radius: var(--raggio); }
.wprm-recipe-template-blubasilico .wprm-recipe-notes { color: var(--inchiostro); }
.wprm-recipe-template-blubasilico .wprm-nutrition-label-container { font-size: var(--meta); }
.wprm-recipe-template-blubasilico .wprm-nutrition-label-container .wprm-nutrition-label-text-nutrition-container { display: inline-block; width: 48%; }
.wprm-recipe-template-blubasilico .wprm-recipe-rating { display: none; }

/* ---------- Commenti ---------- */
.commenti { margin-top: var(--sp-7); }
.commenti__lista, .commenti__lista .children { list-style: none; margin: 0; padding: 0; }
.commenti__lista .children { margin-left: var(--sp-4); }
.commenti__lista .comment { padding: var(--sp-3) 0; border-top: 1px solid var(--linea); }
.commenti__lista .comment-author img { border-radius: 50%; float: left; margin-right: var(--sp-2); }
.commenti__lista .comment-metadata { font-size: var(--meta); color: var(--grigio); }
.commenti__lista .comment-metadata a { color: inherit; }
.commenti__lista .reply a { font-size: var(--meta); }
.comment-form label { display: block; font-size: var(--meta); color: var(--grigio); margin-bottom: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; color: var(--inchiostro); background: var(--chiaro);
	border: 1px solid var(--linea); border-radius: var(--raggio); padding: 0.6em 0.9em; min-height: var(--tocco);
}
.comment-form-cookies-consent { display: flex; align-items: center; gap: var(--sp-2); }
.comment-form-cookies-consent label { margin: 0; }

/* Contact Form 7 (pagina Contatti): i campi nascono con size=40, cioè larghi 449px anche a 360. */
.wpcf7-form p { margin: 0 0 var(--sp-3); }
.wpcf7-form label { display: block; font-size: var(--meta); color: var(--grigio); }
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7-form textarea, .wpcf7-form select {
	width: 100%; max-width: 100%; color: var(--inchiostro); background: var(--chiaro);
	border: 1px solid var(--linea); border-radius: var(--raggio); padding: 0.6em 0.9em; min-height: var(--tocco);
}
.wpcf7-form input[type="submit"] { min-height: var(--tocco); }

/* ---------- Banner cookie (Complianz) con i token del tema ---------- */
.cmplz-cookiebanner.cmplz-cookiebanner {
	position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none;
	width: 100%; max-width: none; margin: 0; z-index: 60;
	background: var(--carta); color: var(--inchiostro); border: 0; border-top: 1px solid var(--linea);
	border-radius: 0; box-shadow: none; padding: var(--sp-3) var(--margine);
	font-family: var(--font-testo); font-size: 0.875rem; line-height: 1.5;
}
/* Complianz usa una griglia con aree: qui diventa una barra flessibile (testo, pulsanti in riga, link sotto). */
.cmplz-cookiebanner.cmplz-cookiebanner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-divider { display: none; }
/* Il titolo non serve nella barra, ma a chi legge con uno screen reader dice di che cosa parla
   il riquadro: nascosto agli occhi, non alla voce. */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body { flex: 1 1 320px; min-width: 0; margin: 0; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body { font-size: 0.875rem; color: var(--inchiostro); }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message { max-width: 68ch; text-align: left; margin: 0; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body { text-align: left; }
/* Specificità alta di proposito: Complianz definisce pulsanti e contenitore con selettori a tre classi caricati dopo il tema. */
.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; grid-template-columns: none; }
.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	flex: 0 0 auto; width: auto; min-height: var(--tocco); margin: 0; padding: 0 1em; border-radius: var(--raggio);
	font-size: 0.875rem; font-weight: 500; line-height: 1;
	background: var(--chiaro); color: var(--inchiostro); border: 1px solid var(--linea); box-shadow: none;
}
/* "Accetta" e "Rifiuta" identici: stesso fondo, stesso testo, stessa dimensione. Il rifiuto non
   può costare più fatica dell'accettazione (linee guida del Garante sui cookie, 10 giugno 2021,
   punto 7.2), e due pulsanti uguali sono il modo più semplice di dimostrarlo. "Visualizza
   preferenze" resta la terza scelta, in tono minore: non è un rifiuto, è un approfondimento. */
.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
	background: var(--blu); color: var(--chiaro); border-color: var(--blu); min-width: 8em; justify-content: center;
}
.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover { background: #1859bd; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents { flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: var(--grigio); text-align: left; justify-content: flex-start; }
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-link { font-size: 0.8125rem; color: var(--grigio); text-decoration: underline; }
@media (max-width: 599px) {
	.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons { width: 100%; }
	.cmplz-cookiebanner.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 45%; }
}

/* ---------- Archivi: filtri ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.filtri a, .filtri span {
	display: inline-flex; align-items: center; min-height: var(--tocco); padding: 0 0.9em;
	border: 1px solid var(--linea); border-radius: var(--raggio); text-decoration: none; color: var(--inchiostro); font-size: 1rem;
}
.filtri a:hover { border-color: var(--blu); color: var(--blu-testo); }
.filtri .filtri__attivo { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
.filtri__mare::before, .filtri__terra::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.filtri__mare::before { background: var(--mare); }
.filtri__terra::before { background: var(--basilico); }
.filtri .filtri__attivo.filtri__mare::before, .filtri .filtri__attivo.filtri__terra::before { background: var(--carta); }
.archivio__ricerca { max-width: 560px; margin: var(--sp-3) 0 0; }

/* ---------- Componenti del plugin dentro le pagine (shortcode) ---------- */
/* Di stagione, lista dell'anno e griglie escono dalla colonna di lettura (68ch) e prendono il contenitore. */
.lettura__testo > .stagione, .lettura__testo > .stagione-anno, .lettura__testo > .griglia--in-pagina {
	width: min(100vw - 2 * var(--margine), var(--contenitore));
	position: relative; left: 50%; transform: translateX(-50%);
}
.lettura__testo > .stagione { margin-top: var(--sp-6); }
.lettura__testo > .stagione-anno { margin-top: var(--sp-6); margin-bottom: 0; }
.lettura__testo > .griglia--in-pagina { margin-top: var(--sp-4); }
.stagione-anno__griglia { display: grid; gap: var(--sp-4) var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .stagione-anno__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stagione-anno__griglia { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stagione-anno__griglia { grid-template-columns: repeat(4, 1fr); } }
.stagione-anno__mese { border-top: 1px solid var(--linea); padding-top: var(--sp-2); }
.stagione-anno__mese--ora { border-top: 2px solid var(--blu); }
.stagione-anno__titolo { font-size: var(--h3); margin: 0 0 var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-2); }
.stagione-anno__titolo::first-letter { text-transform: uppercase; }
.stagione-anno__ora { font: 500 var(--meta) / 1 var(--font-testo); color: var(--blu-testo); }
.stagione-anno__lista { list-style: none; margin: 0; padding: 0; }
.stagione-anno__lista a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--inchiostro); text-decoration: none; }
.stagione-anno__lista a:hover, .stagione-anno__lista a:focus-visible { color: var(--blu-testo); text-decoration: underline; }
.lettura__testo table th, .lettura__testo table td { padding: 8px 12px; border-bottom: 1px solid var(--linea); text-align: left; }
.lettura__testo table th { font-weight: 600; }
.lettura__testo a, .lettura__testo code { overflow-wrap: break-word; }
.lettura__testo .wp-block-image { margin-inline: 0; }
.lettura__testo .wp-block-image img { width: auto; max-width: 100%; }

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
	.nav__lista a, .card__titolo, .bottone { transition: color 120ms ease, background-color 120ms ease; }
}

/* ---------- Guida alle riprese: le regole illustrate ----------
   Ogni regola è una riga: illustrazione da una parte, titolo e testo dall'altra, e i lati si
   alternano scendendo. Le regole con un rovescio hanno due figure affiancate, con la spunta
   verde e la croce terracotta in alto a sinistra — segni del tema, non del disegno. */
.guida__video--illustrato { margin: 0 0 var(--sp-5); }
.guida__video--illustrato img { width: 100%; height: auto; border-radius: var(--raggio); display: block; }
.guida__video--illustrato figcaption { margin-top: var(--sp-2); font-size: var(--meta); color: var(--grigio); }

.guida-regole { display: grid; gap: var(--sp-5); margin: var(--sp-4) 0 var(--sp-6); }
.guida-regola { display: grid; gap: var(--sp-3); align-items: center; }
.guida-regola__titolo { font-size: 1.25rem; line-height: 1.25; margin: 0 0 var(--sp-2); }
.guida-regola__testo p { margin: 0; }
.guida-regola__figure { display: grid; gap: var(--sp-2); }
.guida-regola__figure--coppia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.guida-figura { position: relative; margin: 0; }
.guida-figura img { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--pannello); }
.guida-figura figcaption { margin-top: 6px; font-size: var(--meta-card); color: var(--grigio); }
.guida-figura__segno {
	position: absolute; top: 8px; left: 8px; z-index: 1;
	display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--carta); box-shadow: 0 1px 4px rgba(15, 42, 74, 0.18);
}
.guida-figura--si .guida-figura__segno { color: var(--basilico); }
.guida-figura--no .guida-figura__segno { color: var(--terracotta); }

@media (min-width: 700px) {
	.guida-regola { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
	.guida-regola--destra .guida-regola__figure { order: 2; }
	.guida-regola--senza-figura { grid-template-columns: minmax(0, 1fr); }
}