/*
 * SIM Hero Slider: only the extras. The root also has .brxe-slider, so Bricks'
 * own slider styles (title, content, slide, image, overlay) apply unchanged.
 * :where() keeps these at zero specificity so the element's controls win.
 */

/* Kicker: the site's title-tag style (bold, tracked, capitals) in slide white */
:where(.brxe-sim-hero-slider) .kicker {
	color: #fff;
	font-size: var(--h3-sub, 1rem);
	font-weight: 700;
	letter-spacing: 0.25rem;
	line-height: 1.3;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
	text-wrap: balance;
}

/*
 * Buttons sit in one row and wrap on narrow screens. Centred like Bricks'
 * default slide text; "Content text align" sets left/center/right on the row too.
 */
:where(.brxe-sim-hero-slider) .sim-hero-buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* Same gap Bricks puts between content and its single button */
:where(.brxe-sim-hero-slider) .content + .sim-hero-buttons {
	margin-top: 1em;
}