/* ============================================================
   Jersey Jump — Contact Page
   Two-column row below the section-header: sidebar (fixed 414px at
   1024px+) + form (flexible). Layout mechanics come from the shared
   .responsive-row (main.css, stacked+capped-at-700px until 1024px,
   then a row) — this file only adds the fixed sidebar width and the
   wider 64px gap for this specific instance.
   ============================================================ */
/* Override .responsive-row's 700px cap below 1024px — with the
   section-header above at the standard ~1039px width, the panels
   looking narrower than it (centered at 700px) read oddly mismatched.
   Full width until the row layout kicks in instead. */
.contact-row {
	max-width: none;
	margin-inline: 0;
}

/* Form first, sidebar second while stacked (mobile/tablet) — the
   primary action (the form) should come before supporting info. */
.contact-form-col {
	order: -1;
}

@media (min-width: 1024px) {
	.contact-row {
		/* Override .responsive-row's own align-items:center — with a
		   fixed-width sidebar and a taller flexible form, top-aligned
		   reads better than centered here. */
		align-items: flex-start;
		gap: 4rem;
	}

	.contact-sidebar {
		flex: 0 0 414px;
		max-width: 414px;
	}

	.contact-form-col {
		order: 0;
		flex: 1;
		min-width: 0;
	}
}

.contact-sidebar {
	width: 100%;
	background-color: #EFF9FE;
	border-radius: 10px;
	padding: 1.875rem;
}

.contact-sidebar-block + .contact-sidebar-block {
	margin-block-start: 1.5rem;
}

.contact-sidebar-heading {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-blue-500);
	font-size: 1.125rem;
	margin: 0 0 0.5rem;
}

.contact-sidebar-text {
	font-family: var(--font-body);
	color: var(--color-text);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* Light-background variant of the shared .social-links (footer.css
   defaults to a translucent-white circle, meant for the dark navy
   footer) — solid blue rounded-square, meant for this light sidebar. */
.contact-sidebar .social-links a {
	border-radius: 8px;
	background-color: var(--color-blue-500);
	color: var(--color-white);
}

.contact-sidebar .social-links a:hover,
.contact-sidebar .social-links a:focus-visible {
	background-color: var(--color-cta);
	color: var(--color-white);
}

/* ---- Gravity Forms overrides — scoped to this form only ----
   Same reasoning/approach as .book-now-form: Gravity Forms' Orbital
   theme CSS needs !important to beat regardless of load order. Two
   real differences from .book-now-form: 8 fields instead of 4 (still
   a clean 2-column grid), and the Rentals Needed checkbox group
   needs to span both columns instead of sitting in one. */
.contact-form .gform_heading {
	display: none !important;
}

.contact-form .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 15px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (min-width: 667px) {
	.contact-form .gform_fields {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.contact-form .gfield {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	grid-column: auto !important;
}

.contact-form .gfield--type-checkbox {
	grid-column: 1 / -1 !important;
}

.contact-form .gfield_label {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	color: var(--color-navy-900) !important;
}

.contact-form .gfield_required {
	color: var(--color-cta) !important;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input.datepicker,
.contact-form select {
	width: 100% !important;
	height: 50px !important;
	border: 1px solid var(--color-blue-700) !important;
	border-radius: 20px !important;
	padding-inline: 1.25rem !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	transition: border-color 0.2s ease !important;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input.datepicker:focus,
.contact-form select:focus {
	border-color: var(--color-cta) !important;
	outline: none !important;
}

.contact-form .gfield_checkbox {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 12px 24px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* This GF version renders each choice as a <div class="gchoice">,
   not the older <li> markup — target the real elements. */
.contact-form .gchoice {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	width: auto !important;
}

.contact-form .gfield-choice-input {
	width: 20px !important;
	height: 20px !important;
	accent-color: var(--color-cta) !important;
	margin: 0 !important;
}

.contact-form .gchoice label {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	color: var(--color-navy-900) !important;
	font-size: 0.9375rem !important;
}

.contact-form .gform_footer {
	margin-block-start: 20px !important;
}

/* Same visual style as the sitewide .cta-button */
.contact-form .gform_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 45px !important;
	background: var(--color-cta) !important;
	color: var(--color-white) !important;
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: normal !important;
	white-space: nowrap !important;
	padding-inline: 28px !important;
	border: none !important;
	border-radius: 50px !important;
	cursor: pointer !important;
	transition: filter 0.2s ease, transform 0.2s ease !important;
}

.contact-form .gform_button:hover,
.contact-form .gform_button:focus-visible {
	filter: brightness(0.92) !important;
	transform: translateY(-1px) !important;
}