/*
 * SF Slider
 * No dependencies · WCAG 2.2 AA · RTL · Forced colors · Reduced motion
 *
 * ─── CLS / Core Web Vitals ────────────────────────────────────────────────────
 * Reserve height on the container BEFORE JS runs to prevent layout shift.
 *
 *   #my-slider { aspect-ratio: 16 / 7; }   /* fixed proportional height   *\/
 *   #my-slider { min-height: 320px; }      /* for variable-height slides   *\/
 *
 * Do NOT lazy-load the first slide's images - that image is often the LCP
 * element. SF Slider handles lazy-loading for off-screen slides automatically.
 * ──────────────────────────────────────────────────────────────────────────────
 */

/* ── Reset scope ────────────────────────────────────────────────────────────── */

.sfs {
	position: relative;
	box-sizing: border-box;
	user-select: none;
}

.sfs *,
.sfs *::before,
.sfs *::after {
	box-sizing: border-box;
}

/* ── Container ──────────────────────────────────────────────────────────────── */

/* WCAG 2.4.7 Focus Visible */
.sfs:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Viewport ───────────────────────────────────────────────────────────────── */

.sfs-vp {
	overflow: hidden;
	position: relative;
}

/*
 * cursor: grab signals "this area is draggable" across the whole surface.
 * Clone slides are mouse-interactive (no pointer-events restriction), so
 * links inside clones naturally show cursor: pointer via the browser's
 * default a[href] rule - which overrides the inherited grab exactly as it
 * does for links in real slides. The cursor experience is now identical
 * whether the user is hovering over a real slide or a clone.
 */
.sfs-vp.is-draggable { cursor: grab; }
.sfs-vp.is-dragging  { cursor: grabbing; }

/* ── Track ──────────────────────────────────────────────────────────────────── */

.sfs-track {
	align-items: center;
	background-color: var(--lt-blue);
	display: flex;
	will-change: transform;
	/*
	 * Force LTR layout regardless of document direction. Without this, an RTL
	 * parent makes flex children lay out right-to-left, which breaks the
	 * translateX positioning math. The .sfs-item override below restores RTL
	 * inside each slide so user content reads correctly.
	 */
	direction: ltr;
	/* Allow vertical scrolling to pass through; capture horizontal */
	touch-action: pan-y;
}

/* ── Slides ─────────────────────────────────────────────────────────────────── */

.sfs-item {
	flex-shrink: 0;
	min-width: 0; /* prevents flex blowout from wide children */
}

/*
 * In an RTL document, restore RTL inside slide content so user-supplied
 * text, flex layouts, etc. read right-to-left. The track itself stays LTR
 * for positioning math (see above).
 */
[dir="rtl"] .sfs-item { direction: rtl; }

/* ── Arrows ─────────────────────────────────────────────────────────────────── */

.sfs-pause:hover,
.sfs-arrow:hover {
	background: rgb(0 61 166 / 100%);
}

.sfs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgb(0 61 166 / 75%);
	border: 1px solid rgb(255 255 255 / 25%);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, transform 0.15s, opacity 0.2s;
}

.sfs-arrow:hover  { background: rgb(0 61 166 / 100%); transform: translateY(-50%) scale(1.07); }
.sfs-arrow:active { transform: translateY(-50%) scale(0.95); }

.sfs-arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	transform: translateY(-50%);
	pointer-events: none;
}

.sfs-arrow:focus-visible {
	outline: 3px solid #003da6;
	outline-offset: 2px;
}

.sfs-arrow svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	stroke-width: 2.2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
	pointer-events: none;
}

.sfs-arrow--prev { left: 12px; }
.sfs-arrow--next { right: 12px; }

/* RTL - swap arrow positions */
[dir="rtl"] .sfs-arrow--prev { left: auto;  right: 12px; }
[dir="rtl"] .sfs-arrow--next { right: auto; left: 12px;  }

/* ── Dots ───────────────────────────────────────────────────────────────────── */

.sfs-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px 0 0;
	margin: 0;
	list-style: none;
	/* Force LTR so dot 1 is leftmost in RTL too - matches the LTR-locked track */
	direction: ltr;
}

/*
 * WCAG 2.5.8 Target Size (AA) - 24×24px minimum.
 * The <button> is the full 24×24 hit area; the visual dot is rendered by
 * ::after so appearance stays compact while the click target stays large.
 */
.sfs-dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.sfs-dot::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #003da6;
	/*
	 * WCAG 1.4.11 Non-text Contrast - 0.4 opacity computes to roughly 3.5:1
	 * against common page backgrounds, meeting the 3:1 minimum for UI components.
	 * Active dot is opacity: 1 + scale, so the difference is clearly perceivable.
	 */
	opacity: 0.4;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.sfs-dot.is-on::after  { opacity: 1;   transform: scale(1.5);  }
.sfs-dot:hover::after  { opacity: 0.7; }

.sfs-dot:focus-visible {
	outline: 3px solid #003da6;
	outline-offset: 2px;
	border-radius: 50%;
}

/* ── Pause / Play button ────────────────────────────────────────────────────── */
/*
 * Rendered only when autoplay: true. WCAG 2.2.2 requires that moving content
 * can be paused. This button + hover-pause + focus-pause satisfy that requirement.
 */
.sfs-pause {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 20;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 50%;
	background: rgb(0 61 166 / 75%);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}

.sfs-pause:hover { background: rgb(0 61 166 / 100%); }

.sfs-pause:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}

.sfs-pause svg {
	width: 13px;
	height: 13px;
	fill: #fff;
	stroke: none;
	display: block;
	pointer-events: none;
}

/* Show pause icon when playing, play icon when paused */
.sfs-pause .sfs-icon-play            { display: none; }
.sfs-pause.is-paused .sfs-icon-pause { display: none; }
.sfs-pause.is-paused .sfs-icon-play  { display: block; }

[dir="rtl"] .sfs-pause { right: auto; left: 10px; }

/* ── Live region (visually hidden, available to AT) ─────────────────────────── */
.sfs-live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sfs-track,
	.sfs-dot::after,
	.sfs-arrow,
	.sfs-pause {
	  transition: none !important;
	  animation: none !important;
	}
}

/* ── Forced Colors (Windows High Contrast Mode) ─────────────────────────────── */
@media (forced-colors: active) {
	.sfs-arrow,
	.sfs-pause {
	  background: ButtonFace;
	  border: 2px solid ButtonText;
	  forced-color-adjust: none;
	}

	.sfs-arrow svg { stroke: ButtonText; }
	.sfs-pause svg { fill:   ButtonText; }

	.sfs-dot::after {
	  background: ButtonText;
	  forced-color-adjust: none;
	}

	.sfs:focus-visible,
	.sfs-arrow:focus-visible,
	.sfs-dot:focus-visible,
	.sfs-pause:focus-visible {
	  outline: 3px solid Highlight;
	  outline-offset: 2px;
	}
}