/**
 * Embedded Form — centered heading, description, and Gravity Forms embed
 */

.module.embedded-form .form-content {
	grid-column: 3 / -3;
	text-align: center;
}

.module.embedded-form .form-content > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.embedded-form .form-content > * + .content-styles {
	margin-top: var(--text-spacing-small);
}

.module.embedded-form .form-content > * + .form-embed,
.module.embedded-form .form-content > * + .form-notice {
	margin-top: var(--text-spacing-large);
}

/*** Form Embed ***/

.module.embedded-form .form-embed {
	text-align: left;
}

.module.embedded-form .form-embed .ginput_container input,
.module.embedded-form .form-embed .ginput_container textarea,
.module.embedded-form .form-embed .ginput_container select {
	width: 100%;
}

.module.embedded-form .form-embed .ginput_container.ginput_container_consent input {
	width: auto;
}

.module.embedded-form .gchoice {
	align-items: center !important;
	display: flex !important;
	gap: var(--text-spacing-xxsmall) !important;
	white-space: nowrap;
}

.module.embedded-form .gchoice label {
	max-width: none !important;
}

.module.embedded-form .gchoice input[type="checkbox"],
.module.embedded-form .gchoice input[type="radio"] {
	height: 18px !important;
	width: 18px !important;
}

.module.embedded-form .gfield_checkbox,
.module.embedded-form .gfield_radio {
	align-items: flex-start !important;
	text-align: left;
}


/*** Fallback Notice ***/

.module.embedded-form .form-notice {
	background: var(--husky-blue-25);
	border-radius: 8px;
	color: var(--russian-blue);
	padding: var(--text-spacing-medium);
}

.module.embedded-form .form-notice p {
	margin: 0;
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.embedded-form .form-content {
		grid-column: 2 / -2;
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.embedded-form .form-content {
		grid-column: 1 / -1;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	/* Default grid items have min-width: auto, which lets content with
	   wide intrinsic min-content (long form labels, headings) blow out
	   the column and overflow the viewport. min-width: 0 lets the item
	   shrink to the column width. */

	.module.embedded-form .form-content {
		min-width: 0;
		text-align: left;
	}

	.module.embedded-form .form-content > * + .content-styles {
		margin-top: var(--text-spacing-xxsmall);
	}

	.module.embedded-form .form-content > * + .form-embed,
	.module.embedded-form .form-content > * + .form-notice {
		margin-top: var(--text-spacing-medium);
	}

	.module.embedded-form .form-notice {
		padding: var(--text-spacing-small);
	}

	/* Drop the UA's default 40px left padding on the .gform_fields UL,
	   and let every layer of the GF wrapper chain shrink with the
	   column instead of forcing intrinsic min-content widths through
	   the parent. The form-embed clips as a safety net in case any
	   GF descendant still asserts a fixed width. */

	.module.embedded-form .form-embed {
		overflow-x: hidden;
	}

	.module.embedded-form .form-embed,
	.module.embedded-form .form-embed .gform_wrapper,
	.module.embedded-form .form-embed form,
	.module.embedded-form .form-embed .gform_body,
	.module.embedded-form .form-embed .gform_fields,
	.module.embedded-form .form-embed .gfield,
	.module.embedded-form .form-embed .ginput_container,
	.module.embedded-form .form-embed input,
	.module.embedded-form .form-embed textarea,
	.module.embedded-form .form-embed select {
		max-width: 100%;
		min-width: 0;
	}

	.module.embedded-form .gform_fields {
		padding-left: 0;
	}

	.module.embedded-form .gfield_label,
	.module.embedded-form .gform-field-label {
		overflow-wrap: break-word;
	}

	/* Choice rows (radios/checkboxes) — desktop forces a single line so
	   short Yes/No options stay tidy, but on mobile long option labels
	   like "Internship or youth shadowing for your students" need to wrap. */

	.module.embedded-form .gchoice {
		align-items: flex-start !important;
		white-space: normal;
	}

	.module.embedded-form .gchoice label {
		min-width: 0;
		overflow-wrap: break-word;
	}

}