/* ===========================================================================
   GRAVITY FORMS — embedded form styling (.hodc-form-embed)
   ---------------------------------------------------------------------------
   Brand treatment for the three standalone forms embedded on content pages
   (Volunteer Interest, Monthly Support Group, Creative Counseling Event
   Series). Renders the GF "orbital" theme inside a white card matching the
   homepage contact form.

   Values are NOT invented — they mirror the already-measured .hodc-contact-form
   block in style.css (Figma form box 749×auto, radius 25, padding 40; labels
   Source Serif Pro 600 16/21 +2%; button terracotta uppercase; checkbox 24×24
   terracotta). The ONE intentional difference vs .hodc-contact-form: the genuine
   checkbox GROUP labels ("Areas of Interest", "Select the date(s)…") are kept
   visible here — the contact-form block hid all checkbox labels because it only
   had a single empty-label privacy checkbox.

   Scoped to .hodc-form-embed (a distinct class) so the homepage contact form is
   untouched. Loaded only on pages containing the wrapper (see functions.php).
   --------------------------------------------------------------------------- */

/* Form-feature variant — reuses the homepage contact section component
 * (.hodc-contact: AODC fade-to-white pattern bg + 2-col form-left / photo-right)
 * but flips the gradient UPRIGHT: pattern visible in the upper zone, fading to
 * white toward the bottom. The contact form is the inverse (white top → pattern
 * bottom) via scaleY(-1); removing that flip restores the pattern's natural
 * orientation. Specificity (3 classes + ::before) beats the base rule. */
.wp-block-group.hodc-contact.hodc-contact--upright::before {
	transform: none;
}

/* White form card */
.hodc-form-embed {
	background: var(--wp--preset--color--white);
	border-radius: 25px;
	padding: 40px;
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	color: var(--wp--preset--color--primary);
	box-sizing: border-box;
}

/* Field grid — half-width text fields share a row, everything else full width */
.hodc-form-embed .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
	row-gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hodc-form-embed .gfield {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.hodc-form-embed .gfield--width-half { grid-column: span 1; }
.hodc-form-embed .gfield--width-full,
.hodc-form-embed .gfield--type-email,
.hodc-form-embed .gfield--type-phone,
.hodc-form-embed .gfield--type-select,
.hodc-form-embed .gfield--type-textarea,
.hodc-form-embed .gfield--type-checkbox,
.hodc-form-embed .gfield--type-consent {
	grid-column: 1 / -1;
}

/* Labels — Source Serif Pro SemiBold 16/21 +2% (Figma XS/desktop), teal */
.hodc-form-embed .gfield_label {
	font-family: "source-serif-pro", Georgia, serif;
	font-size: 16px;
	line-height: 21px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
	color: var(--wp--preset--color--primary);
	display: block;
}

.hodc-form-embed .gfield_required {
	color: var(--wp--preset--color--accent);
	margin-left: 0.25rem;
}

/* Text-like inputs — broadened 2026-06-12 (BC #9991450210, Forrest) to cover
 * every text-style input type GF can emit, including ones we haven't enabled
 * yet (url, password, date, time, search). Same teal-border / Mr Eaves
 * treatment regardless of which GF field renders them. */
.hodc-form-embed .ginput_container input[type="text"],
.hodc-form-embed .ginput_container input[type="email"],
.hodc-form-embed .ginput_container input[type="tel"],
.hodc-form-embed .ginput_container input[type="url"],
.hodc-form-embed .ginput_container input[type="password"],
.hodc-form-embed .ginput_container input[type="number"],
.hodc-form-embed .ginput_container input[type="date"],
.hodc-form-embed .ginput_container input[type="time"],
.hodc-form-embed .ginput_container input[type="search"],
.hodc-form-embed .ginput_container select,
.hodc-form-embed .ginput_container textarea {
	padding: 12px 14px;
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-size: 16px;
	border: 1px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border-radius: 4px;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.4;
}

.hodc-form-embed .ginput_container input:focus,
.hodc-form-embed .ginput_container select:focus,
.hodc-form-embed .ginput_container textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
	border-color: var(--wp--preset--color--accent);
}

.hodc-form-embed .ginput_container input::placeholder,
.hodc-form-embed .ginput_container textarea::placeholder {
	color: var(--wp--preset--color--primary);
	opacity: 1;
}

/* Choice fields (checkbox + consent + any new choice type) — custom 24×24
 * terracotta box. Group labels ("Areas of Interest", "Select the date(s)…")
 * stay visible.
 *
 * Selectors broadened 2026-06-12 (BC #9991450210): `.gfield_consent` doesn't
 * exist as a wrapper class in GF 2.10 — the consent field renders its input
 * directly inside `.ginput_container_consent`, no inner `.gfield_consent`
 * div. The old selector silently failed and the consent checkbox fell back
 * to GF's gray 20×20 default. Target the field-type-scoped classes instead
 * so checkbox + consent (and any new choice-type field) all share styling. */
.hodc-form-embed .gfield_checkbox,
.hodc-form-embed .ginput_container_consent {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.hodc-form-embed .gfield_checkbox .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.hodc-form-embed .ginput_container_consent {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.hodc-form-embed .gfield--type-checkbox input[type="checkbox"],
.hodc-form-embed .gfield--type-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	margin: 0;
	flex-shrink: 0;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 2px;
	background-color: var(--wp--preset--color--white);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.hodc-form-embed .gfield--type-checkbox input[type="checkbox"]:checked,
.hodc-form-embed .gfield--type-consent input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 12.5l5 5L19 7' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.hodc-form-embed .gfield--type-checkbox input[type="checkbox"]::before,
.hodc-form-embed .gfield--type-consent input[type="checkbox"]::before {
	content: none !important;
}

/* Hide the consent field's top-level label ("Consent", "Security/HIPAA",
 * etc.) — the inline checkbox-label already describes what's being agreed
 * to, so the field-level label reads as a redundant section header. Mirrors
 * the .hodc-contact-form behaviour. Sasha 2026-06-12.
 * NOTE: checkbox-group labels ("Areas of Interest", "Select the date(s)…")
 * are deliberately NOT hidden — they're the group's context. */
.hodc-form-embed .gfield--type-consent .gfield_label {
	display: none;
}

/* Tighten the gap ABOVE any consent field that follows another gfield —
 * not just consecutive consents. With the row-gap of the form at 40 px,
 * -28 px pulls the consent up to a ~12 px gap. Makes consent groups read
 * as one tight cluster regardless of whether the field above is another
 * consent, a checkbox, a textarea, etc. Sasha 2026-06-12. */
.hodc-form-embed .gfield + .gfield--type-consent {
	margin-top: -28px;
}

.hodc-form-embed .gfield--type-checkbox label,
.hodc-form-embed .gfield--type-consent label,
.hodc-form-embed .gfield--type-consent .gfield_consent_description {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--wp--preset--color--primary);
}

/* Radio fields (in case a form needs them later) — circular 24×24 teal
 * border, terracotta filled dot when selected. Added 2026-06-12 (Forrest
 * "even fields we're not using"). */
.hodc-form-embed .gfield_radio {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}
.hodc-form-embed .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.hodc-form-embed .gfield--type-radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	margin: 0;
	flex-shrink: 0;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 120ms ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hodc-form-embed .gfield--type-radio input[type="radio"]:checked {
	background-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--white);
}
.hodc-form-embed .gfield--type-radio label {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
}

/* Hide GF's "* indicates required fields" legend — not in Figma */
.hodc-form-embed .gform_required_legend {
	display: none;
}

/* Submit button — terracotta filled, uppercase Mr Eaves 800 +6% (label-button).
 * !important + high specificity to beat GF orbital's --gf-color-primary blue. */
.hodc-form-embed .gform_footer {
	margin-top: 1.5rem;
	padding: 0;
}

.hodc-form-embed .gform_wrapper .gform_footer input.gform_button,
.hodc-form-embed .gform_wrapper .gform_footer button.gform_button,
.hodc-form-embed .gform_wrapper button.gform_button,
.hodc-form-embed .gform_button {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 1rem 2.25rem !important;
	cursor: pointer;
	border-radius: 0 !important;
	min-height: 0 !important;
	transition: background-color 120ms ease;
}

.hodc-form-embed .gform_wrapper .gform_footer input.gform_button:hover,
.hodc-form-embed .gform_wrapper .gform_footer button.gform_button:hover,
.hodc-form-embed .gform_wrapper button.gform_button:hover,
.hodc-form-embed .gform_button:hover {
	background-color: var(--wp--preset--color--primary) !important;
}

/* Validation + confirmation */
.hodc-form-embed .gfield_validation_message,
.hodc-form-embed .gform_validation_errors {
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	margin-top: 0.375rem;
}

.hodc-form-embed .gfield_error input,
.hodc-form-embed .gfield_error select,
.hodc-form-embed .gfield_error textarea {
	border-color: var(--wp--preset--color--accent);
}

.hodc-form-embed .gform_confirmation_message {
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-size: 1.125rem;
	color: var(--wp--preset--color--primary);
	padding: 1.5rem;
	background: var(--wp--preset--color--primary-10);
	border-radius: 12px;
}

@media (max-width: 1024px) {
	.hodc-form-embed { padding: 24px; }
}
@media (max-width: 640px) {
	.hodc-form-embed .gform_fields { grid-template-columns: 1fr; }
	.hodc-form-embed .gfield--width-half { grid-column: 1 / -1; }
}