/**
 * "Join ISKCON Family" form, centred on the page.
 *
 * The form used to share a row with the daily schedule and so filled half
 * the width. Standing alone it stretched the whole band, leaving very wide
 * fields and the headings stranded at the left edge.
 *
 * Elementor makes .elementor-container a flex row and gives both
 * .elementor-column and .elementor-widget-wrap width:100%. Capping the
 * column and letting auto inline margins centre it is therefore enough - the
 * column is a flex item, so auto margins centre it along the row. The
 * container also gets justify-content:center so the result holds even if the
 * width cap is ever removed.
 */

.join-form .elementor-container {
	justify-content: center;
}

/*
 * Direct child only: Elementor reuses .elementor-column on the form's own
 * field groups, and a bare descendant selector would cap those too.
 */
.join-form > .elementor-container > .elementor-column {
	max-width: 38rem;
	margin-inline: auto;
}

.join-form .elementor-heading-title {
	text-align: center;
}

/* A little air between the headings and the first field. */
.join-form .elementor-widget-form {
	margin-top: 0.5rem;
}

@media (max-width: 480px) {
	.join-form > .elementor-container > .elementor-column {
		max-width: none;
	}
}