/*
 * a11y-home.css — CGLJ Resource Hub, Accessibility Batch 9
 *
 * HOME-001: visible Pause/Play control for the homepage "Featured" carousel
 * (.slideshow--cards, Slick.js), added by assets/js/a11y-home-carousel.js.
 * WCAG 2.2.2 Pause, Stop, Hide requires a discoverable way to stop content
 * that auto-updates for more than 5 seconds; the carousel autoplays every
 * 5s with no arrows and previously had no way to stop it at all.
 *
 * Styled to match the theme's existing `.button` look (black pill button,
 * screen.css) rather than introducing a new visual pattern.
 */
.cglj-carousel-toggle {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	margin: 16px auto 0;
	background: #000;
	border: 1px solid #000;
	border-radius: 5px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-family: "ff-real-headline-pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	min-width: 160px;
	padding: 0 20px;
	height: 40px;
	line-height: 38px;
	text-align: center;
}

.cglj-carousel-toggle:hover {
	background: #c8102e;
	border-color: #c8102e;
}

.cglj-carousel-toggle:focus-visible {
	outline: 3px solid #3b82f6;
	outline-offset: 2px;
}

/*
 * HOME-002: the carousel's Slick pagination dots sit directly over each
 * slide's photo, so their contrast against the background is whatever that
 * photo happens to be behind them -- unpredictable and, as measured by the
 * manual audit, sometimes as low as ~1:1 (active dot #C8102E) or ~3:1
 * (inactive dot, white at 50% opacity). Rather than chase per-photo
 * contrast, give the dots a guaranteed-opaque dark backing so their
 * contrast is fixed and calculable regardless of what image sits behind
 * them: #C8102E on #000 = ~3.6:1, and the inactive dot (white at 50%
 * opacity, composited to mid-grey over solid black) = ~5.2:1. Both clear
 * the WCAG 1.4.11 3:1 minimum for non-text UI components.
 */
.slideshow--cards .slick-dots {
	width: auto !important;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	border-radius: 14px;
	padding: 0 10px !important;
}

/*
 * HOME-003: this project's existing sitewide focus-visible rule (Customizer
 * Additional CSS, not in git -- see _a11y/customizer/) targets plain
 * `button:focus-visible` and, for reasons not fully identified (the same
 * kind of cascade issue this project has hit before -- see the Batch 2
 * hotfix notes), does not reach the carousel's dot buttons live. Rather
 * than debug someone else's out-of-git CSS, add an explicit, more specific
 * rule here and verify it live instead of assuming it wins.
 */
.slideshow--cards .slick-dots li button:focus-visible {
	outline: 3px solid #3b82f6 !important;
	outline-offset: 2px !important;
}