/*
 * Newsletter (parts/newsletter.html). A box in the tutorial sidebar; in the
 * neutral band above the footer (only on pages without that box, see
 * inc/newsletter.php). The form is Jetpack's
 * Subscriptions block: these rules give it the theme's field and button.
 */
.pst-newsletter__form form {
	margin: 0;
}

.pst-newsletter__form .wp-block-jetpack-subscriptions__form-elements {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.pst-newsletter__form input[type="email"],
.pst-newsletter__form p {
	flex: 1 1 12rem;
	margin: 0;
}

.pst-newsletter__form [id^="subscribe-submit"] {
	flex: 0 0 auto;
}

.pst-newsletter__form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px; /* Touch target (>= 44px), not a spacing step. */
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.pst-newsletter__form button {
	min-height: 48px; /* Touch target (>= 44px). */
	padding: 0 var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--on-action);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.pst-newsletter__form button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Narrow signup placements retain the same field and action geometry. */
.pst-tutorial-newsletter .pst-newsletter__form .wp-block-jetpack-subscriptions__form-elements {
	flex-direction: column;
	align-items: stretch;
}

.pst-tutorial-newsletter .pst-newsletter__form input[type="email"],
.pst-tutorial-newsletter .pst-newsletter__form p {
	flex-basis: auto;
}

.pst-tutorial-newsletter .pst-newsletter__form button {
	width: 100%;
}

@media (max-width: 350px) {

	.pst-newsletter__form [id^="subscribe-submit"] {
		flex-basis: 100%;
	}

	.pst-newsletter__form button {
		width: 100%;
	}
}