/* ------------------------------------------------------------------
 * slider.css -- hero image slider (see js/slider.js).
 * Replaces nivo-slider.css. Keeps the HalfTone look: the coral bullet
 * dots (img/bullets.png) and coral arrows (img/arrows.png) sprites, on
 * the cream page texture the transparent-edged WebP slides float over.
 * Non-destructive layer: remove this <link> + js/slider.js to revert.
 * ------------------------------------------------------------------ */

.slider-wrapper.theme-halftone {
	position: relative;
	float: none;
	margin: 0 auto 8px;
	padding: 0;
	max-width: 1000px;
}

.rb-slider {
	position: relative;
	width: 100%;
	/* Reserve the slide's height up-front (1000x400) so nothing jumps in. */
	aspect-ratio: 1000 / 400;
	overflow: hidden;
}

/* Crossfade. The active slide fades in over the one leaving. */
.rb-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	pointer-events: none;
}
.rb-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* No-JS / first-paint fallback: show the first slide, hide the rest.
 * js/slider.js takes over and drives .is-active once it runs. */
.no-js .rb-slide:first-child,
.rb-slider .rb-slide:first-child:not(.is-active) {
	opacity: 1;
}

/* --- Prev / next arrows (img/arrows.png sprite, 42x42) ------------- */
.rb-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent url(../img/arrows.png) no-repeat 0 0;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.85;
	z-index: 6;
	transition: opacity 0.2s ease;
}
.rb-slider-arrow:hover { opacity: 1; }
.rb-slider-prev { left: 6px; }
.rb-slider-next { right: 6px; background-position: 0 -42px; }

/* --- Dot navigation (img/bullets.png sprite, 27x28) --------------- */
.rb-slider-dots {
	position: relative;
	text-align: center;
	padding: 8px 0 2px;
	line-height: 0;
}
.rb-slider-dot {
	display: inline-block;
	width: 27px;
	height: 28px;
	margin: 0 2px;
	padding: 0;
	border: 0;
	background: transparent url(../img/bullets.png) no-repeat 0 0;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
}
.rb-slider-dot.is-active { background-position: 0 -28px; }

/* Phones: the arrows crowd the small slide -- dots are enough. */
@media (max-width: 600px) {
	.rb-slider-arrow { display: none; }
}