/*
 * Cloudflare Turnstile — spacing and alignment
 * ---------------------------------------------------------------------------
 * The Simple Cloudflare Turnstile plugin positions its widget with <br> tags:
 *
 *     <div id="cf-turnstile-um-register" class="cf-turnstile" ...></div>
 *     <br class="cf-turnstile-br cf-turnstile-br-um-register">
 *
 * A <br> is a line break, not a spacing tool. Its height comes from whatever
 * line-height the surrounding element happens to have, so the gap under the
 * widget differs on every form — and the widget itself is given no margin at
 * all, so it sits flush against whatever is above it. That is the uneven
 * spacing you get on every Turnstile integration.
 *
 * The fix: hide the <br> spacers and control the gaps with real margins, set
 * per location so each form gets spacing that suits it.
 *
 * TO ADJUST: each block below has one margin line. Top value first, bottom
 * second. Nothing else needs touching.
 */

/* ---------------------------------------------------------------------------
 * 1. Neutralise the plugin's <br> spacers everywhere.
 *    Kept as a separate rule so it is obvious this is deliberate, not dead CSS.
 * ------------------------------------------------------------------------ */
.cf-turnstile-br {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. Baseline for every Turnstile widget.
 *    `margin-inline: auto` centres it — the widget has a fixed width (~300px)
 *    while the forms are wider, so without this it hugs the left edge while
 *    the submit button below it is centred.
 * ------------------------------------------------------------------------ */
.cf-turnstile {
	margin: 18px auto 22px;
}

/* ---------------------------------------------------------------------------
 * 3. Registration form.
 *    Sits directly under the newsletter opt-in paragraph, which already has
 *    its own bottom margin, so it needs less room above than below.
 * ------------------------------------------------------------------------ */
.um-register .cf-turnstile,
.register-overlay-main .cf-turnstile,
#cf-turnstile-um-register {
	margin: 14px auto 26px;
}

/* ---------------------------------------------------------------------------
 * 4. Login form.
 *    Follows a password input, which has a tighter bottom margin, so it needs
 *    a little more room above to separate from the field.
 * ------------------------------------------------------------------------ */
.um-login .cf-turnstile,
.overlay-main .cf-turnstile,
#cf-turnstile-um-login {
	margin: 22px auto 26px;
}

/* ---------------------------------------------------------------------------
 * 5. Password-reset form.
 * ------------------------------------------------------------------------ */
.um-password .cf-turnstile,
#cf-turnstile-um-password {
	margin: 20px auto 24px;
}

/* ---------------------------------------------------------------------------
 * 6. WordPress core login screen (wp-login.php).
 *    Narrow form, so the widget is close to full width there and only needs
 *    vertical breathing room.
 * ------------------------------------------------------------------------ */
body.login .cf-turnstile {
	margin: 16px auto 20px;
}

/* ---------------------------------------------------------------------------
 * 7. Small screens.
 *    The widget cannot shrink below its rendered width, so the only thing to
 *    do is tighten the vertical gaps and stop it forcing a horizontal scroll.
 * ------------------------------------------------------------------------ */
@media (max-width: 480px) {
	.cf-turnstile,
	.um-register .cf-turnstile,
	.register-overlay-main .cf-turnstile,
	#cf-turnstile-um-register,
	.um-login .cf-turnstile,
	.overlay-main .cf-turnstile,
	#cf-turnstile-um-login {
		margin: 14px auto 18px;
		max-width: 100%;
		overflow-x: auto;
	}
}