.ylb-newsletter {
	line-height: 1.2;
}

.ylb-newsletter .ylb-newsletter__band {
	box-sizing: border-box;
	/* A minimum, not a fixed height: taller forms (e.g. with a terms checkbox) grow the band. */
	min-height: clamp(52px, 7.03vw, 100px);
	padding: clamp(6px, 0.8vw, 12px) clamp(16px, 8.9vw, 128px) clamp(6px, 0.8vw, 12px) clamp(16px, 6.4vw, 92px);
	gap: clamp(8px, 1.6vw, 24px);
	border-radius: clamp(8px, 1.2vw, 16px);
	flex-wrap: nowrap;
}

.ylb-newsletter .ylb-newsletter__envelope {
	margin: -1vw 0;
	flex: 0 0 auto;
}

.ylb-newsletter .ylb-newsletter__envelope img {
	display: block;
	height: auto;
}

.ylb-newsletter .ylb-newsletter__text {
	flex: 1 1 auto;
	margin: 0;
}

.ylb-newsletter .ylb-newsletter__text > * {
	margin: 0;
}

/*
 * Form slot: a Group block that holds the sign-up form. Swap the placeholder
 * inside it for a Shortcode block or any form plugin's block.
 */
.ylb-newsletter .ylb-newsletter__form {
	margin-left: auto;
	flex: 0 0 auto;
	width: clamp(260px, 33.5vw, 480px);
	max-width: 100%;
}

.ylb-newsletter .ylb-newsletter__form > * {
	margin-block: 0;
}

/*
 * Friendly defaults for third-party forms dropped into the slot. :where()
 * keeps specificity at zero, so a plugin's own styles still win.
 */
:where(.ylb-newsletter__form) :where(input[type="email"], input[type="text"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) {
	box-sizing: border-box;
	max-width: 100%;
	min-height: clamp(30px, 3.3vw, 47px);
	padding: 0.35em clamp(10px, 1.3vw, 18px);
	border: 0;
	border-radius: clamp(6px, 0.8vw, 12px);
	background: #fff;
	color: var(--wp--preset--color--ink-brown);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(11px, 1.22vw, 17px);
}

:where(.ylb-newsletter__form) :where(input[type="submit"], button[type="submit"], .wp-element-button) {
	min-height: clamp(30px, 3.3vw, 47px);
	padding: 0.35em clamp(12px, 1.9vw, 27px);
	border: 0;
	border-radius: clamp(6px, 0.8vw, 12px);
	background: linear-gradient(180deg, #301537, #4a1f63);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(11px, 1.37vw, 19px);
	font-weight: 600;
	cursor: pointer;
}

:where(.ylb-newsletter__form) :where(label, p, .description) {
	color: #f7f3d6;
	font-size: clamp(10px, 1.16vw, 16px);
}

.ylb-newsletter .ylb-subscribe {
	display: flex;
	align-items: stretch;
	width: clamp(260px, 33.5vw, 480px);
	height: clamp(30px, 3.3vw, 47px);
	margin: 0;
}

.ylb-newsletter .ylb-subscribe input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0 clamp(10px, 1.3vw, 18px);
	border: 0;
	border-radius: clamp(6px, 0.8vw, 12px) 0 0 clamp(6px, 0.8vw, 12px);
	background: #fff;
	color: var(--wp--preset--color--ink-brown);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(11px, 1.22vw, 17px);
}

.ylb-newsletter .ylb-subscribe input[type="email"]:focus,
.ylb-newsletter .ylb-subscribe input[type="email"]:focus-visible,
.ylb-newsletter__band :is(.fluentform, .frm_forms) .ff-el-form-control:focus {
	outline: 3px solid var(--wp--preset--color--royal-purple);
	outline-offset: 0;
}

.ylb-newsletter .ylb-subscribe input[type="email"]::placeholder {
	color: #6f6a70;
	opacity: 1;
}

.ylb-newsletter .ylb-subscribe button {
	flex: 0 0 auto;
	box-sizing: border-box;
	margin: 0;
	padding: 0 clamp(12px, 1.9vw, 27px);
	border: 0;
	border-radius: 0 clamp(6px, 0.8vw, 12px) clamp(6px, 0.8vw, 12px) 0;
	background: linear-gradient(180deg, #301537, #4a1f63);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(11px, 1.37vw, 19px);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.ylb-newsletter .ylb-subscribe .ylb-star {
	color: var(--wp--preset--color--gold);
	margin-left: 0.3em;
}

@media (max-width: 781px) {
	.ylb-newsletter .ylb-newsletter__band {
		flex-direction: column;
		align-items: center;
		text-align: center;
		height: auto;
		padding: 24px 20px;
		gap: 14px;
	}

	.ylb-newsletter .ylb-newsletter__text {
		align-items: center;
	}

	.ylb-newsletter .ylb-newsletter__text > * {
		text-align: center;
	}

	.ylb-newsletter .ylb-newsletter__form {
		margin-left: 0;
		width: 100%;
	}

	.ylb-newsletter .ylb-subscribe {
		width: 100%;
		height: 44px;
	}

	.ylb-newsletter .ylb-subscribe input[type="email"],
	.ylb-newsletter .ylb-subscribe button {
		font-size: 15px;
	}
}

/*
 * Any form placed in the green band (plugin block or shortcode): labels, terms
 * and consent text, and their links stay readable on the green. The
 * confirmation message keeps its own dark text on its light card.
 */
.ylb-newsletter__band :is(.fluentform, .frm_forms, form) :is(label, p, span, .ff-el-form-check-label, .ff_t_c, .frm_primary_label):not(.ff-message-success, .ff-message-success *):not(button *, .wp-element-button *) {
	color: #f7f3d6;
}

.ylb-newsletter__band :is(.fluentform, .frm_forms, form) a:not(.ff-btn):not(.wp-element-button):not(.ff-message-success *) {
	color: #fff4c2;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ylb-newsletter__band :is(.fluentform, .frm_forms, form) a:not(.ff-btn):not(.wp-element-button):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--gold);
}

.ylb-newsletter__band :is(.fluentform, .frm_forms) .ff-el-form-check,
.ylb-newsletter__band :is(.fluentform, .frm_forms) .ff-el-tc {
	font-size: 0.85em;
	line-height: 1.4;
}

.ylb-newsletter__band :is(.fluentform, .frm_forms) input[type="checkbox"] {
	accent-color: var(--wp--preset--color--gold);
}

/*
 * Desktop and tablet: the envelope, the text and the form sit centred in the
 * band as one evenly spaced row, vertically centred, whether or not the form
 * has an extra row such as a terms checkbox. (Phones keep the stacked layout.)
 */
@media (min-width: 782px) {
	.ylb-newsletter .ylb-newsletter__band {
		justify-content: center;
		column-gap: clamp(16px, 2vw, 28px);
		padding-left: clamp(16px, 4vw, 64px);
		padding-right: clamp(16px, 4vw, 64px);
	}

	/* The text keeps its natural width instead of stretching and pushing the form away. */
	.ylb-newsletter .ylb-newsletter__text {
		flex: 0 1 auto;
	}

	/* Whatever holds the form: the theme's form slot, a shortcode, an HTML block or a plugin form. */
	.ylb-newsletter__band > :is(.ylb-newsletter__form, .wp-block-html, .wp-block-shortcode, .fluentform, .frm_forms, form) {
		flex: 0 1 clamp(300px, 33.5vw, 480px);
		width: auto;
		min-width: 0;
		margin-left: clamp(8px, 2.5vw, 40px);
		margin-top: 0;
		margin-bottom: 0;
	}
}

/*
 * WordPress wraps a form plugin's setup script (and sometimes nothing at all) in
 * a paragraph after the shortcode. It's invisible but took a slot in the row,
 * making the right side wider than the left. Hide such wrappers (scripts still run).
 */
.ylb-newsletter__band > p:empty,
.ylb-newsletter__band > p:has(> script):not(:has(> :not(script))) {
	display: none;
}

/*
 * Confirmation message after subscribing: it takes the form's place in the row,
 * centred, with no extra margins, so the band stays balanced.
 */
.ylb-newsletter__band .ff-message-success {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: clamp(44px, 3.3vw, 52px);
	margin: 0;
	text-align: center;
}

.ylb-newsletter__band .ff-message-success > :is(p, div) {
	margin: 0;
}

/* No stray space under the form, so it stays vertically centred in the band. */
.ylb-newsletter__band :is(.fluentform, .frm_forms) :is(form, fieldset) {
	margin: 0;
}

.ylb-newsletter__band :is(.fluentform, .frm_forms) fieldset > :last-child,
.ylb-newsletter__band :is(.fluentform, .frm_forms) form > :last-child {
	margin-bottom: 0;
}