/*
 * Testimonials on a white background.
 *
 * The ThemeREX "Testimonials" widget prints names in white (it is made for dark
 * backgrounds) and has no colour settings. To show it on white, give the widget
 * the CSS class "ss-testimonials-light" (Elementor → Advanced → CSS Classes).
 * Each testimonial then becomes an off-white card in the brand colours.
 * The colours come from Elementor → Site Settings → Global Colors.
 */

/*
 * Testimonials on dark (charcoal) boxes, the widget's normal use: the quotes
 * took the grey body text colour, which is hard to read there. Cream instead.
 * (The white-background version below sets its own colour.)
 */
.sc_testimonials_item_content {
	color: var(--e-global-color-ss_cream);
}

/* Cards in a row are the same height. */
.ss-testimonials-light .trx_addons_columns_wrap {
	display: flex;
	flex-wrap: wrap;
}

.ss-testimonials-light .sc_testimonials_item {
	height: 100%;
	padding: 34px 30px 30px;
	background-color: var(--e-global-color-ss_offwhite);
	border: 1px solid var(--e-global-color-ss_cream);
	border-radius: 24px;
}

.ss-testimonials-light .sc_testimonials_item_content {
	color: var(--e-global-color-ss_slate);
}

.ss-testimonials-light .sc_testimonials_item_author_title {
	color: var(--e-global-color-ss_navy);
}

/* Same selector as the plugin's own rule, so this one wins. */
.ss-testimonials-light .sc_testimonials_item_author_title + .sc_testimonials_item_author_subtitle {
	color: var(--e-global-color-ss_slate);
}

/* Room for the name and role next to the initials (the plugin allows only half the card). */
.ss-testimonials-light .sc_testimonials_item_author_data {
	max-width: 70%;
}

/* Initials circle (shown until a photo is added to the testimonial). */
.ss-testimonials-light .sc_testimonials_item_author_avatar {
	background-color: var(--e-global-color-ss_cream);
}

.ss-testimonials-light .sc_testimonials_item_author_initials {
	color: var(--e-global-color-ss_navy);
}