/* ============================================================
   Parkwellness — Contact Section
   Mobile-first: info stacks above the form, single column. From
   900px up, a 2-column grid — info left, Gravity Forms embed right.
   ============================================================ */

.pw-contact {
	background-color: var(--color-cream-250);
}

.pw-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 900px) {
	.pw-contact-grid {
		grid-template-columns: 1fr 1fr;
		gap: 60px;
	}
}

.pw-contact-eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gold-600);
	margin-bottom: 14px;
}

h2.pw-contact-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
}

.pw-contact-heading-line1,
.pw-contact-heading-line2 {
	display: block;
}

.pw-contact-heading-line1 {
	color: var(--color-dark-800);
}

.pw-contact-heading-line2 {
	color: var(--color-gold-600);
}

/* img. prefix + clamp() width — same fix/values as every other
   divider reusing this graphic sitewide: a single class loses to
   reset.css's ".pw-landing img" on max-width, and the ceiling is the
   same 379px sitewide for visual consistency. */
img.pw-contact-divider {
	display: block;
	width: clamp(180px, 27vw, 379px);
	height: auto;
	margin: 20px 0;
}

.pw-contact-detail {
	margin-bottom: 20px;
}

p.pw-contact-detail-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gold-600);
	margin-bottom: 6px;
}

p.pw-contact-detail-value {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-dark-100);
}

p.pw-contact-detail-value a {
	color: inherit;
}

.pw-contact-social {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.pw-contact-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-dark-800);
	transition: opacity var(--transition-fast);
}

.pw-contact-social-icon:hover {
	opacity: 0.8;
}

.pw-contact-social-icon img {
	display: block;
}

/* -------------------------------------------------------
   Gravity Forms embed (form ID 1, "Contact") — cosmetic overrides
   only. Deliberately NOT touching GF's own grid/flex layout for
   half-width vs. full-width fields (.gfield--width-half etc.) —
   that's proven, responsive-tested CSS the plugin ships with; we
   only recolor/retype the labels, inputs, and button on top of it.
   ------------------------------------------------------- */
/* !important throughout this block: Gravity Forms' own bundled
   theme.min.css ships ".gform_wrapper.gravity-theme .gfield_label"
   (3 classes) and similarly-specific rules for inputs/button, which
   outrank our 2-class selectors on their own overlapping properties
   (font-size, font-weight, colors, border on :focus, etc.) — same
   reasoning as the Thrive !important precedent elsewhere in this
   project: a vendor stylesheet we don't own/control, so !important is
   the right tool here, not a smell. */
.pw-contact-form .gfield_label,
.pw-contact-form .gform-field-label {
	font-family: var(--font-body) !important;
	font-style: normal !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 18px !important;
	letter-spacing: 1.8px !important;
	text-transform: uppercase !important;
	color: var(--color-gold-600) !important;
	margin-bottom: 8px !important;
}

.pw-contact-form .gfield_required {
	color: var(--color-gold-600);
}

/* GF's own "* Indicates required fields" legend at the top of the
   form — hidden, same as the other Pixl Graphx sites (see
   heronlakes/assets/css/contact.css). */
.pw-contact-form .gform_required_legend {
	display: none;
}

.pw-contact-form .ginput_container input,
.pw-contact-form .ginput_container textarea {
	width: 100%;
	background-color: var(--color-cream-150) !important;
	border: 1px solid var(--color-taupe-300) !important;
	border-radius: 0 !important;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-dark-800);
	transition: border-color var(--transition-fast);
}

/* Removes the browser's default blue focus outline — a darker border
   (not a color/outline change) is the only focus feedback, per design. */
.pw-contact-form .ginput_container input:focus,
.pw-contact-form .ginput_container textarea:focus {
	outline: none !important;
	border-color: var(--color-dark-100) !important;
	box-shadow: none !important;
}

.pw-contact-form .ginput_container textarea {
	resize: vertical;
}

.pw-contact-form .gfield_description {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-dark-100);
	margin-top: 8px;
}

.pw-contact-form .gform_footer {
	margin-top: 8px;
}

/* The "Complete all the required fields..." HTML block (field_1_8) —
   #field_1_8 (an ID) beats GF's own class-based rules on its own, so
   this one doesn't need !important. */
#field_1_8 {
	font-size: 14px;
}

.gform_wrapper.gravity-theme .gform_footer,
.gform_wrapper.gravity-theme .gform_page_footer {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.pw-contact-form .gform_button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px !important;
	background-color: var(--color-dark-600) !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--font-body) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 18px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--color-cream-250) !important;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.pw-contact-form .gform_button:hover {
	opacity: 0.85;
}