/*
Theme Name: Itala Blog – Cucine Tendenze
Description: Skin di cucinetendenze.it (child theme di Itala Blog): token, font self-hosted e componenti per cucina, casa e ristrutturazione.
Author: Itala
Template: itala-blog
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itala-blog-cucinetendenze
*/

/* Archivo (SIL OFL): grottesco nato per titoli e dati, solido e preciso; titoli, etichette, tabelle. */
@font-face {
	font-family: "Archivo";
	src: url("fonts/archivo-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* Source Serif 4 (SIL OFL): serif da lettura lunga, calmo anche a 18 px su telefono. */
@font-face {
	font-family: "Source Serif 4";
	src: url("fonts/source-serif-4-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

/* Riserve con la stessa larghezza media: il cambio di font non sposta le righe. */
/* Rapporti misurati in Chrome sullo stesso testo: Archivo 700 = 97,5% di Arial Bold, Source Serif 4 = 107% di Georgia. */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 700;
	size-adjust: 97.5%;
}

@font-face {
	font-family: "Source Serif Fallback";
	src: local("Georgia");
	size-adjust: 107%;
}

/*
Palette «materiali»: intonaco e pietra per i fondi, noce scuro per testo, fasce e footer,
cotto come unico accento (link, metro, segni). Il cotto chiaro vive solo sul noce.
Contrasti misurati (WCAG): testo 15,3:1 su intonaco, secondario 6,1:1, cotto 5,9:1 (5,2:1 su pietra);
sul noce: testo 14,3:1, secondario 8,2:1, cotto chiaro 7,3:1.
*/
:root {
	--c-bg: #faf7f2;
	--c-surface: #f1e9de;
	--c-text: #271e18;
	--c-muted: #6b5b4f;
	--c-accent: #a3411c;
	--c-accent-deep: #7c3014;
	--c-on-accent: #faf7f2;
	--c-border: #dcd0c1;
	--c-deep: #2a201a;
	--c-on-deep: #f8f2e9;
	--c-on-deep-muted: #c8b8a7;
	--c-warm: #eb9d74;
	--c-select: #f2cdb6;

	--font-body: "Source Serif 4", "Source Serif Fallback", Georgia, "Times New Roman", serif;
	--font-head: "Archivo", "Archivo Fallback", Arial, sans-serif;

	--fs-base: 1.125rem;
	--fs-label: .8125rem;
	--fs-h3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
	--fs-h2: clamp(1.625rem, 1.4rem + .9vw, 2.125rem);
	--fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
	--fs-lead: clamp(1.875rem, 1.4rem + 2vw, 3.125rem);
	--fs-tagline: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
	--lh-base: 1.65;
	--lh-tight: 1.1;
	--lh-card: 1.5;
	--lh-label: 1.2;
	--ls-head: -.02em;
	--ls-label: .06em;

	--space-9: 6rem;
	--wrap: 76rem;
	--sidebar: 18rem;
	--read: 48rem; /* Circa 69 caratteri reali di Source Serif 4 a 20 px (misurati: 50rem ne danno 72). */
	--radius: .25rem;
	--logo-h: 3rem;
	--tag-h: 2.25rem;
	--row-h: 3rem;
	--icon-sm: 1.125rem;
	--toggle: 1.125rem;
	--toggle-stroke: .125rem;
	--underline-nav: .125rem;
	--ratio-lead-sm: 3 / 2;
	--ratio-lead: 4 / 3;
	--ratio-card: 3 / 2;
	--ratio-article-sm: 3 / 2;
	--ratio-article: 2 / 1;
	--lead-cols: minmax(0, 7fr) minmax(0, 5fr);
	--tile-h: 10rem;
	--shadow-panel: 0 .75rem 2rem rgb(42 32 26 / .18);
	--ease: cubic-bezier(.16, 1, .3, 1);
	--t-1: .2s;
	--t-2: .5s;
	--zoom: 1.03;

	/* Il metro: tacche ogni mezzo centimetro di schermo, tacca lunga ogni cinque. */
	--tick: .5rem;
	--tick-big: 2.5rem;
	--ruler-h: .75rem;
	--ruler-c: var(--c-accent);
}

@media (min-width: 48em) {
	:root {
		--fs-base: 1.25rem;
	}
}

@media (min-width: 64em) {
	:root {
		--logo-h: 3.5rem;
	}
}

/* Superfici del browser */
::selection {
	background: var(--c-select);
	color: var(--c-text);
}

input {
	caret-color: var(--c-accent);
}

html {
	scrollbar-color: var(--c-muted) var(--c-surface);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: var(--ls-head);
}

.icon {
	display: block;
	flex: none;
}

/*
Il metro: righello in tacche, unico motivo grafico. Chiude le fasce, apre i riquadri e il footer.
La variante «in alto» ha le tacche appese al filo; quella di base le ha in piedi sul filo.
*/
.page-band .wrap::after,
.section-title::after,
.article-head--type::after,
.entry-content h2::before,
.entry-content hr,
.toc::before,
.itala-summary::before,
.ct-criterio::before,
.ct-misure::before,
.single-post .entry-content > p:first-child:has(> strong:first-child)::before,
.card--type::before,
.lead--type .lead-body::before,
.site-footer::before {
	display: block;
	height: var(--ruler-h);
	background:
		linear-gradient(var(--ruler-c) 0 0) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, var(--ruler-c) 0 1px, transparent 1px var(--tick-big)) left bottom / 100% 100% no-repeat,
		repeating-linear-gradient(90deg, var(--ruler-c) 0 1px, transparent 1px var(--tick)) left bottom / 100% 50% no-repeat;
	content: "";
}

.toc::before,
.itala-summary::before,
.ct-criterio::before,
.ct-misure::before,
.single-post .entry-content > p:first-child:has(> strong:first-child)::before,
.card--type::before,
.lead--type .lead-body::before,
.site-footer::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-position: left top;
}

/* Intestazione: nome (o logo) e ricerca; gli argomenti in una riga sotto, accanto da 72em */
.site-header {
	border-bottom: var(--border) solid var(--c-border);
	background: var(--c-bg);
}

.site-header-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title search"
		"nav nav";
	align-items: center;
	column-gap: var(--space-5);
}

.site-title {
	display: flex;
	grid-area: title;
	align-items: center;
	min-height: calc(var(--logo-h) + var(--space-4));
	font-size: var(--fs-lg);
	letter-spacing: var(--ls-head);
}

.site-title a {
	display: block;
	padding-block: var(--space-2);
	color: var(--c-text);
}

.site-title a:hover {
	color: var(--c-accent);
}

.site-nav {
	grid-area: nav;
	margin-inline: calc(var(--space-4) * -1);
	overflow-x: auto;
	border-top: var(--border) solid var(--c-border);
	scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
	display: none;
}

.site-nav ul {
	display: flex;
	gap: var(--space-5);
	width: max-content;
	margin: 0;
	padding: 0 var(--space-4);
	list-style: none;
}

.site-nav li {
	margin: 0;
}

.site-nav a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	border-bottom: var(--underline-nav) solid transparent;
	color: var(--c-text);
	font-family: var(--font-head);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-label);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}

.site-nav a:hover {
	border-bottom-color: var(--c-accent);
	color: var(--c-accent);
}

.site-nav a[aria-current] {
	border-bottom-color: var(--c-accent);
}

.header-search {
	grid-area: search;
}

.header-search summary {
	display: grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	border-radius: var(--radius);
	color: var(--c-text);
	list-style: none;
	cursor: pointer;
	transition: background-color var(--t-1) var(--ease);
}

.header-search summary::-webkit-details-marker {
	display: none;
}

.header-search summary:hover,
.header-search[open] summary {
	background: var(--c-surface);
}

.header-search-panel {
	position: absolute;
	top: calc(var(--logo-h) + var(--space-4));
	right: var(--space-4);
	z-index: var(--z-skip);
	width: min(26rem, calc(100vw - var(--space-6)));
	padding: var(--space-3);
	border-radius: var(--radius);
	background: var(--c-bg);
	box-shadow: var(--shadow-panel);
}

.header-search-panel .search-form {
	margin-top: 0;
}

@media (min-width: 72em) {
	.site-header-inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "title nav search";
	}

	.site-nav {
		justify-self: end;
		margin-inline: 0;
		border-top: 0;
	}

	.site-nav ul {
		gap: var(--space-6);
		padding: 0;
	}

	.site-nav a {
		min-height: calc(var(--logo-h) + var(--space-4));
	}
}

/* Ricerca */
.search-field {
	border-color: var(--c-muted);
	font-size: var(--fs-sm);
}

.search-submit {
	background: var(--c-deep);
	color: var(--c-on-deep);
	font-family: var(--font-head);
	font-size: var(--fs-sm);
	font-weight: 700;
	transition: background-color var(--t-1) var(--ease);
}

.search-submit:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

/* Ogni pagina apre con una fascia o un'apertura a tutta larghezza; le colonne stanno nei propri wrap. */
.site-main {
	padding: 0;
}

/* Etichette: un solo stile per indice, «in breve», widget e testate delle tabelle su mobile */
.toc-title,
.widget-title,
.single-post .entry-content > p:first-child > strong:first-child,
.itala-summary .itala-box-title {
	display: block;
	margin: 0 0 var(--space-3);
	color: var(--c-accent-deep);
	font-family: var(--font-head);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	line-height: var(--lh-label);
	text-transform: uppercase;
}

/* Riga dei dati: categoria, data, minuti; tra una voce e l'altra una tacca del metro */
.meta {
	align-items: center;
	gap: var(--space-1) var(--space-3);
	color: var(--c-muted);
	font-family: var(--font-head);
	font-size: var(--fs-label);
	font-weight: 600;
	line-height: var(--lh-label);
}

.meta > * + *::before {
	display: inline-block;
	width: var(--border);
	height: .8em;
	margin-right: var(--space-3);
	background: var(--c-border);
	vertical-align: -.05em;
	content: "";
}

.meta a {
	color: var(--c-accent);
	text-decoration: none;
}

.meta a:hover {
	text-decoration: underline;
}

/* Titoli di sezione: nome e, sotto, il metro a tutta larghezza */
.section-title {
	margin: 0 0 var(--space-6);
	font-size: var(--fs-h2);
}

.section-title::after {
	margin-top: var(--space-3);
}

/* Home: apertura con l'ultimo articolo */
.lead-wrap {
	padding-top: var(--space-5);
}

.lead {
	position: relative;
	display: grid;
	gap: var(--space-5);
}

.lead-media {
	margin-inline: calc(var(--space-4) * -1);
	overflow: hidden;
}

.lead-media img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-lead-sm);
	object-fit: cover;
	transition: transform var(--t-2) var(--ease);
}

.lead:hover .lead-media img {
	transform: scale(var(--zoom));
}

.lead-title {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-lead);
	line-height: var(--lh-tight);
	letter-spacing: -.03em;
}

.lead-title a {
	color: var(--c-text);
	text-decoration: none;
}

.lead-title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.lead:hover .lead-title a {
	color: var(--c-accent);
}

.lead-excerpt {
	max-width: var(--read);
	margin-bottom: var(--space-4);
	line-height: var(--lh-card);
}

.lead .meta {
	margin-bottom: var(--space-5);
}

.lead-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-accent);
	font-family: var(--font-head);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1;
}

.lead-more .icon {
	transition: transform var(--t-1) var(--ease);
}

.lead:hover .lead-more .icon {
	transform: translateX(var(--space-1));
}

/* Senza foto: il titolo diventa la copertina, su pietra con il metro in testa */
.lead--type .lead-body {
	position: relative;
	padding: calc(var(--ruler-h) + var(--space-7)) var(--space-5) var(--space-6);
	background: var(--c-surface);
}

.lead--type .lead-title {
	max-width: 22ch;
	font-size: var(--fs-h1);
}

@media (min-width: 64em) {
	.lead-wrap {
		padding-top: var(--space-7);
	}

	.lead {
		grid-template-columns: var(--lead-cols);
		align-items: end;
		gap: var(--space-7);
	}

	.lead-media {
		margin-inline: 0;
		border-radius: var(--radius);
	}

	.lead-media img {
		aspect-ratio: var(--ratio-lead);
	}

	.lead--type {
		grid-template-columns: 1fr;
	}

	.lead--type .lead-body {
		padding: calc(var(--ruler-h) + var(--space-8)) var(--space-8) var(--space-7);
	}
}

/* Griglia degli articoli: tre colonne; due quando gli articoli sono 1, 2 o 4, per non lasciare orfani */
.latest {
	padding-block: var(--space-8) var(--space-9);
}

.cards {
	gap: var(--space-7) var(--space-5);
}

.card-media {
	margin-bottom: var(--space-4);
	overflow: hidden;
	border-radius: var(--radius);
}

.card-media img {
	aspect-ratio: var(--ratio-card);
	border-radius: 0;
	transition: transform var(--t-2) var(--ease);
}

.card:hover .card-media img {
	transform: scale(var(--zoom));
}

.card-title {
	margin-bottom: var(--space-3);
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
}

.card:hover .card-title a {
	color: var(--c-accent);
}

.card-excerpt {
	margin-bottom: var(--space-3);
	line-height: var(--lh-card);
}

.card .meta {
	margin: auto 0 0;
}

.card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* Card senza foto: scheda in pietra alta quanto le vicine, titolo più grande */
.card--type {
	padding: calc(var(--ruler-h) + var(--space-6)) var(--space-5) var(--space-5);
	border-radius: var(--radius);
	background: var(--c-surface);
}

.card--type .card-title {
	font-size: var(--fs-h2);
}

/* Accanto a una card con foto la scheda si allunga: il testo si raccoglie in basso, come una copertina. */
.card--type .card-body {
	justify-content: flex-end;
}

.card--type .meta {
	margin-top: 0;
}

@media (min-width: 40em) {
	.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cards:has(> :last-child:nth-child(-n + 2)),
	.cards:has(> :last-child:nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Correlati e recenti stanno nella colonna di lettura: sempre tre, più piccoli. */
	.cards.cards--related {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cards--related .card-title {
		font-size: var(--fs-lg);
	}

	.cards--related .card--type .card-title {
		font-size: var(--fs-h3);
	}

	.cards--related .card-excerpt {
		display: none;
	}
}

/* Argomenti in fondo alla home: schede su pietra che passano al noce */
.topics-band {
	padding-block: var(--space-8) var(--space-9);
	background: var(--c-surface);
}

.topic-tiles {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.topic-tiles li {
	margin: 0;
}

.topic-tiles a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--space-4);
	height: 100%;
	min-height: var(--tile-h);
	padding: var(--space-5);
	border-radius: var(--radius);
	background: var(--c-bg);
	color: var(--c-text);
	text-decoration: none;
	transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}

.topic-name {
	font-family: var(--font-head);
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: var(--ls-head);
	line-height: var(--lh-tight);
}

.topic-desc {
	grid-row: 2;
	margin-top: var(--space-2);
	color: var(--c-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-card);
}

.topic-tiles .icon {
	grid-row: 1 / span 2;
	grid-column: 2;
	color: var(--c-accent);
	transition: transform var(--t-1) var(--ease);
}

.topic-tiles a:hover {
	background: var(--c-deep);
	color: var(--c-on-deep);
}

.topic-tiles a:hover .topic-desc {
	color: var(--c-on-deep-muted);
}

.topic-tiles a:hover .icon {
	color: var(--c-warm);
	transform: translateX(var(--space-1));
}

@media (max-width: 39.99em) {
	.topic-tiles a {
		min-height: 0;
	}
}

@media (min-width: 40em) {
	.topic-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.topic-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-4);
	}

	.topic-tiles a {
		grid-template-rows: auto 1fr auto;
		grid-template-columns: 1fr;
		align-items: start;
		padding: var(--space-5) var(--space-5) var(--space-4);
	}

	.topic-tiles .icon {
		grid-row: 3;
		grid-column: 1;
		justify-self: end;
	}
}

/* Colonne di articoli e archivi: contenuto e sidebar */
.layout {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-7) var(--space-9);
}

.layout-main {
	min-width: 0;
}

@media (min-width: 64em) {
	.layout {
		grid-template-columns: minmax(0, 1fr) var(--sidebar);
		column-gap: var(--space-8);
	}
}

/* Righe degli elenchi: foto piccola e testo; senza foto il testo prende la riga */
.rows > .card--row {
	padding-block: var(--space-5);
	border-top: var(--border) solid var(--c-border);
}

.rows > .card--row:first-child {
	padding-top: 0;
	border-top: 0;
}

.card--row .card-title {
	font-size: var(--fs-h3);
}

@media (min-width: 40em) {
	.card--row {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
		column-gap: var(--space-5);
	}

	.card--row .card-media {
		margin-bottom: 0;
	}

	.card--row .card-body:only-child {
		grid-column: 1 / -1;
	}
}

/* Sidebar: ricerca, argomenti in righe, tag */
.sidebar,
.sidebar-sticky {
	display: grid;
	align-content: start;
	gap: var(--space-7);
}

.widget-title {
	color: var(--c-muted);
}

.sidebar .search-form {
	margin-top: 0;
}

.topic-list {
	margin: 0;
	padding: 0;
	border-top: var(--border) solid var(--c-text);
	list-style: none;
}

.topic-list li {
	margin: 0;
	border-bottom: var(--border) solid var(--c-border);
}

.topic-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--row-h);
	padding-block: var(--space-2);
	color: var(--c-text);
	font-family: var(--font-head);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: var(--lh-label);
	text-decoration: none;
	transition: color var(--t-1) var(--ease);
}

.topic-list .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	color: var(--c-accent);
	transition: transform var(--t-1) var(--ease);
}

.topic-list a:hover,
.topic-list a[aria-current] {
	color: var(--c-accent);
}

.topic-list a:hover .icon {
	transform: translateX(var(--space-1));
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tags li {
	margin: 0;
}

.tags a {
	display: flex;
	align-items: center;
	min-height: var(--tag-h);
	padding-inline: var(--space-3);
	border: var(--border) solid var(--c-border);
	border-radius: var(--radius);
	color: var(--c-text);
	font-family: var(--font-head);
	font-size: var(--fs-label);
	font-weight: 600;
	line-height: var(--lh-label);
	text-decoration: none;
	transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}

.tags a:hover,
.tags a[aria-current] {
	border-color: var(--c-deep);
	background: var(--c-deep);
	color: var(--c-on-deep);
}

/* Sticky solo se tutta la sidebar entra nello schermo. */
@media (min-width: 64em) and (min-height: 48rem) {
	.sidebar-sticky {
		position: sticky;
		top: var(--space-5);
	}
}

.finder .finder-topics {
	min-width: 0;
}

/* Articolo: titolo e dati, foto larga, colonna di lettura */
.article-head {
	padding-block: var(--space-5) var(--space-5);
}

.breadcrumb {
	margin-bottom: var(--space-4);
	font-family: var(--font-head);
	font-size: var(--fs-label);
	font-weight: 600;
}

.breadcrumb ol {
	align-items: baseline;
}

.breadcrumb a {
	display: inline-block;
	padding-block: var(--space-1);
	color: var(--c-muted);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--c-accent);
	text-decoration: underline;
}

/* L'ultima voce ripeterebbe il titolo che sta subito sotto; nel JSON-LD resta. */
.article-head .breadcrumb li:last-child {
	display: none;
}

.article-title {
	max-width: 24ch;
	margin: 0 0 var(--space-4);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	letter-spacing: -.03em;
}

.article-head .meta {
	margin: 0;
	font-size: var(--fs-sm);
}

.article-head--type::after {
	margin-top: var(--space-6);
}

.article-media {
	margin: 0 auto;
	padding-inline: 0;
}

.article-media img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-article-sm);
	object-fit: cover;
}

.article-layout {
	padding-top: var(--space-6);
}

@media (min-width: 64em) {
	.article-head {
		padding-block: var(--space-7) var(--space-6);
	}

	.article-media {
		padding-inline: var(--space-4);
	}

	.article-media img {
		aspect-ratio: var(--ratio-article);
		border-radius: var(--radius);
	}

	.article-layout {
		padding-top: var(--space-7);
	}
}

/* Testo sulla misura di lettura; tabelle e riquadri FAQ prendono tutta la colonna. */
.entry-content > :not(.wp-block-table, .itala-faq) {
	max-width: var(--read);
}

.entry-content > p:empty {
	display: none;
}

.entry-content a {
	text-underline-offset: .18em;
}

.entry-content h2 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
	font-size: var(--fs-h2);
}

.entry-content h2::before {
	width: calc(var(--tick-big) * 2 + var(--border));
	margin-bottom: var(--space-4);
}

.entry-content h3 {
	margin-top: var(--space-6);
	font-size: var(--fs-h3);
}

.entry-content li {
	text-wrap: pretty;
}

.entry-content :is(ul, ol) > li::marker {
	color: var(--c-accent);
	font-family: var(--font-head);
	font-weight: 700;
}

.entry-content blockquote {
	padding-left: var(--space-5);
	border-left: var(--border) solid var(--c-accent);
	color: var(--c-text);
	font-size: var(--fs-lg);
	font-style: italic;
}

.entry-content hr {
	height: var(--ruler-h);
	margin-block: var(--space-7);
	border: 0;
}

/* Risposta in apertura: il paragrafo «In breve:» diventa una scheda su pietra, con il metro in testa */
.single-post .entry-content > p:first-child:has(> strong:first-child),
.itala-summary {
	position: relative;
	margin-block: 0 var(--space-6);
	padding: calc(var(--ruler-h) + var(--space-5)) var(--space-5) var(--space-5);
	border: 0;
	border-radius: var(--radius);
	background: var(--c-surface);
	line-height: var(--lh-card);
}

.single-post .entry-content > p:first-child > strong:first-child {
	margin-bottom: var(--space-2);
}

.entry-content .itala-summary li::marker {
	color: var(--c-accent);
}

/* Indice: righe a filetto senza numeri (i titoli che li hanno li portano già nel testo) */
.toc {
	position: relative;
	margin-block: var(--space-6);
	padding: calc(var(--ruler-h) + var(--space-4)) 0 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc li {
	margin: 0;
	border-bottom: var(--border) solid var(--c-border);
}

.toc ol ol {
	margin: 0;
	padding-left: var(--space-5);
}

.toc ol ol li:last-child {
	border-bottom: 0;
}

.toc a {
	display: block;
	padding-block: var(--space-2);
	color: var(--c-text);
	font-family: var(--font-head);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-label);
	text-decoration: none;
}

.toc a:hover {
	color: var(--c-accent);
	text-decoration: underline;
}

/* Tabelle di confronto: testata in noce, righe a filetto, numeri in colonna */
.wp-block-table {
	margin-block: var(--space-6);
}

.wp-block-table table {
	display: table;
	width: 100%;
	margin: 0;
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

th,
td {
	padding: var(--space-3);
	border: 0;
	border-bottom: var(--border) solid var(--c-border);
	line-height: var(--lh-card);
}

th {
	background: var(--c-deep);
	color: var(--c-on-deep);
	font-family: var(--font-head);
	font-weight: 700;
	line-height: var(--lh-label);
	vertical-align: bottom;
}

tbody th[scope="row"],
td:first-child {
	color: var(--c-text);
	font-family: var(--font-head);
	font-weight: 600;
	line-height: var(--lh-label);
}

tbody th[scope="row"] {
	background: none;
	text-align: start;
	vertical-align: top;
}

tbody tr:nth-child(odd) :is(td, th[scope="row"]) {
	background: color-mix(in srgb, var(--c-surface) 55%, transparent);
}

/*
Su mobile ogni riga è una scheda: l'intestazione di riga è il titolo, ogni cella porta il nome della sua colonna
(data-label, aggiunto da itala_ct_table_markup). La riga di testata resta per i lettori di schermo.
*/
@media (max-width: 47.99em) {
	.wp-block-table table[role="table"] :is(tbody, tr, th, td) {
		display: block;
	}

	.wp-block-table table[role="table"] tr:first-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.wp-block-table table[role="table"] tr + tr {
		margin-bottom: var(--space-4);
		overflow: hidden;
		border: var(--border) solid var(--c-border);
		border-radius: var(--radius);
	}

	.wp-block-table table[role="table"] tbody tr td {
		background: none;
	}

	.wp-block-table table[role="table"] tbody tr th[scope="row"] {
		padding: var(--space-3);
		border-bottom: 0;
		background: var(--c-deep);
		color: var(--c-on-deep);
		font-size: var(--fs-base);
	}

	.wp-block-table table[role="table"] td {
		font-family: var(--font-body);
		font-weight: 400;
		line-height: var(--lh-card);
	}

	.wp-block-table table[role="table"] td:last-child {
		border-bottom: 0;
	}

	.wp-block-table table[role="table"] td[data-label]::before {
		display: block;
		margin-bottom: var(--space-1);
		color: var(--c-accent-deep);
		font-family: var(--font-head);
		font-size: var(--fs-label);
		font-weight: 700;
		letter-spacing: var(--ls-label);
		line-height: var(--lh-label);
		text-transform: uppercase;
		content: attr(data-label);
	}
}

/* FAQ: righe a filetto, domanda nel carattere dei titoli, segno più che diventa meno */
.itala-faq {
	max-width: var(--read);
}

.wp-block-details {
	margin: 0;
	border: 0;
	border-top: var(--border) solid var(--c-border);
	border-radius: 0;
}

.wp-block-details:last-of-type {
	border-bottom: var(--border) solid var(--c-border);
}

.wp-block-details[open] {
	padding-bottom: var(--space-4);
}

.wp-block-details summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-family: var(--font-head);
	font-size: var(--fs-lg);
	line-height: var(--lh-label);
	list-style: none;
	transition: color var(--t-1) var(--ease);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	flex: none;
	width: var(--toggle);
	height: var(--toggle);
	margin-top: var(--space-1);
	background:
		linear-gradient(var(--c-accent) 0 0) center / 100% var(--toggle-stroke) no-repeat,
		linear-gradient(var(--c-accent) 0 0) center / var(--toggle-stroke) 100% no-repeat;
	content: "";
	transition: background-size var(--t-1) var(--ease);
}

.wp-block-details[open] summary::after {
	background-size: 100% var(--toggle-stroke), var(--toggle-stroke) 0;
}

.wp-block-details summary:hover {
	color: var(--c-accent);
}

.entry-content .wp-block-details summary > :is(h2, h3, h4, h5, h6) {
	color: inherit;
	letter-spacing: var(--ls-head);
}

.wp-block-details > :not(summary) {
	margin-inline: 0;
	line-height: var(--lh-card);
}

/* CTA del padre (non usata finché non servono inviti): riquadro sobrio, nessun colore commerciale */
.itala-cta {
	border: var(--border) solid var(--c-border);
	background: var(--c-surface);
}

.wp-block-button__link {
	background: var(--c-deep);
	color: var(--c-on-deep);
	font-family: var(--font-head);
}

.wp-block-button__link:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

/* Correlati */
.related {
	margin-top: var(--space-8);
}

/* Pagine interne: fascia in pietra chiusa dal metro */
.page-band {
	padding-top: var(--space-5);
	background: var(--c-surface);
}

.page-band .wrap::after {
	margin-top: var(--space-6);
}

.page-band-title {
	max-width: 24ch;
	margin: 0 0 var(--space-3);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	letter-spacing: -.03em;
	overflow-wrap: anywhere;
}

.page-band .breadcrumb li:last-child {
	display: none;
}

.page-band-text {
	max-width: var(--read);
	line-height: var(--lh-card);
}

.page-band-text p {
	margin: 0;
}

.page-band .search-form {
	max-width: 32rem;
	margin-top: var(--space-5);
}

.page-body {
	padding-block: var(--space-7) var(--space-9);
}

@media (min-width: 64em) {
	.page-band {
		padding-top: var(--space-7);
	}

	.page-band .wrap::after {
		margin-top: var(--space-7);
	}

	.finder .finder-topics {
		grid-row: 1;
		grid-column: 2;
	}
}

/* Paginazione */
.pagination {
	margin-top: var(--space-7);
}

.page-numbers,
.post-page-numbers {
	color: var(--c-text);
	font-family: var(--font-head);
	font-weight: 700;
	transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}

a.page-numbers:hover,
a.post-page-numbers:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.page-numbers.current,
.post-page-numbers.current {
	border-color: var(--c-deep);
	background: var(--c-deep);
	color: var(--c-on-deep);
}

/* Footer in noce: il metro in cotto chiaro ne segna il bordo */
.site-footer {
	--ruler-c: var(--c-warm);
	position: relative;
	padding-block: calc(var(--ruler-h) + var(--space-8)) var(--space-6);
	border-top: 0;
	background: var(--c-deep);
	color: var(--c-on-deep-muted);
	font-family: var(--font-head);
	font-weight: 600;
}

.site-footer :focus-visible {
	outline-color: var(--c-warm);
}

.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
}

.footer-tagline {
	flex: 0 0 100%;
	order: -1;
	max-width: 24ch;
	margin: 0 0 var(--space-7);
	color: var(--c-on-deep);
	font-size: var(--fs-tagline);
	font-weight: 700;
	letter-spacing: var(--ls-head);
	line-height: var(--lh-tight);
	text-wrap: balance;
}

.footer-menu,
.consent-manage {
	margin: 0;
}

.footer-menu a,
.consent-link {
	display: inline-block;
	padding-block: var(--space-2);
	color: var(--c-on-deep);
}

.footer-menu a:hover,
.consent-link:hover {
	color: var(--c-warm);
}

/* Il padre mostra «Gestisci cookie» solo dopo una scelta. */
.consent-link[hidden] {
	display: none;
}

.copyright {
	flex: 0 0 100%;
}

@media (min-width: 48em) {
	.copyright {
		flex: 0 1 auto;
		margin-left: auto;
	}
}

/* Banner cookie: barra in noce, i due pulsanti hanno lo stesso peso */
.consent {
	border-top: 0;
	background: var(--c-deep);
	box-shadow: var(--shadow-panel);
	color: var(--c-on-deep);
}

.consent :focus-visible {
	outline-color: var(--c-warm);
}

.consent-btn {
	border-color: var(--c-warm);
	background: var(--c-warm);
	color: var(--c-deep);
	font-family: var(--font-head);
}

.consent-btn[data-itala-consent="denied"] {
	background: none;
	color: var(--c-on-deep);
}

.consent-btn:focus-visible {
	outline-color: var(--c-warm);
}

.none {
	font-size: var(--fs-lg);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-1: 0s;
		--t-2: 0s;
		--zoom: 1;
	}
}

/*
Riquadri degli articoli (pattern itala-ct/*): criterio di scelta, errori da evitare, misure, costo indicativo.
Stesso linguaggio della scheda «In breve»: pietra o noce, metro in testa, nessun bordo colorato a lato.
*/
.ct-box {
	position: relative;
	margin-block: var(--space-6);
	padding: var(--space-5);
	border-radius: var(--radius);
}

.entry-content .ct-box > :last-child {
	margin-bottom: 0;
}

.entry-content .ct-box-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-head);
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: var(--ls-head);
	line-height: var(--lh-tight);
}

/* Criterio di scelta: due strade affiancate (in colonna su mobile) */
.ct-criterio {
	padding-top: calc(var(--ruler-h) + var(--space-5));
	background: var(--c-surface);
}

.ct-choices {
	display: grid;
	gap: var(--space-4);
}

.entry-content .ct-choice > p {
	margin: 0;
	line-height: var(--lh-card);
}

.entry-content .ct-choice-name {
	margin-bottom: var(--space-1);
	color: var(--c-accent-deep);
	font-family: var(--font-head);
	font-weight: 700;
}

@media (min-width: 40em) {
	.ct-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6);
	}
}

/* Errori da evitare: filetti sopra e sotto, una croce di cotto per voce */
.ct-errori {
	padding-inline: 0;
	border-block: var(--border) solid var(--c-text);
	border-radius: 0;
}

.entry-content .ct-errori ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .ct-errori li {
	position: relative;
	margin: 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
	line-height: var(--lh-card);
}

.entry-content .ct-errori li::before {
	position: absolute;
	left: var(--space-1);
	color: var(--c-accent);
	font-family: var(--font-head);
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
	content: "×";
}

/* Misure da rispettare: scheda in noce, quote a destra in cotto chiaro */
.ct-misure {
	--ruler-c: var(--c-warm);
	padding-top: calc(var(--ruler-h) + var(--space-5));
	background: var(--c-deep);
	color: var(--c-on-deep);
}

.entry-content .ct-misure ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .ct-misure li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	padding-block: var(--space-2);
	border-bottom: 1px solid rgb(248 242 233 / .2);
	line-height: var(--lh-card);
}

.entry-content .ct-misure li:last-child {
	border-bottom: 0;
}

.entry-content .ct-misure strong {
	color: var(--c-warm);
	font-family: var(--font-head);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

/* Costo indicativo: scheda a filetto con il segno «indicativo» sempre scritto */
.ct-costo {
	border: 1px solid var(--c-border);
	background: var(--c-bg);
}

.entry-content .ct-costo p {
	margin: 0 0 var(--space-3);
	line-height: var(--lh-card);
}

.entry-content .ct-costo .ct-box-title {
	margin-bottom: var(--space-2);
}

.entry-content .ct-note {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius);
	background: var(--c-select);
	color: var(--c-accent-deep);
	font-family: var(--font-head);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	line-height: var(--lh-label);
	text-transform: uppercase;
}

.entry-content .ct-range {
	font-family: var(--font-head);
	font-size: var(--fs-h2);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: var(--ls-head);
	line-height: var(--lh-tight);
}

.entry-content .ct-costo .ct-more {
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

.entry-content .ct-misure .ct-more {
	margin-top: var(--space-3);
	color: var(--c-on-deep-muted);
	font-size: var(--fs-sm);
}

/* Su telefono la riga dei dati può andare a capo: senza tacche, per non aprire la riga con un separatore */
@media (max-width: 39.99em) {
	.meta {
		column-gap: var(--space-4);
	}

	.meta > * + *::before {
		display: none;
	}
}