/**
 * Shared component — the "Contact" form (template-parts/forms/contact.php).
 * Every rule is scoped to .contact-form so the generic form styles stay
 * untouched.
 *
 * 1. Contact Form
 * 2. States (validation, status line)
 * 3. Responsive
 */

/* ============================ CONTACT FORM ============================ */
.contact-form__note {
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.contact-form__req {
	color: var(--primary-color);
}

.contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-28) var(--space-32);
	padding: var(--space-28) 0 var(--space-32);
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	min-width: 0;
}

.contact-form__field--full {
	grid-column: 1 / -1;
	gap: var(--space-14);
}

.contact-form__label {
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--heading-color);
}

.contact-form__optional {
	font-weight: var(--font-weight-regular);
	color: var(--text-color);
}

.contact-form .mfc-control-wrap {
	display: block;
}

.contact-form__input {
	display: block;
	width: 100%;
	min-height: max(calc(73 * var(--u)), 48px);
	padding: var(--space-14) var(--space-20);
	font-family: var(--font-primary);
	font-size: var(--fs-24);
	line-height: 1.4;
	color: var(--heading-color);
	background: var(--white);
	border: var(--stroke) solid var(--border-color);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast);
}

.contact-form__input:hover {
	border-color: var(--border-strong);
}

.contact-form__input:focus {
	outline: none;
	border-color: var(--heading-color);
}

.contact-form__input:focus-visible {
	outline: var(--stroke) solid var(--primary-color);
	outline-offset: var(--stroke);
}

.contact-form__textarea {
	height: max(calc(125 * var(--u)), 110px);
	resize: vertical;
}

.contact-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
}

.contact-form__chip {
	padding: calc(9.5 * var(--u)) var(--space-18);
	font-family: var(--font-primary);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--heading-color);
	background: var(--white);
	border: var(--stroke) solid var(--border-color);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.contact-form__chip:hover {
	border-color: var(--heading-color);
}

.contact-form__chip[aria-pressed="true"] {
	color: var(--white);
	background: var(--heading-color);
	border-color: var(--heading-color);
}

.contact-form__hint {
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.contact-form .form-privacy {
	margin-bottom: var(--space-24);
	font-size: var(--fs-18);
	line-height: 1.55;
	color: var(--text-color);
}

.contact-form .form-privacy a {
	color: var(--primary-color);
	text-decoration: underline;
}

.contact-form__submit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16) var(--space-28);
	padding-top: var(--space-40);
	border-top: var(--stroke-thin) solid var(--border-color);
}

.contact-form__submit {
	min-height: 0;
	padding: calc(19.5 * var(--u)) calc(38 * var(--u));
	text-transform: none;
}

.contact-form__reassure {
	max-width: calc(350 * var(--u));
	min-width: 220px;
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.contact-form__submit-row {
	position: relative;
}

/* ============================ STATES ============================ */
.contact-form [aria-invalid="true"] {
	border-color: var(--primary-color);
}

.contact-form .mfc-error-tip {
	margin-top: var(--space-6);
	font-size: var(--fs-18);
	color: var(--primary-color);
}

.contact-form .mfc-form .sp-form-status {
	margin: var(--space-24) 0 0;
	padding: var(--space-14) var(--space-20);
	font-size: var(--fs-20);
	border-radius: var(--radius-md);
}

/* ============================ RESPONSIVE ============================ */

/* --- SM / Mobile --- */
@media (max-width: 768px) {
	.contact-form__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.contact-form__input {
		padding: 10px 14px;
	}

	.contact-form__submit-row {
		padding-top: 24px;
	}
}

/* --- XS / Small Mobile --- */
@media (max-width: 575px) {
	.contact-form__submit {
		width: 100%;
	}

	.contact-form__reassure {
		max-width: none;
		min-width: 0;
	}
}