/**
 * Socios Components — Global block styles.
 *
 * Shared CSS loaded for all blocks on front-end and in the editor iframe.
 *
 * @package SociosComponents
 */

/* ─── Title dot coloring ──────────────────────────────────────────────────── */

/*
 * .sc-title-dot spans are injected around every "." in block titles via
 * sc_render_title_with_dots(). A modifier class on the block wrapper selects
 * the color. Default (orange) is applied when no other modifier is present.
 */

.sc-dot-color--orange .sc-title-dot {
	color: var(--orange-500);
}

.sc-dot-color--blue .sc-title-dot {
	color: var(--blue-500);
}

.sc-dot-color--black .sc-title-dot {
	color: var(--dark-neutral-900);
}

.sc-dot-color--white .sc-title-dot {
	color: var(--light-neutral-0);
}

/* ─── Eyebrow (shared across blocks) ──────────────────────────────────────── */

/*
 * Small upper label displayed above a block headline. Rendered by
 * sc_render_eyebrow(). Colour defaults to the surrounding text colour; the
 * optional --<colour> modifier overrides it. Vertical spacing is provided by
 * the block header container's own gap, so no margin is set here.
 */

.sc-block-eyebrow {
	font-family: var(--font-family-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 120%;
	text-transform: uppercase;
}

.sc-block-eyebrow--black {
	color: var(--dark-neutral-500);
}

.sc-block-eyebrow--white {
	color: var(--light-neutral-0);
}

.sc-block-eyebrow--blue {
	color: var(--blue-500);
}

.sc-block-eyebrow--orange {
	color: var(--orange-500);
}