/* section-label.css — Eyebrow / section label component
 *
 * HTML: <p class="section-label">Label Text</p>
 * Per FONT_SPEC: DM Sans 500, 10–11px, uppercase, letter-spacing 0.14em.
 * Used before section headings across all page templates.
 */

/* ─── Base ──────────────────────────────────────────────── */

.section-label {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

/* Gold dot before label — visual accent matching approved designs */
.section-label::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--gold);
	flex-shrink: 0;
}

/* ─── Dark background variant ───────────────────────────── */

/* Applied when section-label appears inside dark green sections */
.bg-green .section-label,
.bg-green-dark .section-label,
.ofw-callout .section-label,
.final-cta .section-label,
.page-hero .section-label {
	color: rgba(247, 247, 245, 0.45);
}