/**
 * Stile base del tema Marcognano.
 *
 * Solo le fondamenta coerenti con la palette/font di theme.json (esposti da
 * WordPress come CSS custom property var(--wp--preset--...)). La rifinitura
 * grafica arrivera' nei giri successivi.
 */

/* Scroll fluido per le ancore (es. "Esplora la mappa" -> #mappa) */
html {
	scroll-behavior: smooth;
}

/* Reset minimo */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
	margin: 0;
	padding: 0;
}

/* Base */
body {
	background: var(--wp--preset--color--sfondo);
	color: var(--wp--preset--color--testo);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	line-height: 1.7;
	font-weight: 400;
}

/* Titoli */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--testo);
	font-weight: 500;
	line-height: 1.2;
	padding-top: 20px;
}

/* Titoli */
h2,
h3,
h4,
h5,
h6 {

	color: var(--wp--preset--color--accento);

}

h1 {
	font-size: 44px;
}

h2 {
	font-size: 32px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

/* Blockquote: rifinitura con indent, corsivo Cormorant */
blockquote {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.55;
	color: #4a4844;
	padding: 0 0 0 1.5rem;
	margin: 2rem 0 2rem 20px;
	/* indent 20px verso destra */
	border-left: 2px solid var(--wp--preset--color--accento);
}

/* Azzera il margin-block di default del browser sui paragrafi interni. */
blockquote p {
	margin: 0;
}

blockquote p+p {
	margin-top: 1rem;
}

/* Paragrafi editoriali con respiro tipografico. */
/* Solo il testo articolato: scheda monumento, pagine di contenuto, taxonomy, ecc. */
.marc-scheda-storia p,
.entry-content p {
	padding-top: 12px;
}

/* Il primo paragrafo di ciascun blocco non ha padding-top (evita spazio inutile in cima). */
.marc-scheda-storia p:first-child,
.entry-content p:first-child {
	padding-top: 0;
}

@media (max-width: 768px) {
	blockquote {
		font-size: 17px;
		padding-left: 1rem;
		margin-left: 12px;
	}

	.marc-scheda-storia p,
	.entry-content p {
		padding-top: 8px;
	}
}

/* Solo per screen reader: nascosto alla vista, presente nell'albero di
   accessibilita'. Non e' fornita dal core sul front-end, va definita qui. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* L'elenco alternativo della mappa CONTIENE LINK: se il focus da tastiera ci
   entra il blocco deve diventare visibile, altrimenti chi naviga col Tab si
   ritrova il focus su elementi invisibili. */
.marcognano-mappa-alternativa:focus-within {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	position: relative;
	padding: 1.5rem 2rem;
	background: var(--wp--preset--color--sfondo);
	border: 0.5px solid var(--wp--preset--color--bordo);
}

/* Link */
a {
	color: var(--wp--preset--color--accento);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Header del sito: barra full-width con colonna interna a 1180px. */
.site-header {
	background: var(--wp--preset--color--sfondo);
	border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
	padding: 1.3rem 2rem;
}

.site-header__container {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header__logo img {
	height: 36px;
	width: auto;
	display: block;
}

.site-header nav a {
	color: #6a6864;
	font-size: 18px;
	text-decoration: none;
}

.site-header nav a:hover {
	color: var(--wp--preset--color--testo);
}

/* Menu principale: solo il PRIMO livello è flex orizzontale */
.site-header nav>ul,
.home-hero__nav>ul {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Voci del primo livello con dropdown: preparano il contenitore relativo */
.site-header nav>ul>li,
.home-hero__nav>ul>li {
	position: relative;
}

/* Sotto-menu: nascosto di default, appare al hover del padre */
.site-header nav .sub-menu,
.home-hero__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--wp--preset--color--sfondo);
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	padding: 0.5rem 0;
	margin: 0;
	list-style: none;
	min-width: 180px;
	display: none;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Colore chiaro dei link del sub-menu su fondo chiaro dell'header interno */
.site-header nav .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--testo);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.site-header nav .sub-menu a:hover {
	background: #f5f4f0;
}

/* Sub-menu nell'hero: sfondo scuro per contrasto sul fondo scuro */
.home-hero__nav .sub-menu {
	background: rgba(0, 0, 0, 0.85);
	border: 0.5px solid rgba(255, 255, 255, 0.15);
}

.home-hero__nav .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--sfondo);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.home-hero__nav .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Al hover della voce padre, mostra il sub-menu */
.site-header nav>ul>li:hover>.sub-menu,
.home-hero__nav>ul>li:hover>.sub-menu {
	display: block;
}

/* Indicatore visivo che una voce ha figli: punta di freccia in giu' disegnata
   con due lati di un quadratino ruotato di 45°, non un glifo triangolare. */
.site-header nav>ul>li.menu-item-has-children>a::after,
.home-hero__nav>ul>li.menu-item-has-children>a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 0.5em;
	border-right: 1.5px solid var(--wp--preset--color--accento);
	border-bottom: 1.5px solid var(--wp--preset--color--accento);
	/* La rotazione sposta in basso il baricentro ottico: si recupera con la
	   traslazione, cosi' la punta resta centrata sulla riga di testo. */
	transform: translateY(-2px) rotate(45deg);
	vertical-align: middle;
}

/* Nell'hero il fondo e' scuro: il rosso d'accento non stacca abbastanza, la
   punta va chiara come le voci di menu accanto. Nelle pagine interne, su fondo
   #FAFAF8, resta rossa. */
.home-hero__nav>ul>li.menu-item-has-children>a::after {
	border-right-color: #f5f4f0;
	border-bottom-color: #f5f4f0;
}

/* Brand testuale di fallback (se non c'e' un logo custom). */
.site-brand {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 28px;
	color: var(--wp--preset--color--testo);
	text-decoration: none;
}

/* Logo custom nativo di WordPress (avvolto in <a class="custom-logo-link">). */
.custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.custom-logo-link img {
	height: 40px;
	width: auto;
	display: block;
}

/* Hero: il logo su sfondo scuro potrebbe voler essere bianco. Se il logo è già bianco/chiaro non serve nulla. */
.home-hero .custom-logo-link img {
	height: 44px;
	/* leggermente più grande sull'hero */
}

/* Header pagine interne */
.site-header .custom-logo-link img {
	height: 36px;
	/* più piccolo su header standard */
}

/* Navigazione */
.site-nav ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.site-nav a {
	color: var(--wp--preset--color--testo-soft);
	font-size: 14px;
}

/* Contenuto principale */
.site-main {
	max-width: 1180px;
	margin: 0 auto;
	padding: 3rem 2rem;
}

/* footer */
.site-footer {
	background: var(--wp--preset--color--testo);
	color: #b8b6b0;
	padding: 3rem 2rem 2rem;
}

/* WCAG 1.4.1: nel footer i link non possono distinguersi dal solo colore.
   Sottolineatura tenue di default, piu' netta in hover e in focus. */
.site-footer a {
	/* Colore di base per QUALSIASI link del footer: senza, quelli privi di
	   regola propria (tel: nel sottotitolo, Credits nel bottom) ereditano il
	   rosso d'accento dal selettore globale `a`, che sul fondo scuro fa 2.64:1.
	   I sotto-blocchi con un colore proprio continuano a sovrascriverlo. */
	color: #d0cec8;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 3px;
}

.site-footer a:hover,
.site-footer a:focus {
	text-decoration-color: rgba(255, 255, 255, 0.7);
}

.site-footer__container {
	max-width: 1180px;
	margin: 0 auto;
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
}

.site-footer__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 26px;
	color: var(--wp--preset--color--sfondo);
	margin-bottom: 0.5rem;
}

.site-footer__subtitle {
	font-size: 12px;
	/* Sul fondo scuro del footer il token testo-soft (#6a6864) sarebbe
	   illeggibile: qui serve il verso opposto, un grigio piu' chiaro del fondo.
	   #a8a6a0 fa 5.9:1 su #2b2a26 e resta piu' tenue del #b8b6b0 del footer. */
	color: #a8a6a0;
	line-height: 1.7;
}

.site-footer__col-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #a8a6a0;
	margin-bottom: 0.8rem;
}

.site-footer__menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer__menu li {
	line-height: 2;
}

/* Il menu del footer e' un elenco in cui OGNI voce e' un link: il contesto
   basta a riconoscerli, la sottolineatura su tutte sarebbe solo rumore. */
.site-footer__menu a {
	color: #d0cec8;
	text-decoration: none;
	font-size: 13px;
}

.site-footer__menu a:hover {
	color: var(--wp--preset--color--sfondo);
}

.site-footer__contatti {
	font-size: 13px;
	color: #d0cec8;
	line-height: 1.7;
}

.site-footer__contatti a {
	color: #d0cec8;
}

.site-footer__contatti a:hover {
	color: var(--wp--preset--color--sfondo);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #a8a6a0;
}

.site-footer__legal {
	display: flex;
	gap: 1.5rem;
}

.site-footer__legal a {
	color: #b8b6b0;
}

@media (max-width: 768px) {
	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.site-footer__top>div {
		padding-bottom: 1.5rem;
		border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
	}

	.site-footer__top>div:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.site-footer__bottom {
		flex-direction: column;
		gap: 0.8rem;
		text-align: center;
		line-height: 1.7;
	}
}

/* homepage */

/* La home usa un <main class="site-home"> a tutta larghezza (front-page.php
   rende un header proprio dentro l'hero, senza get_header): niente vincoli di
   .site-main, le sezioni gestiscono da sole i loro container. */
.site-home {
	display: block;
}

.home-config-warning,
.site-home>.home-config__msg {
	max-width: 780px;
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
	color: var(--wp--preset--color--testo-soft);
}

/* Hero */
.home-hero {
	position: relative;
	min-height: 80vh;
	background-color: var(--wp--preset--color--testo);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.home-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* sopra lo slideshow (z-index 1, ma prima nel DOM), sotto il container (z-index 2) */
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.75) 100%);
}

/* Su mobile la sfumatura lascia il posto a un velo uniforme: con l'hero piu'
   corto e il testo che ne occupa quasi tutta l'altezza, le fasce chiare del
   gradiente finivano dietro al titolo. Cambia solo il background: posizione e
   z-index restano quelli della regola sopra. */
@media (max-width: 767px) {
	.home-hero__overlay {
		background: rgba(0, 0, 0, 0.4);
	}
}

/* Slideshow foto dell'hero (fade cross-dissolvenza). */
.home-hero__slideshow {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* sotto claim/bottoni/logo (container z-index 2) */
	overflow: hidden;
}

.home-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	/* fade lento contemplativo */
}

.home-hero__slide[data-active="1"] {
	opacity: 1;
}

.home-hero__slide picture,
.home-hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-hero__container {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 2rem;
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.home-hero__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 0;
}

.home-hero__logo img {
	height: 44px;
	width: auto;
	display: block;
}

.home-hero__brand {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--sfondo);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.home-hero__nav a {
	color: #f5f4f0;
	font-size: 18px;
	text-decoration: none;
}

.home-hero__nav a:hover {
	text-decoration: underline;
}

.home-hero__content {
	padding-bottom: 70px;
}

.home-hero__occhiello {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-bottom: 0.2rem;
	opacity: 1;
}

.home-hero__titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 500;
	line-height: 1.02;
	color: #fff;
	letter-spacing: -0.015em;
	margin: 0 0 2rem 0;
}

.home-hero__titolo span {
	display: block;
}

.home-hero__titolo--italic {
	font-style: italic;
	font-weight: 400;
}

.home-hero__cta {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.home-hero__cta-primario {
	background: var(--wp--preset--color--accento);
	color: #fff;
	padding: 14px 28px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.home-hero__cta-primario:hover {
	text-decoration: none;
	opacity: 0.92;
}

.home-hero__cta-secondario {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 3px;
}

.home-hero__cta-secondario:hover {
	text-decoration: none;
	border-bottom-color: #fff;
}

/* Intro */
.home-intro {
	background: var(--wp--preset--color--sfondo);
	padding: 5rem 2rem 3rem;
}

.home-intro__container {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.home-intro__occhiello {
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 1rem;
}

.home-intro__titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 34px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	margin: 0 0 1rem 0;
	line-height: 1.2;
}

.home-intro__testo {
	font-size: 16px;
	color: #4a4844;
	line-height: 1.7;
	max-width: 600px;
	margin: 0 auto;
}

/* Mappa */
.home-mappa-wrapper {
	width: 100%;
}

/* Ancora "Esplora la mappa": stacco dal bordo dopo lo scroll. */
#mappa {
	scroll-margin-top: 20px;
}

.home-mappa-wrapper .marcognano-mappa {
	width: 100%;
	max-width: none;
}

/* Trittico */
.home-trittico {
	background: #F1EDE4;
	padding: 5rem 2rem;
}

.home-trittico__container {
	max-width: 1000px;
	margin: 0 auto;
}

.home-trittico__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.home-trittico__card {
	background: var(--wp--preset--color--card);
	border: 0.5px solid rgba(0, 0, 0, 0.08);
	padding: 1.8rem 1.5rem;
	border-radius: 4px;
}

.home-trittico__card svg {
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--accento);
	margin-bottom: 1rem;
	stroke: currentColor;
	fill: none;
}

.home-trittico__card-titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 0.5rem 0;
	color: var(--wp--preset--color--testo);
}

.home-trittico__card-testo {
	font-size: 14px;
	color: #6a6864;
	line-height: 1.6;
	margin: 0;
}

/* Progetto */
.home-progetto {
	background: var(--wp--preset--color--sfondo);
	padding: 6rem 2rem;
}

.home-progetto__container {
	max-width: 1180px;
	margin: 0 auto;
}

.home-progetto__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 5rem;
	align-items: center;
}

.home-progetto__immagine img {
	width: 100%;
	height: auto;
	border-radius: 2px;
	display: block;
}

.home-progetto__placeholder {
	background: #d5d2c8;
	height: 420px;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Su fondo sabbia #d5d2c8 il token testo-soft si ferma a 3.68:1: qui serve
	   il grigio piu' scuro gia' in uso come testo secondario (6.03:1). */
	color: #4a4844;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-progetto__occhiello {
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 1rem;
}

.home-progetto__titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 38px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	margin: 0 0 1.5rem 0;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.home-progetto__testo {
	font-size: 16px;
	color: #4a4844;
	line-height: 1.75;
	margin: 0 0 1.8rem 0;
}

.home-progetto__cta {
	display: inline-block;
	color: var(--wp--preset--color--accento);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-bottom: 2px solid var(--wp--preset--color--accento);
	padding-bottom: 3px;
	letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 768px) {
	.home-hero {
		min-height: 70vh;
	}

	/* 80vh su cellulare sarebbe eccessivo */
	.home-hero__titolo {
		font-size: 44px;
	}

	.home-trittico__grid,
	.home-progetto__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.home-hero__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.home-hero__nav {
		display: none;
		/* mobile nav è un tema a sé, la faremo dopo */
	}
}

/* single monumento */

/* Integrazione con la cornice del tema: la scheda del monumento e' iniettata
   nel the_content dentro .site-main (max-width 1180 + padding). Su single-poi
   togliamo quei vincoli cosi' i container interni gestiscono da soli larghezza
   e gutter, e le fasce full-width (mappa, altri monumenti) restano edge-to-edge.
   Il titolo generico del tema non viene proprio stampato: vedi single.php. */
.single-poi .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Breadcrumb */
/* Breadcrumb condiviso fra scheda monumento e pagina percorso: stesso pattern
   (Home > landing > pagina corrente), stesse regole. */
.marc-scheda-breadcrumb,
.marc-tema-breadcrumb {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem 2rem 0.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	color: var(--wp--preset--color--testo-soft);
	letter-spacing: 0.02em;
}

/* WCAG 1.4.1: il link del breadcrumb non puo' distinguersi dal solo colore.
   Sottolineatura tenue nel rosso d'accento, piena in hover e in focus. */
.marc-scheda-breadcrumb a,
.marc-tema-breadcrumb a {
	color: var(--wp--preset--color--testo);
	text-decoration: underline;
	text-decoration-color: rgba(192, 57, 43, 0.4);
	text-underline-offset: 3px;
}

.marc-scheda-breadcrumb a:hover,
.marc-scheda-breadcrumb a:focus,
.marc-tema-breadcrumb a:hover,
.marc-tema-breadcrumb a:focus {
	text-decoration-color: var(--wp--preset--color--accento);
}

.marc-scheda-breadcrumb-sep,
.marc-tema-breadcrumb-sep {
	margin: 0 0.5rem;
	color: var(--wp--preset--color--testo-soft);
}

.marc-scheda-breadcrumb-current,
.marc-tema-breadcrumb-current {
	color: var(--wp--preset--color--testo-soft);
}

@media (max-width: 768px) {

	.marc-scheda-breadcrumb,
	.marc-tema-breadcrumb {
		font-size: 13px;
		padding: 1rem 1rem 0.25rem;
	}
}

/* Header titolo */
.marc-scheda-header {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1rem 2rem 3rem;
}

.marc-scheda-occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.18em;

	padding-top: 0px;
}

.marc-scheda-titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 56px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
	padding-top: 0px;
}

/* Sezione dati (grid foto + catalogo) */
.marc-scheda-dati-sezione {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
}

.marc-scheda-dati-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 4rem;
	align-items: start;
}

.marc-scheda-foto-evidenza {
	margin: 0;
}

.marc-scheda-foto-evidenza img {
	width: 100%;
	/* height:auto !important sovrascrive l'attributo height="..." che WordPress
	   mette in HTML sull'img, permettendo all'aspect-ratio + object-fit di
	   prendere il controllo del rendering. */
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.marc-scheda-foto-evidenza figcaption {
	margin-top: 0.8rem;
	font-size: 13px;
	color: #6a6864;
	font-style: italic;
	line-height: 1.4;
}

.marc-scheda-foto-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #d5d2c8;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Su fondo sabbia #d5d2c8 il token testo-soft si ferma a 3.68:1: qui serve
	   il grigio piu' scuro gia' in uso come testo secondario (6.03:1). */
	color: #4a4844;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Foto in evidenza cliccabile (apre il lightbox) */
.marc-scheda-foto-evidenza a {
	display: block;
	cursor: zoom-in;
	position: relative;
}

.marc-scheda-foto-evidenza a:hover img {
	filter: brightness(0.92);
	transition: filter 0.2s;
}

/* Dati di catalogo */
.marc-scheda-catalogo {
	border-top: 2px solid var(--wp--preset--color--accento);
	padding-top: 1.2rem;
	margin-bottom: 2rem;
}

.marc-scheda-sezione-titolo {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 10px;
	font-weight: 600;
	color: var(--wp--preset--color--testo-soft);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 1rem;
	/* Ora e' un <h2>: si annullano padding-top e line-height della regola
	   globale h1-h6, che altrimenti cambierebbero l'aspetto dell'etichetta. */
	padding-top: 0;
	line-height: inherit;
}

.marc-scheda-catalogo-lista {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 0.7rem 1.5rem;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.marc-scheda-catalogo-lista dt {
	color: var(--wp--preset--color--testo-soft);
	margin: 0;
}

.marc-scheda-catalogo-lista dd {
	color: var(--wp--preset--color--testo);
	margin: 0;
}

.marc-scheda-catalogo-lista dd a {
	color: var(--wp--preset--color--testo);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accento);
}

/* Temi (chips) */
.marc-scheda-temi {
	border-top: 0.5px solid rgba(0, 0, 0, 0.1);
	padding-top: 1.5rem;
}

/* Mini-mappa quadrata in coda alla colonna dati: stesso stacco dei temi. */
.marc-scheda-mini-mappa-wrapper {
	border-top: 0.5px solid rgba(0, 0, 0, 0.1);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

.marc-scheda-temi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.marc-scheda-tema-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--wp--preset--color--sfondo);
	border: 0.5px solid rgba(0, 0, 0, 0.15);
	border-radius: 2px;
	font-size: 12px;
	color: var(--wp--preset--color--testo);
	text-decoration: none;
}

.marc-scheda-tema-pallino {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

/* Storia e descrizione */
.marc-scheda-storia {
	max-width: 780px;
	margin: 0 auto;
	/* I 5rem in cima staccavano dalla fascia mappa full-width, ora rimossa. */
	padding: 2rem 2rem 4rem;
}

.marc-scheda-storia-occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 1.2rem;
	/* Ora e' un <h2>: si annullano padding-top e line-height della regola
	   globale h1-h6, che altrimenti cambierebbero l'aspetto dell'etichetta. */
	padding-top: 0;
	line-height: inherit;
}

.marc-scheda-storia p {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	color: var(--wp--preset--color--testo);
	line-height: 1.85;
	margin: 0 0 0.3rem;
}



/* Galleria */
.marc-scheda-galleria {
	max-width: 1180px;
	margin: 0 auto;
	/* Segue la sezione dati, che chiude gia' con 4rem: il top puo' stare basso. */
	padding: 2rem 2rem 3rem;
}

.marc-scheda-galleria-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
}

.marc-scheda-galleria-item {
	display: block;
	border-radius: 2px;
	overflow: hidden;
	cursor: zoom-in;
}

.marc-scheda-galleria-item img {
	width: 100%;
	/* height:auto !important sovrascrive l'attributo height="..." che WordPress
	   mette in HTML sull'img, permettendo all'aspect-ratio + object-fit di
	   prendere il controllo del rendering. */
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.marc-scheda-galleria-item:hover img {
	transform: scale(1.03);
}

/* Altri monumenti */
.marc-scheda-altri-monumenti {
	background: #F1EDE4;
	padding: 4rem 2rem;
}

.marc-scheda-altri-container {
	max-width: 1180px;
	margin: 0 auto;
}

.marc-scheda-altri-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.marc-scheda-altro-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.marc-scheda-altro-img {
	margin-bottom: 0.8rem;
	border-radius: 2px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.marc-scheda-altro-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.marc-scheda-altro-card:hover .marc-scheda-altro-img img {
	transform: scale(1.04);
}

.marc-scheda-altro-img--placeholder {
	background: #d5d2c8;
}

.marc-scheda-altro-titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	margin-bottom: 0.2rem;
	line-height: 1.25;
}

.marc-scheda-altro-meta {
	font-size: 12px;
	color: var(--wp--preset--color--testo-soft);
}

/* Responsive scheda monumento */
@media (max-width: 768px) {
	.marc-scheda-titolo {
		font-size: 36px;
	}

	.marc-scheda-dati-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.marc-scheda-galleria-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.8rem;
	}

	.marc-scheda-altri-grid {
		grid-template-columns: 1fr;
	}
}

/* GLightbox — titolo del monumento sopra, didascalia sotto, su fondo scuro.
   Nota di specificita', la ragione per cui i selettori sono cosi' lunghi:
   lo skin "clean" del CDN dichiara .glightbox-clean .gslide-description
   {background:#fff} con la STESSA specificita' (0,2,0) di
   .glightbox-container .gslide-*, quindi a parita' vinceva il foglio caricato
   per ultimo — e l'ordine e' diverso fra le due pagine: sulla scheda monumento
   il plugin accoda glightbox PRIMA di main.css (fondo trasparente),
   sull'archivio tema il tema lo accoda DOPO (fondo bianco). Da li' la resa
   incoerente. GLightbox mette entrambe le classi sullo stesso elemento
   (#glightbox-body.glightbox-container + glightbox-<skin>), quindi
   .glightbox-container.glightbox-clean vale 0,3,0 e vince comunque, in
   qualunque ordine arrivino i fogli. Titolo e didascalia stanno dentro
   .gslide-description: qualificarli con essa porta a 0,4,0 e batte anche le
   regole mobile del CDN (.glightbox-mobile .glightbox-container .gslide-title,
   0,3,0), che altrimenti rimetterebbero i loro colori su telefono. */
html:not(.glightbox-mobile) .glightbox-container.glightbox-clean .gslide-description {
	/* Niente pannello bianco: sotto c'e' l'overlay nero .92 di GLightbox.
	   Solo da desktop: su mobile il pannello sta SOPRA la foto e il CDN gli da'
	   un gradiente scuro che serve a rendere leggibile il testo — quello resta. */
	background: transparent;
	padding: 1.5rem 2rem;
}

.glightbox-container.glightbox-clean .gslide-description .gslide-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 500;
	color: #ffffff;
	line-height: 1.3;
	margin-bottom: 0.5rem;
}

.glightbox-container.glightbox-clean .gslide-description .gslide-desc {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-style: italic;
	color: #ffffff;
	line-height: 1.5;
}

.glightbox-container .gslide-image img {
	border-radius: 2px;
}

/* Frecce navigazione: rendile discrete */
.gnext,
.gprev,
.gclose {
	opacity: 0.7;
	transition: opacity 0.2s;
}

.gnext:hover,
.gprev:hover,
.gclose:hover {
	opacity: 1;
}

/* Mobile: forza posizione visibile delle frecce GLightbox
   (di default hanno top: -100%, cioè fuori schermo).
   L'utente le vuole visibili come indicazione di navigazione.
   GLightbox 3.3.1 nasconde le frecce mobile con top: -100% (fuori schermo).
   Le riportiamo centrate verticalmente. */
@media (max-width: 768px) {

	.glightbox-clean .gprev,
	.glightbox-clean .gnext {
		display: flex !important;
		opacity: 0.85;
		width: 40px !important;
		height: 40px !important;
		top: 50% !important;
		transform: translateY(-50%);
		background: rgba(0, 0, 0, 0.5) !important;
		border-radius: 50%;
	}

	.glightbox-clean .gprev {
		left: 12px !important;
	}

	.glightbox-clean .gnext {
		right: 12px !important;
	}

	.glightbox-clean .gclose {
		display: flex !important;
		opacity: 0.85;
		width: 40px !important;
		height: 40px !important;
		background: rgba(0, 0, 0, 0.5) !important;
		border-radius: 50%;
		top: 12px !important;
		right: 12px !important;
	}
}

/* taxonomy tema */

/* Su archivio tema le fasce sono full-width: azzero i vincoli di .site-main. */
.tax-tema .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Mappa full-width in cima */
.marc-tema__mappa-wrapper {
	width: 100%;
}

/* Header con numero + titolo + descrizione breve */
.marc-tema__header {
	background: var(--wp--preset--color--sfondo);
	padding: 3rem 2rem 1.5rem;
}

.marc-tema__header-container {
	max-width: 1180px;
	margin: 0 auto;
}

/* Occhiello e sottotitolo: stesse regole per la pagina del percorso e per
   Monumenti, che ne condividono l'impaginazione dell'header. */
.marc-tema__occhiello,
.marc-monumenti__occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 0rem;
}

.marc-tema__titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 52px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 1.5rem;
}

/* Sottotitolo del percorso: Cormorant corsivo grande, non piu' testo tenue. */
.marc-tema__descrizione-breve,
.marc-monumenti__descrizione-breve {
	max-width: 780px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--testo);
	line-height: 1.45;
	margin: 1.2rem 0 0;
}

/* Testo lungo in colonna 780px */
.marc-tema__testo-wrapper {
	padding: 2rem 2rem 5rem;
}

.marc-tema__testo {
	max-width: 780px;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	line-height: 1.85;
	color: var(--wp--preset--color--testo);
}

.marc-tema__testo p {
	margin: 0 0 1.5rem;
	padding-top: 12px;
}

.marc-tema__testo p:first-child {
	padding-top: 0;
}

/* Capolettera sulla prima lettera del primo paragrafo */
.marc-tema__testo p:first-child::first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 68px;
	font-weight: 500;
	color: var(--wp--preset--color--accento);
	float: left;
	line-height: 0.85;
	padding: 8px 8px 0 0;
}

/* Link nel testo con barra rossa sotto (stile catalogo) */
.marc-tema__testo a {
	color: var(--wp--preset--color--testo);
	text-decoration: none;
	border-bottom: 1.5px solid var(--wp--preset--color--accento);
	transition: color 0.2s;
}

.marc-tema__testo a:hover {
	color: var(--wp--preset--color--accento);
}

.marc-tema__testo em {
	font-style: italic;
}

.marc-tema__testo strong {
	font-weight: 600;
}

/* Galleria */
/* Padding verticale simmetrico: i 5rem in basso servivano a chiudere la pagina
   quando la galleria era l'ultima fascia; ora ha il testo lungo sotto. */
.marc-tema__galleria {
	background: #F1EDE4;
	padding: 4rem 2rem;
}

.marc-tema__galleria-container {
	max-width: 1180px;
	margin: 0 auto;
}

.marc-tema__sezione-titolo {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 10px;
	font-weight: 600;
	color: var(--wp--preset--color--testo-soft);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 2rem;
}

.marc-tema__galleria-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

.marc-tema__galleria-item {
	display: block;
	border-radius: 2px;
	overflow: hidden;
	cursor: zoom-in;
}

.marc-tema__galleria-item img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.marc-tema__galleria-item:hover img {
	transform: scale(1.03);
}

@media (max-width: 768px) {
	.marc-tema__titolo {
		font-size: 36px;
	}

	.marc-tema__testo {
		font-size: 16px;
	}

	.marc-tema__testo p:first-child::first-letter {
		font-size: 52px;
	}

	.marc-tema__galleria-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.8rem;
	}
}

/* Sommario: ancore alle sezioni. Stesse regole per la pagina percorso e per
   la pagina Monumenti: cambia solo il prefisso delle classi. */
.marc-tema__sommario,
.marc-monumenti__sommario {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem 2rem;
}

.marc-tema__sommario-container,
.marc-monumenti__sommario-container {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--wp--preset--color--bordo);
	border-bottom: 1px solid var(--wp--preset--color--bordo);
	padding: 1.2rem 0;
}

.marc-tema__sommario-label,
.marc-monumenti__sommario-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 10px;
	font-weight: 600;
	color: var(--wp--preset--color--testo-soft);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	white-space: nowrap;
}

.marc-tema__sommario-lista,
.marc-monumenti__sommario-lista {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
}

.marc-tema__sommario-lista li,
.marc-monumenti__sommario-lista li {
	margin: 0;
	padding: 0;
}

.marc-tema__sommario-lista a,
.marc-monumenti__sommario-lista a {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	text-decoration: none;
	border-bottom: 1.5px solid var(--wp--preset--color--accento);
	padding-bottom: 2px;
	transition: color 0.2s;
}

.marc-tema__sommario-lista a:hover,
.marc-tema__sommario-lista a:focus,
.marc-monumenti__sommario-lista a:hover,
.marc-monumenti__sommario-lista a:focus {
	color: var(--wp--preset--color--accento);
}

/* Stacco dal bordo superiore all'arrivo dell'ancora. */
#galleria,
#monumenti,
#approfondimento {
	scroll-margin-top: 1rem;
}

@media (max-width: 640px) {

	.marc-tema__sommario-container,
	.marc-monumenti__sommario-container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.8rem;
	}

	.marc-tema__sommario-lista,
	.marc-monumenti__sommario-lista {
		gap: 1rem;
	}

	.marc-tema__sommario-lista a,
	.marc-monumenti__sommario-lista a {
		font-size: 17px;
	}
}

/* page monumenti */

/* Su pagina Monumenti le fasce sono full-width: azzero i vincoli di .site-main. */
.page-template-page-monumenti .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

.marc-monumenti__header {
	max-width: 1180px;
	margin: 0 auto;
	padding: 3rem 2rem 1rem;
}

.marc-monumenti__titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 48px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
}

/* Approfondimento in fondo alla pagina: stessa colonna da 780px e stesso
   capolettera del testo lungo del percorso. Sostituisce .marc-monumenti__intro,
   che stampava lo stesso contenuto sopra la mappa. */
.marc-monumenti__approfondimento {
	padding: 3rem 2rem 5rem;
}

.marc-monumenti__approfondimento-container {
	max-width: 780px;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	line-height: 1.85;
	color: var(--wp--preset--color--testo);
}

.marc-monumenti__approfondimento-container p {
	margin: 0 0 1.5rem;
	padding-top: 12px;
}

.marc-monumenti__approfondimento-container p:first-child {
	padding-top: 0;
}

.marc-monumenti__approfondimento-container p:first-child::first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 68px;
	font-weight: 500;
	color: var(--wp--preset--color--accento);
	float: left;
	line-height: 0.85;
	padding: 8px 8px 0 0;
}

.marc-monumenti__approfondimento-container a {
	color: var(--wp--preset--color--testo);
	text-decoration: none;
	border-bottom: 1.5px solid var(--wp--preset--color--accento);
}

.marc-monumenti__approfondimento-container a:hover {
	color: var(--wp--preset--color--accento);
}

.marc-monumenti__approfondimento-container em {
	font-style: italic;
}

.marc-monumenti__approfondimento-container strong {
	font-weight: 600;
}

@media (max-width: 768px) {
	.marc-monumenti__approfondimento-container {
		font-size: 16px;
	}

	.marc-monumenti__approfondimento-container p:first-child::first-letter {
		font-size: 52px;
	}
}

.marc-monumenti__mappa {
	width: 100%;
	margin: 2rem 0 0;
}

.marc-monumenti__lista {
	background: #F1EDE4;
	padding: 4rem 2rem;
}

.marc-monumenti__grid {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.marc-monumenti__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.marc-monumenti__card-img {
	margin-bottom: 0.8rem;
	border-radius: 2px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.marc-monumenti__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.marc-monumenti__card:hover .marc-monumenti__card-img img {
	transform: scale(1.04);
}

.marc-monumenti__card-img--placeholder {
	background: #d5d2c8;
}

.marc-monumenti__card-titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	margin-bottom: 0.2rem;
	line-height: 1.25;
}

.marc-monumenti__card-meta {
	font-size: 12px;
	color: var(--wp--preset--color--testo-soft);
}

@media (max-width: 768px) {
	.marc-monumenti__titolo {
		font-size: 34px;
	}

	.marc-monumenti__grid {
		grid-template-columns: 1fr;
	}
}

/* taxonomy autore */

/* Su pagina autore le fasce sono full-width: azzero i vincoli di .site-main. */
.tax-autore .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

.marc-autore__header {
	max-width: 1180px;
	margin: 0 auto;
	padding: 3rem 2rem 1rem;
}

.marc-autore__occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 1rem;
}

.marc-autore__titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 48px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
}

/* Biografia: colonna stretta come gli altri testi discorsivi del sito. */
.marc-autore__bio {
	max-width: 780px;
	margin: 0 auto;
	padding: 1.5rem 2rem 3rem;
	font-size: 17px;
	line-height: 1.85;
	color: var(--wp--preset--color--testo);
}

.marc-autore__bio p {
	margin: 0 0 1.5rem;
}

.marc-autore__bio p:last-child {
	margin-bottom: 0;
}

/* Titolo della fascia card: allineato alla griglia .marc-monumenti__grid,
   che la pagina autore riusa tale e quale. */
.marc-autore__sezione-titolo {
	max-width: 1180px;
	margin: 0 auto 2rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 10px;
	font-weight: 600;
	color: var(--wp--preset--color--testo-soft);
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

@media (max-width: 768px) {
	.marc-autore__titolo {
		font-size: 34px;
	}

	.marc-autore__bio {
		font-size: 16px;
	}
}

/* page percorsi */

/* Il container interno sta nel partial condiviso: azzero i vincoli di
   .site-main. Le vecchie card a schermo intero (.marc-percorsi__card*) non
   esistono piu': la pagina usa la stessa griglia della home. */
.page-template-page-percorsi .site-main {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* mobile menu */

.site-menu-toggle {
	display: none;
	/* nascosto su desktop */
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	z-index: 100;
}

.site-menu-toggle__icon {
	display: block;
	width: 28px;
	height: 22px;
	position: relative;
}

.site-menu-toggle__icon span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wp--preset--color--testo);
	border-radius: 1px;
	transition: transform 0.2s, opacity 0.2s;
}

.site-menu-toggle__icon span:nth-child(1) {
	top: 0;
}

.site-menu-toggle__icon span:nth-child(2) {
	top: 10px;
}

.site-menu-toggle__icon span:nth-child(3) {
	top: 20px;
}

/* Su fondo scuro (hero): righe chiare */
.home-hero .site-menu-toggle__icon span {
	background: var(--wp--preset--color--sfondo);
}

/* Stato aperto: icona diventa X */
.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__icon span:nth-child(1) {
	top: 10px;
	transform: rotate(45deg);
}

.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__icon span:nth-child(3) {
	top: 10px;
	transform: rotate(-45deg);
}

/* Overlay a tutto schermo */
.site-menu-mobile-overlay {
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--testo);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-out, visibility 0.3s;
}

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

.site-menu-mobile-overlay__close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--sfondo);
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	padding: 8px 16px;
	font-family: sans-serif;
}

.site-menu-mobile-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	max-height: 80vh;
	overflow-y: auto;
}

.site-menu-mobile-overlay__list li {
	padding: 0;
	margin: 0;
}

.site-menu-mobile-overlay__list a {
	display: inline-block;
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 32px;
	font-weight: 500;
	color: var(--wp--preset--color--sfondo);
	text-decoration: none;
	line-height: 1.3;
}

.site-menu-mobile-overlay__list a:hover {
	color: var(--wp--preset--color--accento);
}

/* Voci con sotto-menu: indicatore +/- */
.site-menu-mobile-overlay__list .menu-item-has-children>a::after {
	content: ' +';
	display: inline-block;
	margin-left: 8px;
	font-family: monospace;
	font-size: 0.7em;
	color: rgba(255, 255, 255, 0.4);
	transition: transform 0.2s;
}

.site-menu-mobile-overlay__list .menu-item-has-children.is-expanded>a::after {
	content: ' –';
}

/* Sub-menu nascosto di default, si mostra al toggle */
.site-menu-mobile-overlay__list .sub-menu {
	display: none;
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}

.site-menu-mobile-overlay__list .menu-item-has-children.is-expanded>.sub-menu {
	display: block;
}

.site-menu-mobile-overlay__list .sub-menu a {
	font-size: 20px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
	padding: 8px 20px;
}

/* Blocca scroll body quando overlay aperto */
body.menu-open {
	overflow: hidden;
}

/* MEDIA QUERY MOBILE */
@media (max-width: 768px) {
	.site-menu-toggle {
		display: block;
	}

	/* Nascondi il menu desktop tradizionale su mobile */
	.site-header nav,
	.home-hero__nav {
		display: none;
	}
}

/* back to top */

.site-back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 150;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* Rosso d'accento: il fondo del footer e' scuro quanto il colore testo, un
	   tondo scuro ci si perderebbe dentro. */
	background: var(--wp--preset--color--accento);
	color: var(--wp--preset--color--sfondo);
	border: 0.5px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out, background 0.2s;
	padding: 0;
}

.site-back-to-top.is-visible {
	opacity: 0.85;
	transform: translateY(0);
}

.site-back-to-top:hover {
	background: #a93226;
	/* rosso mattone piu' scuro, non in palette */
	opacity: 1;
}

/* Focus in scuro: l'outline rosso sparirebbe sul tondo ormai rosso. */
.site-back-to-top:focus {
	outline: 2px solid var(--wp--preset--color--testo);
	outline-offset: 2px;
}

.site-back-to-top svg {
	display: block;
}

/* Mobile: leggermente piu' piccolo e vicino al bordo. */
@media (max-width: 768px) {
	.site-back-to-top {
		width: 40px;
		height: 40px;
		bottom: 16px;
		right: 16px;
	}
}




















.marc-progetto-intro {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 2rem;
}

.marc-progetto-intro p {
	font-size: 17px;
	line-height: 1.85;
	margin: 0 0 1.5rem;
	padding-top: 12px;
}

.marc-progetto-intro p:first-child {
	padding-top: 0;
}

.marc-progetto-intro p:first-child::first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 68px;
	font-weight: 500;
	color: #C0392B;
	float: left;
	line-height: 0.85;
	padding: 8px 8px 0 0;
}

.marc-progetto-figura {
	max-width: 1180px;
	margin: 3rem auto;
	padding: 0 2rem;
}

.marc-progetto-figura img {
	width: 100%;
	aspect-ratio: 21/9;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	border-radius: 2px;
	height: auto !important;
}

.marc-progetto-figura figcaption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-style: italic;
	color: #6a6864;
	margin: 1rem auto 0;
	text-align: center;
	max-width: 780px;
	line-height: 1.5;
}

.marc-progetto-percorsi {
	background: #F1EDE4;
	padding: 4rem 2rem;
	margin: 4rem 0;
}

.marc-progetto-percorsi__header {
	text-align: center;
	max-width: 1180px;
	margin: 0 auto 3rem;
}

.marc-progetto-percorsi__occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	color: #C0392B;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 0.8rem;
}

.marc-progetto-percorsi h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 40px;
	font-weight: 500;
	color: #2b2a26;
	line-height: 1.1;
	margin: 0;
}

.marc-progetto-percorsi__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem 4rem;
	max-width: 900px;
	margin: 0 auto;
}

.marc-progetto-percorso {
	padding: 0;
}

.marc-progetto-percorso__linea {
	width: 32px;
	height: 2px;
	background: #C0392B;
	margin-bottom: 1rem;
}

.marc-progetto-percorso h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 26px;
	font-weight: 500;
	color: #2b2a26;
	line-height: 1.15;
	margin: 0 0 0.8rem;
}

.marc-progetto-percorso p {
	font-size: 15px;
	line-height: 1.7;
	color: #4a4844;
	margin: 0;
}

.marc-progetto-percorso--centrato {
	grid-column: 1 / -1;
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
}

.marc-progetto-percorso--centrato .marc-progetto-percorso__linea {
	margin-left: auto;
	margin-right: auto;
}

.marc-progetto-buonavisita {
	max-width: 780px;
	margin: 0 auto;
	padding: 4rem 2rem 5rem;
	text-align: center;
	position: relative;
}

.marc-progetto-buonavisita p {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 32px;
	font-weight: 400;
	font-style: italic;
	color: #2b2a26;
	line-height: 1.3;
	margin: 0;
	padding-bottom: 1.5rem;
}

.marc-progetto-buonavisita::after {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	background: #C0392B;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.marc-progetto-percorsi__grid {
		grid-template-columns: 1fr;
	}

	.marc-progetto-percorsi h2 {
		font-size: 28px;
	}

	.marc-progetto-percorso h3 {
		font-size: 22px;
	}

	.marc-progetto-buonavisita p {
		font-size: 24px;
	}

	.marc-progetto-intro p:first-child::first-letter {
		font-size: 52px;
	}
}

/* pagina perché marcognano */

/* Esergo di apertura */
.marc-perche__esergo {
	max-width: 1180px;
	margin: 0 auto;
	padding: 6rem 2rem 4rem;
	text-align: center;
}

.marc-perche__occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 3rem;
}

.marc-perche__esergo-quote {
	max-width: 780px;
	margin: 0 auto 2rem;
	padding: 0;
	border: none;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 34px;
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--testo);
	line-height: 1.35;
}

.marc-perche__esergo-quote p {
	margin: 0;
	padding: 0;
}

.marc-perche__esergo-linea {
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--accento);
	margin: 0 auto 1.5rem;
}

.marc-perche__esergo-attribuzione {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	color: #6a6864;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Testo lungo in colonna 780px */
.marc-perche__testo {
	max-width: 780px;
	margin: 0 auto;
	padding: 2rem 2rem 3rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	line-height: 1.85;
	color: var(--wp--preset--color--testo);
}

.marc-perche__testo p {
	margin: 0 0 1.5rem;
	padding-top: 12px;
}


.marc-perche__testo>p:first-child {
	padding-top: 0;
}

.marc-perche__testo h3+p::first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 68px;
	font-weight: 500;
	color: var(--wp--preset--color--accento);
	float: left;
	line-height: 0.85;
	padding: 8px 8px 0 0;
}

/* Capolettera sulla prima lettera del primo paragrafo */
.marc-perche__testo>p:first-child::first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 68px;
	font-weight: 500;
	color: var(--wp--preset--color--accento);
	float: left;
	line-height: 0.85;
	padding: 8px 8px 0 0;
}

/* H3 sezioni interne */
.marc-perche__testo h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 36px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	line-height: 1.1;
	margin: 3rem 0 1.5rem;
}

/* Blockquote: parte dallo stile globale, raffinato per questa pagina. */
.marc-perche__testo blockquote {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: #4a4844;
	margin: 2rem 0 2rem 20px;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--wp--preset--color--accento);
}

.marc-perche__testo blockquote p {
	margin: 0;
	padding: 0;
}

/* Link nel testo con barra rossa sotto (coerente con le altre pagine
   editoriali: percorso e autore). */
.marc-perche__testo a {
	color: var(--wp--preset--color--testo);
	text-decoration: none;
	border-bottom: 1.5px solid var(--wp--preset--color--accento);
	transition: color 0.2s;
}

.marc-perche__testo a:hover {
	color: var(--wp--preset--color--accento);
}

.marc-perche__testo em {
	font-style: italic;
}

.marc-perche__testo strong {
	font-weight: 600;
}

/* Sezione documenti d'archivio */
.marc-perche__documenti {
	background: #F1EDE4;
	padding: 5rem 2rem;
	margin-top: 4rem;
}

.marc-perche__documenti-header {
	text-align: center;
	max-width: 1180px;
	margin: 0 auto 3rem;
}

.marc-perche__documenti-occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 0.8rem;
}

.marc-perche__documento-caption {
	font-size: 11px;
	line-height: 13px;
	padding-top: 8px;
	font-style: italic;
}


.marc-perche__documenti-header h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 40px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	line-height: 1.1;
	margin: 0;
}

.marc-perche__documenti-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
}

.marc-perche__documento {
	display: block;
	aspect-ratio: 3/4;
	background: #d5d2c8;
	border-radius: 2px;
	overflow: hidden;
	cursor: zoom-in;
}

.marc-perche__documento img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.marc-perche__documento:hover img {
	transform: scale(1.03);
}

/* Documento come <figure>: la foto in cima, la didascalia nativa
   dell'allegato sotto. Il wrapper e' il figlio diretto della griglia, ma
   .marc-perche__documenti-grid non ha selettori sui figli diretti, quindi il
   layout a colonne resta quello di prima; l'aspect-ratio 3/4 sta sull'<a>,
   che come flex item a colonna prende comunque tutta la larghezza. */
.marc-perche__documento-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.marc-perche__documento-caption {
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-style: italic;
	color: var(--wp--preset--color--testo-soft);
	line-height: 1.5;
	text-align: center;
}

/* Documento singolo affiancato al testo lungo ([marcognano_documento_inline]).
   Stesso pattern grafico del grid, ma in colonna di testo: il float lo mette
   il modificatore, la classe base tiene misura e margini verticali. */
.marc-perche__documento-inline {
	margin: 0.75rem 0 1.25rem 0;
	max-width: 45%;
}

.marc-perche__documento-inline--right {
	float: right;
	margin-left: 1.5rem;
}

.marc-perche__documento-inline--left {
	float: left;
	margin-right: 1.5rem;
}

.marc-perche__documento-inline img {
	width: 100%;
	height: auto;
	display: block;
}

.marc-perche__documento-inline-caption {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	line-height: 13px;
	padding-top: 8px;
	font-style: italic;
	color: var(--wp--preset--color--testo-soft);
	text-align: left;
}

/* Sotto i 640px il float e' inutile: la colonna e' troppo stretta perche' il
   testo scorra accanto in modo leggibile. */
@media (max-width: 640px) {

	.marc-perche__documento-inline,
	.marc-perche__documento-inline--right,
	.marc-perche__documento-inline--left {
		float: none;
		max-width: 100%;
		margin: 1.5rem 0;
	}
}

/* Clearfix: senza, un documento inline piu' alto del testo che lo affianca
   sborda dal blocco e va a finire sopra la sezione dei documenti d'archivio.
   .marc-perche__testo non aveva ne' clearfix ne' overflow: hidden (l'unico
   overflow qui intorno e' su .marc-perche__documento, per lo zoom in hover
   della tessera del grid), quindi non si duplica nulla. */
.marc-perche__testo::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 768px) {
	.marc-perche__esergo {
		padding: 3rem 2rem 2rem;
	}

	.marc-perche__esergo-quote {
		font-size: 24px;
	}

	.marc-perche__testo {
		font-size: 16px;
	}

	.marc-perche__testo>p:first-child::first-letter {
		font-size: 52px;
	}

	.marc-perche__testo h3 {
		font-size: 26px;
	}

	.marc-perche__testo blockquote {
		font-size: 18px;
		margin-left: 12px;
		padding-left: 1rem;
	}

	.marc-perche__documenti-header h2 {
		font-size: 28px;
	}

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

.marc-perche__documenti-grid br,
.marc-perche__documento br {
	display: none;
}

/* griglia percorsi (home + pagina Percorsi) */

.percorsi-grid {
	padding: 5rem 0 4rem;
	background: var(--wp--preset--color--sfondo);
}

.percorsi-grid__container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 2rem;
}

.percorsi-grid__header {
	text-align: center;
	margin-bottom: 3rem;
}

.percorsi-grid__occhiello {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--accento);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 1rem;
}

.percorsi-grid__titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 40px;
	font-weight: 500;
	color: var(--wp--preset--color--testo);
	line-height: 1.1;
	margin: 0 0 1rem;
}

.percorsi-grid__intro {
	max-width: 620px;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	line-height: 1.7;
	color: #4a4844;
}

.percorsi-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Card generica */
.percorsi-grid__card {
	display: block;
	aspect-ratio: 1/1;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
}

.percorsi-grid__card-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 44px;
	/* altezza della barra colorata sotto */
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease-out, filter 0.4s ease-out;
}

.percorsi-grid__card-img--fallback {
	background: linear-gradient(135deg, #6a5c4a 0%, #3d3428 100%);
}

.percorsi-grid__card-img--fallback-scuro {
	background: linear-gradient(135deg, #4a3a2f 0%, #2b1f18 100%);
}

.percorsi-grid__card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 44px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 100%);
	transition: background 0.3s;
}

.percorsi-grid__card-overlay--scuro {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.85) 100%);
}

.percorsi-grid__card-content {
	position: absolute;
	bottom: 44px;
	/* sopra la barra colorata */
	left: 0;
	right: 0;
	padding: 1.5rem;
	color: var(--wp--preset--color--card);
}

.percorsi-grid__card-titolo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 26px;
	font-weight: 500;
	color: var(--wp--preset--color--card);
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

.percorsi-grid__card-descrizione {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0.8rem;
}

/* Barra colorata bassa: il colore arriva inline dal term meta del tema.
   E' posizionata in assoluto come il resto della card, non in flex: gli altri
   figli sono fuori flusso e un flex-column li ignorerebbe, mettendo la barra
   in cima invece che in fondo. */
.percorsi-grid__card-barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.2rem;
	color: var(--wp--preset--color--card);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	transition: filter 0.2s;
}

/* Card Monumenti: colore fisso, quindi dalla palette e non inline. */
.percorsi-grid__card--monumenti .percorsi-grid__card-barra {
	background: var(--wp--preset--color--accento);
}

/* Fondo chiaro (ambra, verde, ciano): il bianco scenderebbe sotto 2.5:1. Il
   nero non e' il token "testo" (#2B2A26) ma un grado piu' scuro: sul ciano
   #0E9AA7 il token si ferma a 4.24:1, sotto AA, mentre #1a1815 fa 5.23:1.
   Tenere allineato a MARCOGNANO_TESTO_SU_CHIARO in functions.php, che e' il
   valore con cui il calcolo decide quale dei due testi usare. */
.percorsi-grid__card--barra-light .percorsi-grid__card-barra {
	color: #1a1815;
}

.percorsi-grid__card:hover .percorsi-grid__card-barra {
	filter: brightness(0.9);
}

/* Card Monumenti (variante) */
.percorsi-grid__card--monumenti .percorsi-grid__card-descrizione {
	color: rgba(255, 255, 255, 0.75);
}

/* Hover: leggero zoom sulla foto + schiarita dell'overlay */
.percorsi-grid__card:hover .percorsi-grid__card-img {
	transform: scale(1.04);
	filter: brightness(1.05);
}

.percorsi-grid__card:hover .percorsi-grid__card-overlay {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.80) 100%);
}

.percorsi-grid__card--monumenti:hover .percorsi-grid__card-overlay {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.60) 50%, rgba(0, 0, 0, 0.90) 100%);
}

/* Focus visibile per accessibilita' */
.percorsi-grid__card:focus {
	outline: 3px solid var(--wp--preset--color--accento);
	outline-offset: 3px;
}

@media (max-width: 1024px) and (min-width: 641px) {
	.percorsi-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.percorsi-grid {
		padding: 3rem 0 2rem;
	}

	.percorsi-grid__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.percorsi-grid__titolo {
		font-size: 28px;
	}

	.percorsi-grid__card-titolo {
		font-size: 22px;
	}
}

/* barrette laterali colorate (header tema/monumenti + sub-menu) */

/* Header con barretta verticale a sinistra del titolo. Stesse regole per la
   pagina del percorso e per Monumenti: cambia solo il colore. */
.marc-tema__header-flex,
.marc-monumenti__header-flex {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
}

.marc-tema__barretta,
.marc-monumenti__barretta {
	width: 4px;
	flex-shrink: 0;
	border-radius: 2px;
}

/* Sul percorso il colore arriva inline dal term meta; qui il rosso fisso. */
.marc-monumenti__barretta {
	background: var(--wp--preset--color--accento);
}

.marc-tema__header-testo,
.marc-monumenti__header-testo {
	flex: 1;
}

/* Sub-menu: barretta del colore del tema a sinistra di ogni voce. La variabile
   --tema-colore la mette il filtro nav_menu_link_attributes sulle sole voci di
   tassonomia "tema"; sulle altre resta indefinita e la barretta e' invisibile. */
.site-header nav .sub-menu a,
.home-hero__nav .sub-menu a {
	position: relative;
	padding-left: 1.5rem;
}

.site-header nav .sub-menu a::before,
.home-hero__nav .sub-menu a::before {
	content: '';
	position: absolute;
	left: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	background: var(--tema-colore, transparent);
	border-radius: 1.5px;
	transition: height 0.15s;
}

.site-header nav .sub-menu a:hover::before,
.home-hero__nav .sub-menu a:hover::before {
	height: 80%;
}

/* Overlay mobile: la barretta sta in linea, prima del testo della voce. */
.site-menu-mobile-overlay__list .sub-menu a::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 14px;
	background: var(--tema-colore, transparent);
	margin-right: 12px;
	vertical-align: middle;
	border-radius: 1.5px;
}

@media (max-width: 768px) {

	.marc-tema__header-flex,
	.marc-monumenti__header-flex {
		gap: 1rem;
	}

	.marc-tema__barretta,
	.marc-monumenti__barretta {
		width: 3px;
	}
}