/**
 * Email opt-in form, centred in the content column.
 *
 * The form previously rendered outside the layout at full page width. Inside the
 * centre column it needs to sit within the reading measure and read as part of the
 * article rather than as a detached banner.
 */

/*
 * No background or border of its own. The form already carries a strong solid
 * panel; wrapping that in a second tinted box read as a frame around a frame.
 * The wrapper only positions and spaces it.
 */
.cloudflare-optin {
	margin: 0 0 2rem;
	text-align: center;
}

.cloudflare-optin .gform_wrapper {
	margin: 0 auto;
	max-width: 100%;
	text-align: center;
}

.cloudflare-optin .gform_heading,
.cloudflare-optin .gform_description {
	text-align: center;
	margin: 0 0 .8rem;
}

/*
 * The form is laid out as quarter-width fields on a wide container. In a 850px
 * column those wrap awkwardly, so it becomes a centred row that wraps cleanly.
 */
.cloudflare-optin .gform_fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .6rem;
}

.cloudflare-optin .gfield {
	flex: 0 1 auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.cloudflare-optin .gfield--type-html p {
	margin: 0;
	white-space: nowrap;
}

.cloudflare-optin .gfield--type-email,
.cloudflare-optin .gfield--type-select {
	flex: 1 1 200px;
	min-width: 180px;
}

.cloudflare-optin input[type="email"],
.cloudflare-optin select {
	width: 100%;
}

.cloudflare-optin .gform_footer {
	justify-content: center;
	margin: 1rem 0 0;
	padding: 0;
}

.cloudflare-optin .gform_button {
	margin: 0 auto;
}

@media (max-width: 700px) {
	.cloudflare-optin { padding: 1.1rem; }
	.cloudflare-optin .gfield--type-html p { white-space: normal; }
	.cloudflare-optin .gfield { flex: 1 1 100%; }
}