/**
 * Connectif Turnstile Integration.
 *
 * Every rule is scoped to nodes this plugin creates. Nothing here targets or
 * restyles Connectif markup, so the host form layout is left exactly as the
 * Connectif content designer built it.
 */

.cnts {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
}

.cnts__widget {
	display: block;
	line-height: 0;
}

/*
 * Collapse the reserved space unless Cloudflare actually has something on
 * screen. With the invisible appearance modes Turnstile still fills the
 * container with its own markup, so :empty stops matching while the widget
 * remains 65px of blank space. The gate sets data-challenge on every render
 * and whenever Turnstile inserts or removes its frame.
 */
.cnts__widget:empty,
.cnts__widget[data-challenge="hidden"] {
	display: none;
}

.cnts__status {
	margin: 8px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	color: inherit;
}

.cnts__status[hidden] {
	display: none;
}

.cnts__status[data-error="true"] {
	/* ~6.5:1 on white, meets WCAG AA for normal text (4.5:1 minimum). */
	color: #b3261e;
}

.cnts[data-busy="true"] .cnts__status {
	opacity: 0.8;
}

/*
 * The Turnstile "normal" widget has a 300px minimum width. On a 320px viewport
 * the 16px horizontal padding above, stacked on top of the padding Connectif
 * already applies to its own cells, leaves under 300px, and the widget gets
 * visually clipped by an ancestor with overflow:hidden. Give the padding back
 * on narrow screens: Connectif's own cell padding already provides the gutter.
 */
@media (max-width: 480px) {
	.cnts {
		padding-left: 0;
		padding-right: 0;
	}
}