/* ==========================================================================
   Casa Gregotti — foglio di stile principale

   Valori presi dal Figma consegnato da Madoe Studio, che contiene sia i frame
   desktop (1440) sia quelli mobile (393). I token sono scritti sui valori
   desktop e ridichiarati nel blocco mobile in fondo: così ogni misura del
   design compare una volta sola, nella sua unità originale.
   ========================================================================== */

/* --- Token ---------------------------------------------------------------- */

:root {
	/* Colori */
	--c-ink: #000000;
	--c-paper: #ffffff;
	--c-plum: #42243c;      /* fondo dell'atterraggio */
	--c-cream: #edf2ef;     /* testo sull'atterraggio, fondo del menu */

	/* Tipografia */
	--font: 'Caslon Ionic Web', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
	--fw-regular: 400;
	--fw-medium: 500;

	--fs-wordmark: 64px;    /* atterraggio e voci di menu */
	--fs-title: 36px;       /* titolo di pagina, titolo mostra */
	--fs-lead: 20px;        /* claim, intertitoli, etichette */
	--fs-base: 16px;        /* corpo, stato e crediti, testata, indirizzo */
	--fs-small: 12px;       /* didascalie e link del footer */

	--lh-wordmark: 64px;
	--lh-lead: 26px;
	--lh-base: 20px;
	--lh-address: 16px;
	--lh-small: 15px;
	--lh-tight: 1.1;

	/* Misure di colonna */
	--col-title: 690px;     /* titolo di pagina */
	--col-text: 684px;      /* corpo, claim, elenco mostre, immagine mostra */
	--col-figure: 448px;    /* immagini delle pagine editoriali */

	/* Ritmo verticale */
	--sp-gutter: 24px;
	--sp-header: 92px;      /* altezza della testata */
	--sp-top: 168px;        /* testata -> titolo, titolo -> prima sezione */
	--sp-section: 112px;    /* stacco fra una sezione e la successiva */
	--sp-body: 56px;        /* claim -> corpo, corpo -> immagine, riga -> mostra */
	--sp-item: 24px;        /* stato -> titolo -> crediti */
	--sp-caption: 12px;     /* immagine -> didascalia */
	--sp-footer: 192px;     /* ultima sezione -> footer */
	--sp-para: 20px;        /* interlinea vuota fra paragrafi */
	--sp-links: 16px;       /* fra i link del footer */
	--sp-press: 80px;       /* fra una voce della rassegna e la successiva */
	--sp-press-top: 100px;  /* dal titolo alla prima voce della rassegna */
	--sp-apertura: 48px;    /* dall'immagine di apertura al titolo di pagina */
}

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

/* --- Reset mirato --------------------------------------------------------- */

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

body,
h1, h2, h3, h4,
p, figure, blockquote, ul, ol, dl, dd {
	margin: 0;
}

ul[role='list'],
ol[role='list'] {
	list-style: none;
	padding: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a { color: inherit; }

/* --- Base ----------------------------------------------------------------- */

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

body {
	background: var(--c-paper);
	color: var(--c-ink);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.skip-link {
	position: absolute;
	left: -9999px;
}
.skip-link:focus {
	left: var(--sp-gutter);
	top: var(--sp-gutter);
	z-index: 100;
	background: var(--c-paper);
	padding: 10px;
}

/* --- Layout --------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-main { flex: 1 0 auto; }

.wrap {
	width: 100%;
	max-width: calc(var(--col-text) + var(--sp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.wrap--title { max-width: calc(var(--col-title) + var(--sp-gutter) * 2); }

/* --- Testata -------------------------------------------------------------- */
/* Menu a sinistra, logotipo al centro, lingua a destra: uguale su ogni misura. */

.site-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: var(--sp-gutter);
	min-height: var(--sp-header);
	padding: var(--sp-gutter) var(--sp-gutter) calc(var(--sp-header) - var(--sp-gutter) - var(--lh-address) * 3);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.site-header button,
.site-header a {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	text-decoration: none;
	cursor: pointer;
}

a.site-header__logo {
	grid-column: 2;
	justify-self: center;
	line-height: var(--lh-address);
	text-align: center;
	text-decoration: none;
}

.site-header__nav {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

.site-header__menu {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

.site-header a:hover,
.site-header button:hover { text-decoration: underline; }

.site-header__lingua .is-current { opacity: 0.4; }

/* TranslatePress inserisce un selettore flottante che il design non prevede. */
.trp-floating-switcher { display: none !important; }

/* --- Immagine sopra il titolo --------------------------------------------- */
/* Frame "Press": la prima immagine del contenuto apre la pagina, con la
   didascalia al suo margine sinistro come le immagini del testo, e il titolo
   la segue. La veste è quella delle immagini editoriali. */

.wrap--figure figure {
	margin: var(--sp-top) auto 0;
	width: min(100%, var(--col-figure));
}

.wrap--figure img { display: block; width: 100%; }

.wrap--figure figcaption {
	margin-top: var(--sp-caption);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	text-align: left;
}

.wrap--figure + .wrap--title .page-title { margin-top: var(--sp-apertura); }

/* --- Titolo di pagina ----------------------------------------------------- */

.page-title {
	margin-top: var(--sp-top);
	font-size: var(--fs-title);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	text-align: center;
	text-transform: uppercase;
}

/* --- Contenuto editoriale ------------------------------------------------- */
/* Le pagine si scrivono con l'editor a blocchi: il tema veste i blocchi core
   invece di imporre una struttura di campi. Le regole qui sotto valgono per
   qualunque blocco, così l'editor non può uscire dal ritmo del Figma. */

.entry-content { margin-top: var(--sp-top); }

/* Il Figma usa tre stacchi, a seconda di cosa segue cosa. */
.entry-content > * + * { margin-top: var(--sp-para); }
.entry-content > * + :is(h1, h2, h3, h4, h5, h6) { margin-top: var(--sp-section); }
.entry-content > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: var(--sp-body); }
.entry-content > * + figure { margin-top: var(--sp-body); }
.entry-content > figure + * { margin-top: var(--sp-section); }

/* Intertitoli ed etichette hanno lo stesso stile, come nel Figma. */
.entry-content :is(h1, h2, h3, h4, h5, h6) {
	font-size: var(--fs-lead);
	font-weight: var(--fw-medium);
	line-height: var(--lh-lead);
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

.entry-content a {
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

.entry-content--center { text-align: center; }

/* Immagini: colonna stretta centrata, didascalia al loro margine sinistro. */
.entry-content figure {
	margin-inline: auto;
	width: min(100%, var(--col-figure));
}

.entry-content figure img { width: 100%; }

.entry-content figcaption {
	margin-top: var(--sp-caption);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	text-align: left;
}

/* Citazioni (PRESS), scritte col blocco citazione: stessa veste della
   rassegna prodotta dallo shortcode — corsivo, riga vuota, testata in tondo. */
.entry-content blockquote {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-style: italic;
	text-align: center;
	text-wrap: pretty;
}

.entry-content blockquote > * + * { margin-top: var(--sp-para); }

.entry-content blockquote cite {
	display: block;
	margin-top: var(--lh-base);
	font-style: normal;
}

/* Fra una citazione e l'altra corre il ritmo della rassegna. */
.entry-content > blockquote + blockquote { margin-top: var(--sp-press); }

.entry-content :is(ul, ol) { padding-left: 1.2em; }

/* --- Elenco mostre (A CASA) ----------------------------------------------- */

.exhibitions { margin-top: var(--sp-top); }

.exhibition {
	padding-bottom: var(--sp-body);
	border-bottom: 1px solid var(--c-ink);
	text-align: center;
}

.exhibition + .exhibition { padding-top: var(--sp-body); }

.exhibition__title {
	margin-top: var(--sp-item);
	font-size: var(--fs-title);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
}

.exhibition__title a { text-decoration: none; }
.exhibition__title a:hover { text-decoration: underline; }

.exhibition__status { text-transform: uppercase; }

.exhibition__credits { margin-top: var(--sp-item); }

/* --- Scheda della mostra -------------------------------------------------- */

/* La galleria prende lo stacco del primo blocco; sotto, l'intestazione con
   stato, titolo e crediti, come nel Figma. */
.mostra__galleria { margin-top: var(--sp-top); }

.mostra__figure {
	margin: 0;
	width: 100%;
}

/* Il bottone è solo la superficie cliccabile: non si deve vedere. */
.mostra__zoom {
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

/* Il contorno di sistema è azzurro: qui segue l'inchiostro del tema. */
.mostra__zoom:focus-visible,
.cg-lightbox button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.mostra__figure img { display: block; width: 100%; }

/* Senza JavaScript le foto stanno in colonna, una sotto l'altra. */
.mostra__figure + .mostra__figure { margin-top: var(--sp-body); }

/* Con lo script se ne vede una alla volta: niente stacchi fra le foto, sotto
   l'immagine restano didascalia, frecce e conteggio. */
.mostra__galleria--sfogliabile .mostra__figure + .mostra__figure { margin-top: 0; }

.mostra__comandi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-item);
	margin-top: var(--sp-caption);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.mostra__freccia {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--fs-base);
	line-height: 1;
	color: inherit;
	cursor: pointer;
}

.mostra__freccia:hover { text-decoration: underline; }

.mostra__figure figcaption {
	margin-top: var(--sp-caption);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.mostra__intestazione {
	margin-top: var(--sp-body);
	text-align: center;
}

/* Senza immagine, l'intestazione prende lo stacco che spetta al primo blocco. */
.mostra__intestazione:first-child { margin-top: var(--sp-top); }

.mostra__intestazione .exhibition__title { margin-top: var(--sp-item); }

.exhibition__title:first-child { margin-top: 0; }

.mostra .entry-content { margin-top: var(--sp-section); }

/* --- Ingrandimento delle foto --------------------------------------------- */
/* Sovrappiù rispetto al Figma: la vista a schermo pieno parla il linguaggio
   del menu — fondo pieno, "Chiudi" in alto a destra. Il markup lo costruisce
   assets/js/lightbox.js, caricato solo sulla scheda mostra. */

.cg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-gutter);
	background: var(--c-cream);
	color: var(--c-ink);
	padding: calc(var(--sp-gutter) * 3) var(--sp-gutter) calc(var(--sp-gutter) * 2);
}

.cg-lightbox[hidden] { display: none; }

.cg-lightbox__figure {
	grid-column: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	height: 100%;
}

.cg-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	min-height: 0;
}

.cg-lightbox__caption {
	margin-top: var(--sp-caption);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	text-align: center;
}

.cg-lightbox__caption[hidden] { display: none; }

.cg-lightbox__close,
.cg-lightbox__nav {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: var(--fw-medium);
	color: inherit;
	cursor: pointer;
}

.cg-lightbox__close {
	position: absolute;
	top: var(--sp-gutter);
	right: var(--sp-gutter);
	font-size: var(--fs-base);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.cg-lightbox__nav {
	font-size: var(--fs-lead);
	line-height: 1;
}

.cg-lightbox__nav--prev { grid-column: 1; }
.cg-lightbox__nav--next { grid-column: 3; }
.cg-lightbox__nav[hidden] { display: none; }

.cg-lightbox__close:hover,
.cg-lightbox__nav:hover { text-decoration: underline; }

body.cg-lightbox-is-open { overflow: hidden; }

/* --- Difesa delle immagini ------------------------------------------------ */
/* Niente trascinamento fuori dalla pagina né selezione: il tasto destro lo
   blocca menu.js. Resta uno scoraggiamento, non una protezione: il file è
   comunque raggiungibile da chi sa dove guardare. */

img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
	flex-shrink: 0;
	padding: var(--sp-footer) var(--sp-gutter) var(--sp-gutter);
	text-align: center;
}

.site-footer__copy {
	font-weight: var(--fw-medium);
	line-height: var(--lh-address);
	text-transform: uppercase;
	text-wrap: balance;
}

/* Sede e partita IVA parlano con la stessa voce dei link legali che seguono,
   e i tre blocchi del footer stanno alla stessa distanza l'uno dall'altro. */
.site-footer__sede {
	margin-top: var(--sp-body);
	font-style: normal;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-links);
	margin-top: var(--sp-body);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.site-footer__menu a { text-decoration: none; }
.site-footer__menu a:hover { text-decoration: underline; }

/* --- Atterraggio ---------------------------------------------------------- */

.splash {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	background: var(--c-plum);
	color: var(--c-cream);
	padding: var(--sp-gutter);
	transition: opacity 600ms ease;
}

.splash[hidden] { display: none; }

.splash.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.splash__wordmark {
	font-size: var(--fs-wordmark);
	font-weight: var(--fw-medium);
	line-height: var(--lh-wordmark);
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

/* --- Overlay del menu ----------------------------------------------------- */
/* Fondo chiaro e testo nero: al contrario dell'atterraggio, che è aubergine. */

.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	background: var(--c-cream);
	color: var(--c-ink);
	padding: var(--sp-gutter);
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease, visibility 400ms;
}

.menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.menu-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-wordmark);
	font-weight: var(--fw-medium);
	line-height: var(--lh-wordmark);
	text-align: center;
	text-transform: uppercase;
}

.menu-overlay__list a { text-decoration: none; }
.menu-overlay__list a:hover { text-decoration: underline; }

/* In overlay la testata resta: "Menu" chiude, la lingua resta raggiungibile. */
.menu-overlay__nav {
	position: absolute;
	top: var(--sp-gutter);
	right: var(--sp-gutter);
	display: flex;
	gap: 32px;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.menu-overlay__nav button,
.menu-overlay__nav a {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	text-decoration: none;
	cursor: pointer;
}

.menu-overlay__nav button:hover,
.menu-overlay__nav a:hover { text-decoration: underline; }

body.menu-is-open { overflow: hidden; }

/* --- Rassegna stampa ------------------------------------------------------ */
/* Elenco prodotto dal plugin CG Rassegna Stampa con [cg_rassegna]. Il suo
   foglio di stile è disattivato in inc/enqueue.php: qui il markup prende la
   veste del tema. Conviene lo shortcode in forma semantica, che produce
   <figure> + <figcaption> e permette di distinguere la citazione dalla
   testata:  [cg_rassegna markup="semantic"]

   Dal frame "Press": citazione in corsivo al corpo del testo, una riga vuota,
   poi la testata in tondo — scritta come va scritta, quindi niente maiuscolo
   imposto dal tema (DOMUS è maiuscolo nel contenuto, Vanity Fair no). Tutto
   centrato. Gli allineamenti e i riquadri in evidenza del plugin appartengono
   al vecchio progetto: restano salvati ma non si vedono. */

.press-rassegna {
	display: flex;
	flex-direction: column;
	gap: var(--sp-press);
	text-align: center;
}

/* La rassegna attacca al titolo con il suo stacco, non con quello del corpo.
   Il blocco shortcode può lasciarsi dietro un paragrafo vuoto: non deve
   contare né come spazio né come primo elemento. */
.entry-content > p:empty { display: none; }

.entry-content:has(> .press-rassegna:first-child),
.entry-content:has(> p:empty:first-child + .press-rassegna) { margin-top: var(--sp-press-top); }

/* Le voci sono <figure>: senza questa riga prenderebbero la colonna stretta
   delle immagini editoriali, mentre nel frame occupano la colonna del testo. */
.press-rassegna .press-item {
	margin: 0;
	width: auto;
	max-width: none;
}

.press-rassegna .press-item blockquote { margin: 0; }

/* La citazione. */
.press-rassegna .press-item p {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-style: italic;
	text-wrap: pretty;
}

/* La testata, staccata dalla citazione da una riga vuota. Corpo, stile e
   allineamento vanno dichiarati: la regola delle didascalie di immagine in
   .entry-content colpisce anche questo figcaption. */
.press-rassegna .press-item figcaption {
	margin-top: var(--lh-base);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-style: normal;
	text-align: center;
	text-transform: none;
}

.press-rassegna .press-item a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

.press-rassegna .align-left,
.press-rassegna .align-right {
	margin-inline: auto;
	text-align: center;
}

.press-rassegna .highlight {
	background: none;
	padding: 0;
	border-radius: 0;
}

/* --- Versioni per formato ------------------------------------------------- */
/* Quando una riga deve andare a capo in punti diversi fra desktop e mobile, il
   CSS non può spezzarla dove serve: si scrive due volte lo stesso testo, con
   i suoi a capo, e ogni copia porta la sua classe (riquadro "Classi CSS
   aggiuntive" del blocco). La copia che non serve sparisce del tutto, quindi
   non viene nemmeno letta dagli screen reader. */

.cg-solo-mobile { display: none; }

/* --- Barra di amministrazione --------------------------------------------- */
/* La vede solo chi è connesso, ma va tenuta in conto: è alta 32px, 46px sotto
   i 782px, e WordPress compensa con un margine su <html>. Senza questi
   aggiustamenti gli strati fissi ci finiscono sotto e il 100vh sfora. */

body.admin-bar .site {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

body.admin-bar .splash,
body.admin-bar .menu-overlay,
body.admin-bar .cg-lightbox { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .site {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}

	body.admin-bar .splash,
	body.admin-bar .menu-overlay,
	body.admin-bar .cg-lightbox { top: 46px; }
}

/* --- Mobile --------------------------------------------------------------- */
/* Frame 393 del Figma. Cambiano solo i token: la struttura è la stessa. */

@media (max-width: 768px) {
	:root {
		--fs-wordmark: 28px;
		--fs-title: 28px;
		--fs-lead: 16px;
		--fs-base: 14px;
		--fs-small: 10px;

		--lh-wordmark: 28px;
		--lh-lead: 20px;
		--lh-base: 18px;
		--lh-address: 14px;

		--col-title: 361px;
		--col-text: 361px;
		--col-figure: 235px;

		--sp-gutter: 16px;
		--sp-header: 70px;
		--sp-top: 96px;
		--sp-section: 96px;
		--sp-body: 48px;
		--sp-footer: 112px;
		--sp-para: 18px;
		--sp-links: 12px;
		--sp-press: 40px;
		--sp-press-top: 40px;
	}

	.menu-overlay__nav { gap: 24px; }

	.cg-solo-desktop { display: none; }
	.cg-solo-mobile { display: revert; }

	/* Sul mobile il testo della mostra segue i crediti allo stacco corto. */
	.mostra .entry-content { margin-top: var(--sp-body); }

	/* A schermo pieno la foto prende tutta la larghezza: si sfoglia col dito,
	   quindi le frecce lascerebbero solo via spazio. */
	.cg-lightbox {
		grid-template-columns: 1fr;
		padding-top: calc(var(--sp-gutter) * 3);
	}

	.cg-lightbox__figure { grid-column: 1; }
	.cg-lightbox__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Testata appiccicata -------------------------------------------------- */
/* Sovrappiù rispetto al Figma: la testata resta in alto, si ritira quando si
   scende e torna quando si risale. Sta sotto il menu (60), l'atterraggio (70)
   e l'ingrandimento (80), così gli strati pieni la coprono come prima. */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-paper);
	transition: transform 300ms ease;
}

/* La classe la mette assets/js/menu.js, seguendo il verso dello scorrimento. */
.site-header.is-ritirata { transform: translateY(-100%); }

body.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

/* --- Informative di iubenda ----------------------------------------------- */
/* L'embed porta con sé il foglio di stile di iubenda, pensato per una pagina
   loro: Helvetica, corpi doppi dei nostri, grigio-blu, tutto centrato, schede
   con bordo e angoli tondi. Qui si riporta alla voce del sito. Si tocca solo
   l'aspetto: la struttura, i testi e i pulsanti restano i loro, e il loro
   foglio arriva dopo il nostro, quindi serve !important.
   Le regole valgono solo dentro il contenitore che iniettano loro. */

#iub-pp-container,
#iub-pp-container *:not(svg):not(svg *) {
	font-family: var(--font) !important;
	color: var(--c-ink) !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

#iub-pp-container {
	font-size: var(--fs-base) !important;
	line-height: var(--lh-base) !important;
}

/* La barra verde in cima e i fondi bianchi delle schede non appartengono
   a questo sito: via il colore, resta la gerarchia. */
#iub-pp-container #iub-legalDoc {
	border: 0 !important;
	background: none !important;
}

#iub-pp-container .main-header { padding: 0 !important; }

#iub-pp-container p,
#iub-pp-container li,
#iub-pp-container td,
#iub-pp-container th,
#iub-pp-container button,
#iub-pp-container a {
	font-size: var(--fs-base) !important;
	line-height: var(--lh-base) !important;
	font-weight: var(--fw-regular) !important;
}

#iub-pp-container p { margin: 0 0 var(--sp-para) !important; }
#iub-pp-container li { margin: 0 0 var(--sp-para) !important; }

/* Il documento ha un titolo suo, che si somma a quello della pagina: lo si
   porta al rango di intertitolo invece di nasconderlo, perché è il titolo
   legale del documento. */
#iub-pp-container h1,
#iub-pp-container h1 strong {
	font-size: var(--fs-lead) !important;
	line-height: var(--lh-lead) !important;
	font-weight: var(--fw-medium) !important;
	margin: 0 0 var(--sp-para) !important;
}

#iub-pp-container h2 {
	font-size: var(--fs-lead) !important;
	line-height: var(--lh-lead) !important;
	font-weight: var(--fw-medium) !important;
	margin: var(--sp-body) 0 var(--sp-para) !important;
}

#iub-pp-container h3,
#iub-pp-container h4 {
	font-size: var(--fs-base) !important;
	line-height: var(--lh-base) !important;
	font-weight: var(--fw-medium) !important;
	margin: var(--sp-para) 0 0 !important;
}

#iub-pp-container a { text-decoration: underline !important; }

/* Schede, soffietti e pillole: si tolgono fondo, bordo e angoli tondi, e si
   lascia solo il rientro che tiene insieme il blocco. */
#iub-pp-container .summary__card,
#iub-pp-container .legalDoc__accordion,
#iub-pp-container .body__details-box,
#iub-pp-container .pill,
#iub-pp-container button {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

#iub-pp-container .pill { padding: 0 var(--sp-links) 0 0 !important; }

#iub-pp-container .summary__card,
#iub-pp-container .legalDoc__accordion {
	margin: 0 0 var(--sp-body) !important;
}

#iub-pp-container button {
	cursor: pointer;
	text-decoration: underline !important;
}

/* La tabella dei cookie, nella cookie policy, deve poter respirare. */
#iub-pp-container table {
	width: 100% !important;
	border-collapse: collapse !important;
}

#iub-pp-container td,
#iub-pp-container th {
	padding: 0 var(--sp-links) var(--sp-para) 0 !important;
	vertical-align: top !important;
}

/* L'impaginato di iubenda prevede una pagina larga: dentro i 684px della
   colonna di testo, il sommario laterale si riduce a una striscia di 134px e
   le schede finiscono su due colonne strettissime. Qui va tutto in colonna
   unica, e il sommario laterale sparisce perché ripete i titoli che il
   documento ha già sotto. */
#iub-pp-container .aside-main-wrapper { display: block !important; }
#iub-pp-container aside,
#iub-pp-container .table-of-content-btn-wrapper { display: none !important; }

#iub-pp-container .summary__cards-wrapper {
	display: block !important;
}

#iub-pp-container .summary__card-section { margin-bottom: var(--sp-para) !important; }

#iub-pp-container .pills-list,
#iub-pp-container .unstyled-list,
#iub-pp-container .check-style-list {
	flex-wrap: wrap !important;
	padding-left: 0 !important;
	list-style: none !important;
}