/*
Theme Name: Franca Fabrizio
Theme URI: https://www.digival.it
Author: Digival
Author URI: https://www.digival.it
Description: Sito di Franca Fabrizio, pittrice contemporanea ad Aosta. Tema classico DIGIVAL: layout in PHP, contenuti da ACF, stile con i token --dg-*.
Version: 1.7.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: digival
License: Proprietario
*/

/* ==========================================================================
   Direzione: materiali/direzione.md (bozza "indice").
   Solo token --dg-* (Digival Tools -> Design system). Tutto Raleway:
   titoli a 300, sottotitoli e testo a 400, 600 solo per il grassetto nei testi.
   ========================================================================== */

/* ---------- Tema chiaro e scuro ----------
   I ruoli semantici prendono un gradino delle scale esistenti per ciascun tema.
   Alla prima visita decide il dispositivo; la scelta fatta con lo switch sta in
   data-tema su <html> (impostato prima del disegno da uno script in <head>).
   Senza light-dark() restano i valori chiari di dg-variables.css. */
:root { color-scheme: light dark; }
:root[data-tema="chiaro"] { color-scheme: light; }
:root[data-tema="scuro"] { color-scheme: dark; }

@supports (color: light-dark(#000, #fff)) {
	:root {
		--dg-body-bg: light-dark(var(--dg-white), var(--dg-neutral-900));
		--dg-body-color: light-dark(var(--dg-neutral-900), var(--dg-neutral-100));
		--dg-emphasis-color: light-dark(var(--dg-neutral-900), var(--dg-neutral-50));
		--dg-heading-color: light-dark(var(--dg-neutral-900), var(--dg-neutral-50));
		--dg-body-secondary-color: light-dark(var(--dg-neutral-600), var(--dg-neutral-300));
		/* Scuro: neutral-400 su neutral-900 fa 4,06:1, sotto il 4,5:1 del testo piccolo. */
		--dg-body-tertiary-color: light-dark(var(--dg-neutral-500), var(--dg-neutral-300));
		--dg-body-secondary-bg: light-dark(var(--dg-neutral-100), var(--dg-neutral-800));
		--dg-body-tertiary-bg: light-dark(var(--dg-neutral-50), var(--dg-neutral-800));
		--dg-border-color: light-dark(var(--dg-neutral-200), var(--dg-neutral-700));
		--dg-link-color: light-dark(var(--dg-primary-600), var(--dg-primary-300));
		--dg-link-hover-color: light-dark(var(--dg-primary-700), var(--dg-primary-200));
	}
}
/* Ruoli del progetto: prima il valore chiaro, poi la coppia chiaro/scuro. */
:root {
	--dg-accento: var(--dg-primary-500);
	--dg-fascia-bg: var(--dg-primary-900);
	--dg-fascia-etichetta: var(--dg-primary-300);
	--dg-fascia-filetto: var(--dg-primary-700);
}
@supports (color: light-dark(#000, #fff)) {
	:root {
		--dg-accento: light-dark(var(--dg-primary-500), var(--dg-primary-400));
		--dg-fascia-bg: light-dark(var(--dg-primary-900), var(--dg-primary-700));
		--dg-fascia-etichetta: light-dark(var(--dg-primary-300), var(--dg-primary-200));
		--dg-fascia-filetto: light-dark(var(--dg-primary-700), var(--dg-primary-600));
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--dg-font-body);
	font-size: var(--dg-font-size-base);
	font-weight: var(--dg-fw-normal);
	line-height: var(--dg-lh-base);
	color: var(--dg-body-color);
	background-color: var(--dg-body-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--dg-space-3);
	font-family: var(--dg-font-heading);
	font-weight: var(--dg-fw-normal);
	line-height: var(--dg-lh-sm);
	letter-spacing: -.005em;
	color: var(--dg-heading-color);
}
h1, h2 { font-weight: var(--dg-fw-light); letter-spacing: -.02em; }

p, ul, ol, dl, blockquote, figure, table { margin: 0 0 var(--dg-space-3); }
strong, b { font-weight: var(--dg-fw-semibold); }

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

a { color: var(--dg-link-color); text-underline-offset: .15em; }
a:hover { color: var(--dg-link-hover-color); }

/* Focus da tastiera ben visibile (WCAG 2.4.7 / 2.4.11): linea piena nel colore
   dei link, che cambia con il tema. Il token --dg-focus-ring-color (alone al 25%)
   resta per .focus-ring del framework, ma da solo qui non arriva a 3:1. */
/* "body" per vincere sulla regola :focus-visible del framework, caricato dopo. */
body :focus-visible {
	outline: calc(var(--dg-border-width) * 2) solid var(--dg-link-color);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed !important;
	top: var(--dg-space-2); left: var(--dg-space-2);
	z-index: var(--dg-z-toast);
	width: auto; height: auto;
	padding: var(--dg-space-2) var(--dg-space-3);
	clip: auto;
	color: var(--dg-primary-50);
	background: var(--dg-primary-600);
}

/* ==========================================================================
   Struttura e griglia a sei colonne
   ========================================================================== */

.dg-site { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.dg-main { flex: 1 0 auto; }

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

/* Elemento distintivo: le colonne della griglia, disegnate sul fondo. */
.dg-griglia { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.dg-griglia__colonne { display: grid; grid-template-columns: repeat(2, 1fr); height: 100%; }
.dg-griglia__colonne span { border-left: var(--dg-border-width) solid var(--dg-border-color); opacity: .6; }
.dg-griglia__colonne span:last-child { border-right: var(--dg-border-width) solid var(--dg-border-color); }
/* 2 colonne sotto 768px, 4 da 768 a 991, 6 da 992: linee e contenuti cambiano insieme. */
.dg-griglia__colonne span:nth-child(n+3) { display: none; }
@media (min-width: 768px) {
	.dg-griglia__colonne { grid-template-columns: repeat(4, 1fr); }
	.dg-griglia__colonne span:nth-child(-n+4) { display: block; }
}
@media (min-width: 992px) {
	.dg-griglia__colonne { grid-template-columns: repeat(6, 1fr); }
	.dg-griglia__colonne span:nth-child(n+3) { display: block; }
}
/* L'ultima linea visibile chiude la griglia sul lato destro. */
@media (max-width: 767.98px) { .dg-griglia__colonne span:nth-child(2) { border-right: var(--dg-border-width) solid var(--dg-border-color); } }
@media (min-width: 768px) and (max-width: 991.98px) { .dg-griglia__colonne span:nth-child(4) { border-right: var(--dg-border-width) solid var(--dg-border-color); } }

/* Contenuto allineato alle colonne: .dg-sei dentro .dg-wrap. */
.dg-sei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dg-sei > * { min-width: 0; padding-inline: var(--dg-space-3); }
@media (min-width: 768px) { .dg-sei { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .dg-sei { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* .dg-wrap--sei ha lo stesso margine del contenitore della griglia di fondo:
   cosi' colonne e filetti coincidono con le linee verticali. */

.dg-section { padding-block: var(--dg-ss-lg) 0; }
.dg-section--stretta { padding-top: var(--dg-ss-md); }

/* Testata delle pagine interne e degli archivi: link di risalita, titolo
   grande, testo introduttivo, dato piccolo. */
.dg-testa-pagina { padding-top: var(--dg-ss-md); }
.dg-testa-pagina__testo { grid-column: 1 / -1; }
@media (min-width: 992px) { .dg-testa-pagina__testo { grid-column: 1 / 5; } }
.dg-testa-pagina__su { display: inline-flex; align-items: center; gap: var(--dg-space-2); margin-bottom: var(--dg-space-4); color: var(--dg-link-color); text-decoration: none; }
.dg-testa-pagina__su svg { width: 1rem; height: 1rem; }
.dg-testa-pagina__su:hover { color: var(--dg-link-hover-color); }
.dg-testa-pagina__filtro { grid-column: 1 / -1; margin-top: var(--dg-space-5); }

/* Filtro per serie: badge in riga; quello della pagina corrente pieno scuro. */
.dg-filtro__lista { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); list-style: none; margin: 0; padding: 0; }
/* .dg-badge e' definito piu' sotto: doppia classe per vincere comunque. */
.dg-badge.dg-badge--attivo, a.dg-badge.dg-badge--attivo:hover { color: var(--dg-body-bg); background: var(--dg-heading-color); border-color: var(--dg-heading-color); }

/* Paginazione degli archivi: sulle colonne, numeri e frecce con filetti sottili. */
.dg-paginazione { grid-column: 1 / -1; }
.dg-paginazione .nav-links { margin-top: var(--dg-space-6); padding-top: var(--dg-space-4); border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-paginazione .page-numbers { color: var(--dg-body-color); }
.dg-paginazione a.page-numbers:hover { color: var(--dg-link-color); border-color: var(--dg-link-color); }
.dg-paginazione .page-numbers svg { width: 1.1rem; height: 1.1rem; }
.dg-paginazione .page-numbers.dots { border-color: transparent; }
.dg-paginazione .nav-links .page-numbers.current { color: var(--dg-body-bg); background: var(--dg-heading-color); border-color: var(--dg-heading-color); }
.dg-testa-pagina__intro { max-width: 38rem; margin: var(--dg-space-4) 0 var(--dg-space-2); font-size: var(--dg-fs-lg); color: var(--dg-body-color); }

/* Titoli */
.dg-titolo-pagina { margin: 0; font-size: clamp(var(--dg-display-6), 7vw, var(--dg-display-1)); line-height: 1.02; }
.dg-titolo-sezione { margin: 0; font-size: clamp(var(--dg-h1), 5vw, var(--dg-display-3)); line-height: 1.05; }
.dg-titolo-sezione--con-testo { margin-bottom: var(--dg-space-4); }
.dg-sezione__testa { grid-column: 1 / -1; margin-bottom: var(--dg-space-5); }
.dg-piccolo { font-size: var(--dg-fs-sm); color: var(--dg-body-secondary-color); }

/* Link "vai a" con freccia */
.dg-link-freccia { display: inline-flex; align-items: center; gap: var(--dg-space-2); color: var(--dg-link-color); text-decoration: none; }
.dg-link-freccia svg { width: 1.1rem; height: 1.1rem; }
.dg-link-freccia:hover { color: var(--dg-link-hover-color); }

/* Badge: etichetta cliccabile (es. la serie di un'opera). Filetto sottile e
   angoli dritti, come i filetti dell'indice. */
.dg-badge {
	display: inline-flex; align-items: center;
	padding: var(--dg-space-1) var(--dg-space-2);
	font-size: var(--dg-fs-sm); line-height: var(--dg-lh-sm);
	color: var(--dg-body-color); text-decoration: none;
	border: var(--dg-border-width) solid var(--dg-body-tertiary-color);
	transition: color var(--dg-duration-fast) var(--dg-ease-standard), border-color var(--dg-duration-fast) var(--dg-ease-standard);
}
a.dg-badge:hover { color: var(--dg-link-color); border-color: var(--dg-link-color); }
/* Variante piena, chiara nel tema chiaro e scura nel tema scuro. */
.dg-badge--pieno { color: var(--dg-primary-800); background: var(--dg-primary-100); border-color: var(--dg-primary-100); }
@supports (color: light-dark(#000, #fff)) {
	.dg-badge--pieno {
		color: light-dark(var(--dg-primary-800), var(--dg-primary-100));
		background: light-dark(var(--dg-primary-100), var(--dg-primary-800));
		border-color: light-dark(var(--dg-primary-100), var(--dg-primary-800));
	}
}
a.dg-badge--pieno:hover { color: var(--dg-primary-50); background: var(--dg-primary-600); border-color: var(--dg-primary-600); }

/* ---------- Icone (sprite di progetto, inc/icone.php) ---------- */
.dg-icona {
	flex: none;
	width: var(--dg-icona-dimensione);
	height: var(--dg-icona-dimensione);
	fill: none;
	stroke: currentColor;
	/* Lo spessore del tratto vive qui, non nei simboli dello sprite. */
	stroke-width: var(--dg-icona-tratto);
}

/* ---------- Loghi (SVG da Etichette generali) ----------
   Il testo segue il colore del contenitore; i tre cerchi sono i gradini
   500, 400 e 300 del primario, come nel marchio. */
.dg-logo, .dg-logo-nav, .dg-logo-footer { display: flex; flex-flow: column; width: 100%; }
.dg-logo svg, .dg-logo-nav svg, .dg-logo-footer svg { display: block; width: 100%; height: auto; }
.dg-logo svg path, .dg-logo-nav svg path, .dg-logo-footer svg path { fill: currentColor; }
.dg-logo circle:nth-of-type(1), .dg-logo-nav circle:nth-of-type(1), .dg-logo-footer circle:nth-of-type(1) { fill: var(--dg-primary-500); }
.dg-logo circle:nth-of-type(2), .dg-logo-nav circle:nth-of-type(2), .dg-logo-footer circle:nth-of-type(2) { fill: var(--dg-primary-400); }
.dg-logo circle:nth-of-type(3), .dg-logo-nav circle:nth-of-type(3), .dg-logo-footer circle:nth-of-type(3) { fill: var(--dg-primary-300); }

/* ==========================================================================
   Header
   ========================================================================== */

.dg-header { position: relative; z-index: var(--dg-z-sticky); padding-block: var(--dg-space-4); }

/* Header fisso "intelligente" (assets/js/tema.js, classe dg-header-js su <html>):
   in cima alla pagina e' quello di sempre; dopo lo scorrimento diventa compatto,
   con fondo e linee della griglia; scorrendo in giu' si nasconde, in su ricompare.
   Senza JavaScript resta non fisso. */
.dg-header-posto { display: none; }
.dg-header-js .dg-header-posto { display: block; height: var(--dg-header-h, 0px); }
.dg-header-js .dg-header {
	position: fixed; top: 0; left: 0; right: 0;
	transition:
		transform var(--dg-duration-base) var(--dg-ease-standard),
		padding var(--dg-duration-base) var(--dg-ease-standard),
		background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-header-js .dg-header__brand { transition: width var(--dg-duration-base) var(--dg-ease-standard); }
.admin-bar .dg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .dg-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .dg-header { top: 0; } }

/* Compatto: il filetto sotto sta sulle colonne (come tutti i filetti), non da bordo a bordo. */
.dg-header.is-staccato { padding-block: 0; background: var(--dg-body-bg); }
.dg-header.is-staccato .dg-header__inner {
	padding-block: var(--dg-space-2);
	border-bottom: var(--dg-border-width) solid var(--dg-border-color);
}
.dg-header.is-staccato .dg-header__brand { width: 6.5rem; }
/* Con il menu aperto header e pannello sono un foglio unico: niente filetto tra i due. */
.dg-menu-aperto .dg-header.is-staccato .dg-header__inner { border-bottom-color: transparent; }
.dg-header.is-nascosto { transform: translateY(-100%); }
.admin-bar .dg-header.is-nascosto { transform: translateY(calc(-100% - 46px)); }
@media (prefers-reduced-motion: reduce) {
	.dg-header-js .dg-header, .dg-header-js .dg-header__brand { transition: none; }
}
.dg-header__inner { align-items: center; }
.dg-header__brand { display: block; width: 8rem; color: var(--dg-heading-color); text-decoration: none; }
.dg-header__brand-text { font-size: var(--dg-fs-lg); }
.dg-header__strumenti { grid-column: 2 / -1; display: flex; align-items: center; justify-content: flex-end; gap: var(--dg-space-4); }

.dg-nav__menu { list-style: none; margin: 0; padding: 0; }
.dg-nav__menu a { color: var(--dg-body-color); font-size: var(--dg-fs-sm); text-decoration: none; transition: color var(--dg-duration-fast) var(--dg-ease-standard); }
.dg-nav__menu a:hover,
.dg-nav__menu .current-menu-item > a,
.dg-nav__menu .current-menu-ancestor > a,
.dg-nav__menu .current_page_parent > a { color: var(--dg-link-color); }

.dg-nav__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0;
	color: var(--dg-body-color); background: transparent; border: 0; cursor: pointer;
}
.dg-nav__toggle svg { width: 1.75rem; height: 1.75rem; }
.dg-nav__toggle .dg-nav__chiudi { display: none; }
.dg-nav__toggle[aria-expanded="true"] .dg-nav__apri { display: none; }
.dg-nav__toggle[aria-expanded="true"] .dg-nav__chiudi { display: inline; }

/* Linee della griglia dentro header e pannello: stesse colonne della pagina. */
.dg-header__griglia, .dg-nav__griglia { display: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dg-header.is-staccato .dg-header__griglia { display: block; }
.dg-header__griglia .dg-griglia__colonne, .dg-nav__griglia .dg-griglia__colonne { height: 100%; }
.dg-header { isolation: isolate; }

/* Velo sul sito sotto il menu aperto: scuro, trasparente, sfocato. */
.dg-nav__velo {
	position: fixed; inset: 0;
	z-index: calc(var(--dg-z-sticky) - 1);
	background: rgba(var(--dg-black-rgb), .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.dg-nav__velo[hidden] { display: none; }

@media (max-width: 991.98px) {
	.dg-nav { display: none; }
	.dg-nav.is-open {
		display: block;
		position: absolute; top: 100%; left: 0; right: 0;
		z-index: var(--dg-z-dropdown);
		isolation: isolate;
		padding-block: var(--dg-space-4) var(--dg-space-6);
		background: var(--dg-body-bg);
	}
	/* Header e pannello diventano un unico foglio con le linee della griglia. */
	.dg-menu-aperto .dg-header { background: var(--dg-body-bg); }
	.dg-menu-aperto .dg-header__griglia,
	.dg-nav.is-open .dg-nav__griglia { display: block; }
	.dg-nav__menu { display: flex; flex-direction: column; gap: var(--dg-space-2); padding-inline: var(--dg-space-3); }
	.dg-nav__menu a { font-size: var(--dg-h3); font-weight: var(--dg-fw-light); letter-spacing: -.02em; }
	.dg-menu-aperto, .dg-menu-aperto body { overflow: hidden; }
}
@media (min-width: 992px) {
	.dg-nav__toggle { display: none; }
	/* Sul desktop il contenitore del menu non ha margini: e' solo una riga di voci. */
	.dg-nav__wrap { width: auto; max-width: none; margin: 0; padding: 0; }
	.dg-nav__menu { display: flex; gap: var(--dg-space-4); }
	.dg-header__brand { width: 8.5rem; }
	.dg-nav__velo { display: none; }
}

/* Switch chiaro / scuro: l'icona dice il tema in uso. */
.dg-tema {
	display: inline-flex; align-items: center;
	width: 3.25rem; height: 1.75rem; padding: 0 var(--dg-space-1);
	color: var(--dg-body-color); background: transparent;
	border: var(--dg-border-width) solid var(--dg-border-color); border-radius: var(--dg-radius-pill);
	cursor: pointer;
}
/* Icone come blocchi flex: in linea si appoggerebbero alla linea di base e
   starebbero piu' in alto del centro. */
.dg-tema__sole, .dg-tema__luna { display: flex; align-items: center; justify-content: center; }
.dg-tema svg { display: block; width: 1.25rem; height: 1.25rem; }
.dg-tema__luna { display: none; }
:root[data-tema="scuro"] .dg-tema { justify-content: flex-end; }
:root[data-tema="scuro"] .dg-tema__sole { display: none; }
:root[data-tema="scuro"] .dg-tema__luna { display: flex; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="chiaro"]) .dg-tema { justify-content: flex-end; }
	:root:not([data-tema="chiaro"]) .dg-tema__sole { display: none; }
	:root:not([data-tema="chiaro"]) .dg-tema__luna { display: flex; }
}

/* ==========================================================================
   Indice delle serie (template-parts/indice-serie.php): home e pagina serie
   ========================================================================== */
.dg-indice { list-style: none; margin: 0; padding: 0; }
.dg-indice__voce { border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-indice__voce:last-child { border-bottom: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-indice__link { padding-block: var(--dg-space-4); row-gap: var(--dg-space-3); align-items: center; color: inherit; text-decoration: none; }
.dg-indice__nome { grid-column: 1 / -1; margin: 0; font-size: clamp(var(--dg-h3), 3.6vw, var(--dg-display-5)); line-height: 1.1; }
.dg-indice__testo { grid-column: 1 / -1; margin: 0; }
.dg-indice__opere { grid-column: 1 / -1; display: flex; gap: var(--dg-space-2); }
.dg-indice__img { flex: none; width: 5.5rem; height: 5.5rem; object-fit: cover; }
/* 4 colonne: nome e descrizione sulle prime due, miniature sulle altre due. */
@media (min-width: 768px) {
	.dg-indice__nome { grid-column: 1 / 3; grid-row: 1; }
	.dg-indice__testo { grid-column: 1 / 3; grid-row: 2; }
	.dg-indice__opere { grid-column: 3 / 5; grid-row: 1 / 3; justify-content: flex-end; }
}
@media (min-width: 992px) {
	.dg-indice__nome, .dg-indice__testo, .dg-indice__opere { grid-row: auto; }
	.dg-indice__nome { grid-column: 1 / 4; }
	.dg-indice__testo { grid-column: 4 / 5; }
	.dg-indice__opere { grid-column: 5 / 7; justify-content: flex-end; }
}
.dg-indice__link:hover .dg-indice__nome { color: var(--dg-link-color); }
.dg-indice__numero { display: inline-block; margin-top: var(--dg-space-1); color: var(--dg-body-color); }

/* Sui dispositivi senza mouse l'hover non c'e': una freccia a fine riga dice
   che la riga si apre, e al tocco il nome diventa verde e la riga si scurisce. */
.dg-indice__freccia { display: none; }
@media (hover: none) {
	.dg-indice__nome { display: flex; align-items: center; justify-content: space-between; gap: var(--dg-space-3); }
	.dg-indice__freccia { display: inline-flex; flex: none; color: var(--dg-link-color); }
	.dg-indice__freccia svg { width: 1.5rem; height: 1.5rem; }
	.dg-indice__link { -webkit-tap-highlight-color: transparent; transition: background-color var(--dg-duration-fast) var(--dg-ease-standard); }
	.dg-indice__link:active { background: var(--dg-body-tertiary-bg); }
	.dg-indice__link:active .dg-indice__nome { color: var(--dg-link-color); }
}


/* ==========================================================================
   Video al clic e contenuto precedente/successivo (opere, critiche)
   ========================================================================== */
/* ---------- Video "La tela parlata" della scheda ---------- */
.dg-opera__video-voce { grid-column: 1 / -1; margin-bottom: var(--dg-space-5); }
@media (min-width: 992px) { .dg-opera__video-voce { grid-column: 1 / 5; } }

.dg-video { position: relative; aspect-ratio: 16 / 9; background: var(--dg-body-secondary-bg); }
.dg-video__avvia { position: absolute; inset: 0; display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.dg-video__copertina { display: block; width: 100%; height: 100%; object-fit: cover; }
.dg-video__avvia { overflow: hidden; }

/* Card video "La tela parlata" (template-parts/card-video.php): home e pagina. */
.dg-tela-video { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dg-space-2); }
.dg-tela-video .dg-video { width: 100%; aspect-ratio: 4 / 3; margin-bottom: var(--dg-space-1); }
.dg-tela-video__titolo { margin: 0; font-size: var(--dg-h5); font-weight: var(--dg-fw-normal); letter-spacing: -.005em; line-height: 1.3; }
.dg-tela-video .dg-link-freccia svg { width: 1rem; height: 1rem; }
/* Anteprime 4:3 con bande nere (video 16:9): nei riquadri 4:3 (La tela parlata)
   ingrandite di 4/3 le bande escono; nei riquadri 16:9 le taglia gia' il cover. */
.dg-tela-video .dg-video__copertina--bande { transform: scale(1.34); }
.dg-video__play {
	position: absolute; left: var(--dg-space-3); bottom: var(--dg-space-3);
	display: inline-flex; align-items: center; gap: var(--dg-space-2);
	padding: var(--dg-space-2) var(--dg-space-4);
	font-size: var(--dg-fs-sm); color: var(--dg-white);
	background: rgba(var(--dg-black-rgb), .6);
	border-radius: var(--dg-radius-pill);
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-video__play svg { width: 1rem; height: 1rem; fill: currentColor; }
.dg-video__avvia:hover .dg-video__play { background: var(--dg-primary-700); }
.dg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Opera precedente e successiva ---------- */
.dg-vicine { border-top: var(--dg-border-width) solid var(--dg-heading-color); border-bottom: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-vicine__voce { grid-column: span 1; display: flex; flex-direction: column; gap: var(--dg-space-1); padding-block: var(--dg-space-4); color: inherit; text-decoration: none; }
.dg-vicine__voce--succ { grid-column: 2 / -1; align-items: flex-end; text-align: right; }
@media (min-width: 768px) {
	.dg-vicine__voce--prec { grid-column: 1 / 3; }
	.dg-vicine__voce--succ { grid-column: 3 / -1; }
}
@media (min-width: 992px) {
	.dg-vicine__voce--prec { grid-column: 1 / 4; }
	.dg-vicine__voce--succ { grid-column: 4 / -1; }
}
.dg-vicine__voce .dg-piccolo { display: inline-flex; align-items: center; gap: var(--dg-space-2); }
.dg-vicine__voce svg { width: 1rem; height: 1rem; }
.dg-vicine__titolo { font-size: var(--dg-h4); color: var(--dg-heading-color); }
.dg-vicine__voce:hover .dg-vicine__titolo { color: var(--dg-link-color); }

/* ==========================================================================
   News: card e griglia (home, archivio), dettagli dell'articolo
   ========================================================================== */
.dg-news-griglia { row-gap: var(--dg-space-5); }
.dg-card-news { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--dg-space-2); color: inherit; text-decoration: none; }
@media (min-width: 768px) { .dg-card-news { grid-column: span 2; } }
.dg-card-news__immagine { display: block; aspect-ratio: 4 / 3; margin-bottom: var(--dg-space-1); overflow: hidden; background: var(--dg-body-tertiary-bg); }
.dg-card-news__immagine img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dg-card-news__titolo { margin: 0; font-size: var(--dg-h5); font-weight: var(--dg-fw-normal); letter-spacing: -.005em; line-height: 1.3; color: var(--dg-heading-color); }
/* Nel codice il titolo viene prima della data (nome del link); a vista immagine, data, titolo. */
.dg-card-news__immagine { order: -2; }
.dg-card-news__data { order: -1; }
.dg-card-news:hover .dg-card-news__titolo { color: var(--dg-link-color); }
/* Senza immagine: i tre cerchi del marchio al centro del riquadro. */
.dg-card-news__segno { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--dg-space-2); height: 100%; }
.dg-card-news__segno span { width: 1.25rem; height: 1.25rem; border-radius: var(--dg-radius-circle); background: var(--dg-primary-500); }
.dg-card-news__segno span:nth-child(2) { background: var(--dg-primary-400); }
.dg-card-news__segno span:nth-child(3) { background: var(--dg-primary-300); }
/* In home, sul tablet: due card (la terza andrebbe da sola su una riga). */
@media (min-width: 768px) and (max-width: 991.98px) { .dg-home-news .dg-card-news:nth-of-type(3) { display: none; } }
/* Archivio: l'anno in grande quando cambia. */
.dg-news-griglia__anno { grid-column: 1 / -1; margin: var(--dg-space-4) 0 0; padding-top: var(--dg-space-4); font-size: var(--dg-display-5); font-weight: var(--dg-fw-light); letter-spacing: -.02em; line-height: 1; border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-news-griglia__anno:first-child { margin-top: 0; }
.dg-articolo__data { display: block; margin-bottom: var(--dg-space-2); }
.dg-articolo__immagine { margin: 0 0 var(--dg-space-5); }
.dg-articolo__immagine img { display: block; width: auto; max-width: 100%; height: auto; max-height: 75vh; }
.dg-zoom-apri { display: block; padding: 0; background: none; border: 0; cursor: zoom-in; text-align: left; font: inherit; color: inherit; }

/* ==========================================================================
   Newsletter (in tutte le pagine, prima del footer)
   ========================================================================== */

.dg-newsletter { margin-top: var(--dg-ss-lg); }
.dg-newsletter__inner { padding-block: var(--dg-space-6) 0; row-gap: var(--dg-space-4); border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-newsletter__invito, .dg-newsletter__modulo { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.dg-newsletter__invito { grid-column: 1 / 3; }
	.dg-newsletter__modulo { grid-column: 3 / 5; }
}
@media (min-width: 992px) {
	.dg-newsletter__invito { grid-column: 1 / 4; }
	.dg-newsletter__modulo { grid-column: 4 / 7; }
}
.dg-newsletter__titolo { margin-bottom: var(--dg-space-3); font-size: clamp(var(--dg-h2), 3.6vw, var(--dg-display-5)); line-height: 1.1; }
.dg-newsletter__testo { margin: 0; }

/* Moduli CF7 in tutto il sito: lo stile di base usa --dg-primary-hover e
   --dg-primary-contrast, che in questo design system non esistono (restava il
   blu di riserva). Qui i gradini veri del primario. "body" serve a vincere
   sulla stessa regola del plugin, che si carica dopo il tema. */
body .wpcf7 {
	--dg-cf7-accent: var(--dg-primary-600);
	--dg-cf7-accent-hover: var(--dg-primary-700);
	--dg-cf7-accent-contrast: var(--dg-primary-50);
	--dg-cf7-field-radius: 0;
	--dg-cf7-button-radius: 0;
}
/* Link nei moduli (es. "informativa privacy"): il colore dei link del tema,
   leggibile anche nel tema scuro (il verde 600 dello stile di base li' non basta). */
body .wpcf7 a,
body .wpcf7-form .wpcf7-list-item-label a { color: var(--dg-link-color); }
body .wpcf7 a:hover,
body .wpcf7-form .wpcf7-list-item-label a:hover { color: var(--dg-link-hover-color); }
.wpcf7 .wpcf7-form .wpcf7-submit { text-transform: none; letter-spacing: 0; font-weight: var(--dg-fw-normal); }

/* Il modulo della newsletter: campo e pulsante affiancati su tutta la
   larghezza della colonna. CF7 avvolge etichetta e pulsante in due <p>: sono
   loro gli elementi flex. Il messaggio d'errore esce dal flusso (sotto il
   campo), cosi' non sposta il pulsante; lo spazio lo riserva il contenitore. */
.dg-newsletter .wpcf7 { --dg-cf7-field-border: var(--dg-body-tertiary-color); }
.dg-newsletter .dg-cf7-newsletter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--dg-space-2); margin-bottom: var(--dg-space-3); }
.dg-newsletter .dg-cf7-newsletter > p { position: relative; margin: 0; }
/* Il consenso sta tra campo e pulsante nel codice (chi usa Tab o un lettore di
   schermo lo incontra prima di inviare); a vista va sulla riga sotto. */
.dg-newsletter .dg-cf7-newsletter__consenso { order: 1; flex-basis: 100%; }
.dg-newsletter .dg-cf7-newsletter__consenso .wpcf7-not-valid-tip { position: static; }
.dg-newsletter .dg-cf7-newsletter:has(> p:first-child .wpcf7-not-valid-tip) { row-gap: calc(var(--dg-space-2) + 1.75em); }
/* Il campo prende quasi tutto lo spazio libero; il pulsante, se va a capo,
   si allarga a tutta la riga. */
.dg-newsletter .dg-cf7-newsletter > p:first-child { flex: 999 1 14rem; }
.dg-newsletter .dg-cf7-newsletter > p:last-child { flex: 1 0 auto; }
.dg-newsletter .dg-cf7-newsletter label { display: block; margin: 0; }
.dg-newsletter .dg-cf7-newsletter .wpcf7-form-control-wrap { position: relative; display: block; margin-top: var(--dg-space-2); }
.dg-newsletter .dg-cf7-newsletter .wpcf7-not-valid-tip { position: absolute; top: 100%; left: 0; margin-top: var(--dg-space-1); }
.dg-newsletter .dg-cf7-newsletter .wpcf7-submit { width: 100%; border-radius: 0; }
.dg-newsletter .dg-cf7-newsletter .wpcf7-spinner { position: absolute; top: 50%; right: var(--dg-space-2); margin: 0; translate: 0 -50%; }
@media (min-width: 576px) { .dg-newsletter .dg-cf7-newsletter .wpcf7-submit { padding-inline: var(--dg-space-5); } }
/* Colonna stretta: campo e pulsante uno sotto l'altro, e l'errore torna nel
   flusso tra i due. */
.dg-newsletter .wpcf7 { container-type: inline-size; }
@container (max-width: 24rem) {
	.dg-newsletter .dg-cf7-newsletter > p:first-child { flex-basis: 100%; }
	.dg-newsletter .dg-cf7-newsletter .wpcf7-not-valid-tip { position: static; }
	.dg-newsletter .dg-cf7-newsletter:has(> p:first-child .wpcf7-not-valid-tip) { row-gap: var(--dg-space-2); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.dg-footer {
	margin-top: var(--dg-ss-lg);
	padding-block: var(--dg-space-6) var(--dg-space-4);
	color: var(--dg-primary-50);
	background: var(--dg-fascia-bg);
}
.dg-footer a { color: inherit; text-decoration: none; }
/* Colore esplicito: senza, vince l'a:hover del framework (verde 700 su fondo verde scuro). */
.dg-footer a:hover, .dg-footer a:focus-visible { color: var(--dg-white); text-decoration: underline; }
.dg-footer__col { grid-column: 1 / -1; margin-bottom: var(--dg-space-5); }
@media (min-width: 576px) { .dg-footer__col { grid-column: span 1; } .dg-footer__col--logo { grid-column: 1 / -1; } }
@media (min-width: 768px) { .dg-footer__col--contatti { grid-column: span 2; } }
@media (min-width: 992px) { .dg-footer__col--logo, .dg-footer__col--contatti { grid-column: span 2; } }
.dg-footer__logo { display: block; width: 9rem; color: var(--dg-primary-50); }
.dg-footer__title { margin: 0 0 var(--dg-space-3); font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-normal); letter-spacing: 0; color: var(--dg-fascia-etichetta); }
.dg-footer__list { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
.dg-footer__address { font-style: normal; }
.dg-footer__bottom {
	grid-column: 1 / -1;
	display: flex; flex-wrap: wrap; gap: var(--dg-space-2) var(--dg-space-4);
	padding-top: var(--dg-space-4);
	font-size: var(--dg-fs-sm);
	color: var(--dg-fascia-etichetta);
	border-top: var(--dg-border-width) solid var(--dg-fascia-filetto);
}
.dg-footer__bottom p { margin: 0; }
/* Firma del sito: in fondo alla riga, spinta a destra quando c'e' spazio. */
.dg-footer__bottom .dg-footer__firma { margin-left: auto; }
.dg-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--dg-space-4); list-style: none; margin: 0; padding: 0; }
/* Pulsante delle preferenze cookie: stesso aspetto dei link legali accanto. */
.dg-footer__preferenze { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dg-footer__preferenze:hover, .dg-footer__preferenze:focus-visible { color: var(--dg-white); text-decoration: underline; }

/* ==========================================================================
   Contenuti generici (pagine e articoli: verranno rifiniti con i loro template)
   ========================================================================== */

.dg-page-header { padding-block: var(--dg-ss-md) var(--dg-space-5); }
.dg-page-header__title { margin: 0; font-size: clamp(var(--dg-display-6), 7vw, var(--dg-display-1)); line-height: 1.02; }
.dg-page-header__meta { margin-top: var(--dg-space-2); font-size: var(--dg-fs-sm); color: var(--dg-body-secondary-color); }

.dg-content { max-width: 42rem; }
.dg-content > *:last-child { margin-bottom: 0; }
.dg-content blockquote {
	padding-left: var(--dg-space-4);
	border-left: var(--dg-border-width) solid var(--dg-heading-color);
	font-size: var(--dg-fs-lg);
	font-weight: var(--dg-fw-light);
}
.dg-featured { margin-bottom: var(--dg-space-5); }
.dg-featured img { display: block; width: 100%; }

.dg-cards { display: grid; gap: var(--dg-space-4); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.dg-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--dg-body-bg); border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dg-card__body { display: flex; flex-direction: column; gap: var(--dg-space-2); padding-block: var(--dg-space-3); }
.dg-card__title { margin: 0; font-size: var(--dg-h5); }
.dg-card__title a { color: inherit; text-decoration: none; }
.dg-card__title a::after { content: ""; position: absolute; inset: 0; }
.dg-card__meta { font-size: var(--dg-fs-sm); color: var(--dg-body-secondary-color); }
.dg-card__excerpt > *:last-child { margin-bottom: 0; }

.dg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--dg-space-2);
	padding: var(--dg-space-3) var(--dg-space-5);
	font: inherit;
	line-height: 1;
	/* Fondo 600: il 500 non arriva a 4,5:1 con il testo chiaro. */
	color: var(--dg-primary-50);
	text-decoration: none;
	background: var(--dg-primary-600);
	border: var(--dg-border-width) solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-btn svg { flex: none; width: 1.25em; height: 1.25em; }
.dg-btn:hover { color: var(--dg-primary-50); background: var(--dg-primary-700); }
.dg-btn:active { background: var(--dg-primary-800); }

.nav-links { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin-top: var(--dg-space-5); }
.nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding-inline: var(--dg-space-2);
	text-decoration: none;
	border: var(--dg-border-width) solid var(--dg-border-color);
}
.nav-links .page-numbers.current { color: var(--dg-primary-50); background: var(--dg-primary-600); border-color: var(--dg-primary-600); }

.dg-search { display: flex; gap: var(--dg-space-2); max-width: 32rem; }
.dg-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: var(--dg-space-3);
	font: inherit;
	color: var(--dg-body-color);
	background: var(--dg-body-bg);
	border: var(--dg-border-width) solid var(--dg-border-color);
}

/* Allineamenti dell'editor */
.alignleft { float: left; margin: 0 var(--dg-space-4) var(--dg-space-3) 0; }
.alignright { float: right; margin: 0 0 var(--dg-space-3) var(--dg-space-4); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: var(--dg-fs-sm); color: var(--dg-body-secondary-color); }

/* ---------- Popup avvisi (logica in Digival Tools -> include/popup-avvisi.php) ---------- */
.dg-avviso-popup {
	position: fixed; inset: 0;
	z-index: var(--dg-z-modal);
	display: flex; justify-content: center; align-items: center;
	padding: var(--dg-space-4);
	background-color: rgba(var(--dg-black-rgb), .6);
}
.dg-avviso-popup:not(.is-open) { display: none; }
.dg-avviso-popup__card {
	position: relative;
	width: 100%; max-width: 30rem; max-height: 90vh;
	overflow-y: auto;
	padding: var(--dg-space-5);
	color: var(--dg-body-color);
	background-color: var(--dg-body-bg);
	box-shadow: var(--dg-shadow-xl);
}
.dg-avviso-popup__close {
	position: absolute; top: var(--dg-space-3); right: var(--dg-space-3);
	display: flex; justify-content: center; align-items: center;
	width: 2.4rem; height: 2.4rem;
	padding: 0;
	color: var(--dg-body-color);
	background: transparent;
	border: 0;
	border-radius: var(--dg-radius-circle);
	cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard), color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-avviso-popup__close svg { width: 1.5rem; height: 1.5rem; }
.dg-avviso-popup__close:hover { color: var(--dg-heading-color); background-color: var(--dg-body-secondary-bg); }
.dg-avviso-popup__contenuto { display: flex; flex-flow: column; align-items: center; gap: var(--dg-space-4); width: 100%; text-align: center; }
.dg-avviso-popup__avviso { display: flex; flex-direction: column; align-items: center; gap: var(--dg-space-3); width: 100%; }
.dg-avviso-popup__avviso > * { margin: 0; }

/* ---------- Colonna di lettura (pagina generica, policy) ---------- */
.dg-colonna-lettura { grid-column: 1 / -1; }
@media (min-width: 768px) { .dg-colonna-lettura { grid-column: 1 / 4; } }
@media (min-width: 992px) { .dg-colonna-lettura { grid-column: 1 / 5; } }
.dg-colonna-lettura.dg-content { max-width: 44rem; }
.dg-content h2 { margin: var(--dg-space-6) 0 var(--dg-space-3); font-size: var(--dg-h3); }
.dg-content h3 { margin: var(--dg-space-5) 0 var(--dg-space-2); font-size: var(--dg-h5); }
.dg-content h4 { margin: var(--dg-space-4) 0 var(--dg-space-2); font-size: var(--dg-font-size-base); font-weight: var(--dg-fw-semibold); }
.dg-content > h2:first-child, .dg-content > h3:first-child { margin-top: 0; }
.dg-content ul, .dg-content ol { padding-left: var(--dg-space-4); }
.dg-content li + li { margin-top: var(--dg-space-1); }
.dg-content table { width: 100%; border-collapse: collapse; font-size: var(--dg-fs-sm); }
.dg-content th, .dg-content td { padding: var(--dg-space-2) var(--dg-space-3) var(--dg-space-2) 0; text-align: left; vertical-align: top; border-bottom: var(--dg-border-width) solid var(--dg-border-color); }
.dg-content th { color: var(--dg-heading-color); font-weight: var(--dg-fw-semibold); border-bottom-color: var(--dg-heading-color); }

/* ---------- Policy (Consently) ---------- */
.policy-content { min-height: 40vh; overflow-x: auto; }
/* I testi di Consently arrivano con i loro stili: qui li riportiamo a quelli del sito. */
.policy-content, .policy-content * { font-family: var(--dg-font-body) !important; color: inherit; }
.policy-content h1, .policy-content h2, .policy-content h3 { font-weight: var(--dg-fw-normal); color: var(--dg-heading-color); }

/* ---------- 404 ---------- */
.dg-404__codice { margin: 0 0 var(--dg-space-3); font-size: var(--dg-fs-sm); color: var(--dg-body-tertiary-color); }
.dg-404__sezioni { list-style: none; margin: 0; padding: 0; border-top: var(--dg-border-width) solid var(--dg-heading-color); }
.dg-404__sezioni li { border-bottom: var(--dg-border-width) solid var(--dg-border-color); }
.dg-404__sezioni a {
	display: flex; align-items: center; justify-content: space-between; gap: var(--dg-space-3);
	padding: var(--dg-space-4) var(--dg-space-3);
	font-size: clamp(var(--dg-h4), 3vw, var(--dg-h2)); font-weight: var(--dg-fw-light); letter-spacing: -.02em;
	color: var(--dg-heading-color); text-decoration: none;
}
.dg-404__sezioni a svg { width: 1.5rem; height: 1.5rem; color: var(--dg-link-color); }
.dg-404__sezioni a:hover { color: var(--dg-link-color); }