/**
 * maconda Title — small text styling
 *
 * The span sits inside the heading, or — with "Render outside heading tag" —
 * after it in a wrapper div (.maconda-title-wrap) that carries the element id
 * and classes. Size and gap come from --mt-small-size / --mt-small-gap, set by
 * the panel controls on the element or a global class; color, weight and
 * style are emitted by Bricks as scoped rules.
 */
.maconda-title-small {
	display: block;
	font-size: var(--mt-small-size, 70%);
	margin-top: var(--mt-small-gap, 0);
}

/* Outside placement: the wrapper takes the heading's font size, so the span's
   percentage, the gap and the bottom margin match the inside placement. */
.maconda-title-wrap > .maconda-title-heading {
	font-size: 1em;
	margin: 0;
}

/* Mirrors the theme style's heading rules (Theme Styles > Typography) for the
   span, which inherits from the wrapper here. Update when those change.
   :where() keeps this at zero specificity so element and class settings win. */
:where(.maconda-title-wrap) {
	font-family: var(--font-display);
	color: var(--brand-indigo);
	line-height: var(--line-heading);
	text-wrap: balance;
	margin-bottom: 0.5em;
}

:where(.maconda-title-wrap:has(> h1)) { font-size: calc(var(--text-hero) * 0.85); line-height: var(--line-tight); }
:where(.maconda-title-wrap:has(> h2)) { font-size: var(--text-3); }
:where(.maconda-title-wrap:has(> h3)) { font-size: var(--text-1); line-height: 1.2; }
:where(.maconda-title-wrap:has(> h4)) { font-size: var(--text-3); }