/*
 * Footer newsletter form rendered by WS Form, whose own CSS is off (inc/integrations/ws-form.php).
 * Spec: docs/migration/design.md §4.1.
 */

.newsletter-form {
	--nl-ok-bg: #e6f6ed;
	--nl-ok: #0a7a48;
	--nl-err-bg: #ffe6ec;
	--nl-err: #c01f3d;
}

.newsletter-form fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.newsletter-form .wsf-fields {
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
}

.newsletter-form .wsf-field-wrapper[data-type="email"] {
	display: contents;
}

.newsletter-form .wsf-field-wrapper[data-type="submit"] {
	width: 100%;
}

body .newsletter-form input[type="email"] {
	width: 100%;
	height: 40px;
	border: 0;
	font-size: 16px;
	color: var(--color-black);
}

.newsletter-form input[type="email"]::placeholder {
	color: var(--color-black);
	opacity: 1;
}

.newsletter-form .wsf-button {
	width: 100%;
	min-height: 40px;
	padding: 8px 1rem;
	border: 0;
	background: var(--color-black);
	color: var(--color-white);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.44;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background 0.2s;
}

.newsletter-form .wsf-button:hover:not(:disabled) {
	background: var(--color-grey);
}

.newsletter-form .wsf-button:disabled {
	opacity: 0.5;
}

.newsletter-form .wsf-invalid-feedback {
	display: none;
	order: 3;
	width: 100%;
}

.newsletter-form .wsf-validated .wsf-field:invalid ~ .wsf-invalid-feedback,
.newsletter-form .wsf-validated .wsf-field.wsf-invalid ~ .wsf-invalid-feedback,
.newsletter-form .wsf-validated.wsf-form .wsf-field:invalid ~ .wsf-invalid-feedback {
	display: block;
}

.newsletter-form .wsf-invalid-feedback,
.newsletter-form .wsf-alert {
	padding: 15px;
}

.newsletter-form .wsf-invalid-feedback,
.newsletter-form .wsf-alert-danger {
	background: var(--nl-err-bg);
	color: var(--nl-err);
}

.newsletter-form .wsf-alert > * {
	margin: 0;
}

.newsletter-form [data-wsf-message] {
	margin-top: 20px;
}

.newsletter-form .wsf-alert-success {
	background: var(--nl-ok-bg);
	color: var(--nl-ok);
}

.newsletter-form .wsf-hidden {
	display: none;
}

@media (min-width: 29.9375rem) {
	.newsletter-form .wsf-fields {
		row-gap: 0;
	}

	.newsletter-form [data-wsf-message] {
		margin-top: 0;
	}

	body .newsletter-form input[type="email"] {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		margin: 0 var(--spacing-s) 20px 0;
	}

	.newsletter-form .wsf-field-wrapper[data-type="submit"] {
		width: 30%;
		min-width: max-content;
	}
}