/*
 * Third-party contact form compatibility.
 *
 * base.css already styles bare input[type="text"], input[type="email"],
 * textarea and input[type="submit"] selectors, which covers most of
 * Contact Form 7's own markup automatically. The rules below fill the
 * remaining gaps: WPForms/Gravity Forms style <button> submits instead of
 * <input type="submit">, and everyone adds labels + validation text that
 * the original .contact-form CSS never had to account for.
 */

.contact-form label,
.contact-form .wpforms-field-label,
.contact-form .gfield_label {
	display: block;
	margin: 20px 0 5px;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--jp-ink);
}

.contact-form button[type="submit"],
.contact-form .wpforms-submit,
.contact-form input.wpcf7-submit,
.contact-form .gform_button {
	border: 2px solid var(--jp-accent);
	background-color: var(--jp-surface-a);
	color: var(--jp-ink);
	font-weight: 400;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	padding: 8px 18px;
	margin: 20px 0 0;
	cursor: pointer;
	transition-duration: .2s;
}

.contact-form button[type="submit"]:hover,
.contact-form .wpforms-submit:hover,
.contact-form input.wpcf7-submit:hover,
.contact-form .gform_button:hover {
	background-color: var(--jp-accent);
	color: #fff;
}

.contact-form select,
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"] {
	padding: 15px;
	border: 1px solid var(--jp-input-border);
	background-color: var(--jp-input-bg);
	color: var(--jp-input-text);
	width: 95.2%;
	font-size: 14px;
	margin: 20px 0 0;
}

.contact-form .wpcf7-not-valid-tip,
.contact-form .wpforms-error,
.contact-form .gfield_description.validation_message,
.contact-form .gfield_validation_message {
	color: #dc0505;
	font-size: 12px;
	margin-top: 6px;
}

.contact-form .wpcf7-response-output,
.contact-form .wpforms-confirmation-container-full {
	margin-top: 20px;
	padding: 12px 15px;
	border: 1px solid var(--jp-divider);
	color: var(--jp-text);
}

.contact-form .wpforms-field,
.contact-form .gfield {
	margin-bottom: 10px;
}