/*
 * Radiobox overrides — loaded after style.css (compiled theme, no sources in the repo) so these survive a
 * regenerate. Unselected options get a white background instead of showing the block behind them; the checked
 * state keeps the theme's primary background (its selector is more specific, so it still wins).
 */

.radiobox .radio-row .radio-container label {
	background-color: var(--bs-white);
}

/* Same 25% primary tint as the theme, but opaque so it no longer depends on what's behind the label. */
.radiobox .radio-row .radio-container label:hover {
	background-color: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-white));
}

.radiobox .radio-row .radio-container input:disabled ~ label:hover {
	background-color: var(--bs-white);
}

/*
 * Accessibility: the theme hides the radios with display:none, which also takes them out of the tab order and the
 * accessibility tree (no keyboard selection, no checked state for screen readers). Hide them visually only, and show
 * keyboard focus on the styled label instead.
 */
.radiobox .radio-row .radio-container {
	position: relative;
}

.radiobox .radio-row .radio-container input {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

.radiobox .radio-row .radio-container input:focus-visible ~ label {
	outline: 3px solid var(--bs-primary);
	outline-offset: 2px;
}

/* Radio groups are a <fieldset> with the question as <legend>: undo Bootstrap's floated, heading-sized legend. */
fieldset.radiobox > legend {
	float: none;
	width: auto;
	font-size: 1rem;
	line-height: inherit;
	margin-bottom: 0.3rem;
}