/* ==========================================================================
   Forms — Contact Form 7 email-capture row (investor strip + footer).
   With CF7 autop disabled (see site-footer.php) the form renders as:
     <form><fieldset hidden> <label> <div.wf-cf7-row>[email][submit]</div>
     <div.wpcf7-response-output></div></form>
   so .wf-cf7-row is the flex row: field grows, button sits to its right.
   ========================================================================== */

/* Give the capture form a comfortable width next to the heading. */
.wf-investor-form__form {
	flex: 0 1 560px;
	width: 100%;
	max-width: 560px;
}

.wf-investor-form__form .wpcf7,
.wf-investor-form__form .wpcf7-form {
	display: block;
	margin: 0;
}

/* CF7's hidden-input fieldset must not add a visible box or spacing. */
.wf-investor-form__form .hidden-fields-container,
.wf-investor-form__form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

/* The single field + button row. */
.wf-investor-form__form .wf-cf7-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	align-items: stretch;
}

.wf-investor-form__form .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-investor-form__form input[type="email"],
.wf-investor-form__form input[type="text"] {
	width: 100%;
	padding: 0.6rem 1rem;
	border: 1.5px solid rgba(0, 0, 0, .18);
	border-radius: var(--wf-radius-input);
	font-family: var(--wf-font);
	font-size: 1.125rem;      /* Figma: 18px */
	background: var(--wf-white);
	color: var(--wf-secondary);
}

.wf-investor-form__form input[type="email"]:focus,
.wf-investor-form__form input[type="text"]:focus {
	border-color: var(--wf-secondary);
	outline: 2px solid var(--wf-secondary);
	outline-offset: 2px;
}

/* Submit: rectangular dark, on the right, never shrinking. */
.wf-investor-form__form input[type="submit"],
.wf-investor-form__form button[type="submit"] {
	flex: 0 0 auto;
	white-space: nowrap;
	background: var(--wf-secondary);
	color: var(--wf-white);
	border: 0;
	border-radius: var(--wf-radius-input);
	padding: 0.65rem 1.6rem;
	font-family: var(--wf-font);
	font-size: 1.125rem;      /* Figma: 18px */
	font-weight: 400;
	cursor: pointer;
	transition: background var(--wf-transition);
}

.wf-investor-form__form input[type="submit"]:hover,
.wf-investor-form__form button[type="submit"]:hover {
	background: #000;
}

/* CF7's AJAX spinner: keep it out of the field; it only appears on submit. */
.wf-investor-form__form .wpcf7-spinner {
	margin: 0 0 0 0.4rem;
	align-self: center;
}

/* CF7 response/validation feedback drops below the row, full width. */
.wf-investor-form__form .wpcf7-response-output {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
}

/* Stacked layout (heading over form, ≤991px): the form fills the full
   container width and the field + Submit keep the Figma ~2:1 proportion
   (Figma mobile: field 205 + Submit 106 = the full 317 content column). */
@media (max-width: 991px) {
	/* The inner switches to a column here (footer.css); reset the base 560px
	   flex-basis so the form sizes to its content HEIGHT (not reserving 560px
	   of height), and let it span the full container width. */
	.wf-investor-form__form {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}
	/* Keep the email field + Submit button on one row; the field grows to fill
	   all remaining width so it stays the dominant element. */
	.wf-investor-form__form .wf-cf7-row { flex-wrap: nowrap; position: relative; }
	.wf-investor-form__form .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }
	/* Submit sizes to its label but with tighter side padding — "Subscribe" is
	   a long word that would otherwise crowd out the field on a narrow row. */
	.wf-investor-form__form input[type="submit"],
	.wf-investor-form__form button[type="submit"] {
		flex: 0 0 auto;
		padding-inline: 1.1rem;
	}
	/* CF7 injects the spinner as a third flex item (24px + margin), which left a
	   dead gap on the right of the row. Pull it out of flow so the field can use
	   the full width; it only appears briefly mid-submit. */
	.wf-investor-form__form .wpcf7-spinner {
		position: absolute;
		right: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
	}
}