/*
 * Contact page (page-contact.php). Converted from
 * design_handoff_v5_round3/Marketing Mockups/Pages/Contact.dc.html (<helmet>).
 *
 * The Contact design ships its OWN responsive layer (the `.rsp-*` classes +
 * @media below) — kept verbatim, with the dc's `.rsp-page{min-width:0}` dropped
 * (the global `.atarim-page` rule covers it). Shared machinery is global and
 * reused, not duplicated here: the page shell (`.atarim-page` min-width), the
 * nav hamburger, the footer recolumn, scroll-reveal (`[data-rev]`/`.hp-on`),
 * grain, fonts. Page-unique selectors are prefixed `co-*`.
 *
 * `style-hover` attributes from the dc were converted to real classes + :hover.
 * The form-field focus state (`.sp-field:focus` in the dc) is renamed to the
 * page-prefixed `.co-field:focus`.
 */

/* Light-page scrollbar (overrides the global dark one, only while this page's CSS is loaded). */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* ===== Form field focus (was .sp-field:focus in the dc) ===== */
.co-field:focus { outline: none; border-color: #6D5DF3 !important; background: #fff !important; }

/* ===== Hovers, converted from style-hover ===== */
.co-send:hover { background: #35c98a; transform: translateY(-2px); }
.co-supportlink:hover { border-color: rgba(109, 93, 243, 0.45); transform: translateX(4px); }
.co-maillink:hover { color: #16042E; }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec, untouched ===== */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 767px) {
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 128px !important; padding-bottom: 54px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
}


/* ===== Contact form (Gravity Forms id 3) restyled to the design =====
 * Static form -> GF (task #6). Name + Email share a row; Subject + Message span
 * full width; mint submit mirrors the old .co-send. Scoped to .co-gform. */
.co-gform .gform_wrapper { margin: 0; }
.co-gform .gform_heading, .co-gform .gform_required_legend { display: none !important; }
.co-gform form { margin: 28px 0 0; }
.co-gform .gform-body, .co-gform .gform_body { margin: 0; }
/* GF renders a 12-column grid; work within it (span 6 = half, span 12 = full). */
.co-gform .gform_fields {
	display: grid !important; grid-template-columns: repeat(12, 1fr) !important;
	gap: 14px !important; grid-gap: 14px !important;
}
.co-gform .gfield { margin: 0 !important; padding: 0 !important; min-width: 0; grid-column: 1 / -1; }
.co-gform #field_3_1, .co-gform #field_3_2 { grid-column: span 6; }
.co-gform .gfield_label,
.co-gform legend.gfield_label {
	display: block; font-family: 'Roboto', system-ui, sans-serif;
	font-size: 13px; font-weight: 600; color: #2a1747; margin: 0 0 7px;
}
.co-gform .gfield_required { color: #6D5DF3; }
.co-gform .ginput_container { margin: 0 !important; }
/* !important needed — GF's own input rules outrank the plain class selectors. */
.co-gform .ginput_container input,
.co-gform .ginput_container textarea {
	width: 100% !important; font: inherit; font-size: 15px !important; color: #16042E !important; padding: 13px 15px !important;
	border-radius: 13px !important; corner-shape: squircle; border: 1px solid rgba(26,8,48,0.16) !important;
	background: #faf9fe !important; outline: none; box-shadow: none !important;
	transition: border-color .15s ease, background .15s ease;
}
.co-gform .ginput_container textarea { min-height: 132px; resize: vertical; }
.co-gform .ginput_container input::placeholder,
.co-gform .ginput_container textarea::placeholder { color: #8a7ea3; }
.co-gform .ginput_container input:focus,
.co-gform .ginput_container textarea:focus { border-color: #6D5DF3 !important; background: #fff !important; }
.co-gform .gform_footer { margin: 22px 0 0 !important; padding: 0 !important; }
.co-gform .gform_footer .gform_button,
.co-gform input[type="submit"].gform_button {
	margin: 0 !important; width: auto !important; font: inherit;
	font-size: 16px !important; font-weight: 700 !important; color: #16042E !important;
	background: #3ED696 !important; border: none !important; padding: 15px 30px !important;
	border-radius: 999px !important; corner-shape: squircle; cursor: pointer;
	box-shadow: 0 16px 36px -16px rgba(62,214,150,0.5);
	transition: background .16s ease, transform .16s ease;
}
.co-gform .gform_footer .gform_button:hover { background: #35c98a !important; transform: translateY(-2px); }
.co-gform .gform_confirmation_message {
	font-size: 16px; line-height: 1.6; color: #16042E;
	padding: 18px 20px; background: #f4f0fb; border-radius: 14px;
}
.co-gform .validation_message, .co-gform .gform_validation_errors { color: #b3261e; font-size: 13px; margin-top: 6px; }
@media (max-width: 600px) { .co-gform #field_3_1, .co-gform #field_3_2 { grid-column: 1 / -1; } }