/* ===================================================================
   Varianti di blocco del tema con CSS dedicato (registrate in functions.php, $plur_block_variants).
   Si agganciano solo alle classi is-style-…; senza variante il blocco resta quello nativo.
   =================================================================== */

/* ---------- Elenco: spunte, in riga, in riga con spunte ---------- */
.is-style-check,
.is-style-inline,
.is-style-inline-check {
	list-style: none;
	padding-left: 0;
}
.is-style-check > li,
.is-style-inline-check > li {
	position: relative;
	padding-left: 1.6em;
}
/* la spunta; se la voce ha un'icona del toolkit, vale l'icona */
.is-style-check > li:not(.plur-icon)::before,
.is-style-inline-check > li:not(.plur-icon)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.1em;
	height: 1.1em;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-style-check > li.plur-icon,
.is-style-inline-check > li.plur-icon {
	padding-left: 0;
}
.is-style-inline,
.is-style-inline-check {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}
.is-style-inline > li,
.is-style-inline-check > li {
	margin: 0;
}

/* ---------- Pulsante: icona del toolkit dentro un cerchio ---------- */
/* Il cerchio ha il colore del testo del pulsante e l'icona è "ritagliata" nel cerchio (si vede lo sfondo del pulsante).
   Sul sito le classi dell'icona sono sul link; nell'editor sul contenitore del pulsante. */
.is-style-icon-circle .plur-icon-before::before,
.is-style-icon-circle .plur-icon-after::after,
.is-style-icon-circle.plur-icon-before > .wp-block-button__link::before,
.is-style-icon-circle.plur-icon-after > .wp-block-button__link::after {
	width: 1.9em;
	height: 1.9em;
	margin-block: -0.45em;
	vertical-align: middle;
	border-radius: 50%;
	background-color: currentColor;
	-webkit-mask: var(--plur-icon) center / 55% no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: var(--plur-icon) center / 55% no-repeat exclude, linear-gradient(#000 0 0);
}
.is-style-icon-circle .plur-icon-after,
.is-style-icon-circle.plur-icon-after > .wp-block-button__link {
	padding-right: 0.55em;
}
.is-style-icon-circle .plur-icon-before,
.is-style-icon-circle.plur-icon-before > .wp-block-button__link {
	padding-left: 0.55em;
}

/* ---------- Paragrafo "Etichetta" (badge): larga quanto il suo testo ---------- */
.is-style-badge {
	width: fit-content;
}
.is-style-badge a {
	color: inherit;
	text-underline-offset: 0.2em;
}

/* ---------- Gruppo "Sospeso": pillola con ombra, per gli header composti (passo 5) ---------- */
.is-style-floating {
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}