/**
 * Avviso cambio nome: "Radiologia Triveneta è ora Triveneta Salute".
 *
 * Usato dal pattern patterns/avviso-cambio-nome.php.
 * Caricato sia nell'editor che sul front-end.
 *
 * @package Radiologia
 */

.ts-avviso-nome {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding: 1.25rem 1.875rem 1.25rem 1.625rem;
	border-left: 4px solid #00b3cc;
	background-color: #004d58;
	color: #fff;
}

/* Icona "info" disegnata via CSS: il cliente non può cancellarla per errore. */
.ts-avviso-nome::before {
	content: "";
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fd3e6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Contenitore interno che il blocco Gruppo aggiunge nei temi classici. */
.ts-avviso-nome > .wp-block-group__inner-container {
	flex: 1 1 auto;
}

.ts-avviso-nome p {
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.6;
}

.ts-avviso-nome strong {
	color: #fff;
	font-weight: 700;
}

/* Variante chiara
--------------------------------------------- */

.ts-avviso-nome--chiaro {
	background-color: #e6f6fa;
	color: inherit;
}

.ts-avviso-nome--chiaro::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b3cc' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
}

.ts-avviso-nome--chiaro p {
	color: inherit;
}

.ts-avviso-nome--chiaro strong {
	color: #004d58;
}

@media screen and (max-width: 600px) {

	.ts-avviso-nome {
		align-items: flex-start;
		gap: 0.75rem;
		padding: 1rem 1.25rem 1rem 1rem;
	}

	.ts-avviso-nome::before {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
	}

	.ts-avviso-nome p {
		font-size: 1rem;
	}
}