/**
 * doral/eyebrow — the "◐ FOOTPRINT" label.
 *
 * Figma Eyebrow token: Proxima Nova Medium, 13px, line-height 1.3, tracking 5.2px (0.4em),
 * uppercase. Black in the type specimen; Primary 200 where it sits on the dark panels.
 *
 * The mark is a decorative background image rather than inline SVG so the saved post content
 * stays a couple of spans instead of a kilobyte of path data on every use.
 */

.doral-eyebrow {
	--de-mark-size: 16px;
	--de-gap: 16px;
	--de-on-dark: #9bb7b7;
	--de-on-light: #0e1a1a;
	--de-white: #ffffff;

	display: flex;
	align-items: center;
	gap: var(--de-gap);
	margin: 0;
	font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: 0.4em;
	text-transform: uppercase;
}

/*
 * Themes and the editor both style paragraphs inside content — Kadence adds heading/paragraph
 * margins that would push the eyebrow off its heading. Doubled-up classes so these win
 * regardless of stylesheet order, while still losing to the block's own margin controls
 * (which land as inline styles).
 */
.doral-eyebrow.doral-eyebrow {
	margin-block: 0;
}

/*
 * The tone defaults only apply when no colour has been chosen in the block's colour control.
 * Gating on :not(.has-text-color) means a palette colour (which arrives as a class, so it
 * would otherwise tie on specificity) always wins.
 */
.doral-eyebrow:not(.has-text-color).doral-eyebrow--light {
	color: var(--de-on-dark);
}

.doral-eyebrow:not(.has-text-color).doral-eyebrow--white {
	color: var(--de-white);
}

.doral-eyebrow:not(.has-text-color).doral-eyebrow--dark {
	color: var(--de-on-light);
}

.doral-eyebrow__mark {
	flex: 0 0 auto;
	width: var(--de-mark-size);
	height: var(--de-mark-size);
	background-image: url( "./assets/icon-mark.svg" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * The reversed mark, for panels dark enough that the brand mark's dark-green half disappears
 * into them. Its own control rather than a side effect of the text tone: the two are chosen
 * against different things — the mark against the panel, the text against the type around it.
 */
.doral-eyebrow--mark-white .doral-eyebrow__mark {
	background-image: url( "./assets/icon-mark-white.svg" );
}

/*
 * letter-spacing adds trailing space after the final character, which reads as an off-centre
 * label. Pulling it back keeps the optical box tight.
 */
.doral-eyebrow__text {
	margin-right: -0.4em;
}

@media (max-width: 680px) {
	.doral-eyebrow {
		--de-gap: 12px;
		letter-spacing: 0.3em;
	}
}