/* Contact page, Halston editorial treatment. Tokens and shared classes come from base, components and sections css. */

/* Compact header: headline and one line, the form lands immediately after. */
.contact-hero {
	padding-block: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 2.4vw, 2rem);
}

.contact-hero__head {
	display: flex;
	flex-direction: column;
	gap: clamp(0.8rem, 1.6vw, 1.2rem);
}

.contact-hero__title {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(1.875rem, 1.65rem + 1.125vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--color-ink);
}

.contact-hero__rule {
	margin-block: clamp(2rem, 3.4vw, 3.2rem) clamp(1.8rem, 2.6vw, 2.6rem);
}

.contact-hero__meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.8rem, 4vw, 4rem);
	align-items: center;
}

.contact-hero__lead {
	max-width: 38rem;
	margin: 0;
	font-size: var(--type-body-lg);
	line-height: 1.6;
	color: var(--color-muted);
}

.contact-hero__actions {
	justify-self: end;
}

/* Route chooser, editorial split with faint dividers. */
.contact-routes__intro h2,
.contact-form__heading {
	font-weight: 500;
	letter-spacing: -0.012em;
}

.contact-routes__rule {
	margin-block: clamp(1.8rem, 3vw, 2.8rem);
}

.contact-routes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.6rem, 3vw, 3rem);
}

.route-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: clamp(1.6rem, 2.4vw, 2.4rem) 0 0;
	border-top: 1px solid var(--color-line);
	color: var(--color-text);
	text-decoration: none;
	transition: border-top-color 260ms var(--ease-out-soft);
}

.route-card:hover,
.route-card:focus-visible {
	border-top-color: var(--color-accent-deep);
	color: var(--color-text);
}

.route-card:hover .route-card__title,
.route-card:focus-visible .route-card__title {
	color: var(--color-accent-deep);
}

.route-card:hover .route-card__link::after,
.route-card:focus-visible .route-card__link::after {
	opacity: 0.72;
	transform: scaleX(1);
}

.route-card__num {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--color-accent);
}

.route-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--type-section-md);
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: color 260ms var(--ease-out-soft);
}

.route-card__text {
	margin: 0;
	max-width: 32ch;
	color: var(--color-muted);
	line-height: 1.6;
}

.route-card__link {
	margin-top: auto;
	padding-top: var(--space-2);
}

/* Contact details and form, clean two column. */
.contact-form__grid {
	display: grid;
	grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.contact-form__heading {
	font-size: var(--type-section-md);
	margin-top: var(--space-1);
}

.contact-form__hint {
	margin: 0;
	color: var(--color-muted);
	line-height: 1.6;
}

.contact-form__info {
	margin: var(--space-2) 0 0;
	border-top: 1px solid var(--color-line);
}

.contact-form__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-line);
}

.contact-form__row dt {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent);
}

.contact-form__row dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
}

.contact-form__note {
	max-width: 34ch;
	margin: 0;
	color: var(--color-muted);
	line-height: 1.6;
}

.contact-form__main {
	min-width: 0;
}

/* Closing CTA headline matches the home uppercase treatment. */
.contact-form .entry-content > * + * {
	margin-top: var(--space-4);
}

/* Quote enquiry form, flat editorial fields on the surface band. */
.enquiry-form {
	display: flex;
	flex-direction: column;
	gap: clamp(1.6rem, 2.6vw, 2.4rem);
}

.enquiry-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.enquiry-form__error {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid rgba(156, 74, 55, 0.45);
	color: var(--color-error);
	font-size: 0.92rem;
}

/* Inline validation: a quiet mono line in the palette's warm red, shown
   under the field that needs attention, with the field border picking up
   the same tone so the two read as one signal. */
.enquiry-form__field-error {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-error);
}

.enquiry-form__field-error:empty {
	display: none;
}

.enquiry-form__field.is-invalid input,
.enquiry-form__field.is-invalid select,
.enquiry-form__field.is-invalid textarea {
	border-color: var(--color-error);
}

.enquiry-form__fieldset--need.is-invalid .enquiry-form__choice span {
	border-color: var(--color-error);
}

.enquiry-form__label {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent);
}

.enquiry-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.enquiry-form__fieldset legend {
	padding: 0;
}

.enquiry-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.enquiry-form__choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.enquiry-form__choice span {
	display: inline-flex;
	align-items: center;
	min-height: 2.65rem;
	padding: 0.72rem 1.1rem;
	border: 1px solid var(--color-line);
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
	cursor: pointer;
	transition:
		background-color 220ms var(--ease-out-soft),
		border-color 220ms var(--ease-out-soft),
		color 220ms var(--ease-out-soft);
}

.enquiry-form__choice input:checked + span {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-bg);
}

.enquiry-form__choice input:focus-visible + span {
	outline: 2px solid rgba(151, 104, 61, 0.42);
	outline-offset: 3px;
}

.enquiry-form__choice:hover span {
	border-color: var(--color-dark);
}

.enquiry-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.2rem, 2.2vw, 2rem);
}

.enquiry-form__field {
	margin: 0;
	min-width: 0;
}

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="tel"],
.enquiry-form select,
.enquiry-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 0.95rem;
	line-height: 1.5;
	transition: border-color 220ms var(--ease-out-soft);
}

.enquiry-form select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1a16' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.6rem;
}

.enquiry-form input:focus-visible,
.enquiry-form select:focus-visible,
.enquiry-form textarea:focus-visible {
	outline: none;
	border-color: var(--color-accent-deep);
}

.enquiry-form textarea {
	resize: vertical;
	min-height: 8rem;
}

/* Floor plan upload: an editorial drop zone on the form's 1px geometry.
   The dashed hairline marks it as a drop target, everything else matches
   the flat field language. Before JS enhances it the native file input
   sits inside the zone and does all the work. */
.enquiry-form__upload {
	margin: 0;
	min-width: 0;
}

.enquiry-form__dropzone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	min-height: 3.4rem;
	padding: 0.85rem 1rem;
	border: 1px dashed var(--color-line);
	background: var(--color-bg);
	cursor: pointer;
	transition: border-color 220ms var(--ease-out-soft);
}

.enquiry-form__dropzone:hover,
.enquiry-form__dropzone:focus-within {
	border-color: var(--color-accent-deep);
}

.enquiry-form__dropzone input[type="file"] {
	width: 100%;
	font-size: 0.9rem;
	color: var(--color-text);
}

.enquiry-form__dropzone-prompt {
	display: none;
}

.enquiry-form__upload.is-enhanced .enquiry-form__dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.enquiry-form__upload.is-enhanced .enquiry-form__dropzone-prompt {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
}

.enquiry-form__dropzone-plus {
	color: var(--color-accent);
}

.enquiry-form__upload.has-file .enquiry-form__dropzone {
	display: none;
}

.enquiry-form__hint {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-muted);
}

.enquiry-form__file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 3.4rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--color-line);
	background: var(--color-bg);
}

.enquiry-form__file[hidden] {
	display: none;
}

.enquiry-form__file-name {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}

.enquiry-form__file-remove {
	border: 0;
	padding: 0;
	background: none;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.enquiry-form__file-remove:hover,
.enquiry-form__file-remove:focus-visible {
	color: var(--color-ink);
}

.enquiry-form__error--inline {
	display: block;
	margin-top: var(--space-2);
	padding: var(--space-2) var(--space-3);
}

.enquiry-form__error--inline[hidden] {
	display: none;
}

.enquiry-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	flex-wrap: wrap;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-line);
}

.enquiry-form__privacy {
	max-width: 34rem;
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-muted);
}

.enquiry-form__success {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: clamp(2rem, 4vw, 3.2rem);
	border: 1px solid var(--color-line);
}

.enquiry-form__success h3 {
	max-width: 24ch;
	font-weight: 500;
	font-size: var(--type-section-md);
}

.enquiry-form__success p:last-child {
	max-width: 44ch;
	color: var(--color-muted);
}

@media (max-width: 980px) {
	.contact-routes__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.contact-form__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.contact-hero__meta {
		grid-template-columns: 1fr;
		row-gap: var(--space-5);
	}

	.contact-hero__actions {
		justify-self: start;
	}

	.enquiry-form__grid {
		grid-template-columns: 1fr;
	}
}