/*
Theme Name: Gigliofiorito
Theme URI: https://chirurgiaplasticaericostruttiva.it/
Author: Shazark
Description: Tema su misura per chirurgiaplasticaericostruttiva.it. Non richiede plugin: home page con gli ultimi video del canale YouTube, elenco articoli, servizi, modulo contatti, SEO e dati strutturati sono tutti inclusi. I contenuti si scrivono con Gutenberg.
Version: 2.1.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gigliofiorito
Tags: blog, one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* Caratteri ospitati dal sito.

   Un solo file variabile per famiglia, sottoinsieme latino: copre l'italiano per intero.

   Niente richieste a Google: un'origine in meno, nessun foglio di stile che blocca il

   rendering, e nessun indirizzo IP dei visitatori che esce verso terzi. */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/font/oswald-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/font/source-serif-4-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Nota sulla direzione visiva

   Il verde non e decorativo: e il verde dei teli chirurgici, che ha quel
   tono preciso perche e il complementare del rosso del sangue. Viene dal
   mondo di questo studio, non da una tavolozza generica.

   Oswald resta sui titoli perche e gia l identita riconoscibile del sito.
   Il corpo passa a un graziato: 128 articoli di testo medico si leggono
   meglio cosi, e la differenza fra i due caratteri fa il resto del lavoro.

   Il tema si impegna su un unico aspetto chiaro: e una scelta, non una
   dimenticanza. Un sito sanitario deve apparire uguale a tutti.
   ====================================================================== */

:root {
	--inchiostro:   #14201e;
	--inchiostro-2: #37423f;
	/*
	   #6c7674 dava 4.49:1 sul fondo chiaro: mancava il traguardo WCAG di
	   4,5 per un centesimo, e PageSpeed lo bocciava sulle date delle schede.
	   #5c6563 e la stessa tinta appena piu scura: 5.76:1 su --fondo e
	   5.13:1 su --fondo-2, cioe passa su entrambi gli sfondi del tema.
	   Misurato, non stimato a occhio.
	*/
	--tenue:        #5c6563;
	--fondo:        #fbfaf8;
	--fondo-2:      #efede8;
	--verde:        #2f6d5f;
	--verde-scuro:  #1e4a40;
	--verde-tenue:  #dce9e4;
	--linea:        rgba(20, 32, 30, .12);
	--linea-forte:  rgba(20, 32, 30, .28);

	--display: "Oswald", "Helvetica Neue", Arial, sans-serif;
	--testo:   "Source Serif 4", Georgia, "Times New Roman", serif;
	--utile:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--largo:  1240px;
	--stretto: 720px;

	--r: 3px;
}

/* ---------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--inchiostro);
	font-family: var(--testo);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--verde-scuro); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--verde); }

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

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta-al-contenuto {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--inchiostro); color: #fff; padding: .75rem 1.25rem;
	font-family: var(--utile); font-size: .875rem;
}
.salta-al-contenuto:focus { left: 0; }

/* ----------------------------------------------------------- contenitori */

.contenitore {
	width: min(100% - 2.5rem, var(--largo));
	margin-inline: auto;
}
.contenitore--testo { width: min(100% - 2.5rem, var(--stretto)); }

.sezione { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sezione--chiara { background: var(--fondo-2); }
.sezione--scura  { background: var(--inchiostro); color: var(--fondo); }
.sezione--scura a { color: var(--verde-tenue); }
.sezione--scura .titolo-sezione { color: var(--fondo); }
.sezione--scura .prosa { color: rgba(251, 250, 248, .82); }

/* --------------------------------------------------------- tipografia */

.etichetta {
	font-family: var(--utile);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--verde);
	margin: 0 0 .75rem;
}
.sezione--scura .etichetta { color: var(--verde-tenue); }
.etichetta a { color: inherit; text-decoration: none; }
.etichetta a:hover { text-decoration: underline; }

.titolo-sezione {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.75rem, 4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	text-wrap: balance;
}
.titolo-sezione--piccolo { font-size: clamp(1.25rem, 2.5vw, 1.6rem); margin-top: 3rem; }

.sezione__testata {
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: space-between; gap: 1rem;
	border-bottom: 1px solid var(--linea);
	padding-bottom: 1rem; margin-bottom: 2.5rem;
}
.sezione__testata .titolo-sezione { margin: 0; }
.sezione--scura .sezione__testata { border-color: rgba(251, 250, 248, .2); }

.collegamento-lista {
	font-family: var(--utile); font-size: .8125rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* --------------------------------------------------------------- testata */

.testata {
	background: var(--fondo);
	border-bottom: 1px solid var(--linea);
	position: sticky; top: 0; z-index: 50;
}
.testata__riga {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; min-height: 76px;
}
.testata__marchio { flex: none; max-width: 46%; }
.testata__marchio img { max-height: 46px; width: auto; }
.testata__nome {
	font-family: var(--display); text-transform: uppercase; letter-spacing: .04em;
	font-size: .9375rem; line-height: 1.2; text-decoration: none;
	color: var(--inchiostro); display: block;
}

/* L intestazione e fissa: le ancore devono fermarsi sotto, non sotto di essa. */
[id] { scroll-margin-top: 96px; }

.testata__nav .menu {
	list-style: none; display: flex; flex-wrap: wrap;
	column-gap: .95rem; row-gap: .15rem;
	margin: 0; padding: 0; justify-content: flex-end;
}
.testata__nav a {
	font-family: var(--utile); font-size: .75rem; font-weight: 500;
	letter-spacing: .05em; text-transform: uppercase;
	text-decoration: none; color: var(--inchiostro-2);
	padding: .35rem 0; display: block;
	border-bottom: 1px solid transparent;
}
.testata__nav a:hover,
.testata__nav .current-menu-item > a {
	color: var(--verde); border-bottom-color: var(--verde);
}
.testata__comandi { display: flex; align-items: center; gap: .5rem; flex: none; }

/*
   Sottomenu: su desktop devono essere tendine che si aprono, non elenchi
   sempre aperti. :focus-within li rende raggiungibili anche da tastiera,
   senza una riga di JavaScript.
*/
.testata__nav .sub-menu { list-style: none; margin: 0; padding: 0; }

@media (min-width: 1081px) {
	.testata__marchio { order: 1; max-width: 26%; }
	.testata__nav     { order: 2; margin-left: auto; }
	.testata__comandi { order: 3; }

	/* Se il menu deve andare a capo lo faccia in modo ordinato, non a caso. */
	.testata__riga { align-items: center; padding-block: .35rem; }
	.testata__nav a { font-size: .72rem; }

	.testata__nav .menu > li { position: relative; }

	.testata__nav .menu-item-has-children > a::after {
		content: ""; display: inline-block;
		width: .38em; height: .38em; margin-left: .45em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-.14em);
	}

	.testata__nav .sub-menu {
		position: absolute; top: 100%; left: -.75rem;
		min-width: 230px; padding: .35rem 0;
		background: var(--fondo);
		border: 1px solid var(--linea); border-radius: var(--r);
		box-shadow: 0 18px 36px -22px rgba(20, 32, 30, .55);
		opacity: 0; visibility: hidden; transform: translateY(-4px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
		z-index: 70;
	}
	.testata__nav .menu > li:hover > .sub-menu,
	.testata__nav .menu > li:focus-within > .sub-menu {
		opacity: 1; visibility: visible; transform: translateY(0);
	}
	.testata__nav .sub-menu a {
		padding: .55rem 1rem; white-space: nowrap;
		border-bottom: 0; text-transform: none; letter-spacing: .02em;
		font-size: .8125rem;
	}
	.testata__nav .sub-menu a:hover { background: var(--fondo-2); border-bottom-color: transparent; }
}

/* Sul pannello mobile restano visibili, rientrati: li si scorre, non si aprono. */
@media (max-width: 1080px) {
	.testata__nav .sub-menu {
		padding-left: 1rem; margin: 0 0 .35rem;
		border-left: 1px solid var(--linea);
	}
	.testata__nav .sub-menu a { padding: .55rem .25rem; font-size: .75rem; color: var(--tenue); }
}

/* ------------------------------------------------- selettore lingue */

.lingue { position: relative; flex: none; }

.lingue__attuale {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: .4rem;
	padding: .4rem .65rem; white-space: nowrap;
	border: 1px solid var(--linea); border-radius: var(--r);
	font-family: var(--utile); font-size: .75rem; font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase; color: var(--inchiostro-2);
	transition: border-color .2s ease, color .2s ease;
}
.lingue__attuale::-webkit-details-marker { display: none; }
.lingue__attuale::marker { content: ""; }
.lingue__attuale:hover { border-color: var(--linea-forte); color: var(--verde); }
.lingue[open] .lingue__attuale { border-color: var(--verde); color: var(--verde); }

.lingue__globo svg { width: 15px; height: 15px; display: block; }

.lingue__elenco {
	position: absolute; right: 0; top: calc(100% + .4rem);
	min-width: 190px; max-height: 62vh; overflow-y: auto;
	list-style: none; margin: 0; padding: .35rem 0;
	background: var(--fondo);
	border: 1px solid var(--linea); border-radius: var(--r);
	box-shadow: 0 18px 36px -22px rgba(20, 32, 30, .55);
	z-index: 90;
}
.lingue__elenco a {
	display: block; padding: .5rem 1rem;
	font-family: var(--utile); font-size: .8125rem;
	text-decoration: none; color: var(--inchiostro-2);
}
.lingue__elenco a:hover { background: var(--fondo-2); color: var(--verde); }
.lingue__elenco .e-attiva a { color: var(--verde); font-weight: 600; }
.lingue__elenco .e-attiva a::before { content: "\2713\00a0"; }

@media (max-width: 520px) {
	.lingue__nome { display: none; }
	.lingue__attuale { padding: .45rem .55rem; }
}

.testata__interruttore {
	display: none; background: none; border: 0; cursor: pointer;
	width: 44px; height: 44px; padding: 0; position: relative;
}
.testata__interruttore-barre,
.testata__interruttore-barre::before,
.testata__interruttore-barre::after {
	position: absolute; left: 11px; width: 22px; height: 1.5px;
	background: var(--inchiostro); transition: transform .2s ease, opacity .2s ease;
}
.testata__interruttore-barre { top: 21px; }
.testata__interruttore-barre::before { content: ""; top: -7px; left: 0; }
.testata__interruttore-barre::after  { content: ""; top:  7px; left: 0; }
.testata__interruttore[aria-expanded="true"] .testata__interruttore-barre { background: transparent; }
.testata__interruttore[aria-expanded="true"] .testata__interruttore-barre::before { transform: translateY(7px) rotate(45deg); }
.testata__interruttore[aria-expanded="true"] .testata__interruttore-barre::after  { transform: translateY(-7px) rotate(-45deg); }

/*
   Il menu di questo sito ha undici voci: su una riga sola non ci sta mai.
   Sotto i 1080px passiamo al pannello a scomparsa invece di lasciarlo
   andare a capo, che e la cosa brutta che faceva prima.
*/
@media (max-width: 1080px) {
	.testata { position: static; }
	.testata__interruttore { display: block; }
	.testata__riga { position: relative; }
	.testata__nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--fondo); border-bottom: 1px solid var(--linea);
		box-shadow: 0 16px 32px -24px rgba(20, 32, 30, .5);
		padding: .5rem 0 1.25rem; z-index: 60;
		max-height: 70vh; overflow-y: auto;
	}
	.menu-aperto .testata__nav { display: block; }
	.testata__nav .menu { flex-direction: column; column-gap: 0; row-gap: 0; }
	.testata__nav .menu > li { border-bottom: 1px solid var(--linea); }
	.testata__nav .menu > li:last-child { border-bottom: 0; }
	.testata__nav a { padding: .85rem .25rem; font-size: .8125rem; }
	.testata__nav .sub-menu { padding-left: 1rem; margin-bottom: .5rem; }
}

/* ------------------------------------------------------------------ hero */

.hero {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
	background:
		linear-gradient(180deg, var(--verde-tenue) 0%, rgba(220, 233, 228, 0) 62%),
		var(--fondo);
}

.hero__titolo {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(2rem, 6vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0 0 2.5rem;
	max-width: 18ch;
	text-wrap: balance;
}
.hero__sottotitolo {
	display: block;
	font-family: var(--testo);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1rem, 2.2vw, 1.375rem);
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tenue);
	margin-top: .9rem;
	max-width: 32ch;
}

/* ------------------------------------------------------------- i video */

.video__pista {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.video__pista {
		grid-template-columns: 1.6fr 1fr;
		grid-template-rows: auto auto;
		align-items: start;
	}
	.video__scheda--primo { grid-row: span 2; }
}

.video__scheda { min-width: 0; }

.video__avvio {
	position: relative; display: block; width: 100%; padding: 0;
	border: 0; background: var(--inchiostro-2); cursor: pointer;
	border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9;
}
.video__miniatura {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1), filter .3s ease;
}
.video__avvio:hover .video__miniatura { transform: scale(1.03); filter: brightness(.92); }

/* Il pulsante di riproduzione: un anello sottile, non un bottone pieno. */
.video__play {
	position: absolute; inset: 0; margin: auto;
	width: 66px; height: 66px; border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .9);
	background: rgba(20, 32, 30, .3);
	backdrop-filter: blur(2px);
	transition: background .25s ease, transform .25s ease;
}
.video__play::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0;
	border-left: 15px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	transform: translateX(3px);
}
.video__avvio:hover .video__play { background: var(--verde); transform: scale(1.06); }

.video__pista iframe {
	width: 100%; aspect-ratio: 16 / 9; border: 0;
	border-radius: var(--r); display: block;
}

.video__testo { padding-top: .85rem; }
.video__data {
	display: block; font-family: var(--utile); font-size: .6875rem;
	letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
	margin-bottom: .35rem;
}
.video__titolo {
	font-family: var(--display); font-weight: 400; text-transform: none;
	font-size: 1.0625rem; line-height: 1.25; margin: 0; letter-spacing: .01em;
}
.video__scheda--primo .video__titolo { font-size: clamp(1.125rem, 2.2vw, 1.5rem); }

.video__canale {
	margin: 1.75rem 0 0;
	font-family: var(--utile); font-size: .8125rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
}
.video__canale a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* -------------------------------------------------------- due colonne */

.due-colonne {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 860px) {
	.due-colonne { grid-template-columns: 1.15fr 1fr; }
	.due-colonne--strette { grid-template-columns: 1fr 1.1fr; align-items: start; }
}
.due-colonne__figura img { border-radius: var(--r); width: 100%; }

/*
   Il ritratto e un quadrato su fondo bianco. Su questa sezione, che ha il
   fondo beige, senza un contorno resterebbe un rettangolo bianco sospeso:
   con lo sfondo bianco dichiarato e un'ombra appena accennata diventa una
   scheda, e si legge come una scelta invece che come un ritaglio male.
*/
.due-colonne__figura--ritratto {
	max-width: 420px;
	margin-inline: auto;
}
.due-colonne__figura--ritratto img {
	background: #fff;
	box-shadow: 0 18px 40px -28px rgba(20, 32, 30, .55);
}

/* ------------------------------------------------------------- griglie */

.griglia { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 620px) {
	.griglia--2, .griglia--3, .griglia--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.griglia--3 { grid-template-columns: repeat(3, 1fr); }
	.griglia--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------ scheda articolo */

.scheda { min-width: 0; }
.scheda__collegamento { display: block; text-decoration: none; color: inherit; }
.scheda__figura {
	display: block; overflow: hidden; border-radius: var(--r);
	background: var(--fondo-2); aspect-ratio: 3 / 2; margin-bottom: .9rem;
}
.scheda__figura img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.scheda__collegamento:hover .scheda__figura img { transform: scale(1.04); }

.scheda__corpo { display: block; }
.scheda__categoria {
	display: block; font-family: var(--utile); font-size: .6875rem;
	font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--verde); margin-bottom: .4rem;
}
.scheda__titolo {
	display: block; font-family: var(--display); font-weight: 400;
	font-size: 1.0625rem; line-height: 1.3; letter-spacing: .01em;
	margin-bottom: .45rem;
}
.scheda__collegamento:hover .scheda__titolo { color: var(--verde-scuro); }
.scheda__data {
	display: block; font-family: var(--utile); font-size: .6875rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}

/* -------------------------------------------------------------- servizi */

.servizio {
	display: block; text-decoration: none; color: inherit; min-width: 0;
	border: 1px solid rgba(251, 250, 248, .16);
	border-radius: var(--r); overflow: hidden;
	transition: border-color .25s ease, transform .25s ease;
}
.servizio:hover { border-color: var(--verde-tenue); transform: translateY(-2px); }
.servizio__figura { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--inchiostro-2); }
.servizio__figura img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.servizio:hover .servizio__figura img { opacity: 1; }
.servizio__testo { display: block; padding: 1.1rem 1.25rem 1.35rem; }
.servizio__nome {
	display: block; font-family: var(--display); text-transform: uppercase;
	letter-spacing: .04em; font-size: 1.0625rem; color: var(--fondo);
}
.servizio__conteggio {
	display: block; font-family: var(--utile); font-size: .6875rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: rgba(251, 250, 248, .6); margin-top: .3rem;
}

/* ----------------------------------------------------------------- sedi */

.sede__mappa {
	position: relative; display: block;
	aspect-ratio: 8 / 5; border-radius: var(--r); overflow: hidden;
	background: var(--fondo-2); border: 1px solid var(--linea);
}
.sede__mappa img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.sede__mappa:hover img { transform: scale(1.02); }

.sede__apri {
	position: absolute; left: .75rem; bottom: .75rem;
	background: var(--fondo); color: var(--verde-scuro);
	font-family: var(--utile); font-size: .6875rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	padding: .45rem .8rem; border-radius: var(--r);
	box-shadow: 0 2px 10px -4px rgba(20, 32, 30, .5);
}
.sede__mappa:hover .sede__apri { background: var(--verde); color: #fff; }

.sede__dati { padding-top: 1.1rem; }
.sede__citta {
	font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
	font-size: 1.125rem; font-weight: 500; margin: 0 0 .3rem;
}
.sede__nome {
	font-family: var(--utile); font-size: .8125rem; font-weight: 600;
	letter-spacing: .04em; color: var(--verde); margin: 0 0 .6rem;
}
.sede__indirizzo { font-style: normal; color: var(--inchiostro-2); margin: 0 0 .5rem; }
.sede__telefono { margin: 0; }
.sede__telefono a {
	font-family: var(--utile); font-size: .9375rem; font-weight: 600;
	letter-spacing: .02em; text-decoration: none;
	border-bottom: 1px solid var(--linea-forte); padding-bottom: 2px;
}
.sede__telefono a:hover { border-color: var(--verde); }

/* Promemoria della newsletter: lo vede solo chi puo sistemarlo. */
.newsletter__avviso {
	border: 1px dashed rgba(251, 250, 248, .35); border-radius: var(--r);
	padding: 1.25rem; font-family: var(--utile); font-size: .8125rem;
	line-height: 1.6; color: rgba(251, 250, 248, .8);
}
.newsletter__avviso p { margin: 0 0 .6rem; }
.newsletter__avviso code {
	display: block; overflow-x: auto; white-space: pre;
	background: rgba(0, 0, 0, .35); padding: .6rem .75rem;
	border-radius: var(--r); font-size: .75rem; color: var(--verde-tenue);
}

/* --------------------------------------------------------------- prosa */

.prosa { font-size: 1.0625rem; }
.prosa > * + * { margin-top: 1.35em; }
.prosa p { margin: 0; }

.prosa h2, .prosa h3, .prosa h4 {
	font-family: var(--display); font-weight: 500; line-height: 1.2;
	letter-spacing: .01em; margin-top: 2.4em; margin-bottom: .6em;
	text-wrap: balance;
}
.prosa h2 { font-size: 1.65rem; }
.prosa h3 { font-size: 1.3rem; }
.prosa h4 { font-size: 1.1rem; }

.prosa ul, .prosa ol { margin: 0; padding-left: 1.4em; }
.prosa li + li { margin-top: .45em; }

.prosa blockquote {
	margin: 2em 0; padding: .25em 0 .25em 1.5em;
	border-left: 2px solid var(--verde);
	font-style: italic; color: var(--inchiostro-2);
}
.prosa blockquote p { margin: 0; }

.prosa img, .prosa figure { border-radius: var(--r); }
.prosa figure { margin: 2em 0; }
.prosa figcaption {
	font-family: var(--utile); font-size: .8125rem; color: var(--tenue);
	margin-top: .6em; text-align: center;
}

.prosa table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prosa table th, .prosa table td {
	border: 1px solid var(--linea); padding: .6em .8em; text-align: left;
}
.prosa table th { background: var(--fondo-2); font-family: var(--utile); font-size: .85rem; }

/* Le tabelle larghe scorrono nel loro contenitore, mai la pagina. */
.prosa .wp-block-table { overflow-x: auto; }

.prosa pre {
	overflow-x: auto; background: var(--fondo-2); padding: 1rem;
	border-radius: var(--r); font-size: .875rem;
}

.prosa .wp-block-button__link {
	display: inline-block; background: var(--verde); color: #fff;
	font-family: var(--utile); font-size: .875rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	padding: .85rem 1.6rem; border-radius: var(--r); text-decoration: none;
}
.prosa .wp-block-button__link:hover { background: var(--verde-scuro); color: #fff; }

.prosa .wp-block-embed__wrapper iframe { width: 100%; aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------- bottoni */

.bottone {
	display: inline-block; border: 0; cursor: pointer;
	background: var(--verde); color: #fff;
	font-family: var(--utile); font-size: .875rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	padding: .9rem 1.75rem; border-radius: var(--r);
	text-decoration: none; transition: background .2s ease;
}
.bottone:hover { background: var(--verde-scuro); color: #fff; }

.bottone--vuoto {
	background: transparent; color: var(--verde-scuro);
	border: 1px solid var(--linea-forte); padding: .85rem 1.7rem;
}
.bottone--vuoto:hover { background: var(--verde); color: #fff; border-color: var(--verde); }

/* --------------------------------------------------------------- moduli */

.modulo__campo { margin: 0 0 1.15rem; }
.modulo__campo label,
.modulo__consenso {
	font-family: var(--utile); font-size: .8125rem; font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase; color: var(--inchiostro-2);
}
.modulo__campo label { display: block; margin-bottom: .4rem; }

.modulo input[type="text"],
.modulo input[type="email"],
.modulo input[type="url"],
.modulo textarea,
.cerca input[type="search"],
.newsletter__modulo input[type="email"] {
	width: 100%; font-family: var(--testo); font-size: 1rem;
	padding: .8rem .95rem; color: var(--inchiostro);
	background: var(--fondo);
	border: 1px solid var(--linea-forte); border-radius: var(--r);
}
.modulo textarea { resize: vertical; min-height: 8rem; }

.modulo__consenso {
	text-transform: none; letter-spacing: 0; font-weight: 400;
	font-size: .875rem; margin: 0 0 1.25rem;
}
.modulo__consenso label { display: flex; gap: .6rem; align-items: flex-start; }
.modulo__consenso input { margin-top: .28rem; flex: none; }

/* Campo esca: fuori dalla vista e fuori dal percorso di tabulazione. */
.modulo__esca {
	position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.modulo__azioni { margin: 0; }

.form-esito {
	font-family: var(--utile); font-size: .875rem;
	padding: .8rem 1rem; border-radius: var(--r); margin: 0 0 1.25rem;
}
.form-esito--ok { background: var(--verde-tenue); color: var(--verde-scuro); }
.form-esito--ko { background: #fbe9e7; color: #8c2f22; }

.cerca { display: flex; gap: .6rem; margin: 1.5rem 0; }
.cerca button {
	flex: none; border: 0; cursor: pointer; background: var(--inchiostro);
	color: #fff; font-family: var(--utile); font-size: .8125rem;
	font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	padding: 0 1.4rem; border-radius: var(--r);
}
.cerca button:hover { background: var(--verde); }

.newsletter { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .newsletter { grid-template-columns: 1fr 1fr; } }
.newsletter__modulo { display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter__modulo input[type="email"] { flex: 1 1 14rem; }

/* --------------------------------------------------------------- social */

.social { list-style: none; display: flex; gap: .75rem; margin: 1.25rem 0 0; padding: 0; }
.social__link {
	display: grid; place-items: center; width: 42px; height: 42px;
	border: 1px solid var(--linea-forte); border-radius: 50%;
	color: var(--inchiostro); transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.social__link svg { width: 19px; height: 19px; fill: currentColor; }
.social__link:hover { background: var(--verde); border-color: var(--verde); color: #fff; }

.pie .social__link { border-color: rgba(251, 250, 248, .28); color: var(--fondo); }
.pie .social__link:hover { background: var(--verde); border-color: var(--verde); }

/* ------------------------------------------------------------- articolo */

.articolo__testata { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.articolo__titolo {
	font-family: var(--display); font-weight: 500;
	font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.1;
	letter-spacing: .01em; margin: .5rem 0 1rem; text-wrap: balance;
}
.articolo__meta {
	font-family: var(--utile); font-size: .8125rem; color: var(--tenue);
	letter-spacing: .04em; margin: 0 0 2rem;
	display: flex; gap: .6rem; flex-wrap: wrap;
}
.articolo__copertina { margin: 0 auto 2.5rem; }
.articolo__copertina img { width: 100%; border-radius: var(--r); }
.articolo__corpo { padding-bottom: 3rem; }

.tag-elenco {
	list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
	margin: 0 0 3rem; padding: 2rem 0 0; border-top: 1px solid var(--linea);
}
.tag-elenco a {
	display: inline-block; font-family: var(--utile); font-size: .75rem;
	letter-spacing: .04em; text-decoration: none; color: var(--inchiostro-2);
	background: var(--fondo-2); padding: .35rem .75rem; border-radius: 100px;
}
.tag-elenco a:hover { background: var(--verde); color: #fff; }

.intestazione-archivio { margin-bottom: 3rem; max-width: 46rem; }
.intestazione-archivio__testo { color: var(--tenue); }

/* ---------------------------------------------------------- paginazione */

.pagination, .comments-pagination {
	margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--linea);
	font-family: var(--utile); font-size: .875rem;
}
.pagination .nav-links, .comments-pagination .nav-links {
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.pagination a, .pagination span.current,
.comments-pagination a, .comments-pagination span.current {
	display: inline-block; padding: .5rem .9rem; border-radius: var(--r);
	text-decoration: none; border: 1px solid var(--linea);
	color: var(--inchiostro-2);
}
.pagination span.current, .comments-pagination span.current {
	background: var(--inchiostro); border-color: var(--inchiostro); color: #fff;
}
.pagination a:hover { border-color: var(--verde); color: var(--verde); }

.paginazione-interna { margin-top: 2rem; font-family: var(--utile); font-size: .875rem; }

/* ------------------------------------------------------------- commenti */

.commenti { padding: 2rem 0 4rem; border-top: 1px solid var(--linea); }
.commenti__elenco { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.commenti__elenco .children { list-style: none; padding-left: 1.5rem; }
.commenti__elenco li { margin-bottom: 1.75rem; }

/* ------------------------------------------------------------------ pie */

.pie {
	background: var(--inchiostro); color: var(--fondo);
	padding: clamp(3rem, 7vw, 4.5rem) 0 2rem;
	margin-top: 0;
}
.pie a { color: rgba(251, 250, 248, .82); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }

.pie__griglia { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pie__griglia { grid-template-columns: 1.5fr 1fr 1fr; } }

.pie__nome {
	font-family: var(--display); text-transform: uppercase;
	letter-spacing: .06em; font-size: 1.0625rem; margin: 0 0 .6rem;
}
.pie__motto { color: rgba(251, 250, 248, .62); font-style: italic; margin: 0; max-width: 32ch; }
.pie .etichetta { color: rgba(251, 250, 248, .5); }
.pie__elenco { list-style: none; margin: 0; padding: 0; font-family: var(--utile); font-size: .875rem; }
.pie__elenco li + li { margin-top: .5rem; }
.pie__elenco--legale { margin-top: 1.25rem; }

.pie__coda {
	margin-top: 3rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(251, 250, 248, .16);
	font-family: var(--utile); font-size: .8125rem;
	color: rgba(251, 250, 248, .55);
}
.pie__coda { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; justify-content: space-between; }
.pie__coda p { margin: 0; }
.pie__legale a { text-decoration: underline; text-underline-offset: .2em; }

/*
   Partita IVA e iscrizione all'albo stanno su due righe sotto il copyright.
   Restano allo stesso .55 di opacita delle altre: sono informazioni di legge,
   abbassarle ancora le porterebbe sotto il rapporto di contrasto 4.5:1.
*/
.pie__identita { display: grid; gap: .25rem; }
@media (max-width: 640px) { .pie__coda { gap: .9rem; } }

/* ------------------------------------------------------------ whatsapp */

/*
   Verde di WhatsApp, non quello del tema: qui la riconoscibilita del marchio
   vale piu della coerenza cromatica. Un pulsante di chat che non sembra
   WhatsApp non viene cliccato.
*/
.whatsapp {
	position: fixed; right: 15px; bottom: 15px; z-index: 95;
	display: flex; align-items: center; gap: .6rem;
	text-decoration: none; color: #fff;
}

.whatsapp__cerchio {
	flex: none; display: grid; place-items: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25d366;
	box-shadow: 0 6px 18px -4px rgba(20, 32, 30, .45);
	transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}
.whatsapp__cerchio svg { width: 30px; height: 30px; fill: #fff; display: block; }

.whatsapp__etichetta {
	background: #fff; color: var(--inchiostro);
	font-family: var(--utile); font-size: .8125rem; font-weight: 600;
	padding: .5rem .9rem; border-radius: 100px; white-space: nowrap;
	box-shadow: 0 6px 18px -6px rgba(20, 32, 30, .35);
	opacity: 0; transform: translateX(8px);
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: none;
}

.whatsapp:hover .whatsapp__cerchio,
.whatsapp:focus-visible .whatsapp__cerchio {
	transform: scale(1.06);
	box-shadow: 0 10px 24px -6px rgba(37, 211, 102, .6);
}
.whatsapp:hover .whatsapp__etichetta,
.whatsapp:focus-visible .whatsapp__etichetta {
	opacity: 1; transform: translateX(0);
}

.whatsapp:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; border-radius: 100px; }

/* Su telefono l'etichetta non serve: c e solo il cerchio, un po piu piccolo. */
@media (max-width: 620px) {
	.whatsapp__etichetta { display: none; }
	.whatsapp__cerchio { width: 50px; height: 50px; }
	.whatsapp__cerchio svg { width: 27px; height: 27px; }
	.whatsapp { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp__cerchio, .whatsapp__etichetta { transition: none; }
	.whatsapp:hover .whatsapp__cerchio { transform: none; }
}

/* --------------------------------------------------------------- stampa */

@media print {
	.testata, .pie, .video, .sede__mappa, .modulo, .whatsapp, .lingue { display: none; }
	body { background: #fff; color: #000; }
}