/*
 * Pagine interne CADesk: page.php, single.php, index/archive/search, 404 e i loro
 * template-parts. Prefisso cdk-. Si appoggia ai token (--color-*, --font-*, --space-*)
 * e alle classi di base (cl-wrap, cl-eyebrow, cl-rule, cl-btn) di css/cadesk.css,
 * che viene caricato prima: qui non si ridefinisce nessun colore.
 *
 * Tutte le regole portano il prefisso body.cadesk-site, come i pulsanti del foglio
 * globale: (0,2,1) basta a vincere sul CSS dei plugin e sugli stili dei blocchi del
 * core, che restano in pagina. Nessuna transizione: niente da spegnere con
 * prefers-reduced-motion.
 *
 * Ritmo verticale: 84px sopra l'intestazione e sotto l'ultimo blocco, come le sezioni
 * della landing; sul telefono 56px.
 */

/* ------------------------------------------------- intestazione di pagina */

/* Colonna: occhiello, titolo, poi conteggio, descrizione o form di ricerca, tutto a
   filo del bordo sinistro. Le distanze interne le da' il gap (14px, come fra occhiello
   e titolo nella landing): i figli perdono i margini che hanno fuori di qui, e quelli
   che stanno a 28px dal titolo ne aggiungono 14. */
body.cadesk-site .cdk-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 84px 0 28px;
}

body.cadesk-site .cdk-header > .cl-eyebrow {
	margin-bottom: 0;
}

body.cadesk-site .cdk-header > .cdk-lead,
body.cadesk-site .cdk-header > .cdk-count,
body.cadesk-site .cdk-header > .cdk-search {
	margin-top: 14px;
}

body.cadesk-site .cdk-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--color-text);
	max-width: 28ch;
	margin: 0 0 0 -0.058em; /* margine ottico: la prima lettera a filo del bordo, come nella landing */
	text-wrap: balance;
	overflow-wrap: anywhere;
}

/* occhiello con un link dentro (categoria dell'articolo): stesso colore, niente
   sottolineatura; il padding porta il bersaglio a 44px senza spostare la riga */
body.cadesk-site .cdk-eyebrow a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 15px 0;
	margin: -15px 0;
}

body.cadesk-site .cdk-eyebrow a:hover {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.cadesk-site .cdk-eyebrow-sep {
	margin: 0 6px;
	color: var(--color-neutral-600);
}

/* testo introduttivo sotto il titolo: descrizione dell'archivio, 404, nessun risultato */
body.cadesk-site .cdk-lead {
	font-size: 17px;
	line-height: 28px;
	max-width: 58ch;
	margin: 28px 0 0;
	color: var(--color-neutral-800);
}

body.cadesk-site .cdk-lead:last-child {
	margin-bottom: 84px;
}

body.cadesk-site .cdk-count {
	font-size: 13px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	font-variant-numeric: tabular-nums;
	margin: 28px 0 0;
}

body.cadesk-site .cdk-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 28px 0 0;
}

/* ------------------------------------------------- immagine in evidenza */

/* La figura ha la stessa misura di carattere della colonna di lettura, cosi' il
   suo max-width in ch coincide con quello di .cdk-content. Cornice da 2px come
   l'immagine del pannello nella landing. */
body.cadesk-site .cdk-figure,
body.cadesk-site .cdk-page .post-thumbnail {
	font-size: 15.5px;
	max-width: 68ch;
	margin: 42px 0 0;
	border: 2px solid var(--color-divider);
}

body.cadesk-site .cdk-figure img,
body.cadesk-site .cdk-page .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

body.cadesk-site .cdk-figure figcaption {
	font-size: 13px;
	line-height: 20px;
	color: var(--color-neutral-700);
	padding: 8px 12px;
	border-top: 2px solid var(--color-divider);
}

/* ------------------------------------------------- colonna di lettura */

body.cadesk-site .cdk-content {
	max-width: 68ch;
	padding: 42px 0 84px;
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: 28px;
	color: var(--color-neutral-800);
	overflow-wrap: anywhere; /* URL lunghi delle informative: niente scorrimento orizzontale */
}

body.cadesk-site .cdk-figure + .cdk-content,
body.cadesk-site .post-thumbnail + .cdk-content {
	padding-top: 28px;
}

body.cadesk-site .cdk-content > :first-child {
	margin-top: 0;
}

body.cadesk-site .cdk-content > :last-child {
	margin-bottom: 0;
}

body.cadesk-site .cdk-content p {
	margin: 0 0 20px;
}

body.cadesk-site .cdk-content h2,
body.cadesk-site .cdk-content h3,
body.cadesk-site .cdk-content h4,
body.cadesk-site .cdk-content h5,
body.cadesk-site .cdk-content h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	color: var(--color-text);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

body.cadesk-site .cdk-content h2 {
	font-size: 24px;
	line-height: 28px;
	margin: 42px 0 14px;
}

body.cadesk-site .cdk-content h3 {
	font-size: 20px;
	line-height: 28px;
	margin: 32px 0 10px;
}

body.cadesk-site .cdk-content h4,
body.cadesk-site .cdk-content h5,
body.cadesk-site .cdk-content h6 {
	font-size: 16px;
	line-height: 24px;
	margin: 28px 0 8px;
}

body.cadesk-site .cdk-content strong,
body.cadesk-site .cdk-content b {
	font-weight: 600;
	color: var(--color-text);
}

body.cadesk-site .cdk-content a {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.cadesk-site .cdk-content a:hover {
	color: var(--color-accent);
}

body.cadesk-site .cdk-content ul,
body.cadesk-site .cdk-content ol {
	margin: 0 0 20px;
	padding: 0 0 0 1.4em;
}

body.cadesk-site .cdk-content li {
	margin: 0 0 8px;
	padding-left: 4px;
}

body.cadesk-site .cdk-content li > ul,
body.cadesk-site .cdk-content li > ol {
	margin: 8px 0 0;
}

body.cadesk-site .cdk-content li::marker {
	color: var(--color-accent-700);
	font-variant-numeric: tabular-nums;
}

body.cadesk-site .cdk-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 28px 0;
}

body.cadesk-site .cdk-content figure {
	margin: 28px 0;
}

body.cadesk-site .cdk-content figure img {
	margin: 0;
}

body.cadesk-site .cdk-content figcaption,
body.cadesk-site .cdk-content .wp-caption-text {
	font-size: 13px;
	line-height: 20px;
	color: var(--color-neutral-700);
	margin: 8px 0 0;
	text-align: left;
}

body.cadesk-site .cdk-content iframe,
body.cadesk-site .cdk-content video,
body.cadesk-site .cdk-content embed,
body.cadesk-site .cdk-content object {
	max-width: 100%;
}

body.cadesk-site .cdk-content blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--color-accent);
	font-size: 17px;
	line-height: 28px;
	color: var(--color-text);
}

body.cadesk-site .cdk-content blockquote p:last-child {
	margin-bottom: 0;
}

body.cadesk-site .cdk-content blockquote cite {
	display: block;
	font-size: 13px;
	line-height: 20px;
	font-style: normal;
	color: var(--color-neutral-700);
	margin-top: 8px;
}

body.cadesk-site .cdk-content hr {
	height: 2px;
	border: 0;
	margin: 42px 0;
	background: var(--color-divider);
}

body.cadesk-site .cdk-content code,
body.cadesk-site .cdk-content kbd,
body.cadesk-site .cdk-content pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--color-surface);
	border-radius: 0;
}

body.cadesk-site .cdk-content code,
body.cadesk-site .cdk-content kbd {
	padding: 1px 5px;
}

body.cadesk-site .cdk-content pre {
	padding: 16px;
	margin: 0 0 20px;
	overflow-x: auto;
	line-height: 1.5;
}

body.cadesk-site .cdk-content pre code {
	padding: 0;
	background: none;
}

/* tabelle (cookie, trattamenti): intestazione in maiuscoletto da 11px con riga da
   2px, righe con riga da 1px. Sul desktop le parole restano intere (break-word non
   tocca la larghezza minima delle colonne: la tabella puo' sporgere dalla colonna di
   lettura nello spazio libero a destra, mai dalla pagina). Sotto 760px le celle si
   spezzano dove serve (anywhere) cosi' la tabella resta larga quanto lo schermo;
   le intestazioni non si spezzano mai, e se da sole superano lo schermo la tabella
   scorre dentro la figura del blocco (regola nel blocco telefono), non la pagina. */
body.cadesk-site .cdk-content table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 28px 0;
	font-size: 14px;
	line-height: 20px;
	table-layout: auto;
}

body.cadesk-site .cdk-content th,
body.cadesk-site .cdk-content td {
	text-align: left;
	vertical-align: top;
	padding: 12px 12px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--color-divider);
	overflow-wrap: break-word;
}

body.cadesk-site .cdk-content th {
	overflow-wrap: normal;
}

body.cadesk-site .cdk-content th:last-child,
body.cadesk-site .cdk-content td:last-child {
	padding-right: 0;
}

body.cadesk-site .cdk-content th {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-divider);
}

body.cadesk-site .cdk-content tbody tr:last-child td {
	border-bottom: 2px solid var(--color-divider);
}

body.cadesk-site .cdk-content .wp-block-table {
	overflow-x: visible;
}

/* allineamenti classici dell'editor: gli oggetti flottanti tornano in colonna sul telefono */
body.cadesk-site .cdk-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

body.cadesk-site .cdk-content .alignleft {
	float: left;
	margin: 4px 24px 16px 0;
}

body.cadesk-site .cdk-content .alignright {
	float: right;
	margin: 4px 0 16px 24px;
}

body.cadesk-site .cdk-content::after {
	content: "";
	display: block;
	clear: both;
}

/* link «Torna alla home» sotto l'articolo: pulsante ghost a filo del bordo (il suo
   padding laterale e' 4px) */
body.cadesk-site .cdk-post .cdk-content {
	padding-bottom: 42px;
}

body.cadesk-site .cdk-back {
	padding: 0 0 84px;
	margin-left: calc(-1 * var(--space-1));
}

/* ------------------------------------------------- elenco articoli */

/* Ogni voce e' una riga della griglia: data a sinistra, titolo ed estratto a destra,
   come le righe «01 / 02 / 03» dei vantaggi della landing. Sotto 760px la data va
   sopra il titolo. Niente immagini, niente ombre: le righe da 2px separano. */
body.cadesk-site .cdk-list {
	margin: 0;
}

body.cadesk-site .cdk-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 0;
	padding: 32px 0;
	border-bottom: 2px solid var(--color-divider);
}

body.cadesk-site .cdk-item-date {
	display: block;
	font-size: 13px;
	line-height: 28px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	font-variant-numeric: tabular-nums;
}

body.cadesk-site .cdk-item-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--color-text);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

/* il link del titolo e' alto 28px: il padding verticale lo porta a 44px e il margine
   negativo rimette il testo dov'era. Padding vero, non uno pseudo-elemento, cosi'
   vale anche quando il titolo va a capo. */
body.cadesk-site .cdk-item-title a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 8px 0;
	margin: -8px 0;
}

body.cadesk-site .cdk-item-title a:hover {
	color: var(--color-accent);
}

body.cadesk-site .cdk-item-excerpt {
	font-size: 15.5px;
	line-height: 28px;
	color: var(--color-neutral-800);
	max-width: 60ch;
	margin: 0;
}

body.cadesk-site .cdk-item-excerpt p {
	margin: 0;
}

body.cadesk-site .cdk-item-excerpt .more-link {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	display: inline-block;
	padding: 8px 0;
	margin: -8px 0;
	white-space: nowrap;
}

body.cadesk-site .cdk-item-excerpt .more-link:hover {
	color: var(--color-accent);
}

@media (min-width: 760px) {
	body.cadesk-site .cdk-item {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 10px clamp(24px, 4vw, 72px);
		align-items: baseline;
	}

	/* la data sta nella prima riga soltanto: un elemento che occupa due righe non
	   partecipa all'allineamento sulla baseline e con un titolo su due righe scende */
	body.cadesk-site .cdk-item-date {
		grid-column: 1;
		grid-row: 1;
	}

	body.cadesk-site .cdk-item-title,
	body.cadesk-site .cdk-item-excerpt {
		grid-column: 2;
	}
}

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

body.cadesk-site .cdk-pagination {
	padding: 42px 0 84px;
}

body.cadesk-site .cdk-pagination ul.page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* solo le voci (a e span): anche la <ul> del core porta la classe page-numbers */
body.cadesk-site .cdk-pagination a.page-numbers,
body.cadesk-site .cdk-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--color-neutral-600); /* un controllo, non una riga decorativa: bordo leggibile */
	border-radius: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--color-text);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

body.cadesk-site .cdk-pagination a.page-numbers:hover {
	background: var(--color-accent-100);
	border-color: var(--color-accent);
	color: var(--color-accent-700);
}

body.cadesk-site .cdk-pagination a.page-numbers:active {
	background: var(--color-accent-200);
}

body.cadesk-site .cdk-pagination span.page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-bg);
}

body.cadesk-site .cdk-pagination span.page-numbers.dots {
	border-color: transparent;
	color: var(--color-neutral-600);
}

/* ------------------------------------------------- 404 e nessun risultato */

/* Nel 404 la sezione porta anche l'intestazione (h1). Dentro un elenco vuoto
   (index, archivio, ricerca) l'h1 e' gia' sopra: qui il titolo e' un h2. */
body.cadesk-site .cdk-empty {
	padding: 0 0 84px;
}

body.cadesk-site .cdk-empty .cdk-lead:last-child {
	margin-bottom: 0;
}

body.cadesk-site .cdk-empty-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin: 42px 0 0;
}

body.cadesk-site .cdk-empty-title + .cdk-lead {
	margin-top: 14px;
}

/* ------------------------------------------------- form di ricerca */

/* Campo come l'input del design system: 16px (iOS non ingrandisce la pagina),
   44px di altezza, bordo --color-neutral-600 (un controllo si deve vedere: le righe
   decorative restano --color-divider), raggio 0; a fuoco il bordo prende l'accento
   e l'anello di focus e' quello globale di cadesk.css. width 100% perche' dentro
   .cdk-header (flex, align-items flex-start) altrimenti si stringe al contenuto. */
body.cadesk-site .cdk-search {
	width: 100%;
	margin: 28px 0 0;
	max-width: 560px;
}

body.cadesk-site .cdk-search-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

body.cadesk-site .cdk-search-label {
	display: block;
	font-size: 13px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin: 0 0 10px;
}

body.cadesk-site .cdk-search-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-neutral-600);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

body.cadesk-site .cdk-search-input::placeholder {
	color: var(--color-neutral-600);
	opacity: 1;
}

body.cadesk-site .cdk-search-input:focus {
	border-color: var(--color-accent);
}

/* fuori da .cl-main (widget, footer) l'anello globale non c'e': lo mette il campo */
body.cadesk-site .cdk-search-input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

body.cadesk-site .cdk-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
}

body.cadesk-site .cdk-search .cl-btn {
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
}

/* (.screen-reader-text sta in cadesk.css: serve anche allo skip link della landing) */

/* ------------------------------------------------- pagine di un contenuto diviso */

/* «Pagine: 1 2 3» di un testo spezzato con <!--nextpage--> (wp_link_pages), in fondo
   alla colonna di lettura. Voci come quelle della paginazione: bersaglio da 44px,
   la pagina corrente piena. L'ultimo figlio di .cdk-content perde il margine sotto. */
body.cadesk-site .cdk-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 28px 0 0;
	font-size: 14px;
	line-height: 28px;
	color: var(--color-neutral-700);
}

body.cadesk-site .cdk-pages .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--color-neutral-600);
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

body.cadesk-site .cdk-pages a.post-page-numbers:hover {
	background: var(--color-accent-100);
	border-color: var(--color-accent);
	color: var(--color-accent-700);
}

body.cadesk-site .cdk-pages .post-page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-bg);
}

/* ------------------------------------------------- telefono */

@media (max-width: 759.98px) {
	body.cadesk-site .cdk-header {
		padding-top: 56px;
	}

	body.cadesk-site .cdk-content,
	body.cadesk-site .cdk-pagination,
	body.cadesk-site .cdk-empty,
	body.cadesk-site .cdk-back {
		padding-bottom: 56px;
	}

	body.cadesk-site .cdk-post .cdk-content {
		padding-bottom: 32px;
	}

	body.cadesk-site .cdk-lead:last-child {
		margin-bottom: 56px;
	}

	body.cadesk-site .cdk-item {
		padding: 24px 0;
	}

	body.cadesk-site .cdk-content .alignleft,
	body.cadesk-site .cdk-content .alignright {
		float: none;
		margin: 28px 0;
	}

	/* celle che si spezzano dove serve, con i trattini della lingua della pagina
	   quando il browser li conosce: la tabella non supera mai lo schermo */
	body.cadesk-site .cdk-content td {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* se le sole intestazioni (che non si spezzano) superano lo schermo, la tabella
	   scorre dentro la figura del blocco e la pagina resta ferma; finche' ci sta,
	   width 100% e le celle spezzate la tengono larga quanto lo schermo come prima */
	body.cadesk-site .cdk-content .wp-block-table {
		overflow-x: auto;
	}

	/* il pulsante ghost del 404 e dell'articolo: bersaglio pieno anche col dito */
	body.cadesk-site .cdk-actions .cl-btn-ghost {
		padding-inline: 12px;
	}
}