/*
 * Dempsey Lifecycle Care — page-specific layout.
 * Enqueued only on /lifecycle-care/ and /lifecycle-care/get-started/ (see functions.php).
 * These pages are horizontal scrollers: every frame is capped at 100vh, so tall
 * content must flow into columns (expand right), never grow taller.
 */
@media (min-width: 1025px) {

	/* ---- Lifecycle Care page ---- */

	/* Available Services (flex row id=3): two-column body that fits the frame,
	   sized to leave the same right-side breathing room as the sibling panels */
	section.simple-content-area-section[id="3"] .text-block {
		max-width: none;
	}
	section.simple-content-area-section[id="3"] .text-block .description {
		column-count: 2;
		column-gap: 5vh;
		width: 75vh;
	}
	section.simple-content-area-section[id="3"] .text-block .description p,
	section.simple-content-area-section[id="3"] .text-block .description ul,
	section.simple-content-area-section[id="3"] .text-block .description .bsc-group {
		break-inside: avoid;
	}

	/* Get Started CTA pinned to the panel's top-right (section is position:relative),
	   aligned with the eyebrow row. Same section_button as the bottom-of-page CTA. */
	section.simple-content-area-section[id="3"] .button.small {
		position: absolute;
		top: 4vh;
		right: 9vh;
		margin: 0;
		z-index: 10;
	}

	/* Client Benefits: the column wrappers wrap-and-stretch their blocks to fill
	   the tallest column, which pushed 2nd-row blocks down. Pack to the top so
	   blocks line up across columns. */
	section.points-list-section .points-row {
		align-content: flex-start;
	}

	/* ---- Get Started form ---- */

	/* One column per form section, expanding rightward, fits the frame */
	.gform_wrapper,
	.gform_fields {
		max-width: none !important;
	}
	.gform_fields {
		display: block !important;
		width: 172vh;
		height: 82vh;
		column-count: 4;
		column-gap: 5vh;
	}
	.gform_fields > .gfield {
		width: auto !important;
		break-inside: avoid;
		margin: 0 0 2.6vh 0 !important;
		padding: 0 !important;
		border: none; /* radio groups render as <fieldset>, which draws a default groove box */
	}
	.gform_fields > .gfield--type-section {
		break-before: column;
	}
	.gform_fields > .gfield--type-section:first-child,
	.gform_fields > .gfield--type-section.no-col-break {
		break-before: avoid;
	}
	.gfield--type-textarea textarea {
		height: 12vh;
	}

	/* The theme strips appearance from ALL .gfield inputs (style.css ~L1976),
	   which makes radio buttons invisible. Restore native radios, brand green. */
	.gfield .gchoice {
		display: flex;
		align-items: center;
		gap: 1.2vh;
	}
	.gfield input[type="radio"] {
		appearance: auto !important;
		-webkit-appearance: radio !important;
		width: 1.8vh !important;
		height: 1.8vh;
		min-width: 1.8vh;
		border: none !important;
		padding: 0 !important;
		margin: 0;
		accent-color: var(--green);
		cursor: pointer;
	}
	.gfield .gchoice label {
		margin-bottom: 0;
		font-weight: 400;
		cursor: pointer;
		width: auto;
	}

	/* Multi-file "Select files" button inherited black text on the navy panel */
	.gform_button_select_files {
		color: var(--white) !important;
	}

	/* "*Required Field" placeholders read as a light hint, not pre-filled text,
	   and clear as soon as the visitor types (native placeholder behaviour). */
	.gfield input::placeholder {
		color: rgba(255, 255, 255, 0.5);
		opacity: 1;
	}

	/* Validation feedback: the theme hides all GF validation output globally.
	   On an all-required form that reads as "nothing happened" — show per-field
	   messages, and float the summary next to the Submit button (teleported by
	   js/lifecycle-care.js, same transform constraint as the footer). */
	.gfield .gfield_validation_message {
		display: block;
		color: #ff6b6b;
		font-size: var(--vh-font-15);
		font-style: normal;
		margin-top: 0.9vh;
	}
	body > .gform_validation_errors.lcc-floating-errors {
		position: fixed;
		right: 11vh;
		bottom: 17vh;
		z-index: 121;
		display: block;
		max-width: 44vh;
		padding: 1.4vh 2vh;
		background: var(--blue);
		border: 1px solid #ff6b6b;
	}
	body > .gform_validation_errors.lcc-floating-errors h2 {
		margin: 0;
		color: #ff6b6b;
		font-size: var(--vh-font-15);
		font-weight: 400;
		line-height: 1.4;
	}
	body > .gform_validation_errors.lcc-floating-errors ol {
		display: none;
	}

	/* Submit follows the viewport, bottom-right. The form sits in the
	   GSAP-transformed container, so js/lifecycle-care.js teleports the
	   footer to <body> (form="" attribute keeps it submitting the form). */
	body > .gform_footer.lcc-floating-submit {
		position: fixed;
		right: 11vh;
		bottom: 10vh;
		z-index: 120;
		margin: 0;
	}
	body > .gform_footer.lcc-floating-submit .button {
		background: var(--blue);
	}
}