/* blocks/contact-section
 *
 * Two bordered cards side by side: contact info + social icons on the left,
 * the Gravity Forms shortcode on the right.
 *
 * The second half of this file overrides Gravity Forms. GF 2.5+ prints
 * .gform_wrapper.gravity-theme with its own grid and input styling, so the
 * rules below are scoped to .section-contact and deliberately reset GF's grid
 * gap/padding before re-applying the theme's own field and button look. The
 * submit button is made to match components/site-btn.php (.site-btn.btn-primary)
 * since GF renders a real <input type="submit"> we can't run through the
 * roundrock_button() component.
 */

.section-contact {
	--card-border: #e2e2e2;
	--field-bg: #f7f7f7;
	--col-gap: 24px;
	/* Block padding only — .container already carries the 20px side gutter
	 * below 1400px (assets/style.css), and above that it centers on its own
	 * max-width, so a horizontal padding here would just double the inset. */
	padding: 80px 0;
}

.section-contact .section-head {
	margin-bottom: 34px;
	text-align: center;
}

/* --- Two column row ----------------------------------------------------- */
.section-contact .contact-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-left: calc(var(--col-gap) / -2);
	margin-right: calc(var(--col-gap) / -2);
}

.section-contact .col {
	padding-left: calc(var(--col-gap) / 2);
	padding-right: calc(var(--col-gap) / 2);
}

.section-contact .contact-info-col { width: 33.333%; }
.section-contact .contact-form-col { width: 66.666%; }

/* A form with no info cards, or info cards with no form, take the full row. */
.section-contact .contact-info-col:only-child,
.section-contact .contact-form-col:only-child {
	width: 100%;
}

.section-contact .contact-info-card,
.section-contact .contact-form-card {
	height: 100%;
	padding: 34px 30px;
	border: 1px solid var(--card-border);
	background-color: var(--white);
	border-radius: 10px;
}

/* --- Info cards --------------------------------------------------------- */
.section-contact .info-card + .info-card,
.section-contact .info-card + .info-social {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--card-border);
}

.section-contact .info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 50%;
	background-color: var(--secondary-color);
}

.section-contact .info-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.section-contact .info-title {
	margin-bottom: 14px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--primary-color);
}

.section-contact .info-content p {
	font-size: 17px;
	line-height: 1.6;
}

.section-contact .info-content p + p {
	margin-top: 8px;
}

/* Phone numbers and emails in the info cards. */
.section-contact .info-content a {
	color: var(--secondary-color);
	transition: color .3s;
}

.section-contact .info-content a:hover {
	color: var(--primary-color);
}

/* --- Social icons ------------------------------------------------------- */
.section-contact .social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.section-contact .social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--secondary-color);
	/* transform included so the shared hover lift in assets/style.css animates. */
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .3s;
}

.section-contact .social-links a:hover {
	background-color: var(--primary-color);
}

.section-contact .social-links img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

/* -----------------------------------------------------------------------
 * Gravity Forms overrides
 * -------------------------------------------------------------------- */
.section-contact .gform_wrapper {
	margin: 0;
}

.section-contact .gform_wrapper form {
	margin: 0;
}

/* GF's own grid — keep it, just set the gutters. */
.section-contact .gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 20px;
	grid-column-gap: 20px;
}

.section-contact .gform_wrapper.gravity-theme .gfield {
	padding: 0;
}

/* Section Settings > Hide Field Labels — placeholder-only design. Kept in the
 * accessibility tree rather than display:none so screen readers still get it. */
.section-contact.hide-form-labels .gform_wrapper .gfield_label,
.section-contact.hide-form-labels .gform_wrapper legend.gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.section-contact .gform_wrapper.gravity-theme .gfield_label {
	margin-bottom: 8px;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	color: var(--primary-color);
}

/* Fields */
.section-contact .gform_wrapper.gravity-theme .gform_fields input[type="text"],
.section-contact .gform_wrapper.gravity-theme .gform_fields input[type="email"],
.section-contact .gform_wrapper.gravity-theme .gform_fields input[type="tel"],
.section-contact .gform_wrapper.gravity-theme .gform_fields input[type="url"],
.section-contact .gform_wrapper.gravity-theme .gform_fields input[type="number"],
.section-contact .gform_wrapper.gravity-theme .gform_fields input[type="password"],
.section-contact .gform_wrapper.gravity-theme .gform_fields select,
.section-contact .gform_wrapper.gravity-theme .gform_fields textarea {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: var(--field-bg);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.4;
	color: var(--black);
	transition: border-color .3s, background-color .3s;
}

.section-contact .gform_wrapper.gravity-theme .gform_fields textarea {
	min-height: 190px;
	resize: vertical;
}

.section-contact .gform_wrapper.gravity-theme .gform_fields input:focus,
.section-contact .gform_wrapper.gravity-theme .gform_fields select:focus,
.section-contact .gform_wrapper.gravity-theme .gform_fields textarea:focus {
	outline: none;
	border-color: var(--secondary-color);
	background-color: var(--white);
}

.section-contact .gform_wrapper.gravity-theme .gform_fields input::placeholder,
.section-contact .gform_wrapper.gravity-theme .gform_fields textarea::placeholder {
	color: #7b7b7b;
	opacity: 1;
}

.section-contact .gform_wrapper.gravity-theme .ginput_complex label,
.section-contact .gform_wrapper.gravity-theme .gfield_description {
	font-family: var(--font-body);
	font-size: 15px;
}

/* Submit — mirrors .site-btn.btn-primary from assets/style.css. */
.section-contact .gform_wrapper.gravity-theme .gform_footer {
	justify-content: flex-end;
	margin: 24px 0 0;
	padding: 0;
}

.section-contact .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.section-contact .gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.section-contact .gform_wrapper.gravity-theme .gform_footer button {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 9px 34px;
	border: 0;
	border-radius: 10px;
	background-color: var(--secondary-color);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	color: var(--white);
	cursor: pointer;
	transition: all .3s;
}

.section-contact .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.section-contact .gform_wrapper.gravity-theme .gform_page_footer input[type="submit"]:hover,
.section-contact .gform_wrapper.gravity-theme .gform_footer button:hover {
	background-color: var(--primary-color);
}

/* Validation + confirmation */
.section-contact .gform_wrapper .gfield_required {
	color: var(--secondary-color);
}

.section-contact .gform_wrapper.gravity-theme .gfield_error input,
.section-contact .gform_wrapper.gravity-theme .gfield_error select,
.section-contact .gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: #c0392b;
	background-color: var(--white);
}

.section-contact .gform_wrapper .gfield_validation_message,
.section-contact .gform_wrapper .validation_message {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 15px;
	color: #c0392b;
}

.section-contact .gform_wrapper .gform_validation_errors {
	margin-bottom: 20px;
	border: 1px solid #c0392b;
	border-radius: 10px;
	background-color: #fdf2f0;
	box-shadow: none;
}

.section-contact .gform_wrapper .gform_validation_errors > h2 {
	font-size: 18px;
	color: #c0392b;
}

.section-contact .gform_confirmation_message {
	padding: 18px 20px;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	background-color: var(--field-bg);
	font-size: 18px;
	color: var(--primary-color);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.section-contact {
		padding: 60px 0;
	}

	.section-contact .contact-info-col,
	.section-contact .contact-form-col {
		width: 50%;
	}

	.section-contact .contact-info-card,
	.section-contact .contact-form-card {
		padding: 28px 24px;
	}
}

@media (max-width: 767px) {
	.section-contact {
		padding: 50px 0;
	}

	/* Stacked: the column gutters and the row's negative margins only exist to
	 * space two columns side by side, so both come off here — the cards sit
	 * flush inside the container's own gutter. */
	.section-contact .contact-row {
		margin-left: 0;
		margin-right: 0;
	}

	.section-contact .col {
		padding-left: 0;
		padding-right: 0;
	}

	.section-contact .contact-info-col,
	.section-contact .contact-form-col {
		width: 100%;
	}

	/* Form first on mobile, contact details under it. */
	.section-contact .contact-form-col { order: 1; }

	.section-contact .contact-info-col {
		order: 2;
		margin-top: var(--col-gap);
	}

	.section-contact .contact-info-card,
	.section-contact .contact-form-card {
		padding: 24px 20px;
	}

	.section-contact .info-title {
		font-size: 20px;
	}

	/* GF's grid goes single column on its own below 641px; match the gutter. */
	.section-contact .gform_wrapper.gravity-theme .gform_fields {
		grid-row-gap: 16px;
	}

	.section-contact .gform_wrapper.gravity-theme .gform_footer {
		justify-content: stretch;
	}

	.section-contact .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
	.section-contact .gform_wrapper.gravity-theme .gform_footer button {
		width: 100%;
		justify-content: center;
	}
}