/*
 * C2 Better Captcha - frontend styles.
 *
 * Everything is driven by custom properties on .c2bc-captcha, so a site can
 * restyle the control by overriding a handful of variables instead of fighting
 * specificity. No external fonts, no external images.
 */

/*
 * The wrapper establishes its own block formatting context, so the control's
 * inner margins stay inside it instead of collapsing out. That keeps the
 * wrapper's measured height equal to what the control actually occupies.
 *
 * Deliberately no `clear`: whether the control should sit beside or below a
 * float is the theme's decision, not this plugin's.
 */
.c2bc-wrap {
	display: flow-root;
}

.c2bc-captcha {
	--c2bc-gap: 0.5rem;
	--c2bc-radius: 6px;
	--c2bc-border: 1px solid rgba( 0, 0, 0, 0.22 );
	--c2bc-border-hover: 1px solid rgba( 0, 0, 0, 0.45 );
	--c2bc-bg: transparent;
	/* Hover affordance only; set to transparent to remove it entirely. */
	--c2bc-bg-hover: rgba( 0, 0, 0, 0.05 );
	/* Both rings sit on the icon itself, so they share an offset. */
	--c2bc-selected: 2px solid currentColor;
	--c2bc-selected-offset: 5px;
	--c2bc-size: 3.25rem;
	--c2bc-icon-size: 1.75rem;
	--c2bc-focus: 2px solid currentColor;
	--c2bc-focus-offset: 5px;
	--c2bc-text-size: 1.25rem;

	margin: 0 0 1rem;
}

.c2bc-captcha .c2bc-status {
	margin: 0 0 var( --c2bc-gap );
	font-size: 0.9em;
}

.c2bc-captcha .c2bc-status[hidden] {
	display: none;
}

/* Instruction with the refresh control sitting directly beside it. */
.c2bc-captcha .c2bc-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --c2bc-gap );
	margin: 0 0 var( --c2bc-gap );
}

.c2bc-captcha .c2bc-instruction {
	margin: 0;
	padding: 0;
	font-weight: 600;
}

.c2bc-captcha .c2bc-options {
	display: flex;
	flex-wrap: wrap;
	gap: var( --c2bc-gap );
	margin: 0 0 var( --c2bc-gap );
}

/*
 * No border in the resting state: the option is just the icon. The click
 * target stays a comfortable 3.25rem square regardless.
 */
.c2bc-captcha .c2bc-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var( --c2bc-size );
	block-size: var( --c2bc-size );
	border: 0;
	border-radius: var( --c2bc-radius );
	background: var( --c2bc-bg );
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.c2bc-captcha .c2bc-option:hover {
	background: var( --c2bc-bg-hover );
}

/*
 * The radio itself is kept in the accessibility tree and in the tab order.
 * It is only visually collapsed, never display:none and never hidden, so
 * keyboard and screen reader users keep a real radio group.
 */
.c2bc-captcha .c2bc-option__input {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.c2bc-captcha .c2bc-option__figure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	/* Carries the selection and focus rings, so it needs the corner radius. */
	border-radius: var( --c2bc-radius );
	font-size: var( --c2bc-text-size );
	font-variant-numeric: tabular-nums;
}

.c2bc-captcha .c2bc-option__figure svg {
	inline-size: var( --c2bc-icon-size );
	block-size: var( --c2bc-icon-size );
	display: block;
}

/*
 * Keyboard focus on an option that is not the selected one. Dashed, so "where
 * I am" never looks like "what I picked" - the two states share one element,
 * and an element can only carry one outline.
 *
 * Arrow keys move focus and selection together inside a radio group, so this
 * shows up in exactly one situation: tabbing into a group where nothing has
 * been chosen yet. That is precisely the moment it needs to be unambiguous.
 *
 * Deliberately :focus-visible and not :focus, so a mouse click draws the
 * selection ring only.
 */
.c2bc-captcha .c2bc-option__input:focus-visible:not( :checked ) + .c2bc-option__figure {
	outline: var( --c2bc-focus );
	outline-offset: var( --c2bc-focus-offset );
	outline-style: dashed;
}

@supports not selector( :focus-visible ) {
	.c2bc-captcha .c2bc-option__input:focus:not( :checked ) + .c2bc-option__figure {
		outline: var( --c2bc-focus );
		outline-offset: var( --c2bc-focus-offset );
		outline-style: dashed;
	}
}

/*
 * The selected option is marked by a solid ring around the icon and nothing
 * else. Outline rather than border so it takes no layout space and cannot
 * shift the row when a choice is made.
 *
 * It sits on the figure, not on the label, so there is only ever one ring, and
 * it is tied to :checked rather than to focus - it stays put after the visitor
 * clicks elsewhere.
 *
 * This is a shape, not a hue: the distinction is the presence or absence of a
 * ring, so it still reads for anyone who cannot tell the colours apart.
 */
.c2bc-captcha .c2bc-option.is-selected .c2bc-option__figure,
.c2bc-captcha .c2bc-option:has( .c2bc-option__input:checked ) .c2bc-option__figure {
	outline: var( --c2bc-selected );
	outline-offset: var( --c2bc-selected-offset );
}

.c2bc-captcha .c2bc-controls {
	display: flex;
	flex-wrap: wrap;
	gap: var( --c2bc-gap );
}

.c2bc-captcha .c2bc-refresh,
.c2bc-captcha .c2bc-alt {
	appearance: none;
	border: var( --c2bc-border );
	border-radius: var( --c2bc-radius );
	background: var( --c2bc-bg );
	color: inherit;
	font: inherit;
	font-size: 0.85em;
	padding: 0.35em 0.8em;
	cursor: pointer;
}

.c2bc-captcha .c2bc-refresh:hover,
.c2bc-captcha .c2bc-alt:hover {
	border: var( --c2bc-border-hover );
}

/*
 * Icon-only refresh control in the header. Borderless to match the options;
 * its accessible name comes from aria-label, and title repeats it as a
 * tooltip for sighted mouse users.
 */
.c2bc-captcha .c2bc-refresh--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25em;
	border: 0;
	background: var( --c2bc-bg );
	line-height: 0;
}

.c2bc-captcha .c2bc-refresh--icon:hover {
	border: 0;
	background: var( --c2bc-bg-hover );
}

.c2bc-captcha .c2bc-refresh__icon {
	display: inline-flex;
}

.c2bc-captcha .c2bc-refresh__icon svg {
	inline-size: 1em;
	block-size: 1em;
	display: block;
}

.c2bc-captcha .c2bc-refresh:focus-visible,
.c2bc-captcha .c2bc-alt:focus-visible {
	outline: var( --c2bc-focus );
	outline-offset: var( --c2bc-focus-offset );
}

.c2bc-captcha .c2bc-noscript {
	margin: 0;
	font-size: 0.9em;
}

/*
 * Honeypot. Moved out of the viewport instead of display:none, because a bot
 * that only greps for "display:none" would skip an obviously hidden field.
 * This is a secondary signal; the CAPTCHA itself does the real work.
 */
.c2bc-hp {
	position: absolute !important;
	/* Pinned rather than left at its static position, so it cannot drift
	   somewhere visible in an unfamiliar layout. */
	inset-block-start: 0;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A theme that styles every input in the form must not be able to inflate the
   decoy back into view. */
.c2bc-hp input {
	inline-size: 1px !important;
	block-size: 1px !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.c2bc-captcha .c2bc-option {
		transition: none;
	}
}