/**
 * Contact Form & Details — Figma node 475:2658.
 * Two-column: Gravity Form + contact methods / business hours.
 */

.contact-form {
	--contact-form-pad-block: var(--space-80); /* 80px */
	--contact-form-gap: var(--space-64); /* 64px between columns (656 - 592) */
	--contact-form-col-gap: var(--space-32);
	--contact-form-header-gap: var(--space-16);
	--contact-form-cards-gap: var(--space-24);
	--contact-form-card-gap: var(--space-16);
	--contact-form-card-body-gap: var(--space-8);
	--contact-form-icon-size: 3.125rem; /* 50px */
	--contact-form-icon-glyph-h: 1.5rem; /* 24px */
	--contact-form-hours-pad: 1.5625rem; /* 25px */
	--contact-form-hours-gap: var(--space-16);
	--contact-form-hours-row-gap: var(--space-8);
	--contact-form-title-size: var(--text-h2-size); /* 32px */
	--contact-form-title-weight: 800;
	--contact-form-card-title-size: 1.125rem; /* 18px */
	--contact-form-card-title-weight: 700;

	width: 100%;
	box-sizing: border-box;
	padding-block: var(--contact-form-pad-block);
	padding-inline: var(--section-pad-inline);
	background-color: var(--color-bg-white);
	color: var(--color-brand-secondary);
}

.contact-form__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

.contact-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--contact-form-gap);
	align-items: start;
}

.contact-form__col {
	display: flex;
	flex-direction: column;
	gap: var(--contact-form-col-gap);
	min-width: 0;
}

.contact-form__header {
	display: flex;
	flex-direction: column;
	gap: var(--contact-form-header-gap);
}

.contact-form__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--contact-form-title-size);
	font-weight: var(--contact-form-title-weight);
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.contact-form__lede {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-grey-blue-2);
}

.contact-form__lede > *:first-child {
	margin-top: 0;
}

.contact-form__lede > *:last-child {
	margin-bottom: 0;
}

.contact-form__lede p {
	margin: 0 0 var(--space-8);
}

.contact-form__lede p:last-child {
	margin-bottom: 0;
}

.contact-form__lede a {
	color: var(--color-grey-blue-1);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.contact-form__lede a:hover,
.contact-form__lede a:focus-visible {
	color: var(--color-brand-secondary);
}

.contact-form__lede a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.contact-form__form-missing {
	margin: 0;
	padding: var(--space-16);
	border: 1px dashed var(--color-border-muted);
	border-radius: 0.25rem;
	font-size: var(--text-body-size);
	color: var(--color-grey-blue-2);
}

/* —— Gravity Forms skin (match Figma inputs / submit) —— */

.contact-form__form .gform_wrapper,
.contact-form__form .gform_wrapper.gform-theme {
	margin: 0;
}

.contact-form__form .gform_heading,
.contact-form__form .gform_required_legend {
	display: none;
}

.contact-form__form .gform_body {
	margin: 0;
}

.contact-form__form .gfield {
	padding-block: 0.75rem !important;
}

.contact-form__form .gfield_label,
.contact-form__form .gform-field-label {
	display: block;
	margin: 0 0 var(--space-8);
	font-family: var(--font-sans);
	font-size: var(--text-label-size);
	font-weight: var(--text-label-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.contact-form__form .gfield_required {
	color: var(--color-brand-secondary);
	margin-left: 0.15em;
}

.contact-form__form input[type='text'],
.contact-form__form input[type='email'],
.contact-form__form input[type='tel'],
.contact-form__form input[type='url'],
.contact-form__form input[type='number'],
.contact-form__form input[type='password'],
.contact-form__form textarea,
.contact-form__form select {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.875rem var(--space-16); /* 14px 16px */
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-grey-blue-2);
	background-color: var(--color-bg-white);
	border: 1px solid var(--color-border-muted);
	border-radius: 0.25rem;
	appearance: none;
}

.contact-form__form input::placeholder,
.contact-form__form textarea::placeholder {
	color: color-mix(in srgb, var(--color-grey-blue-2) 50%, transparent);
	opacity: 1;
}

.contact-form__form textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.contact-form__form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23003894' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem 0.5rem;
	padding-right: 2.5rem;
}

.contact-form__form input:focus,
.contact-form__form textarea:focus,
.contact-form__form select:focus {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.contact-form__form .gform_footer,
.contact-form__form .gform_page_footer {
	margin: 0;
	padding: 0.75rem 0 0;
	width: 100%;
}

.contact-form__form .gform_button,
.contact-form__form input[type='submit'],
.contact-form__form button[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.65625rem; /* 58.5px */
	margin: 0;
	padding-block: var(--btn-primary-padding-block);
	padding-inline: var(--btn-primary-padding-inline);
	font-family: var(--font-sans);
	font-size: 0.9375rem; /* 15px */
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--btn-primary-text);
	background-color: var(--btn-primary-bg);
	border: var(--btn-primary-border-width) solid var(--btn-primary-border);
	border-radius: 0;
	box-shadow: var(--btn-primary-shadow);
	cursor: pointer;
	transition: var(--btn-primary-transition);
}

.contact-form__form .gform_button:hover,
.contact-form__form input[type='submit']:hover,
.contact-form__form button[type='submit']:hover {
	color: var(--btn-primary-text-hover);
	background-color: var(--btn-primary-bg-hover);
	border-color: var(--btn-primary-border-hover);
	box-shadow: var(--btn-primary-shadow-hover);
}

.contact-form__form .gform_button:active,
.contact-form__form input[type='submit']:active,
.contact-form__form button[type='submit']:active {
	color: var(--btn-primary-text-active);
	background-color: var(--btn-primary-bg-active);
	border-color: var(--btn-primary-border-active);
}

.contact-form__form .gform_button:focus-visible,
.contact-form__form input[type='submit']:focus-visible,
.contact-form__form button[type='submit']:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.contact-form__form .validation_message,
.contact-form__form .gfield_validation_message {
	margin-top: var(--space-8);
	font-size: var(--text-body-size);
	color: #b42318;
}

/* —— Contact methods —— */

/* —— Cards (icon / title / description) —— */

.contact-form__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--contact-form-cards-gap);
}

.contact-form__card {
	display: flex;
	align-items: flex-start;
	gap: var(--contact-form-card-gap);
}

.contact-form__card-icon {
	flex: 0 0 var(--contact-form-icon-size);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--contact-form-icon-size);
	height: var(--contact-form-icon-size);
	border-radius: 50%;
	background-color: var(--color-bg-blue-light);
	overflow: hidden;
}

.contact-form__card-icon-img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--contact-form-icon-glyph-h);
	max-height: var(--contact-form-icon-glyph-h);
}

.contact-form__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--contact-form-card-body-gap);
	min-width: 0;
}

.contact-form__card-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--contact-form-card-title-size);
	font-weight: var(--contact-form-card-title-weight);
	line-height: 1.3;
	letter-spacing: 0.05em;
	color: var(--color-brand-secondary);
}

.contact-form__card-desc {
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-grey-blue-2);
}

.contact-form__card-desc > *:first-child {
	margin-top: 0;
}

.contact-form__card-desc > *:last-child {
	margin-bottom: 0;
}

.contact-form__card-desc p {
	margin: 0 0 var(--space-8);
}

.contact-form__card-desc p:last-child {
	margin-bottom: 0;
}

.contact-form__card-desc ul {
	margin: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.contact-form__card-desc li {
	margin: 0;
}

.contact-form__card-desc a {
	color: var(--color-grey-blue-1);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.contact-form__card-desc a:hover,
.contact-form__card-desc a:focus-visible {
	color: var(--color-brand-secondary);
}

.contact-form__card-desc a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* —— Business hours card —— */

.contact-form__hours {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--contact-form-hours-gap);
	padding: var(--contact-form-hours-pad);
	background-color: var(--color-bg-light);
	border: 1px solid var(--color-bg-blue-light);
	border-radius: 0.5rem;
}

.contact-form__hours-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--contact-form-card-title-size);
	font-weight: var(--contact-form-card-title-weight);
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.contact-form__hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--contact-form-hours-row-gap);
}

.contact-form__hours-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-16);
}

.contact-form__hours-label {
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight);
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-grey-blue-2);
}

.contact-form__hours-value {
	font-family: var(--font-sans);
	font-size: var(--text-body-lg-size);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-align: right;
	color: var(--color-brand-secondary);
	white-space: nowrap;
}

@media (max-width: 1439px) {
	.contact-form {
		--contact-form-pad-block: var(--space-64);
		--contact-form-gap: var(--space-48);
	}
}

@media (max-width: 767px) {
	.contact-form {
		--contact-form-pad-block: var(--space-48);
		--contact-form-gap: var(--space-40);
		--contact-form-col-gap: var(--space-24);
	}

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

	.contact-form__title {
		font-size: 1.75rem; /* 28px */
	}

	.contact-form__hours-row {
		flex-direction: column;
		gap: var(--space-4);
	}

	.contact-form__hours-value {
		text-align: left;
		white-space: normal;
	}
}