/* ============================================================
   Contact page (/contact/)
   ============================================================
   Typography, spacing, form elements, and button styles all
   match the site footer so the page feels like a natural
   extension of the same design language.
   ============================================================ */

.contact-page {
	padding: var(--header-offset-desktop) var(--Space-l) var(--Space-3xl);
	max-width: 900px;
	margin: 0 auto;
}

/* ─── Header: heading + intro ─── */

.contact-header {
	padding-top: var(--Space-3xl);
	padding-bottom: var(--Space-2xl);
}

.contact-heading {
	font-family: var(--font-body);
	font-size: var(--body-s);
	font-weight: 400;
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	margin: 0;
	padding: var(--Space-s) 0;
}

.contact-intro {
	font-family: var(--font-body);
	font-size: var(--body-s);
	line-height: 1.6;
	color: var(--text-primary);
	text-wrap: pretty;
	max-width: 400px;   /* narrower than the 540px before — wraps ~the word "pieces" so the first line isn't too long */
	margin: 0;
}

/* ─── Two-column info grid ─── */

.contact-columns {
	display: flex;
	flex-direction: row;
	gap: var(--Space-2xl);
}

.contact-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--Space-l);
}

.contact-block {
	display: flex;
	flex-direction: column;
	gap: var(--Space-4xs);
}

.contact-block__heading {
	font-family: var(--font-body);
	font-size: var(--body-s);
	font-weight: 400;
	color: var(--text-primary);
	margin: 0;
	padding: var(--Space-s) 0;
}

.contact-block__link {
	font-family: var(--font-body);
	font-size: var(--body-s);
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--transition-base);
}

.contact-block__link:hover {
	color: var(--text-primary-d-10);
}

.contact-block__text {
	font-family: var(--font-body);
	font-size: var(--body-s);
	line-height: 1.6;
	color: var(--text-primary);
	text-wrap: pretty;
	margin: 0;
}

/* ─── Commission button — matches footer subscribe style ─── */

.contact-button {
	display: inline-block;
	width: fit-content;
	padding: var(--Space-4xs) var(--Space-xs);
	margin-top: var(--Space-s);
	font-family: var(--font-body);
	font-size: var(--body-s);
	font-weight: 400;
	color: var(--text-primary);
	background: transparent;
	border: 1px solid var(--text-primary-l-3);
	border-radius: var(--Radius-s);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.contact-button:hover {
	background: var(--text-primary);
	color: var(--color-surface);
}

/* ─── Newsletter form (inline in left column) ─── */

.contact-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--Space-s);
	padding-top: var(--Space-2xs);
}

.contact-newsletter__input {
	width: 100%;
	max-width: 28rem;
	padding: var(--Space-2xs) var(--Space-xs);
	font-family: var(--font-body);
	font-size: var(--body-s);
	color: var(--text-primary);
	background: var(--color-surface-l-5);
	border: 1px solid var(--text-primary-l-8);
	border-radius: var(--Radius-s);
	outline: none;
	transition: border-color var(--transition-base);
}

.contact-newsletter__input:focus {
	border-color: var(--text-primary);
}

.contact-newsletter__submit {
	width: fit-content;
	padding: var(--Space-4xs) var(--Space-xs);
	font-family: var(--font-body);
	font-size: var(--body-s);
	font-weight: 400;
	color: var(--text-primary);
	background: transparent;
	border: 1px solid var(--text-primary-l-3);
	border-radius: var(--Radius-s);
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.contact-newsletter__submit:hover {
	background: var(--text-primary);
	color: var(--color-surface);
}

/* ─── Commission form (CF7) — matches footer input/button style ─── */

.contact-block--form {
	padding-top: var(--Space-s);
}

.commission-form-fields label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--body-s);
	color: var(--text-primary);
	margin-bottom: var(--Space-m);
}

.commission-form-fields input[type="text"],
.commission-form-fields input[type="email"],
.commission-form-fields textarea,
.commission-form-fields select {
	display: block;
	width: 100%;
	margin-top: var(--Space-4xs);
	padding: var(--Space-2xs) var(--Space-xs);
	font-family: var(--font-body);
	font-size: var(--body-s);
	color: var(--text-primary);
	background: var(--color-surface-l-5);
	border: 1px solid var(--text-primary-l-8);
	border-radius: var(--Radius-s);
	outline: none;
	transition: border-color var(--transition-base);
}

.commission-form-fields input:focus,
.commission-form-fields textarea:focus,
.commission-form-fields select:focus {
	border-color: var(--text-primary);
}

.commission-form-fields textarea {
	min-height: 120px;
	resize: vertical;
}

.commission-form-fields select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233e3e3b'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--Space-xs) center;
	padding-right: var(--Space-l);
}

.commission-form-fields input[type="submit"] {
	display: inline-block;
	width: fit-content;
	margin-top: var(--Space-s);
	padding: var(--Space-4xs) var(--Space-xs);
	font-family: var(--font-body);
	font-size: var(--body-s);
	font-weight: 400;
	color: var(--text-primary);
	background: transparent;
	border: 1px solid var(--text-primary-l-3);
	border-radius: var(--Radius-s);
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.commission-form-fields input[type="submit"]:hover {
	background: var(--text-primary);
	color: var(--color-surface);
}

.wpcf7-response-output {
	font-family: var(--font-body);
	font-size: var(--body-s);
	color: var(--text-primary);
	border: none !important;
	padding: var(--Space-2xs) 0 !important;
	margin: 0 !important;
}

.wpcf7-not-valid-tip {
	font-family: var(--font-body);
	font-size: var(--body-s);
	color: var(--color-primary);
}

/* ─── Mobile ─── */

@media (max-width: 767px) {
	.contact-page {
		padding: var(--header-offset-mobile) var(--Space-m) var(--Space-xl);
	}

	.contact-columns {
		flex-direction: column;
		gap: var(--Space-l);
	}

	.contact-newsletter__input {
		max-width: none;
	}
}