/*
 * CSS estrutural dos widgets nativos (Cores / Tipografia do Projeto).
 * Só mecânica de layout (flex/grid) — cor, fonte e espaçamento vêm
 * dos controles de Estilo do próprio widget no Elementor.
 */

/* ===== Cores do Projeto ===== */

.sp-cores {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}

.sp-cores__box {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1 1 calc(100% / var(--sp-cores-cols, 3) - var(--sp-cores-gap, 8px));
}

/* ===== Tipografia do Projeto =====
 * Direção, quebra de linha e alinhamento do contêiner (.sp-tipografia)
 * são controlados pelo widget no Elementor (aba Estilo → Contêiner).
 * Aqui só a mecânica interna dos dois blocos filhos.
 */

.sp-tipografia {
	display: flex;
	box-sizing: border-box;
	width: 100%;
}

/* Badges + alfabeto sempre empilhados dentro do próprio bloco */
.sp-tipografia__specimen {
	display: flex;
	flex-direction: column;
	min-width: 0; /* permite encolher em vez de estourar o contêiner */
}

.sp-tipografia__badges {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-tipografia__alfabeto span {
	display: block;
}

.sp-tipografia__aa {
	line-height: 1;
	white-space: nowrap;
}