/* Slider Revolution accessibility controls (t-111).
   Visual starting point is t-098's Shopper Approved row: 28px squares, transparent at rest, brand
   action background on hover/focus. Left-aligned under the module rather than centred. */

/* One height for both overlaid pills — the control row and the destination link. Eric asked for them
   to be identical; a variable means changing the button size moves both rather than leaving the two
   to drift. 28px button + 2px padding top and bottom = 32. */
:root {
	--hal-rs-control-size: 28px;
	--hal-rs-control-pad: 2px;
	--hal-rs-control-h: calc(var(--hal-rs-control-size) + (2 * var(--hal-rs-control-pad)));
}

.hal-rs-controls,
.hal-rs-link {
	height: var(--hal-rs-control-h);
	box-sizing: border-box;
}

/* Overlaid on the slider's bottom-left rather than sitting below it: a row between the module and the
   dark tagline bar broke the two apart (Eric, t-111). 85% white so the glyphs stay legible over any
   photograph without hiding much of it. */
.hal-rs-controls {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	justify-content: flex-start;
	gap: 2px;
	padding: var(--hal-rs-control-pad) 4px;
	background: rgba(255, 255, 255, .7);
	border-top-right-radius: 4px;
}

.hal-rs-btn {
	width: var(--hal-rs-control-size);
	height: var(--hal-rs-control-size);
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	/* Dark rather than muted: the backing is only 60% white, so the glyph composites over whatever
	   the photograph happens to be. Worst case is a black slide — 0.6x255 = 153 behind #252525,
	   which still measures 5.4:1, comfortably past the 3:1 these non-text glyphs need. */
	color: var(--hal-color-ink, #252525);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

/* Bold and outlined, never filled — Eric, 2026-08-04: "I dont think buttons should be green when
   active, just bold and outlined works." One treatment for hover, focus, press and paused, so the
   difference between them is DURATION rather than appearance. */
.hal-rs-btn:hover,
.hal-rs-btn:focus-visible,
.hal-rs-btn.is-active,
.hal-rs-btn.is-paused {
	background: transparent;
	color: var(--hal-color-ink, #252525);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px var(--hal-color-ink, #252525);
}

/* `.is-active` is a FLASH — the script removes it after ~220ms. Pressing an arrow key must not leave
   a control looking latched, because latched means paused here. */

/* The current slide's destination (t-118). Bottom RIGHT, mirroring the control row at bottom left and
   sharing its backing and its outlined hover/focus — Eric: "in the same style as our overlaid
   controls". It appears and disappears with the slide and has no transition of its own. */
.hal-rs-link {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 60%;
	padding: 0 10px;
	/* .7 — Eric, 2026-08-06: "It's always there. I dont want it to be any brighter than it has to be."
	   Both overlays now share one value; it was .6 (too light, 2026-08-05), then .8. */
	background: rgba(255, 255, 255, .7);
	border-top-left-radius: 4px;
	/* #000, not the ink token — "darken the font", same message. Against the worst case (a black
	   photograph under 70% white) the label reads 10.02:1, and 16.83:1 on hover. */
	color: #000;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	/* one line, so the fixed height above can never clip a second one */
	white-space: nowrap;
}

.hal-rs-link[hidden]
{display: none;}

/* Opacity and colour only — NEVER font-weight. Eric, 2026-08-05: "the hover cannot just be bold, the
   layout looks bad as the whole thing jogs." Bolding reflows the text and shifts the whole pill, since
   it is sized by its content and pinned to the right edge. */
.hal-rs-link:hover,
.hal-rs-link:focus-visible {
	/* .9, NOT #fff — Eric, 2026-08-06: at solid white the pill "matches the white bg and looks bad".
	   The hover step is the opacity now (.7 -> .9) rather than a colour change. */
	background: rgba(255, 255, 255, .9);
	color: #000;
	/* `body a:hover` (t-042's sitewide underline system) outranks `.hal-rs-link`, so the underline has
	   to be turned off in the HOVER rule — setting it only at rest is not enough. */
	text-decoration: none;
}

/* Focus still needs an indicator a hover state does not supply (2.4.7). box-shadow is safe here —
   it paints outside the layout, so it cannot jog anything. */
.hal-rs-link:focus-visible {
	box-shadow: inset 0 0 0 2px var(--hal-color-ink, #252525);
}

.hal-rs-link-glyph
{font-size: 15px;}

/* The label is the only text here, so it wraps rather than being clipped on a phone. */
@media (max-width: 767px) {
	.hal-rs-link {
		max-width: 70%;
		font-size: 12px;
	}
}

/* Vendor arrows are BACK — Eric, 2026-08-05: "let's put the left and right buttons back on the
   sliders, people can use them if they want to." They were hidden by t-111 as a duplicate affordance.
   They stay POINTER-ONLY: hal_rs_vendor_arrows() keeps them aria-hidden and out of the tab order, so
   the injected control row remains the single keyboard and screen-reader path and nothing announces
   prev/next twice. Showing a focusable aria-hidden control is the aria-hidden-focus defect fixed on
   the slide layers this session — do not simply drop the tabindex handling. */

/* Forced colors drops our background, so the control needs an outline to stay identifiable. */
@media (forced-colors: active) {
	.hal-rs-btn {
		border: 1px solid ButtonBorder;
		color: ButtonText;
	}

	.hal-rs-btn:hover,
	.hal-rs-btn:focus-visible,
	.hal-rs-btn.is-active,
	.hal-rs-btn.is-paused {
		background: Highlight;
		color: HighlightText;
	}

	.hal-rs-link {
		border: 1px solid LinkText;
		color: LinkText;
	}

	.hal-rs-link:hover,
	.hal-rs-link:focus-visible {
		background: Highlight;
		color: HighlightText;
	}
}