// The right-hand column of the contact section (template Column classes: "contact-panel ...").
// Large screens: 90% of a half-width column, with side padding as in the design
// (percentages of the row's width, so the spacing scales with the screen).
.contact-panel {
	// The site's bg-powder-white class only applies from 768px up, so on phones the panel
	// was plain white and the white fields disappeared into it. Give phones the same pale grey.
	@include media-breakpoint-down(sm) {
		background-color: $powder-white;
	}

	@include media-breakpoint-up(lg) {
		flex: 0 0 45%;
		max-width: 45%;
		padding-left: 7% !important;
		padding-right: 5% !important;
	}
}

// Contact Form component, landing page layout
// (Modules/ComponentContactForm/Resources/views/layouts/landing.blade.php).
// White borderless fields on the pale contact panel, sage submit button.
.contact-form {
	max-width: 540px;

	.form-row {
		margin-left: -6px;
		margin-right: -6px;

		> [class*="col"] {
			padding-left: 6px;
			padding-right: 6px;
		}
	}

	.form-group {
		margin-bottom: 12px;
	}

	.form-control {
		height: 44px;
		padding: .5rem 1rem;
		border: 0;
		border-radius: 0;
		background-color: $white;
		color: $grey;
		font-family: $primary-font;
		font-weight: 300;
		font-size: .875rem;

		&::placeholder {
			color: $light-grey;
			opacity: 1;
		}

		&:focus {
			box-shadow: 0 0 0 2px $primary;
		}
	}

	textarea.form-control {
		height: auto;
		min-height: 110px;
		// Fixed size: resizing it would make the contact panel, and the photo beside it, change height.
		resize: none;
	}

	&__recaptcha {
		margin: .5rem 0 1.5rem;
		font-size: .6875rem;
		line-height: 1.5;
		color: $light-grey;

		a {
			color: inherit;
			text-decoration: underline;
		}
	}

	&__submit {
		min-width: 13rem;
		padding: .6rem 2.5rem;
		font-size: .8rem;
		border-radius: 0;
	}

	// Phones and tablets: form centred in the panel, submit button centred under it.
	@include media-breakpoint-down(md) {
		margin-left: auto;
		margin-right: auto;

		&__submit {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
	}

	&__message {
		margin-bottom: 1.5rem;
		padding: 1rem 1.25rem;
		font-size: .9375rem;
		background-color: $white;

		p:last-child,
		ul { margin-bottom: 0; }

		&--success { border-left: 3px solid $primary; }
		&--error { border-left: 3px solid #c0392b; }
	}

	&__message-title {
		font-weight: 500;
		margin-bottom: .25rem;
	}
}