/* ==========================================================================
   Rotator (v0.17.0)
   Mechanics for assets/js/rotator.js: stacking, fade and controls only.
   Typography belongs to the section that uses it (about.css for the
   About quotes; the homepage testimonial next).

   Every item sits in the same grid cell, so the track is always as
   tall as its tallest item and the page below never jumps when the
   quote changes. Fade-out and fade-in run back to back rather than as
   a crossfade: two overlapping lines of italic text read as a smudge.
   --loa-rotator-fade is set per rotator by rotator.js from data-fade
   (0ms under prefers-reduced-motion).
   ========================================================================== */

.loa-rotator__track {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.loa-rotator__item {
	grid-area: 1 / 1;
	/* Short quotes sit in the middle of the space the longest one sets,
	   rather than hanging from the top with a gap above the controls. */
	align-self: center;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--loa-rotator-fade, 600ms) ease,
		visibility 0s linear var(--loa-rotator-fade, 600ms);
}

.loa-rotator__item.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--loa-rotator-fade, 600ms) ease var(--loa-rotator-fade, 600ms),
		visibility 0s linear var(--loa-rotator-fade, 600ms);
}

/* ---- Controls (built by rotator.js, so they never show without JS) ---- */

.loa-rotator__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--loa-rotator-controls-gap);
	margin-top: var(--loa-rotator-controls-top);
}

.loa-rotator__dots {
	display: flex;
	gap: 0;
}

/* 24px hit area (WCAG 2.5.8) around a small visible dot. */
.loa-rotator__dot,
.loa-rotator__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--loa-rotator-hit);
	height: var(--loa-rotator-hit);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--loa-rotator-color);
}

.loa-rotator__dot::before {
	content: "";
	width: var(--loa-rotator-dot);
	height: var(--loa-rotator-dot);
	border-radius: 50%;
	border: 1px solid var(--loa-rotator-color);
	box-sizing: border-box;
	transition: background-color 200ms ease;
}

.loa-rotator__dot[aria-current="true"]::before {
	background: var(--loa-rotator-color);
}

.loa-rotator__dot:focus-visible,
.loa-rotator__pause:focus-visible {
	outline: 1px solid var(--loa-rotator-color);
	outline-offset: 2px;
	border-radius: 2px;
}

.loa-rotator__icon {
	width: var(--loa-rotator-icon);
	height: var(--loa-rotator-icon);
	fill: currentColor;
	opacity: 0.8;
}

.loa-rotator__icon--play,
.loa-rotator__pause.is-paused .loa-rotator__icon--pause {
	display: none;
}

.loa-rotator__pause.is-paused .loa-rotator__icon--play {
	display: block;
}