/**
 * Event Program and Type.
 *
 * The colors are variables so one Elementor color control can write each half with no selector
 * per breakpoint, and the three fallbacks sit on the widget's own element. A widget stylesheet
 * has no business declaring names on the document root of every page that loads it, so it
 * declares them on the one element it owns.
 *
 * Each name is declared `inherit` here, which for a custom property means the value the parent
 * has. The color controls write the same names on the widget wrapper, which is that parent, so
 * a control that is set reaches the half it names and a control nobody set leaves the half
 * taking the page's own text color.
 */

.wa-event-terms {
	--wa-et-program-color: inherit;
	--wa-et-type-color: inherit;
	--wa-et-sep-color: inherit;

	display: block;
}

.wa-event-terms__program {
	color: var(--wa-et-program-color);
}

.wa-event-terms__type {
	color: var(--wa-et-type-color);
}

/*
 * The separator prints exactly what somebody typed into the control. " : " has one space on
 * each side and would survive HTML's whitespace collapsing on its own, so pre-wrap is here for
 * the separator typed with two spaces, or with a leading space and none after. The line still
 * wraps, which `pre` would have stopped.
 */
.wa-event-terms__sep {
	color: var(--wa-et-sep-color);
	white-space: pre-wrap;
}

.wa-event-terms a {
	color: inherit;
}