/*
 * Contact form: GOV.UK Design System error message / error summary patterns,
 * using Bootstrap 4 validation class names (.is-invalid, .invalid-feedback).
 * Also used by the server-side error page in contact.php.
 */

.contact-form-wrap {
	max-width: 600px;
	padding-bottom: 20px;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
}

.visually-hidden {
	position: absolute;
	clip-path: inset(50%);
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

/* Spam honeypot: real visitors never see or fill this field */
.honeypot {
	display: none !important;
}

.contact-form-wrap h1 {
	font-size: 30px;
}

/* Field and button base styles (formerly from bootstrap3.css) */
.contact-form .form-control {
	display: block;
	width: 100%;
	padding: 6px 12px;
	background-color: #fff;
	color: #555;
	font-family: inherit;
	line-height: 1.42857143;
}

.contact-form .btn {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid transparent;
	border-radius: 4px;
	font: 14px/1.42857143 Arial, Helvetica, sans-serif;
	cursor: pointer;
}

.contact-form .btn-primary {
	border-color: #2e6da4;
	background-color: #337ab7;
	color: #fff;
}

.contact-form .btn-primary:hover,
.contact-form .btn-primary:focus {
	border-color: #204d74;
	background-color: #286090;
}

.contact-form-wrap .form-intro {
	color: #333;
	font-size: 14px;
	margin-bottom: 20px;
}

.contact-form-wrap .form-intro a {
	text-decoration: underline;
}

.contact-form label {
	display: block;
	margin-bottom: 4px;
	color: #036;
	font-size: 16px;
	font-weight: bold;
}

.contact-form .form-group {
	margin-bottom: 24px;
}

/* 16px stops iOS zooming into the field on focus */
.contact-form .form-control {
	font-size: 16px;
	border: 2px solid #505a5f;
	border-radius: 0;
	box-shadow: none;
}

.contact-form .form-control:focus {
	outline: 3px solid #036;
	outline-offset: 0;
	border-color: #0b0c0c;
	box-shadow: inset 0 0 0 1px #0b0c0c;
}

.contact-form textarea.form-control {
	min-height: 120px;
	resize: vertical;
}

.contact-form-wrap .form-hint {
	margin: 0 0 6px;
	color: #505a5f;
	font-size: 14px;
}

/* Error message: above the input, with a red bar down the whole group */
.contact-form .form-group--error {
	border-left: 5px solid #d4351c;
	padding-left: 15px;
}

.contact-form .invalid-feedback {
	display: block;
	margin: 0 0 6px;
	color: #d4351c;
	font-size: 16px;
	font-weight: bold;
}

.contact-form .invalid-feedback[hidden] {
	display: none;
}

.contact-form .form-control.is-invalid {
	border-color: #d4351c;
}

.contact-form .form-control.is-invalid:focus {
	border-color: #0b0c0c;
}

/* Error summary: shown on submit, receives focus */
.contact-form-wrap .error-summary {
	margin-bottom: 24px;
	padding: 16px 20px;
	border: 5px solid #d4351c;
	color: #0b0c0c;
}

.contact-form-wrap .error-summary[hidden] {
	display: none;
}

.contact-form-wrap .error-summary:focus {
	outline: 3px solid #036;
	outline-offset: 0;
}

.contact-form-wrap .error-summary__title {
	margin: 0 0 12px;
	color: #0b0c0c;
	font-size: 20px;
	font-weight: bold;
}

.contact-form-wrap .error-summary__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-form-wrap .error-summary__list li + li {
	margin-top: 6px;
}

.contact-form-wrap .error-summary__list a,
.contact-form-wrap .error-summary__list a:link,
.contact-form-wrap .error-summary__list a:visited {
	color: #d4351c;
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
}

.contact-form-wrap .error-summary__list a:hover {
	color: #942514;
}

/* Character count */
.contact-form-wrap .char-count {
	margin: 6px 0 0;
	color: #505a5f;
	font-size: 14px;
}

.contact-form-wrap .char-count--error {
	color: #d4351c;
	font-weight: bold;
}

.contact-form .btn[disabled] {
	cursor: progress;
}