/**
 * Testimonials Slider — front-end styles.
 *
 * Colors / sizes / spacing come in as CSS custom properties set inline
 * by the PHP config block (see mmp_testi_register_assets() in the main
 * plugin file) so this file itself never needs editing for a re-skin.
 */

.mmp-testi-slider {
	max-width: var(--mmp-testi-max-width, 640px);
	margin-left: auto;
	margin-right: auto;
	padding: var(--mmp-testi-padding, 2.5rem 1.5rem);
	background: var(--mmp-testi-bg, transparent);
	text-align: var(--mmp-testi-align, center);
	overflow: hidden;
	position: relative;
}

.mmp-testi-slider__track {
	display: flex;
	width: 100%;
	transition: transform var(--mmp-testi-transition, 600ms) ease-in-out;
	will-change: transform;
}

.mmp-testi-slider--static .mmp-testi-slider__track {
	transition: none;
}

.mmp-testi-slider__slide {
	/* This box is the full slide — its width is exactly what the slide-to-
	   slide sliding math is built on, so it stays a plain 100%. The visible
	   text itself is inset further below (.mmp-testi-slider__quote), which
	   is the actual fix for the edge artifact. */
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 0.5rem;
}

.mmp-testi-slider__quote {
	/* Deliberately narrower than the slide, and centered within it. This
	   leaves a blank buffer on both edges of every slide. Some browsers
	   show a stray hairline/sliver of the adjacent slide's content right
	   at the clipped edge of a sliding container — confirmed on this site
	   even with pixel-exact transform math, so it's a rendering quirk
	   rather than something fixable by more precise numbers. Keeping the
	   actual text away from that edge means there's nothing readable
	   there to leak, regardless of the underlying cause.
	   MMP_TESTI_TEXT_WIDTH in the PHP config controls this. */
	max-width: var(--mmp-testi-text-width, 84%);
	margin: 0 auto;
	position: relative;
}

.mmp-testi-slider__quote::before {
	content: '\201C';
	display: block;
	font-size: 2.5em;
	line-height: 1;
	color: var(--mmp-testi-accent, currentColor);
	opacity: 0.5;
	margin-bottom: 0.15em;
}

.mmp-testi-slider__text {
	font-size: var(--mmp-testi-quote-size, 1.25rem);
	line-height: var(--mmp-testi-quote-line-height, 1.5);
	color: var(--mmp-testi-quote-color, inherit);
	margin: 0 0 0.75em;
}

.mmp-testi-slider__author {
	font-size: var(--mmp-testi-name-size, 1rem);
	color: var(--mmp-testi-name-color, inherit);
	font-style: normal;
	font-weight: 600;
}

.mmp-testi-slider__dots {
	display: flex;
	justify-content: var(--mmp-testi-align, center);
	gap: 0.4em;
	margin-top: 1.25em;
}

.mmp-testi-slider__dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.25;
	transition: opacity var(--mmp-testi-transition, 600ms) ease-in-out;
}

.mmp-testi-slider__dot.is-active {
	opacity: 1;
	background: var(--mmp-testi-accent, currentColor);
}

/* Respect reduced-motion preferences: keep the slide functional (JS still
   advances it) but drop the sliding animation in favor of an instant cut. */
@media (prefers-reduced-motion: reduce) {
	.mmp-testi-slider__track {
		transition-duration: 1ms;
	}
	.mmp-testi-slider__dot {
		transition-duration: 1ms;
	}
}