/**
 * Di Girolamo — stili del child theme.
 * I componenti di layout (shortcode del plugin DG Pagine) portano i propri stili.
 */

:root {
	/* ---------- Colori di brand ---------- */
	--dg-black: #1D1D1B;
	--dg-grey: #616160;
	--dg-light: #EEEDED;
	--dg-white: #FFFFFF;
	--dg-teal: #52CEBF;

	/* Alias semantici: usa questi nei componenti. */
	--dg-color-bg: var(--dg-white);
	--dg-color-text: var(--dg-black);
	--dg-color-muted: var(--dg-grey);
	--dg-color-surface: var(--dg-light);
	--dg-color-accent: var(--dg-teal);
	--dg-color-border: var(--dg-light);
	--dg-color-on-accent: var(--dg-black);

	/* ---------- Tipografia ---------- */
	--dg-font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
	--dg-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* ---------- Layout ---------- */
	--dg-container: 1200px;
	--dg-gutter: 24px;
	--dg-radius: 8px;
}

.dg-container {
	width: 100%;
	max-width: var(--dg-container);
	margin-inline: auto;
	padding-inline: var(--dg-gutter);
}

/* ---------- Sezioni ---------- */

/*
 * Twenty Twenty dà a ogni <section> `padding: 5rem 0`, che sopra i 700px
 * diventa `8rem 0`. Le fasce qui sotto lo stacco verticale se lo danno da sole
 * dal proprio __inner, quindi quello del parent si sommerebbe al nostro.
 *
 * L'elenco è esplicito di proposito: un `section` generico avrebbe specificità
 * più alta delle classi dei componenti del plugin (`.dg-double`, `.dg-services`
 * e compagnia), che il padding se lo dichiarano, e glielo azzererebbe.
 */
.dg-blog-intro,
.dg-blog-list {
	padding: 0;
}

/* ---------- Font ---------- */

/*
 * Globalmente impostiamo solo la famiglia: dimensioni, interlinea e spaziatura
 * restano a carico dei singoli componenti.
 */

body {
	font-family: var(--dg-font-body);
	-webkit-font-smoothing: antialiased;
}

/* La specificità batte le regole per-elemento di Twenty Twenty. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body button,
body input[type="submit"],
body input[type="button"],
body input[type="reset"],
body .button,
body .faux-button,
body .wp-block-button__link,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: var(--dg-font-heading);
}

body p,
body li,
body dd,
body dt,
body th,
body td,
body blockquote,
body figcaption,
body label,
body input,
body select,
body textarea,
.entry-content p,
.entry-content li {
	font-family: var(--dg-font-body);
}

/* ---------- Template pagina: canvas full width ---------- */

/*
 * Twenty Twenty limita i figli di .entry-content a 58rem con width: calc(100% - 4rem).
 * Nelle pagine annulliamo il vincolo: i componenti di layout gestiscono da soli
 * il proprio padding interno, il testo può essere racchiuso in .dg-container.
 */

.dg-entry-content {
	padding: 170px 0;
}

/*
 * Su desktop la griglia dei servizi è fuori dal flusso e sborda sotto il
 * pannello: questo stacco è lo spazio che le lasciamo. Sotto i 900px la griglia
 * torna nel flusso e lo stacco deve tornare normale, altrimenti resta un buco.
 */
.dg-entry-content .dg-services {
	padding-top: 170px;
	padding-bottom: 340px;
}

.dg-entry-content .dg-banner {
	padding-top: 170px;
}

@media (max-width: 900px) {
	.dg-entry-content {
		padding: 96px 0;
	}

	.dg-entry-content .dg-services {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	.dg-entry-content .dg-banner {
		padding-top: 96px;
	}
}

@media (max-width: 600px) {
	.dg-entry-content {
		padding: 64px 0;
	}

	.dg-entry-content .dg-services {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.dg-entry-content .dg-banner {
		padding-top: 64px;
	}
}

.dg-entry-content .dg-faq {
	padding-top: 0;
}

.dg-entry-content > section,
.dg-entry-content > section:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}

.dg-entry-content > * + * {
	margin-top: 0;
}

/* ---------- Testo scritto nell'editor ---------- */

/*
 * Il testo libero fra un componente e l'altro. Due avvertenze su questo blocco:
 *
 * 1. I selettori agganciano sia `.dg-entry-content` sia `.entry-content` per
 *    arrivare a due classi + tag: Twenty Twenty stila `.entry-content h2` con
 *    una classe + tag, e a parità vincerebbe l'ultimo foglio caricato.
 * 2. Le misure sono in px perché il tema padre imposta `html { font-size: 62.5% }`:
 *    qui 1rem varrebbe 10px, non 16.
 *
 * L'elenco dei tag è esplicito di proposito: i componenti del plugin sono
 * anch'essi figli diretti e devono restare a tutta larghezza.
 */
/*
 * La catena di :not() non è decorativa: Twenty Twenty vincola questi elementi
 * con `.entry-content > *:not(.alignwide)…`, che vale sei classi. Per riportarli
 * in colonna serve almeno lo stesso peso, altrimenti restano a tutta larghezza.
 * `:is()` tiene i selettori leggibili senza ripetere la catena dieci volte.
 */
.dg-entry-content > :is(p, h1, h2, h3, h4, ul, ol, blockquote, table, figure):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	/* Colonna di lettura: 1200px sarebbe una riga troppo lunga da seguire. */
	max-width: 1400px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

#respond {
	display: none !important;
}

.dg-entry-content.entry-content > h1,
.dg-entry-content.entry-content > h2,
.dg-entry-content.entry-content > h3,
.dg-entry-content.entry-content > h4 {
	font-family: var(--dg-font-heading);
	font-weight: 400;
	line-height: 1.2;
	color: var(--dg-color-text);
}

.dg-entry-content.entry-content > h1 {
	margin: 0 0 24px;
	font-size: 40px;
	line-height: 1.15;
}

/* Lo stacco sopra è quello che separa due discorsi: va più del doppio di sotto. */
.dg-entry-content.entry-content > h2 {
	margin: 56px 0 16px;
	font-size: 33px;
}

.dg-entry-content.entry-content > h3 {
	margin: 40px 0 12px;
	font-size: 24px;
}

.dg-entry-content.entry-content > h4 {
	margin: 32px 0 12px;
	font-size: 20px;
}

.dg-entry-content.entry-content > p,
.dg-entry-content.entry-content > ul,
.dg-entry-content.entry-content > ol {
	margin: 0 0 20px;
	font-family: var(--dg-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dg-grey);
}

/* Su desktop serve solo lo spazio per i segni di elenco: niente gutter. */
.dg-entry-content.entry-content > ul,
.dg-entry-content.entry-content > ol {
	padding-left: 20px;
}

.dg-entry-content.entry-content li {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.7;
}

.dg-entry-content.entry-content > p a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Il primo e l'ultimo blocco non staccano dai componenti sopra e sotto. */
.dg-entry-content.entry-content > *:first-child {
	margin-top: 0;
}

.dg-entry-content.entry-content > *:last-child {
	margin-bottom: 0;
}

/*
 * Sotto la soglia desktop il contenuto arriva ai bordi dello schermo: qui
 * rientra il gutter, che su desktop era superfluo perché la colonna è già
 * centrata dentro `max-width: 1400px`.
 */
@media (max-width: 900px) {
	.dg-entry-content > :is(p, h1, h2, h3, h4, ul, ol, blockquote, table, figure):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
		padding-left: var(--dg-gutter);
		padding-right: var(--dg-gutter);
	}

	.dg-entry-content.entry-content > ul,
	.dg-entry-content.entry-content > ol {
		padding-left: calc(var(--dg-gutter) + 20px);
	}
}

@media (max-width: 600px) {
	.dg-entry-content.entry-content > h1 {
		font-size: 32px;
	}

	.dg-entry-content.entry-content > h2 {
		margin-top: 40px;
		font-size: 26px;
	}

	.dg-entry-content.entry-content > h3 {
		font-size: 20px;
	}
}

.dg-page {
	margin: 0;
	padding: 0;
}

.dg-main {
	overflow: clip;
}

/* ---------- Header ---------- */

.dg-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--dg-black);
	color: var(--dg-white);
	font-family: var(--dg-font-body);
	font-size: 16px;
	text-decoration: none;
	transform: translateY(-120%);
}

.dg-skip-link:focus {
	transform: translateY(0);
}

/*
 * Twenty Twenty stila #site-header con specificità ID (background, padding,
 * bordi): come per il footer, per vincere serve agganciare anche l'id.
 */
#site-header.dg-header {
	position: relative;
	z-index: 20;
	padding: 0;
	border: 0;
	background: var(--dg-color-bg);
}

.dg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding: 20px var(--dg-gutter);
	box-sizing: border-box;
}

/* ---------- Logo ---------- */

.dg-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* Assorbe lo spazio libero: menu, lingua e toggle restano a destra. */
	margin-inline-end: auto;
	max-width: 200px;
	text-decoration: none;
	color: var(--dg-color-text);
}

.dg-header__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 52px;
	height: auto;
}

.dg-header__title {
	font-family: var(--dg-font-heading);
	font-size: 20px;
	line-height: 1.2;
}

/* ---------- Menu ---------- */

.dg-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-header__menu li {
	margin: 0;
}

.dg-header__menu a {
	position: relative;
	display: inline-block;
	padding-block: 6px;
	font-family: var(--dg-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--dg-color-text);
	text-decoration: none;
}

/*
 * La linea si disegna da sinistra verso destra all'ingresso e si ritira
 * nella stessa direzione all'uscita: l'origine passa da left a right,
 * così l'animazione non torna mai indietro.
 */
.dg-header__menu a::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: var(--dg-color-accent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.dg-header__menu a:hover::after,
.dg-header__menu a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.dg-header__menu a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* La voce della pagina corrente tiene la linea sempre visibile. */
.dg-header__menu .current-menu-item > a::after,
.dg-header__menu .current-menu-ancestor > a::after,
.dg-header__menu .current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* ---------- Sottomenu ---------- */

/* Il dropdown si posiziona rispetto alla voce di primo livello. */
.dg-header__menu > li {
	position: relative;
}

/*
 * Il chevron sta sul link e non sul li: ::after è già occupato dall'underline
 * scorrevole, quindi resta ::before, posizionato a destra del testo invece
 * che nel flusso (dove precederebbe l'etichetta).
 */
.dg-header__menu > .menu-item-has-children > a {
	padding-right: 18px;
}

.dg-header__menu > .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	transition: transform .24s ease;
}

.dg-header__menu > .menu-item-has-children:hover > a::before,
.dg-header__menu > .menu-item-has-children:focus-within > a::before {
	transform: translateY(-25%) rotate(-135deg);
}

.dg-header__submenu {
	position: absolute;
	inset: 100% auto auto 0;
	z-index: 1;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--dg-color-bg);
	border: 1px solid var(--dg-color-border);
	box-shadow: 0 16px 32px rgba(29, 29, 27, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/*
 * Il puntatore attraversa lo stacco fra voce e pannello: senza questo ponte
 * il dropdown si chiuderebbe a metà strada.
 */
.dg-header__menu > li > .dg-header__submenu::before {
	content: "";
	position: absolute;
	inset: -21px 0 auto 0;
	height: 21px;
}

.dg-header__menu > li:hover > .dg-header__submenu,
.dg-header__menu > li:focus-within > .dg-header__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dg-header__submenu a {
	display: block;
	padding: 8px 20px;
	font-weight: 500;
	white-space: nowrap;
}

/* Nel pannello l'underline scorrevole non serve: basta lo sfondo. */
.dg-header__submenu a::after {
	content: none;
}

.dg-header__submenu a:hover,
.dg-header__submenu a:focus-visible {
	background: var(--dg-color-border);
}

/* ---------- Bottone mobile ---------- */

/*
 * Su desktop il dropdown si apre da solo con hover e focus-within: il
 * bottone serve solo al pannello mobile, dove non esiste il puntatore.
 */
/* ---------- Selettore di lingua ---------- */

.dg-header__lang {
	flex: 0 0 auto;
}

.dg-header__lang-list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-header__lang-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Il separatore fra le sigle: una barretta sottile fra una voce e l'altra. */
.dg-header__lang-item + .dg-header__lang-item::before {
	content: "";
	width: 1px;
	height: 14px;
	background: var(--dg-color-border);
}

/*
 * In elenco c'è solo la lingua verso cui si può passare: è un'azione, non
 * un'etichetta di stato, quindi va leggibile quanto una voce di menu.
 */
.dg-header__lang-item a {
	font-family: var(--dg-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .03em;
	color: var(--dg-color-text);
	text-decoration: none;
	transition: color .2s ease;
}

.dg-header__lang-item a:hover,
.dg-header__lang-item a:focus-visible {
	color: var(--dg-color-accent);
}

.dg-header__sub-toggle {
	display: none;
}


.dg-header__toggle {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dg-color-text);
	cursor: pointer;
}

.dg-header__toggle-bars,
.dg-header__toggle-bars::before,
.dg-header__toggle-bars::after {
	position: absolute;
	left: 50%;
	width: 24px;
	height: 2px;
	background: currentColor;
	transform: translateX(-50%);
	transition: transform .24s ease, opacity .24s ease;
}

.dg-header__toggle-bars {
	top: 50%;
	transform: translate(-50%, -50%);
}

.dg-header__toggle-bars::before,
.dg-header__toggle-bars::after {
	content: "";
	left: 0;
	transform: none;
}

.dg-header__toggle-bars::before {
	top: -7px;
}

.dg-header__toggle-bars::after {
	top: 7px;
}

.is-open .dg-header__toggle-bars {
	background: transparent;
}

.is-open .dg-header__toggle-bars::before {
	transform: translateY(7px) rotate(45deg);
}

.is-open .dg-header__toggle-bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.dg-header__menu a::after,
	.dg-header__menu > .menu-item-has-children > a::before,
	.dg-header__submenu,
	.dg-header__toggle-bars,
	.dg-header__toggle-bars::before,
	.dg-header__toggle-bars::after {
		transition: none;
	}
}

/* ---------- Vista mobile ---------- */

@media (max-width: 900px) {
	.dg-header__toggle {
		position: relative;
		display: block;
	}

	.dg-header__nav {
		position: absolute;
		inset: 100% 0 auto 0;
		display: none;
		padding: 8px var(--dg-gutter) 24px;
		background: var(--dg-color-bg);
		border-bottom: 1px solid var(--dg-color-border);
		box-shadow: 0 16px 32px rgba(29, 29, 27, .08);
	}

	.dg-header.is-open .dg-header__nav {
		display: block;
	}

	.dg-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.dg-header__menu a {
		display: block;
		padding-block: 14px;
		font-size: 18px;
		border-bottom: 1px solid var(--dg-color-border);
	}

	/* Sul pannello la linea partirebbe da bordo a bordo: la teniamo corta. */
	.dg-header__menu a::after {
		inset: auto auto -1px 0;
		width: 48px;
	}

	/*
	 * La voce con figli mette link e bottone sulla stessa riga; il sottomenu
	 * va a capo occupando tutta la larghezza del pannello.
	 */
	.dg-header__menu > li {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.dg-header__menu > li > a {
		flex: 1 1 auto;
	}

	/* Qui il chevron ce l'ha già il bottone: sul link sarebbe un doppione. */
	.dg-header__menu > .menu-item-has-children > a {
		padding-right: 0;
	}

	.dg-header__menu > .menu-item-has-children > a::before {
		content: none;
	}

	.dg-header__sub-toggle {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 48px;
		padding: 0;
		border: 0;
		border-bottom: 1px solid var(--dg-color-border);
		border-radius: 0;
		background: none;
		color: var(--dg-color-text);
		cursor: pointer;
	}

	.dg-header__sub-toggle::before {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform .24s ease;
	}

	.dg-header__sub-toggle[aria-expanded="true"]::before {
		transform: translateY(2px) rotate(-135deg);
	}

	/* Nel pannello il dropdown torna in flusso: niente overlay, è un accordion. */
	.dg-header__submenu {
		position: static;
		flex: 0 0 100%;
		display: none;
		min-width: 0;
		padding: 0 0 0 20px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	/* Senza dropdown fluttuante il ponte del puntatore coprirebbe i link. */
	.dg-header__menu > li > .dg-header__submenu::before {
		content: none;
	}

	/*
	 * Su mobile comanda solo il bottone: hover e focus-within aprirebbero
	 * il pannello al primo tap o tabulazione.
	 */
	.dg-header__menu > li:hover > .dg-header__submenu,
	.dg-header__menu > li:focus-within > .dg-header__submenu {
		display: none;
	}

	.dg-header__menu > li.is-sub-open > .dg-header__submenu,
	.dg-header__menu > li.is-sub-open:hover > .dg-header__submenu,
	.dg-header__menu > li.is-sub-open:focus-within > .dg-header__submenu {
		display: block;
	}

	.dg-header__submenu a {
		padding: 12px 0;
		font-size: 16px;
		white-space: normal;
	}

	.dg-header__submenu a:hover,
	.dg-header__submenu a:focus-visible {
		background: none;
	}

	body.dg-nav-open {
		overflow: hidden;
	}
}

/*
 * Il chevron del bottone nasce dentro la vista mobile, quindi il blocco
 * reduced-motion generale più sopra non basta a spegnerne la rotazione.
 */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.dg-header__sub-toggle::before {
		transition: none;
	}
}

/*
 * L'hero dell'articolo è il componente `.dg-hero` del plugin, come su pagine e
 * pagina blog: lo stile sta in `dg-pagine/assets/shortcodes.css` e qui non va
 * duplicato, altrimenti le tre fasce ricominciano a divergere.
 */

/* ---------- Articolo: titolo ---------- */

.dg-post-head__inner {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding: 170px var(--dg-gutter) 0;
	box-sizing: border-box;
}

.dg-post-head__meta {
	margin: 0 0 16px;
	font-family: var(--dg-font-body);
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dg-color-muted);
}

.dg-post-head__title {
	margin: 0;
	max-width: 24ch;
	font-family: var(--dg-font-heading);
	font-size: clamp(32px, 4.5vw, 50px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--dg-color-text);
}

/* ---------- Articolo: testo ---------- */

/*
 * Stesso canvas delle pagine, ma senza i 170px di stacco: lì servono a
 * separare i componenti di layout, qui sopra c'è già il titolo.
 */
.dg-entry-content--post {
	padding: 40px 0 96px;
}

@media (max-width: 900px) {
	.dg-post-head__inner {
		padding-top: 48px;
	}

	.dg-entry-content--post {
		padding: 32px 0 72px;
	}
}

@media (max-width: 600px) {
	.dg-post-head__inner {
		padding-top: 32px;
	}

	.dg-entry-content--post {
		padding: 24px 0 56px;
	}
}

/* ---------- Articolo: allegati ---------- */

/*
 * Stessa colonna da 1400px del titolo e del testo, così gli allegati restano
 * allineati al resto dell'articolo.
 */

.dg-post-allegati {
	padding: 0 0 170px 0; 
}
 
.dg-post-allegati__inner {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding: 0 var(--dg-gutter) 96px;
	box-sizing: border-box;
}

.dg-post-allegati__title {
	margin: 0 0 24px;
	font-family: var(--dg-font-heading);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 400;
	color: var(--dg-color-text);
}

.dg-post-allegati__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dg-post-allegati__item {
	margin: 0;	
}

.dg-post-allegati__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid var(--dg-color-border, rgba(0, 0, 0, .12));
	background: var(--dg-light);
	border-radius: 8px;
	text-decoration: none;
	color: var(--dg-color-text);
	transition: border-color .2s ease, background-color .2s ease;
}

.dg-post-allegati__link:hover,
.dg-post-allegati__link:focus-visible {
	border-color: var(--dg-color-text);
	background-color: rgba(0, 0, 0, .03);
}

.dg-post-allegati__ext {
	flex: 0 0 auto;
	min-width: 48px;
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--dg-teal);
	color: #fff;
	font-family: var(--dg-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: center;
}

/*
 * `min-width: 0` è quel che rende davvero restringibile la voce: di default un
 * elemento flex non scende sotto la larghezza del proprio contenuto, e un nome
 * file lungo — che è una parola sola, senza spazi — manderebbe la riga oltre lo
 * schermo portandosi dietro tutta la pagina in scroll orizzontale.
 */
.dg-post-allegati__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--dg-font-body);
	font-size: 16px;
}

.dg-post-allegati__size {
	flex: 0 0 auto;
	font-family: var(--dg-font-body);
	font-size: 14px;
	color: var(--dg-color-muted);
}

@media (max-width: 900px) {
	/* Stessa scala dei componenti del plugin, che qui scendono a 96px. */
	.dg-post-allegati {
		padding-bottom: 96px;
	}
}

@media (max-width: 600px) {
	.dg-post-allegati {
		padding-bottom: 64px;
	}

	.dg-post-allegati__inner {
		padding-bottom: 56px;
	}

	.dg-post-allegati__link {
		gap: 12px;
		padding: 14px 16px;
	}
}

/* ---------- Pagina blog: intestazione ---------- */

.dg-blog-intro__inner,
.dg-blog-list__inner {
	width: 100%;
	max-width: var(--dg-container);
	margin-inline: auto;
	padding-inline: var(--dg-gutter);
	box-sizing: border-box;
}

/*
 * Anche qui l'hero è il `.dg-hero` del plugin: nessuno stile locale, vedi la
 * nota nella sezione dell'articolo.
 */

/* ---------- Pagina blog: titolo e descrizione ---------- */

/*
 * Apertura della griglia: sta fuori dall'intestazione, quindi il testo è
 * sempre su fondo chiaro e non serve nessuna variante per la foto.
 */
.dg-blog-intro__inner {
	padding: 170px 40px;
}

.dg-blog-intro__title {
	margin: 0;
	max-width: 24ch;
	font-family: var(--dg-font-heading);
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--dg-color-text);
}

.dg-blog-intro__desc {
	margin: 24px 0 0;
	max-width: 46ch;
	font-family: var(--dg-font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--dg-color-muted);
}
/* */


/* ---------- Pagina blog: intestazione su due colonne ---------- */

/*
 * A sinistra l'apertura della griglia, a destra l'iscrizione alla newsletter.
 * `minmax(0, …)` e non `1.2fr 1fr` secco: senza il minimo a zero una riga
 * lunga dentro il form — un messaggio di errore, un'etichetta — allargherebbe
 * la colonna oltre la frazione dichiarata.
 */
.dg-blog-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

/*
 * I limiti in ch servivano quando il testo prendeva tutta la pagina: dentro
 * la colonna la riga è già corta e il cap lascerebbe solo un vuoto a destra.
 */
.dg-blog-intro__text .dg-blog-intro__title,
.dg-blog-intro__text .dg-blog-intro__desc {
	max-width: none;
}

/* ---------- Pagina blog: box newsletter ---------- */

/*
 * Contact Form 7 manda a capo ogni riga con un <p>: i margini del tema padre
 * ne farebbero un blocco di testo invece che un modulo.
 */
.dg-blog-intro__form .wpcf7-form p {
	margin: 0 0 16px;
	font-family: var(--dg-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--dg-color-muted);
}

.dg-blog-intro__form .wpcf7-form p:last-of-type {
	margin-bottom: 0;
}

.dg-blog-intro__form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

/*
 * 16px non è una scelta tipografica: sotto quella soglia Safari su iOS
 * ingrandisce la pagina al primo tocco sul campo.
 */
.dg-blog-intro__form input[type="text"],
.dg-blog-intro__form input[type="email"],
.dg-blog-intro__form input[type="tel"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dg-color-border);
	border-radius: var(--dg-radius);
	background: var(--dg-light);
	font-family: var(--dg-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--dg-gray);
	box-sizing: border-box;
}

.dg-blog-intro__form input:focus-visible {
	outline: 2px solid var(--dg-color-accent);
	outline-offset: 2px;
}

/* Il consenso privacy: casella e testo sulla stessa riga, testo che va a capo. */
.dg-blog-intro__form .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.dg-blog-intro__form .wpcf7-list-item-label {
	font-size: 14px;
	line-height: 1.5;
}

/*
 * Due classi + attributo battono `body input[type="submit"]` del tema padre,
 * che qui imposterebbe famiglia, bordo e sfondo suoi.
 */
.dg-blog-intro__form input[type="submit"] {
	width: 100%;
	margin-top: 8px;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--dg-color-accent);
	color: var(--dg-color-on-accent);
	font-family: var(--dg-font-heading);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background-color .2s ease;
}

.dg-blog-intro__form input[type="submit"]:hover,
.dg-blog-intro__form input[type="submit"]:focus-visible {
	background: var(--dg-color-text);
	color: var(--dg-color-bg);
}

/* Esiti e validazione: CF7 li stampa fuori dai <p>, il margine se lo danno qui. */
.dg-blog-intro__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--dg-radius);
	font-family: var(--dg-font-body);
	font-size: 15px;
	line-height: 1.5;
}

.dg-blog-intro__form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-family: var(--dg-font-body);
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.dg-blog-intro__form input[type="submit"] {
		transition: none;
	}
}

@media (max-width: 900px) {
	/* …già presente: .dg-blog-intro__inner { padding-block: 56px 32px; } */
	.dg-blog-intro__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 600px) {
	/* …già presente: .dg-blog-intro__inner { padding-block: 40px 24px; } */
	.dg-blog-intro__form {
		padding: 0 0 170px 0;
	}
}

/* */

/* ---------- Pagina blog: griglia ---------- */

.dg-blog-list__inner {
	padding-bottom: 96px;
}

.dg-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le card si allungano fino all'altezza della riga, come nel carosello. */
.dg-blog-grid__item {
	display: flex;
	margin: 0;
}

.dg-blog-list__empty {
	margin: 0;
	font-family: var(--dg-font-body);
	color: var(--dg-color-muted);
}

/* ---------- Pagina blog: paginazione ---------- */

/*
 * `the_posts_pagination( array( 'class' => … ) )` sostituisce la classe
 * `pagination` invece di affiancarla: il nav esce come `navigation
 * dg-blog-pagination`, quindi non c'è nessun `.pagination` da agganciare.
 * Il rovescio della medaglia è che gli stili del padre legati a quella classe
 * non si applicano più, e qui va ricostruito tutto.
 */
.dg-blog-pagination {
	max-width: none;
	margin: 56px 0 0;
	padding: 0;
	border: 0;
}

.dg-blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/*
 * Questa del padre invece ci colpisce, perché non è sotto `.pagination`:
 * i suoi margini si sommerebbero al gap.
 */
.dg-blog-pagination .nav-links > * {
	margin: 0;
}

.dg-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--dg-color-border);
	border-radius: 999px;
	font-family: var(--dg-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--dg-color-text);
	text-decoration: none;
	box-sizing: border-box;
}

.dg-blog-pagination .page-numbers:hover {
	border-color: var(--dg-color-text);
}

.dg-blog-pagination .page-numbers.current {
	border-color: var(--dg-color-text);
	background: var(--dg-color-text);
	color: var(--dg-color-bg);
}

/* I puntini di stacco non sono un bersaglio: niente pillola attorno. */
.dg-blog-pagination .page-numbers.dots {
	min-width: 0;
	padding-inline: 4px;
	border: 0;
}

@media (max-width: 900px) {
	.dg-blog-intro__inner {
		padding-block: 56px 32px;
	}

	.dg-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.dg-blog-intro__inner {
		padding-block: 40px 24px;
	}

	.dg-blog-grid {
		grid-template-columns: 1fr;
	}

	.dg-blog-list__inner {
		padding-bottom: 64px;
	}
}

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

/*
 * Twenty Twenty stila #site-footer con specificità ID (background-color: #fff,
 * padding, bordi): per vincere serve agganciare anche l'id.
 */
#site-footer.dg-footer {
	background-color: var(--dg-black);
	color: var(--dg-white);
	border: 0;
	padding: 0;
	font-size: 16px;
}

#site-footer.dg-footer a {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

#site-footer.dg-footer a:hover,
#site-footer.dg-footer a:focus-visible {
	color: var(--dg-teal);
}

#site-footer.dg-footer a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dg-footer__inner {
	display: grid;
	grid-template-columns: 2.2fr 1.4fr 1fr 1.2fr;
	gap: 48px;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding: 72px var(--dg-gutter);
	box-sizing: border-box;
}

.dg-footer__logo {
	display: inline-block;
	max-width: 220px;
}

.dg-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.dg-footer__desc {
	margin: 20px 0 0;
	max-width: 42ch;
	font-family: var(--dg-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .72);
}

.dg-footer__social {
	display: flex;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.dg-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 50%;
}

.dg-footer__social a:hover,
.dg-footer__social a:focus-visible {
	border-color: var(--dg-teal);
}

.dg-footer__heading {
	margin: 0 0 16px;
	font-family: var(--dg-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dg-teal);
}

.dg-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-footer__list li {
	margin: 0 0 10px;
	font-family: var(--dg-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

.dg-footer__list li:last-child {
	margin-bottom: 0;
}

/* ---------- Barra inferiore ---------- */

.dg-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.dg-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	width: 100%;
	max-width: var(--dg-container);
	margin-inline: auto;
	padding: 24px var(--dg-gutter);
	box-sizing: border-box;
}

.dg-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	font-family: var(--dg-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .6);
}

.dg-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--dg-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .6);
}

@media (prefers-reduced-motion: reduce) {
	#site-footer.dg-footer a {
		transition: none;
	}
}

@media (max-width: 1000px) {
	.dg-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.dg-footer__col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.dg-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		/* Su una colonna il footer è già alto: lo stacco verticale cala. */
		padding: 56px var(--dg-gutter);
	}

	.dg-footer__bottom-inner {
		justify-content: flex-start;
	}
}

/* Colonna 4: logo secondario allineato a destra sul desktop. */
.dg-footer__col--aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.dg-footer__logo--secondary {
	display: inline-block;
	max-width: 150px;
}

.dg-footer__col--aside .dg-footer__desc {
	margin-top: 0;
	font-size: 15px;
}

.dg-footer__social li {
	margin: 0;
}

/* ---------- Parole lunghe su schermi stretti ---------- */

/*
 * Stessa protezione che il plugin applica ai titoli dei suoi componenti: su
 * 375px una parola sola e lunga — un nome composto, un URL incollato nel
 * titolo — non ha dove andare a capo e spinge l'intera pagina in scroll
 * orizzontale. I titoli del tema erano rimasti scoperti.
 */
@media (max-width: 600px) {
	.dg-blog-intro__title,
	.dg-blog-intro__desc,
	.dg-post-head__title,
	.dg-post-allegati__title,
	.dg-blog-list__empty {
		overflow-wrap: break-word;
	}
}