/**
 * Newsletter sign-up section (.kc-subscribe, blocks/subscribe, Figma 170:373): heading,
 * text and a pill email field + pink button on an aqua card (1280 × 520).
 */

/* The Figma card is 1280 wide (80px margins), wider than the 1240 content column. */
.kc-subscribe.has-global-padding {
	padding-inline: var( --kc-gutter-wide );
}

.kc-subscribe {
	--kc-subscribe-space: var( --kc-section-space );
	padding-top: var( --kc-subscribe-space );
	padding-bottom: var( --kc-subscribe-space );
}

/* Straight after the article list the card sits closer (Figma: 60 below the grid). */
.kc-posts + .kc-subscribe {
	--kc-subscribe-space: clamp( 2.5rem, 4.17vw, 3.75rem );
	padding-top: 0;
}

/* The footer's wave rises into the last section, so leave room for it. */
.kc-subscribe:last-child {
	padding-bottom: calc( var( --kc-subscribe-space ) + var( --kc-wave-h ) );
}

.kc-subscribe .kc-subscribe__card {
	max-width: 80rem;
	min-height: 32.5rem;
	padding: clamp( 2.5rem, 6.25vw, 5.625rem ) clamp( 1.5rem, 4.45vw, 4rem );
	border-radius: var( --kc-radius-card );
	background: var( --kc-cyan );
	color: var( --kc-dark-purple );
}

/* The site's standard section heading and intro (display 48/48, then 18/28 12px
   below, as on Contact) rather than the Blogs frame's one-off Poppins 42 / 19. */
.kc-subscribe .kc-subscribe__heading {
	max-width: 43.75rem;
	margin: 0;
	font-family: var( --kc-font-display );
	font-weight: 700;
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-subscribe .kc-subscribe__text {
	max-width: 43.75rem;
	margin: 0.75rem 0 0;
	font-size: 1.125rem;
	line-height: 1.556;
}

/* Figma: the field 265px below the card's top. */
.kc-subscribe .kc-subscribe__form {
	margin-top: clamp( 2rem, 6.04vw, 5.4375rem );
}

.kc-subscribe__row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.kc-subscribe__row > .wpcf7-form-control-wrap {
	flex: 0 1 32.5rem;
}

.kc-subscribe .wpcf7 input[type="email"] {
	height: 3.625rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 1.8125rem;
}

.kc-subscribe .wpcf7 input[type="submit"] {
	flex: none;
	min-width: 10.625rem;
	min-height: 3.125rem;
	/* Centred on the 58px field (the row is top-aligned so an error tip under the field
	   does not move the button). */
	margin-top: 0.25rem;
	background: var( --kc-pink );
}

.kc-subscribe .wpcf7 input[type="submit"]:is( :hover, :focus-visible ) {
	background: var( --kc-dark-purple );
}

/* White on the aqua card, in every state (theme.css tints them blush / aqua). */
.kc-subscribe .wpcf7 form .wpcf7-response-output,
.kc-subscribe .wpcf7 form.wpcf7-form:is( .invalid, .unaccepted, .payment-required, .failed, .aborted, .spam, .sent ) .wpcf7-response-output {
	max-width: 44.125rem;
	background: var( --kc-white );
}

/* The error pink is too light on aqua (4:1), so the tip is dark purple here and the
   borderless field gets an error-pink ring instead. */
.kc-subscribe .wpcf7 .wpcf7-not-valid-tip {
	color: var( --kc-dark-purple );
}

.kc-subscribe .wpcf7 input.wpcf7-not-valid {
	box-shadow: inset 0 0 0 2px var( --kc-error );
}

/* The field has no border, so focus draws one. */
.kc-subscribe .wpcf7 input[type="email"]:focus {
	box-shadow: inset 0 0 0 2px var( --kc-dark-purple ), 0 0 0 3px color-mix( in srgb, var( --kc-lavender ) 60%, transparent );
}

.kc-subscribe .wpcf7-spinner {
	position: absolute;
}

@media ( max-width: 781px ) {
	.kc-subscribe .kc-subscribe__card {
		min-height: 0;
	}

	.kc-subscribe .kc-subscribe__text {
		margin-top: 1rem;
		font-size: 1rem;
	}

	.kc-subscribe .kc-subscribe__form {
		margin-top: 2rem;
	}

	.kc-subscribe__row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.kc-subscribe__row > .wpcf7-form-control-wrap {
		flex: none;
	}

	.kc-subscribe .wpcf7 input[type="email"] {
		height: 3.25rem;
	}

	.kc-subscribe .wpcf7 input[type="submit"] {
		margin-top: 0;
	}
}