/*** Module: Content + Form ***/

.module.content-form {
	overflow-x: clip;
	padding-block: var(--module-spacing-large);
}

.module.content-form .container {
	align-items: start;
}

/** Content column **/

/* Keep the pitch alongside a long form. Sticky is inert until the form column is
   the taller one, so a short form leaves this in normal flow; the top offset
   clears the sticky header (plus the admin bar when logged in). */
.module.content-form .content {
	display: flex;
	flex-direction: column;
	grid-column: 1 / span 6;
	position: sticky;
	top: calc(var(--header-height) + var(--wp-admin-bar-height, 0px) + var(--text-spacing-medium));
}

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

.module.content-form .content > .eyebrow + .heading-2 {
	margin-top: var(--text-spacing-small);
}

.module.content-form .content > .heading-2 + .medium-text {
	margin-top: var(--text-spacing-medium);
}

/* Get Started's larger intro (content-form.php) sits tighter to the headline. */
.module.content-form .content > .heading-2 + .large-text {
	margin-top: var(--text-spacing-xsmall);
}

.module.content-form .content > * + .logos,
.module.content-form .content > * + .media,
.module.content-form .content > * + .stats {
	margin-top: var(--text-spacing-xlarge);
}

.module.content-form .content .medium-text .eyebrow {
	margin: 0 0 var(--text-spacing-xxsmall);
}

.module.content-form .content .medium-text p + .eyebrow {
	margin-top: var(--text-spacing-small);
}

/* Optional partner logo above the eyebrow — natural size, left-aligned; height
   capped so a large upload doesn't blow out (the flex column would stretch it). */
.module.content-form .partner-logo {
	align-self: flex-start;
	height: auto;
	max-height: 56px;
	max-width: 100%;
	width: auto;
}

/** Callout **/

.module.content-form .callout {
	background: var(--lavender);
	border: none;
	color: var(--black);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-medium) var(--text-spacing-medium) var(--text-spacing-large);
	text-align: left;
}

.module.content-form .callout .label {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
	margin: 0;
}

.module.content-form .callout .icon {
	color: var(--electric-lavender);
	font-size: calc(18rem / 16);
	line-height: 1;
}

/* Optical nudge: caps sit high in their line box — drop the label to center on the taller icon. */
.module.content-form .callout .label .eyebrow {
	padding-top: 4px;
}

.module.content-form .logos {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-large);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.content-form .logos img {
	display: block;
	height: 56px;
	width: auto;
}

.module.content-form .media {
	aspect-ratio: 578 / 326;
}

.module.content-form .media > button {
	cursor: pointer;
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}

.module.content-form .media > button > img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.module.content-form .media .btn.icon {
	align-items: center;
	aspect-ratio: 1;
	background: var(--orange);
	border-radius: 50%;
	bottom: var(--text-spacing-medium);
	color: var(--white);
	display: flex;
	justify-content: center;
	left: var(--text-spacing-medium);
	position: absolute;
	width: 64px;
}

.module.content-form .stats {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.content-form .stat {
	border-left: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-inline: var(--text-spacing-medium) var(--text-spacing-large);
}

.module.content-form .stat .number {
	color: var(--orange);
}

/** Form column **/

.module.content-form .form {
	background: var(--off-white);
	grid-column: 7 / -1;
	margin-right: var(--container-breakout);
	margin-left: var(--text-spacing-medium);
}

.module.content-form .bar {
	align-items: center;
	background: var(--black);
	color: var(--white);
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
	margin: 0;
	padding: var(--text-spacing-xsmall) var(--text-spacing-large);
}

/* Tighten only the heading↔link gap to 6px; restore the icon's original spacing. */
.module.content-form .bar .icon {
	/*margin-right: calc(var(--text-spacing-xsmall) - 6px);*/
}

/* The link reads as the sibling text, just underlined to signal it's actionable. */
.module.content-form .bar a {
	color: inherit;
	font: inherit;
	text-decoration: underline;
}

.module.content-form .embed {
	background: var(--white);
	padding: var(--text-spacing-xlarge) var(--text-spacing-large) var(--text-spacing-xxlarge);
}

/* Opt-in consent line above submit — a step down from the 16px body default. */
.module.content-form .contact-form-optin {
	font-size: calc(14rem / 16);
}

/* Traditional long form — single-line fields stand at 48px (box only), taller
   than the compact standalone filter fields elsewhere (e.g. .resources-filters).
   Textareas keep their multi-line min-height. */
.module.content-form :is(
	input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
	select
) {
	height: 48px;
}

/* Marketo re-skins its fields with height:auto !important, so match the 48px
   native height explicitly for its text inputs + selects (textarea stays tall).

   The padding has to be re-derived with it: the global Marketo skin pairs its
   17px/15px with height:auto, and pinning the box to 48px leaves those paddings
   only 14px of content box for a 14px font whose line box needs 19 — so descenders
   were clipped off the select's value. 13px even leaves 20px, a pixel of slack. */
.module.content-form .mktoForm :is(
	input.mktoField:not([type=checkbox]):not([type=radio]):not([type=hidden]),
	select.mktoField
) {
	height: 48px !important;
	padding-block: 13px !important;
}

/* Optional fine print beneath the form (disclaimers, privacy note; supports links). */
.module.content-form .fine-print {
	color: color-mix(in srgb, var(--black) 55%, transparent);
	font-size: calc(12rem / 16);
	line-height: calc(18 / 12);
	margin-top: var(--text-spacing-large);
}

.module.content-form .fine-print > * {
	margin: 0;
}

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

.module.content-form .fine-print a {
	color: inherit;
	text-decoration: underline;
}

/** Background: digital blue — euphoric gradient on an inset .bg-field band (24px
    side gutters, not full-bleed); the form drops its panel chrome and sits
    directly on the field with reskinned inputs **/

.module.content-form.bg-digital-blue {
	color: var(--white);
	/* Small breath above the band (matters most when it leads the page). */
	margin-top: var(--text-spacing-medium);
}

/* The global bg-field rhythm rule (.module:has(> .bg-field) adjacency, 0,5,0) forces a 24px
   top when this band neighbours another colour, out-specifying the rule above; re-assert the
   medium breath at matching specificity for both adjacency directions. */
.module[class*="bg-"]:not(.bg-default) + .module.content-form.bg-digital-blue,
.module:has(> .bg-field) + .module.content-form.bg-digital-blue {
	margin-top: var(--text-spacing-medium);
}

.module.content-form.bg-digital-blue .bg-field {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
}

.module.content-form.bg-digital-blue .form {
	background: none;
	/* Stay inside the inset field — no right-bleed past the band edge. */
	margin-right: 0;
}

.module.content-form.bg-digital-blue .embed {
	background: none;
	padding: 0;
}

.module.content-form.bg-digital-blue .bar {
	background: color-mix(in srgb, var(--white) 14%, transparent);
	margin-bottom: var(--text-spacing-small);
}

.module.content-form.bg-digital-blue .fine-print {
	color: color-mix(in srgb, var(--white) 70%, transparent);
}

.module.content-form.bg-digital-blue .fine-print a {
	color: var(--white);
}

/* Stat readout — white figure + a white-mix divider in place of the orange/black. */
.module.content-form.bg-digital-blue .stat {
	border-left-color: color-mix(in srgb, var(--white) 30%, transparent);
}

.module.content-form.bg-digital-blue .stat .number {
	color: var(--white);
}

/* Text-like fields only — excluding checkbox/radio so their selected state survives. */
.module.content-form.bg-digital-blue :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
	background: color-mix(in srgb, var(--white) 8%, transparent);
	border-color: color-mix(in srgb, var(--white) 55%, transparent);
	color: var(--white);
}

/* Checkbox/radio outlines lighten; the lavender selected fill still reads on blue. */
.module.content-form.bg-digital-blue :is(input[type=checkbox], input[type=radio]) {
	border-color: color-mix(in srgb, var(--white) 55%, transparent);
}

/* Every label type — field, choice, and complex sub-labels (First/Last). */
.module.content-form.bg-digital-blue :is(.gfield_label, .demo-form-field > label, .gchoice label, .ginput_complex label, .gform-field-label--type-sub) {
	color: var(--white);
}

.module.content-form.bg-digital-blue ::placeholder {
	color: color-mix(in srgb, var(--white) 70%, transparent);
}

.module.content-form.bg-digital-blue :is(.demo-form-submit, .gform_button, .gform_footer input[type=submit]) {
	background: var(--white);
	color: var(--black);
	width: auto;
}

/* List field Add / Delete controls. */
.module.content-form.bg-digital-blue :is(.gfield_list button, .gfield_list .add_list_item, .gfield_list .delete_list_item) {
	border-color: color-mix(in srgb, var(--white) 55%, transparent);
	color: var(--white);
}

@media (prefers-reduced-motion: no-preference) {

	.module.content-form.bg-digital-blue .bg-field {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.content-form .content,
	.module.content-form .form {
		grid-column: 1 / -1;
		position: static;
	}

	.module.content-form .content {
		text-align: center;
	}

	.module.content-form .logos {
		gap: var(--text-spacing-medium);
	}

	.module.content-form .form {
		margin-left: 0;
		margin-right: 0;
		margin-top: var(--module-spacing-medium);
	}

	.module.content-form .stats {
		flex-wrap: wrap;
		gap: var(--text-spacing-small) var(--text-spacing-large);
	}

	.module.content-form .stat {
		border-left: 0;
		padding-inline: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.content-form .content {
		text-align: left;
	}

	.module.content-form .logos {
		gap: var(--text-spacing-small);
	}

	.module.content-form .logos img {
		height: 40px;
	}

	.module.content-form .content > * + .logos,
	.module.content-form .content > * + .media,
	.module.content-form .content > * + .stats {
		margin-top: var(--text-spacing-large);
	}

	.module.content-form .callout {
		padding: var(--text-spacing-small);
	}

	.module.content-form .form {
		margin-top: var(--text-spacing-xxsmall);
	}

	.module.content-form .embed {
		padding: var(--container-outer-padding);
	}

	.module.content-form .bar {
		padding-inline: var(--container-outer-padding);
	}

}