/************************************************************
   Contact page layout & form styling
   Loaded only on the contact page template.
*************************************************************/

.contact-layout .contact-form {
	float: none;
	min-width: 0;
}

.contact-layout .map {
	min-width: 0;
}


.contact-form .form-field {
	margin-bottom: 6px;
}

.contact-form .form-label label {
	padding: 0 8px 8px 2px;
	display: block;
	font-weight: bold;
}

.contact-form .form-input-wrapper input {
	border: 1px solid #dbdbdb;
	width: 100%;
	padding: 6px;
	border-radius: 4px;
	font: 13px Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	margin-bottom: 12px;
}

.contact-form .form-textarea-wrapper textarea {
	border: 1px solid #dbdbdb;
	border-radius: 5px;
	width: 100%;
	padding: 6px;
	font: 13px Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}

.contact-form .buttons {
	margin-top: 8px;
}

button.contact-submit {
	background: var(--color-brand);
	height: 30px;
	border: none;
	cursor: pointer;
	color: #fff;
	padding: 0 15px;
	font: 13px Arial, Helvetica, sans-serif;
	font-weight: bold;
	border-radius: 4px;
	margin-bottom: 16px;
}

button.contact-submit:disabled {
	background: #aaa;
	cursor: not-allowed;
}

/* Form success/error messages */
.contact-form .notices {
	padding: 12px 16px;
	margin-bottom: 12px;
	border-radius: 4px;
	font: 13px Arial, Helvetica, sans-serif;
	border: 1px solid transparent;
}

.contact-form .notices.green {
	background-color: #dff0d8;
	border-color: #b2d8a8;
	color: #3c763d;
}

.contact-form .notices.red {
	background-color: #f2dede;
	border-color: #ebccd1;
	color: #a94442;
}

.contact-form .notices p {
	margin: 0;
}

@media screen and (max-width: 960px) {
	.contact-form {
		float: none;
	}

	.contact-layout .contact-form {
		flex: none;
		width: 100%;
		overflow: visible;
	}

	.contact-layout [data-grav-field="turnstile"] {
		overflow: visible;
		padding-bottom: 4px;
	}

	.contact-layout .map {
		width: 100%;
	}

	.contact-layout .map iframe {
		display: block;
	}
}