/* Audience switch of a brand landing page (src/Template/audienceSwitch.php, skill `brand` "Audiences"). */

/* Variants of other audiences carry `hidden`; component rules setting `display` must not reveal them. */
[data-audience][hidden] {
	display: none !important;
}

.rd-audience-switch {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--rd-spacing-x-big) 0;
	text-align: center;
}

.rd-audience-switch-title {
	font-size: var(--rd-fontsize-7);
	line-height: 22px;
	font-weight: var(--rd-fontweights-open-sans-0);
	color: var(--rd-neutral-900);
	margin-bottom: 14px;
}

/* UUI tabs (Core 27 "Button border", md, full width) in the site's typeface instead of Inter. */
uui-tabs.rd-audience-switch-tabs {
	display: block;
	/* Rendered height of the tab bar, reserved so the page does not jump when the component upgrades. */
	min-height: 56px;
	--uui-font-family: "Open Sans";
}

/* The generated full-width bar keeps Figma's 1280px artboard width; released as in the catalogue
   (UuiCatalogue.css), the attribute selectors of uui.min.css leave no other way than !important. */
.rd-audience-switch-tabs .uui-tabs__root {
	inline-size: 100% !important;
	/* The bar surface of the Figma instance; the generated "Button border" set draws none.
	   Inset stroke like Figma's, so the bar stays 56px high. */
	background-color: var(--uui-bg-secondary_alt);
	box-shadow: inset 0 0 0 1px var(--uui-border-secondary);
	border-radius: var(--uui-radius-xl);
}

.rd-audience-switch-fallback {
	display: flex;
	justify-content: center;
	gap: var(--rd-spacing-x-big);
}

/* Hospitalcampus: active tab in the brand's CTA blue. The generated uui selectors (6 attributes)
   leave no other way than !important. */
.rd-hospitalcampus .rd-audience-switch-tabs [current=true] .uui-tab-button__root {
	background: var(--rd-hc-blue-500) !important;
}

.rd-hospitalcampus .rd-audience-switch-tabs [current=true] .uui-tab-button__label {
	color: var(--rd-font-light) !important;
}