/* Stili front-end del plugin Telaio Core.
   Neutri e indipendenti dal tema; supportano il dark mode di Telaio
   (html[data-theme="dark"]) e, in sua assenza, la preferenza di sistema. */

/* Box "In sintesi" (key takeaways) */
.telaio-takeaways {
	border: 1px solid rgba(0, 0, 0, .12);
	border-left: 4px solid #205d41;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	background: rgba(0, 0, 0, .02);
}

.telaio-takeaways__title {
	margin: 0 0 .5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .85rem;
}

.telaio-takeaways__list {
	margin: 0;
	padding-left: 1.2rem;
}

.telaio-takeaways__list li {
	margin: .25rem 0;
}

/* Sezione FAQ (Domande frequenti) in coda all'articolo */
.telaio-post-faq {
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.telaio-post-faq__title {
	font-size: 1.4rem;
	margin: 0 0 1rem;
}

.telaio-post-faq__item {
	margin: 0 0 1.1rem;
}

.telaio-post-faq__q {
	font-size: 1.05rem;
	margin: 0 0 .3rem;
}

.telaio-post-faq__a {
	margin: 0;
}

html[data-theme="dark"] .telaio-post-faq {
	border-top-color: rgba(255, 255, 255, .14);
}

/* Box di download della risorsa: il form di sblocco se e' un lead-magnet, il
   bottone diretto se e' un documento libero. */
.telaio-resource-gate {
	margin: 2rem 0 0;
	padding: 1.5rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	background: rgba(0, 0, 0, .02);
}

.telaio-resource-gate__title {
	margin: 0 0 1rem;
	font-size: 1.3rem;
}

html[data-theme="dark"] .telaio-resource-gate {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .04);
}

/* Bottone di download. Serve sia al link diretto del documento libero sia a quello
   consegnato alla conferma del form: "class=button" da sola non la stila nessuno,
   ne' il tema ne' Gravity Forms, e il link resterebbe testo nudo. */
.telaio-resource-dl {
	margin: 0;
}

.telaio-resource-dl .button {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 8px;
	background: #205d41;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .3s;
}

.telaio-resource-dl .button:hover,
.telaio-resource-dl .button:focus-visible {
	background: #5a8671;
	color: #fff;
}

html[data-theme="dark"] .telaio-resource-dl .button {
	background: #85cda4;
	color: #12150f;
}

/* Scadenzario normativo (shortcode [telaio_scadenzario]) */
.telaio-scadenzario {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.telaio-scadenzario__item {
	padding: .75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.telaio-scadenzario__date {
	display: inline-block;
	font-weight: 700;
	min-width: 8.5rem;
}

.telaio-scadenzario__title {
	font-weight: 600;
}

.telaio-scadenzario__desc {
	margin: .35rem 0 0;
}

html[data-theme="dark"] .telaio-scadenzario__item {
	border-bottom-color: rgba(255, 255, 255, .12);
}

/* Block style: Callout normativo (core/group) */
.wp-block-group.is-style-telaio-callout {
	border-left: 4px solid #205d41;
	background: rgba(32, 93, 65, .06);
	padding: 1rem 1.25rem;
	border-radius: 4px;
}

html[data-theme="dark"] .wp-block-group.is-style-telaio-callout {
	border-left-color: #85cda4;
	background: rgba(133, 205, 164, .08);
}

/* Block style: Box "Cosa fare" (core/group) */
.wp-block-group.is-style-telaio-action {
	border: 1px solid #205d41;
	background: rgba(32, 93, 65, .04);
	padding: 1.25rem;
	border-radius: 8px;
}

html[data-theme="dark"] .wp-block-group.is-style-telaio-action {
	border-color: #85cda4;
	background: rgba(133, 205, 164, .06);
}

/* Block style: Tabella comparativa (core/table) */
.wp-block-table.is-style-telaio-comparison table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table.is-style-telaio-comparison th {
	background: #205d41;
	color: #fff;
	padding: .5rem .75rem;
	text-align: left;
}

.wp-block-table.is-style-telaio-comparison td {
	padding: .5rem .75rem;
}

.wp-block-table.is-style-telaio-comparison tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, .03);
}

html[data-theme="dark"] .wp-block-table.is-style-telaio-comparison tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, .05);
}

/* Link automatico dei termini del glossario */
.telaio-glossary-link {
	border-bottom: 1px dotted currentColor;
	text-decoration: none;
}

/* Agenda eventi (shortcode [telaio_agenda]) */
.telaio-agenda {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.telaio-agenda__item {
	padding: .75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.telaio-agenda__date {
	font-weight: 700;
}

.telaio-agenda__title {
	font-weight: 600;
}

.telaio-agenda__loc {
	opacity: .8;
}

html[data-theme="dark"] .telaio-agenda__item {
	border-bottom-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .telaio-takeaways {
	border-color: rgba(255, 255, 255, .14);
	border-left-color: #85cda4;
	background: rgba(255, 255, 255, .04);
}

/* --- Archivio glossario: indice alfabetico A-Z --- */
.telaio-glossary-archive__inner {
	max-width: 70rem;
	margin-inline: auto;
	padding: 2rem 1rem;
}

.telaio-glossary-archive__title {
	margin-bottom: .5rem;
}

.telaio-glossary-index__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 1rem 0 2rem;
}

.telaio-glossary-index__nav a,
.telaio-glossary-index__nav span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	min-height: 2.2rem;
	text-align: center;
	padding: .35rem .55rem;
	border-radius: .35rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.telaio-glossary-index__nav a {
	background: rgba(0, 0, 0, .06);
	color: inherit;
}

.telaio-glossary-index__nav a:hover {
	background: rgba(0, 0, 0, .14);
}

.telaio-glossary-index__nav .is-empty {
	opacity: .3;
}

.telaio-glossary-index__group {
	margin: 1.75rem 0;
	scroll-margin-top: 2rem;
}

.telaio-glossary-index__letter {
	margin: 0 0 .6rem;
	padding-bottom: .2rem;
	border-bottom: 2px solid currentColor;
	font-size: 1.4rem;
}

.telaio-glossary-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Griglia (non column-width): i lemmi scorrono per riga = ordine DOM = ordine
	   di focus da tastiera, evitando i salti del layout a colonne. */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: .35rem 2rem;
}

.telaio-glossary-index__list li {
	margin: 0;
}

.telaio-glossary-index__top {
	display: inline-block;
	margin-top: .75rem;
	font-size: .85em;
	text-decoration: none;
	opacity: .8;
}

/* --- Scadenzario: badge della norma di riferimento --- */
.telaio-scadenzario__norme {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin-left: .4rem;
}

.telaio-scadenzario__norma {
	display: inline-block;
	padding: .05rem .5rem;
	border-radius: 1rem;
	background: rgba(0, 0, 0, .07);
	font-size: .8em;
	text-decoration: none;
	color: inherit;
}

.telaio-scadenzario__norma:hover {
	background: rgba(0, 0, 0, .14);
}

html[data-theme="dark"] .telaio-glossary-index__nav a {
	background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .telaio-glossary-index__nav a:hover {
	background: rgba(255, 255, 255, .16);
}

html[data-theme="dark"] .telaio-scadenzario__norma {
	background: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .telaio-scadenzario__norma:hover {
	background: rgba(255, 255, 255, .18);
}

/* --- Wrapper archivi forniti dal plugin (eventi, tassonomia norma) --- */
.telaio-archive-wrap {
	max-width: 70rem;
	margin-inline: auto;
	padding: 2rem 1rem;
}

.telaio-archive-wrap__title {
	margin-bottom: .5rem;
}

/* --- Dettagli evento / scadenza sulla pagina singola --- */
.telaio-event-details,
.telaio-scadenza-detail {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-left: 4px solid #205d41;
	border-radius: .4rem;
	background: rgba(0, 0, 0, .02);
}

.telaio-event-details__title {
	margin: 0 0 .6rem;
	font-size: 1.15rem;
}

.telaio-event-details__list {
	margin: 0;
}

.telaio-event-details__row {
	display: flex;
	gap: .75rem;
	padding: .2rem 0;
}

.telaio-event-details__row dt {
	flex: 0 0 8rem;
	font-weight: 700;
	margin: 0;
}

.telaio-event-details__row dd {
	margin: 0;
}

.telaio-event-details__cta {
	margin: .8rem 0 0;
}

.telaio-scadenza-detail__date {
	margin: 0 0 .4rem;
}

.telaio-scadenza-detail__norme {
	margin: 0;
}

.telaio-scadenza-detail__k {
	font-weight: 700;
	margin-right: .3rem;
}

/* --- Focus da tastiera visibile sui nuovi elementi interattivi --- */
.telaio-glossary-index__nav a:focus-visible,
.telaio-glossary-index__top:focus-visible,
.telaio-glossary-index__list a:focus-visible,
.telaio-scadenzario__norma:focus-visible,
.telaio-glossary-link:focus-visible {
	outline: 2px solid #205d41;
	outline-offset: 2px;
	border-radius: .2rem;
}

html[data-theme="dark"] .telaio-event-details,
html[data-theme="dark"] .telaio-scadenza-detail {
	border-color: rgba(255, 255, 255, .14);
	border-left-color: #85cda4;
	background: rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .telaio-glossary-index__nav a:focus-visible,
html[data-theme="dark"] .telaio-glossary-index__top:focus-visible,
html[data-theme="dark"] .telaio-glossary-index__list a:focus-visible,
html[data-theme="dark"] .telaio-scadenzario__norma:focus-visible,
html[data-theme="dark"] .telaio-glossary-link:focus-visible {
	outline-color: #85cda4;
}

/* Elenco risorse dello shortcode [telaio_risorse] */
.telaio-risorse {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.telaio-risorse__item {
	padding: .9rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.telaio-risorse__title {
	display: block;
	font-weight: 700;
}

.telaio-risorse__desc {
	display: block;
	margin-top: .2rem;
	font-size: .95em;
	opacity: .85;
}

html[data-theme="dark"] .telaio-risorse,
html[data-theme="dark"] .telaio-risorse__item {
	border-color: rgba(255, 255, 255, .14);
}

/* Blocco "Il progetto" sulla pagina singola del CPT progetto */
.telaio-project-details {
	margin: 2rem 0 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid #205d41;
	background: rgba(0, 0, 0, .02);
	border-radius: 0 8px 8px 0;
}

.telaio-project-details__title {
	margin: 0 0 .75rem;
	font-size: 1.2rem;
}

.telaio-project-details__list {
	display: grid;
	grid-template-columns: minmax(0, 10ch) minmax(0, 1fr);
	gap: .35rem 1.5rem;
	margin: 0;
}

.telaio-project-details__list dt {
	font-weight: 700;
}

.telaio-project-details__list dd {
	margin: 0;
}

@media (max-width: 600px) {
	.telaio-project-details__list {
		grid-template-columns: 1fr;
		gap: 0 0;
	}

	.telaio-project-details__list dd {
		margin-bottom: .6rem;
	}
}

html[data-theme="dark"] .telaio-project-details {
	background: rgba(255, 255, 255, .04);
	border-left-color: #85cda4;
}

/* Archivio progetti: barra dei filtri (costruita dal JS) ed elenco */
.telaio-progetti-filtri {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	background: rgba(0, 0, 0, .02);
}

.telaio-progetti-filtri__gruppo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.telaio-progetti-filtri__gruppo legend {
	float: left;
	width: 100%;
	margin: 0 0 .35rem;
	padding: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}

.telaio-progetti-filtri__btn {
	min-height: 2.5rem;
	padding: .35rem .9rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 2rem;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
}

.telaio-progetti-filtri__btn:hover {
	border-color: #205d41;
}

.telaio-progetti-filtri__btn:focus-visible {
	outline: 2px solid #205d41;
	outline-offset: 2px;
}

/* Lo stato selezionato non e' solo un colore: aria-pressed lo dice anche a chi
   non lo vede, ed e' l'attributo su cui si aggancia lo stile. */
.telaio-progetti-filtri__btn[aria-pressed="true"] {
	background: #205d41;
	border-color: #205d41;
	color: #fff;
	font-weight: 700;
}

.telaio-progetti-filtri__conteggio {
	margin: 0;
	font-size: .9rem;
	opacity: .8;
}

.telaio-progetti {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.telaio-progetti__item {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.telaio-progetti__title {
	font-size: 1.15rem;
	font-weight: 700;
	text-decoration: none;
}

.telaio-progetti__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .75rem;
	margin: .35rem 0 0;
	font-size: .88rem;
}

.telaio-progetti__stato {
	padding: .05rem .6rem;
	border-radius: 1rem;
	background: rgba(0, 0, 0, .07);
	font-weight: 700;
}

.telaio-progetti__stato--in-corso {
	background: rgba(32, 93, 65, .12);
	color: #205d41;
}

.telaio-progetti__ambito {
	padding: .05rem .6rem;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 1rem;
}

.telaio-progetti__desc {
	margin: .45rem 0 0;
	opacity: .9;
}

/* Selezione filtrabile [telaio_selezione]: le voci portano anche le classi
   .telaio-progetti*, quindi tutto lo stile qui sopra le veste gia'. Serve solo un
   distintivo per il TIPO, che in una lista mista e' il dato che orienta. */
.telaio-selezione__tipo {
	padding: .05rem .6rem;
	border-radius: 1rem;
	background: rgba(0, 0, 0, .07);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

html[data-theme="dark"] .telaio-selezione__tipo {
	background: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] .telaio-progetti-filtri,
html[data-theme="dark"] .telaio-progetti,
html[data-theme="dark"] .telaio-progetti__item {
	border-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .telaio-progetti-filtri {
	background: rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .telaio-progetti-filtri__btn {
	background: #1b201c;
	border-color: rgba(255, 255, 255, .2);
}

html[data-theme="dark"] .telaio-progetti-filtri__btn[aria-pressed="true"] {
	background: #85cda4;
	border-color: #85cda4;
	color: #12150f;
}

html[data-theme="dark"] .telaio-progetti__stato--in-corso {
	background: rgba(133, 205, 164, .16);
	color: #85cda4;
}

/* Pagina di ringraziamento condizionale (shortcode [telaio_thankyou]) */
.telaio-grazie {
	max-width: 46rem;
	margin: 0 auto;
	padding: 1rem 0 2rem;
}

.telaio-grazie__eyebrow {
	margin: 0 0 .35rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .75;
}

.telaio-grazie__title {
	margin: 0 0 .6rem;
}

/* Il titolo riceve il focus via JS: senza questa regola il contorno non si
   vedrebbe, e un focus invisibile e' peggio di nessun focus. */
.telaio-grazie__title:focus-visible {
	outline: 2px solid #205d41;
	outline-offset: 4px;
}

.telaio-grazie__lead {
	margin: 0 0 1.75rem;
	font-size: 1.05rem;
}

.telaio-grazie__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 0 0 1.75rem;
}

.telaio-grazie__card {
	padding: 1rem 1.25rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-left: 4px solid #205d41;
	border-radius: 8px;
	background: rgba(0, 0, 0, .02);
}

.telaio-grazie__card-title {
	margin: 0 0 .35rem;
	font-size: 1rem;
}

.telaio-grazie__card-text {
	margin: 0;
}

.telaio-grazie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
}

.telaio-grazie__btn {
	display: inline-block;
	padding: .8rem 1.6rem;
	border: 1px solid #205d41;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
}

.telaio-grazie__btn--primary {
	background: #205d41;
	color: #fff;
}

.telaio-grazie__btn:focus-visible {
	outline: 2px solid #205d41;
	outline-offset: 2px;
}

html[data-theme="dark"] .telaio-grazie__card {
	border-color: rgba(255, 255, 255, .14);
	border-left-color: #85cda4;
	background: rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .telaio-grazie__btn {
	border-color: #85cda4;
}

html[data-theme="dark"] .telaio-grazie__btn--primary {
	background: #85cda4;
	color: #12150f;
}