/* Styling for the phone/email CTA that replaced the Elementor forms.
 *
 * The forms POSTed to admin-ajax.php, which does not exist on a static host, so
 * tools/destaticize.py swaps each one for these two buttons. The rules below
 * borrow Elementor's own button classes for colour and typography and only add
 * the layout the form's wrapper used to provide.
 */

.tto-cta {
	width: 100%;
}

.tto-cta__lead {
	margin: 0 0 1.25em;
	font-size: 1rem;
	line-height: 1.6;
}

.tto-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
}

.tto-cta--center .tto-cta__actions {
	justify-content: center;
}

/* Elementor's button is an inline-block <a>; these only constrain it so two of
 * them sit side by side without inheriting the form field's full width. */
.tto-cta__button {
	flex: 0 1 auto;
	text-decoration: none;
	white-space: nowrap;
}

.tto-cta__button--alt {
	background-color: transparent;
	border: 1px solid currentColor;
}

/* Email addresses are long enough to overflow a narrow column, so below the
 * Elementor mobile breakpoint the buttons stack and go full width. */
@media (max-width: 767px) {
	.tto-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tto-cta__button {
		text-align: center;
		white-space: normal;
		word-break: break-word;
	}
}