/**
 * Testimonials renderer styles.
 *
 * Step 2 of runbooks/testimonial-plugin-migration.md. Loaded only on pages
 * where [rf_testimonials] actually rendered something.
 *
 * The `rf-` namespace is deliberate. A Divi preset can silently outrank a
 * module's own colour setting on this site, measured on the archive post grid
 * where a title specified #F19D20 rendered #AF3B05 with no warning. Divi
 * presets target Divi's classes, so nothing here is reachable by one.
 *
 * TWO PALETTES, BECAUSE THIS SITE HAS TWO BACKGROUNDS. The homepage card sits
 * on a dark translucent panel; the archive content area renders on white and
 * Divi tags it et_pb_bg_layout_light. A single palette lands near a 1.5
 * contrast ratio in whichever of the two it was not chosen for. Pick with
 * theme="dark" or theme="light".
 *
 * Colours are the site's own, taken from Divi Theme Options via
 * testimonials/build_section.py, except the two light-theme text colours,
 * which are chosen to clear WCAG AA on white.
 */

.rf-testimonials {
	--rf-radius: 6px;
	--rf-gap: 30px;
	--rf-pad: 30px;

	display: grid;
	gap: var(--rf-gap);
	margin: 0 auto;
	padding: 0;
}

/* Dark: the homepage panel. */
.rf-testimonials--dark {
	--rf-card-bg: rgba( 34, 18, 55, 0.66 );
	--rf-body: #d3d3d3;
	--rf-name: #f19d20;
	--rf-location: #4899a8;
}

/* Light: the archive body, which is white. #af3b05 measures 6.09 there. */
.rf-testimonials--light {
	--rf-card-bg: rgba( 0, 0, 0, 0.04 );
	--rf-body: #333333;
	--rf-name: #af3b05;
	--rf-location: #5a5a5a;
}

.rf-testimonials--cols-1 { grid-template-columns: 1fr; }
.rf-testimonials--cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.rf-testimonials--cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.rf-testimonials--cols-4 { grid-template-columns: repeat( 4, 1fr ); }

.rf-testimonials--list {
	grid-template-columns: 1fr;
}

/* Divi's breakpoints, so this collapses in step with the rest of the page. */
@media only screen and ( max-width: 980px ) {
	.rf-testimonials--cols-3,
	.rf-testimonials--cols-4 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media only screen and ( max-width: 767px ) {
	.rf-testimonials {
		--rf-gap: 20px;
		--rf-pad: 24px;
	}

	.rf-testimonial__body {
		font-size: 18px;
	}

	.rf-testimonial__body > *:first-child::before,
	.rf-testimonial__body > *:last-child::after {
		font-size: 34px;
	}

	.rf-testimonials--cols-2,
	.rf-testimonials--cols-3,
	.rf-testimonials--cols-4 {
		grid-template-columns: 1fr;
	}
}

.rf-testimonial {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var( --rf-pad );
	background-color: var( --rf-card-bg );
	border-radius: var( --rf-radius );
}

/*
 * PULL-QUOTE TYPE SCALE.
 *
 * 20px, up from the 16px the plugin module used, which read too small in a
 * card this wide. Italic and the quote glyphs are carried over from the module
 * so the block still reads as a pull quote rather than plain body copy.
 *
 * THE COLOUR IS DELIBERATELY NOT THE MODULE'S. The module sets body #AF3B05 and
 * author #606060, which measure 3.1:1 and 3.0:1 against this card's effective
 * background (rgba(34,18,55,0.66) over black, about #170B24). Both fail WCAG AA
 * for body text at any size used here. The tokens kept below measure 14.2:1 and
 * 8.6:1 on the same background.
 */
.rf-testimonial__body {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: var( --rf-body );
	font-size: 20px;
	font-style: italic;
	line-height: 1.5em;
	quotes: none;
	position: relative;
}

/*
 * Hang the glyphs off the first and last BLOCK CHILD, not off `p`. Some
 * testimonials are stored wrapped in <div class="default-style">, so wpautop
 * never creates a paragraph for them and a `p` selector silently matches
 * nothing on exactly those rows.
 */
.rf-testimonial__body > *:first-child::before,
.rf-testimonial__body > *:last-child::after {
	color: var( --rf-name );
	font-family: Georgia, "Times New Roman", serif;
	font-size: 42px;
	font-style: normal;
	line-height: 0;
	vertical-align: -0.35em;
}

.rf-testimonial__body > *:first-child::before {
	content: "\201C";
	margin-right: 6px;
}

.rf-testimonial__body > *:last-child::after {
	content: "\201D";
	margin-left: 4px;
}

.rf-testimonial__body p {
	margin: 0 0 1em;
	padding: 0;
	color: inherit;
}

.rf-testimonial__body p:last-child {
	margin-bottom: 0;
}

.rf-testimonial__meta {
	margin-top: 20px;
}

/*
 * The slider centres its quote, matching the module it replaces. A grid or
 * list of several cards stays left-aligned, which is easier to read down.
 */
.rf-testimonials--slider .rf-testimonial__body,
.rf-testimonials--slider .rf-testimonial__meta {
	text-align: center;
}

.rf-testimonial__name {
	display: block;
	color: var( --rf-name );
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
}

.rf-testimonial__location {
	display: block;
	margin-top: 2px;
	color: var( --rf-location );
	font-size: 15px;
}

/**
 * Slider layout.
 *
 * Swiper 6.7.5, from Divi Supreme's `dsm-swiper` handle, which is the copy that
 * survives removing the testimonial plugin. Swiper owns the scroll mechanics and
 * the arrow glyphs; everything here is layout and colour so the card looks the
 * same whether it is in a grid or a slide.
 */
.rf-testimonials--slider {
	display: block;
	position: relative;
}

.rf-testimonials--slider {
	/* Room for the arrows. This padding must sit on the OUTER box: on the
	   swiper container itself the padding strip sits inside the overflow clip
	   and shows a sliver of the neighbouring slide. */
	padding: 0 44px;
}

.rf-testimonials--slider .swiper-container {
	overflow: hidden;
}

.rf-testimonials--slider .swiper-slide {
	height: auto;          /* autoHeight needs the slide to size to content. */
	box-sizing: border-box;
	display: flex;
}

.rf-testimonials--slider .rf-testimonial {
	width: 100%;
}

.rf-testimonials--slider .swiper-button-prev,
.rf-testimonials--slider .swiper-button-next {
	color: var( --rf-name );
}

@media only screen and ( max-width: 767px ) {
	.rf-testimonials--slider {
		padding: 0 8px;
	}

	/* Arrows crowd a phone-width card; swiping is the primary gesture there. */
	.rf-testimonials--slider .swiper-button-prev,
	.rf-testimonials--slider .swiper-button-next {
		display: none;
	}
}

/**
 * Submission form.
 *
 * Colours taken from the live module's own settings on template 3728:
 * field background rgba(0,0,0,0.8), field text #F19D20, 6px radius, submit
 * background rgba(0,0,0,0.79).
 */
.rf-form {
	--rf-field-bg: rgba( 0, 0, 0, 0.8 );
	--rf-field-text: #f19d20;
	--rf-submit-bg: rgba( 0, 0, 0, 0.79 );

	max-width: 640px;
	margin: 0 auto;
}

.rf-form--light {
	--rf-field-bg: #ffffff;
	--rf-field-text: #333333;
	--rf-submit-bg: #af3b05;
}

.rf-form p {
	margin: 0 0 16px;
}

.rf-form__field {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 6px;
	background-color: var( --rf-field-bg );
	color: var( --rf-field-text );
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
}

.rf-form__field::placeholder {
	color: var( --rf-field-text );
	opacity: 0.7;
}

.rf-form__captcha {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rf-form__captcha label {
	color: var( --rf-field-text );
	font-weight: 700;
	white-space: nowrap;
}

.rf-form__field--captcha {
	width: 90px;
}

.rf-form__submit {
	padding: 14px 28px;
	border: 0;
	border-radius: 6px;
	background-color: var( --rf-submit-bg );
	color: var( --rf-field-text );
	font-size: 16px;
	cursor: pointer;
}

.rf-form__notice {
	padding: 12px 16px;
	border-radius: 6px;
	background-color: var( --rf-field-bg );
	color: var( --rf-field-text );
}

.rf-form__notice--error {
	color: #ff8a6a;
}

/*
 * The honeypot. Hidden from people without display:none, which some bots check
 * for and skip, and taken out of the tab order and the accessibility tree.
 */
.rf-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* WordPress's own visually-hidden class, in case the theme does not define it. */
.rf-form .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
	border: 0;
}