/*
 * Content + Form.
 *
 * A copy column beside a form in a filled panel. The split is even, and the
 * panel can take either side so consecutive pages need not all lean the same
 * way.
 *
 * The form's own controls are themed in inc/forms.php, through Gravity Forms'
 * style settings. Only the panel around it and the type inside it are set here,
 * so there is one place to look for each and they cannot drift apart.
 */

.content-form {

	/*
	 * The form reversed out.
	 *
	 * components/_forms.scss carries the brand baseline for a form on a light
	 * background, and inc/forms.php passes this instance the colours Gravity
	 * Forms derives its ramps from. Only what the accent panel changes is here.
	 */

	.gform_wrapper {
		/* Danger red on the accent panel is close to unreadable, and
		   "(Required)" is a note about the field rather than an error in it. */

		--gf-ctrl-label-color-req: rgb(255 255 255 / 70%);
	}

	/*
	 * Validation, reversed out.
	 *
	 * Gravity Forms sets error text in its danger red, which against the accent
	 * panel measures about 1.3:1 and simply cannot be read. Nothing pale enough
	 * to pass on this blue still looks like an error, so the message becomes a
	 * solid red chip with white type instead: legible at 5.8:1, and
	 * unmistakably a problem rather than another hint under the field.
	 */

	.gform_wrapper .gform_validation_errors,
	.gform_wrapper .gfield_validation_message,
	.gform_wrapper .validation_message {
		padding: 0.625rem 0.875rem;
		border: 0;
		background: var(--gf-color-danger);
		color: var(--sk-white);
	}

	.gform_wrapper .gform_validation_errors .gform_submission_error,
	.gform_wrapper .gform_validation_errors a {
		color: var(--sk-white);
	}
}
.content-form__grid {
	display: grid;
	align-items: start;
	gap: clamp(2rem, 5vw, 4rem);

	@media (min-width: 62rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Source order puts the copy first so it leads on a phone and in the
	   reading order; only the painted position changes. */

.content-form--form-left .content-form__copy {
	@media (min-width: 62rem) {
		order: 2;
	}
}

.content-form--single .content-form__grid {
	@media (min-width: 62rem) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.content-form__heading {
	margin-block: 0 1rem;
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: clamp(1.75rem, 1.25rem + 1.75vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.content-form__body {
	color: var(--sk-gray-copy);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.65;

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-bottom: 0;
	}

	/*
		 * Contact details are written as short bold-led paragraphs rather than a
		 * definition list, because that is what an editor gets from pressing
		 * return in the editor. Tightening the leading keeps a label and its
		 * value reading as one unit.
		 */

	strong {
		color: var(--sk-black);
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	a {
		color: var(--sk-accent);
	}
}

.content-form__panel {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--sk-accent);
	color: var(--sk-white);
}

.content-form__form-heading {
	margin-block: 0 1.5rem;
	font-family: var(--sk-font-display);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

.content-form__notice {
	margin: 0;
	font-size: 0.9375rem;
}