/* Get In Touch - the two halves and the form. */

/* Two equal halves (864 / 864 in the frame), so basis 0 with the floor on
   min-width - a floor written into the basis would leave them permanently
   unequal. The wrap is the stack: min(450px, 100%) each means they can no
   longer sit side by side below 900, which is where the design stacks them. */
.contact-section__grid {
	display: flex;
	flex-wrap: wrap;
}

.contact-section__details,
.contact-section__form {
	flex: 1 1 0;
	min-width: min(450px, 100%);
	padding-block: clamp(40px, 34.17px + 1.495vw, 60px)
	               clamp(40px, 28.05px + 3.064vw, 81px);
	padding-inline: var(--gutter);
}

.contact-section__details { background: var(--red-ink); color: var(--white); }
.contact-section__form    { background: var(--panel); }

/* Both halves carry the design's 664px content column. */
.contact-section__detailsInner,
.contact-section__formInner { width: 100%; max-width: 664px; }

/* The form's own width decides its column count, not the viewport's - the
   half-width band shrinks faster than the page does. */
.contact-section__formInner { container-type: inline-size; container-name: enquiry; }

.contact-section__title > * {
	font-weight: 600;
	line-height: 1.273; /* 44px in a 56px box */
}

/* 18px Book at both frames, so a flat size. */
.contact-section__intro {
	margin-top: 8px; /* title box ends 5392, intro starts 5400 */
	font-size: 18px;
	line-height: 23px;
}

/* Head Office - 28px Medium desktop, 22px at mobile. */
.contact-section__office > * {
	margin-top: 30px;
	font-weight: 500;
	line-height: 1.286; /* 28px in a 36px box */
}

.contact-section__line {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 15px;
	font-size: clamp(18px, 17.42px + 0.149vw, 20px);
	line-height: 26px;
}
.contact-section__line .icon { color: var(--red); }
.contact-section__line a:hover { color: var(--red-tint-strong); }

.contact-section__address {
	/* 15px at 390 -> 30px at 1728 */
	margin-top: clamp(15px, 10.63px + 1.121vw, 30px);
	font-size: 20px;
	line-height: 26px;
	font-style: normal;
}
.contact-section__address p { margin: 0; }

.contact-section__socials {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 14.17px + 1.495vw, 40px);
	margin-top: 30px;
}
.contact-section__socials li { display: flex; }
.contact-section__socials a {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	min-height: 22px;
	font-size: 16px;
	line-height: 21px;
	letter-spacing: .48px;
}
.contact-section__socials .icon { color: var(--red); }
.contact-section__socials a:hover { color: var(--red-tint-strong); }

/* ==========================================================================
   Form - Contact Form 7. The layout classes below are authored into the form
   template (Contact > Garmendale enquiry); everything prefixed .wpcf7- is
   markup CF7 adds around them.
   ========================================================================== */

/* CF7 wraps each control in an inline span - the fields need to fill the row. */
.contact-section__form .wpcf7-form-control-wrap { display: block; }
.contact-section__form .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 15px;
	border: 1px solid var(--red);
	border-radius: var(--radius);
	font-size: 16px;
	line-height: 21px;
}
.contact-section__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 18px;
	color: var(--red);
}
.contact-section__form .wpcf7-not-valid { border-color: var(--red); }
/* Take the spinner out of flow so it cannot widen the submit row; it sits
   over the right end of the button and only shows while submitting. */
.contact-section__form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 12px;
	margin: 0;
	transform: translateY(-50%);
}

/* One column by default. Two only once each is wide enough to show the longest
   placeholder, "What service do you require?" - it needs 253px of text plus the
   15px inset and the 44px chevron well, so 312px a column, 638px the pair. That
   threshold is met at the design's own 664px form, and the form
   stacks below it rather than clipping the label. */
.enquiry-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.enquiry-form__row > * { flex: 1 1 100%; }

@container enquiry (min-width: 640px) {
	.enquiry-form__row { gap: 14px; } /* 1289 -> 1303 */
	.enquiry-form__row > * { flex: 1 1 calc((100% - 14px) / 2); }
}

/* A flex item's min-width is auto, so CF7's textarea cols="40" pushes the form
   wider than its column just above the stacking width. */
.enquiry-form__field,
.enquiry-form__row > *,
.contact-section__form .wpcf7-form-control-wrap,
.contact-section__form .field { min-width: 0; }

.enquiry-form__field { margin: 0 0 15px; } /* 5386 -> 5401 */
.enquiry-form__row .enquiry-form__field { margin-bottom: 15px; }

.enquiry-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 2px; /* fields already carry a 15px bottom margin */
}

/* Consent line - 14x15 box with a #0a3072 hairline, 16px muted copy
   CF7 nests label > input + span. */
.enquiry-form__consent {
	max-width: 412px;
	font-size: 16px;
	line-height: 21px;
	color: var(--ink-muted);
}
.enquiry-form__consent .wpcf7-form-control-wrap,
.enquiry-form__consent .wpcf7-acceptance,
.enquiry-form__consent .wpcf7-list-item { display: block; margin: 0; }

.enquiry-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}
.enquiry-form__consent input[type="checkbox"] {
	flex: none;
	width: 14px;
	height: 15px;
	margin: 3px 0 0;
	border: 1px solid var(--field-border);
	border-radius: 2px;
	background: var(--white);
	appearance: none;
	cursor: pointer;
}
.enquiry-form__consent input[type="checkbox"]:checked {
	background: var(--red);
	border-color: var(--red);
}

/* CF7 appends its spinner straight after the submit tag; the form template
   wraps both so the foot stays a two-item row and Submit keeps the design's
   right alignment. */
.enquiry-form__submitWrap { position: relative; display: inline-flex; align-items: center; }

.enquiry-form__submit {
	min-width: 162px;
	width: 162px;
	-webkit-appearance: none;
	appearance: none;
}

/* The halves split only once the form column can hold a full-width field -
   below ~840px "What service do you require?" no longer fits its box, so the
   section stacks and the form takes the whole content width instead. */
@media (max-width: 899px) {

	/* The halves have already wrapped by here (the min-width floor does it);
	   what the mobile frame adds is the centring. */
	.contact-section__detailsInner { text-align: center; }
	.contact-section__detailsInner,
	.contact-section__formInner { margin-inline: auto; }

	.contact-section__line,
	.contact-section__socials { justify-content: center; }

	.enquiry-form__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}
	.enquiry-form__consent { max-width: none; }
	.enquiry-form__submitWrap { display: flex; }
	.enquiry-form__submit { width: 100%; min-width: 0; }
}

@media (min-width: 900px) {
	/* The band is 683px tall in the design; content sits at the top of it. */
	.contact-section__grid { min-height: 683px; }
	.contact-section__detailsInner { margin-left: auto; }
	.contact-section__formInner { margin-right: auto; }
}