/**
 * Arbor Law — Pill eyebrow badges
 * Small uppercase labels rendered as pill-shaped chips above section headings.
 *
 * Usage: add to any Heading or Text Editor widget via Advanced > CSS Classes
 *   al-pill al-pill--on-light   → translucent dark teal on light backgrounds
 *   al-pill al-pill--on-dark    → translucent white on dark backgrounds
 */

.al-pill {
	align-self: flex-start !important;
	width: auto !important;
	max-width: max-content !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	margin-bottom: 24px !important;
	line-height: 1 !important;
}

/* Inner text — applies whether the wrapper is a heading or a text-editor */
.al-pill .elementor-heading-title,
.al-pill p,
.al-pill .elementor-widget-container > p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-family: Satoshi, sans-serif !important;
	font-weight: 500 !important;
	font-size: 10px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	border: 0 !important;
	background: transparent !important;
}

/* On light backgrounds */
.al-pill--on-light {
	background: rgba(16, 85, 90, 0.08) !important;
}
.al-pill--on-light .elementor-heading-title,
.al-pill--on-light p {
	color: rgba(16, 85, 90, 0.75) !important;
}

/* On dark backgrounds */
.al-pill--on-dark {
	background: rgba(255, 255, 255, 0.08) !important;
}
.al-pill--on-dark .elementor-heading-title,
.al-pill--on-dark p {
	color: rgba(255, 255, 255, 0.7) !important;
}