/*
 * consultation-modal.css — the "Get In Touch With Us" enquiry overlay.
 *
 * A photograph beside the enquiry form, on the deep surface the Contact page's
 * own panel uses. The field treatment below is deliberately the same as
 * .contactPanel's in contact.css — same surface, same pill inputs, same
 * hidden labels — but it is not shared with it: contact.css is enqueued on the
 * Contact page alone and is mostly that page's two-column layout, so loading
 * it site-wide to reuse a third of it would cost every other page more than
 * these rules do. If a third panel on this surface ever appears, lift the
 * field rules into their own stylesheet rather than copying them a second
 * time.
 */

.consultModal {
	/*
	 * vw/vh, not the UA-stylesheet's own percentage-resolved box: a <dialog>
	 * shown with showModal() is promoted to the top layer, and percentage
	 * width/max-height on it resolve against that promotion inconsistently
	 * on mobile Safari — the dialog can end up with no computed size at all,
	 * which reads as a bare ::backdrop with the form and photo both gone.
	 * Viewport units sidestep the ambiguity by resolving the same way
	 * everywhere.
	 */
	width: min(100vw - 32px, 980px);
	max-height: min(100vh - 32px, 92vh);
	padding: 0;
	/*
	 * .consultModalInner already clips to the rounded corners with its own
	 * overflow: hidden below, so this was never load-bearing for that — and
	 * paired with the max-height above, overflow: visible on the dialog
	 * itself is the other half of the same mobile Safari sizing bug.
	 */
	overflow: hidden;
	border: 0;
	border-radius: 32px;
	background: var(--surface-deep);
	color: var(--warm-sand);
}

.consultModal::backdrop {
	background: rgba(6, 26, 22, 0.72);
}

.consultModalInner {
	position: relative;
	display: grid;
	grid-template-columns: 42fr 58fr;
	max-height: inherit;
	overflow: hidden;
	border-radius: inherit;
}

.consultModalClose {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px is the smallest comfortable touch target; the icon inside is 16px. */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--warm-sand);
	color: var(--forest-ink);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.consultModalClose:hover,
.consultModalClose:focus-visible {
	background: var(--accent-deep);
	color: #fff;
}

/* ------------------------------------------------------------- The image */

.consultModalMedia {
	overflow: hidden;
}

.consultModalImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------- The form */

.consultModalPanel {
	padding: clamp(28px, 3.4vw, 48px);
	overflow-y: auto;
}

.consultModalTitle {
	/* Clears the close button, which is pinned to the panel's top-right and
	   otherwise sits on the last word of a centred title on a phone. */
	padding-inline: 36px;
	font-family: var(--font);
	font-size: clamp(26px, 2.4vw, 32px);
	line-height: 1.3;
	font-weight: 400;
	text-align: center;
	text-transform: capitalize;
	color: var(--warm-sand);
}

/*
 * Gravity Forms markup, scoped to this panel. The plugin's own stylesheet is
 * dequeued site-wide (inc/forms.php), so these rules are all the form gets.
 */
.consultModalPanel .gform_fields {
	display: grid;
	gap: 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * The label still has to reach a screen reader, so it is clipped rather than
 * display:none'd — the placeholder alone is not an accessible name.
 */
.consultModalPanel .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.consultModalPanel input[type="text"],
.consultModalPanel input[type="email"],
.consultModalPanel input[type="tel"],
.consultModalPanel textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid rgba(246, 242, 234, 0.45);
	border-radius: var(--radius-pill);
	background: transparent;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	color: var(--warm-sand);
}

.consultModalPanel textarea {
	min-height: 40px;
	height: 88px;
	padding-block: 14px;
	border-radius: 24px;
	resize: vertical;
}

.consultModalPanel input::placeholder,
.consultModalPanel textarea::placeholder {
	color: rgba(246, 242, 234, 0.7);
	opacity: 1;
}

.consultModalPanel input:focus-visible,
.consultModalPanel textarea:focus-visible {
	outline: 2px solid var(--accent-on-dark);
	outline-offset: 2px;
	border-color: transparent;
}

.consultModalPanel .gfield_required {
	color: var(--accent-on-dark);
}

.consultModalPanel .validation_message,
.consultModalPanel .gform_validation_errors {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--warm-sand);
	text-decoration: underline;
}

.consultModalPanel .gform_footer {
	margin-top: 18px;
}

/*
 * Full-width submit, same treatment as .scheduleForm's (schedule.css): the
 * label centres across the whole bar while the circle is pulled out of the
 * flex flow and pinned to the right edge, rather than sitting right beside
 * the label with a dead gap filling the rest of the button.
 */
.consultModalInner .contactSubmit {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 4px 56px;
}

/*
 * Plain .pillBtnCircle, not .isInk — the submit button's circle is the
 * lighter --accent fill here on request, not the dark plate the Contact
 * page's own copy of this same button keeps (see tfr_contact_submit_button()).
 */
.consultModalInner .pillBtnCircle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

.consultModalInner .contactSubmit:hover .pillBtnCircle,
.consultModalInner .contactSubmit:focus-visible .pillBtnCircle {
	transform: translateY(-50%) translateX(2px);
}

/* --------------------------------------------------------------- Small */

@media (max-width: 820px) {
	/* The photograph is atmosphere, not information — below this width the
	   form needs the whole dialog more than the picture does. */
	.consultModalInner {
		grid-template-columns: minmax(0, 1fr);
	}

	.consultModalMedia {
		display: none;
	}
}

@media (max-width: 560px) {
	.consultModal {
		border-radius: 24px;
	}

	.consultModalTitle {
		padding-left: 0;
		font-size: 22px;
		text-align: left;
	}
}