/**
 * JSD Email Signup Section
 *
 * Copy left, form right on desktop; stacked on mobile. The form is WPForms
 * output, restyled in place to the JSD system rather than replaced — so
 * validation, errors and the confirmation message all keep working and simply
 * look like the rest of the site.
 */

.jsd-section--signup {
	background: #fafafa;
}

.jsd-signup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px 64px;
}

.jsd-signup__copy {
	min-width: 0;
}

.jsd-section--signup .jsd-signup__text {
	max-width: 42ch;
	margin: 18px 0 0;
	color: #333333;
	font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
	line-height: 1.6;
}

.jsd-signup__form {
	min-width: 0;
}

/* WPForms, restyled ------------------------------------------------------- */

/*
 * WPForms' modern markup is driven by its own custom properties, and its
 * stylesheet loads after ours. Re-declaring the variables is therefore both the
 * supported way to restyle it and the one that avoids a specificity war — the
 * plugin's own rules do the work, in JSD colours. Only the handful of things
 * the variables don't cover are set as rules below.
 */
.jsd-signup__form div.wpforms-container.wpforms-container-full {
	--wpforms-field-border-radius: 2px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 1px;
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-border-color: #e5e5e5;
	--wpforms-field-text-color: #111111;
	--wpforms-label-color: #111111;
	--wpforms-label-sublabel-color: #767676;
	--wpforms-label-error-color: #c1121f;
	--wpforms-button-border-radius: 2px;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-size: 1px;
	--wpforms-button-background-color: #000000;
	--wpforms-button-border-color: #000000;
	--wpforms-button-text-color: #ffffff;
	--wpforms-field-size-input-height: 51px;
	--wpforms-field-size-input-spacing: 0px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-line-height: 20px;
	--wpforms-field-size-padding-h: 16px;
	--wpforms-field-size-sublabel-spacing: 6px;
	--wpforms-button-size-font-size: 12px;
	--wpforms-button-size-height: 51px;
	--wpforms-button-size-padding-h: 30px;
	--wpforms-button-size-margin-top: 0px;

	margin: 0;
}

.jsd-signup__form div.wpforms-container form.wpforms-form {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px;
}

.jsd-signup__form div.wpforms-container .wpforms-form .wpforms-field-container {
	flex: 1 1 240px;
	min-width: 0;
}

.jsd-signup__form div.wpforms-container .wpforms-form .wpforms-field {
	margin: 0;
	padding: 0;
}

/*
 * The visible label is redundant next to the placeholder, but removing it
 * outright would leave the input with no accessible name. Clipped instead of
 * hidden, so screen readers still announce it.
 */
.jsd-signup__form div.wpforms-container .wpforms-form .wpforms-field-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jsd-signup__form div.wpforms-container .wpforms-form input[type="email"],
.jsd-signup__form div.wpforms-container .wpforms-form input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	/*
	 * Repeated as concrete values as well as variables: WPForms' own size
	 * variables are declared at a higher specificity than a plain container
	 * selector, so the field would otherwise keep the plugin default height.
	 */
	height: 51px;
	padding: 0 16px;
	/* 16px keeps iOS from zooming the page on focus. */
	font-size: 16px;
}

.jsd-signup__form div.wpforms-container .wpforms-form input[type="email"]::placeholder {
	color: #767676;
	opacity: 1;
}

/*
 * Focus and error states are drawn with `outline` rather than `border-color` or
 * `box-shadow`. Both of those are set on inputs by declarations elsewhere in the
 * stack that outrank even an inline style here, so an outline is the one edge
 * treatment that reliably lands — and it sits inside the field, so nothing
 * shifts when it appears.
 */
.jsd-signup__form div.wpforms-container .wpforms-form input[type="email"]:focus,
.jsd-signup__form div.wpforms-container .wpforms-form input[type="text"]:focus {
	outline: 2px solid #111111;
	outline-offset: -2px;
}

/*
 * WPForms puts a top margin on the submit container to separate it from the
 * last field. In this single-row layout the flex gap already does that, so the
 * margin would only push the button out of alignment with the input.
 */
.jsd-signup__form div.wpforms-container .wpforms-form .wpforms-submit-container {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.jsd-signup__form div.wpforms-container .wpforms-form button[type="submit"] {
	box-sizing: border-box;
	height: 51px;
	margin: 0;
	padding: 0 30px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.jsd-signup__form div.wpforms-container .wpforms-form button[type="submit"]:hover,
.jsd-signup__form div.wpforms-container .wpforms-form button[type="submit"]:focus-visible {
	border-color: #333333;
	background-color: #333333;
	color: #ffffff;
}

.jsd-signup__form div.wpforms-container .wpforms-form button[type="submit"]:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* Validation and confirmation -------------------------------------------- */

.jsd-signup__form div.wpforms-container .wpforms-form label.wpforms-error,
.jsd-signup__form div.wpforms-container .wpforms-form em.wpforms-error {
	display: block;
	margin: 8px 0 0;
	color: #c1121f;
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
}

.jsd-signup__form div.wpforms-container .wpforms-form input.wpforms-error {
	outline: 2px solid #c1121f;
	outline-offset: -2px;
}

.jsd-signup__form div.wpforms-container div.wpforms-confirmation-container,
.jsd-signup__form div.wpforms-container div.wpforms-confirmation-container-full,
.jsd-signup__form div.wpforms-confirmation-container-full {
	margin: 0;
	padding: 20px 22px;
	border: 1px solid #111111;
	border-radius: 2px;
	background: #ffffff;
	color: #111111;
	font-size: 15px;
	line-height: 1.55;
}

.jsd-signup__form div.wpforms-container div.wpforms-confirmation-container p:last-child,
.jsd-signup__form div.wpforms-container div.wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

.jsd-section--signup .jsd-signup__footnote {
	margin: 14px 0 0;
	color: #767676;
	font-size: 12.5px;
	line-height: 1.5;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.jsd-signup {
		gap: 32px 40px;
	}
}

/*
 * Two columns need roughly 960px: below that the form column is narrower than
 * the input's 240px minimum plus the button, and the button wraps under a
 * half-width field. One column keeps the field and button on one row instead.
 */
@media (max-width: 960px) {
	.jsd-signup {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 28px;
	}
}

/* Narrow enough that field and button no longer fit side by side. */
@media (max-width: 600px) {
	.jsd-signup__form div.wpforms-container form.wpforms-form {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * The field's flex-grow is there to fill the row on wide screens. Stacked,
	 * that same grow would stretch the field container down the column and push
	 * the button to the bottom of whatever height the section happens to have.
	 */
	.jsd-signup__form div.wpforms-container .wpforms-form .wpforms-field-container {
		flex: 0 0 auto;
	}

	.jsd-signup__form div.wpforms-container .wpforms-form .wpforms-submit-container {
		width: 100%;
	}

	.jsd-signup__form div.wpforms-container .wpforms-form button[type="submit"] {
		width: 100%;
		height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsd-signup__form div.wpforms-container .wpforms-form button[type="submit"] {
		transition: none;
	}
}