/* ──────────────────────────────────────────────
   SIA Dual Header — frontend
   Two-part heading rendered as two `<span>` siblings inside a single
   heading element (h1-h6 / div / p / span configurable). Default layout:
   inline-flex with wrap (parts stay on same line, wrap to next line if
   container is too narrow). Responsive control to switch to stacked
   (column flex) per device.
   ────────────────────────────────────────────── */

.sia-dh {
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;        /* parts share the text baseline in inline mode */
	justify-content: flex-start;
	gap: 8px;
}
.sia-dh * { box-sizing: border-box; }

/* Each part — inline by default. Stacked layout makes them flex-column
   children, automatically rendering on separate lines. */
.sia-dh__part {
	display: inline-block;
	color: inherit;
}
.sia-dh__part--first {
	color: var(--sia-color-secondary, #54595F);  /* part 1 → secondary brand color */
}
.sia-dh__part--second {
	color: var(--sia-color-primary, #c5ed3b);    /* part 2 → primary brand color */
}