/* Bricks Blocks – Newsletter Signup
 *
 * The e-mail field and the submit button are two separate boxes side by side,
 * spaced by `gap` (Layout control). Each has its own border / radius / padding
 * / colours, all overridable from the Bricks controls; the values below are
 * just the defaults. The optional name field stacks above the row.
 *
 * Status feedback is a floating toast, not inline text, so it never clashes
 * with whatever the form sits on.
 */

.bb-newsletter {
	--bb-nl-height: 52px;
	--bb-nl-gap: 10px;
	--bb-nl-radius: 999px;

	display: block;
	width: 100%;
	max-width: 480px;
}

.bb-newsletter__form {
	position: relative; /* anchor for the toast */
	display: flex;
	flex-direction: column;
	gap: var(--bb-nl-gap);
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Field row: input grows, button keeps its size. */
.bb-newsletter__group {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--bb-nl-gap);
	width: 100%;
	min-width: 0;
}

/* ---------- Fields (email + name) ---------- */
.bb-newsletter__field {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: var(--bb-nl-height);
	margin: 0;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--bb-nl-radius);
	background-color: #ffffff;
	color: #4a4a4a;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bb-newsletter__field::placeholder {
	color: currentColor;
	opacity: 0.55;
}

/* No built-in focus ring: the look on focus is fully controlled from the
 * Bricks "Focus border color" / "Focus box shadow" controls. */
.bb-newsletter__field:focus,
.bb-newsletter__field:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ---------- Submit button ---------- */
.bb-newsletter__button {
	flex: 0 0 auto;
	align-self: stretch;                       /* same height as the field by default */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--bb-nl-height);
	margin: 0;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--bb-nl-radius);
	background-color: #5a8b6f;
	color: #ffffff;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease, background-color 0.15s ease;
}

.bb-newsletter__button:hover  { filter: brightness(1.06); }
.bb-newsletter__button:active { transform: translateY(1px); }
.bb-newsletter__button:disabled { opacity: 0.6; cursor: default; }

.bb-newsletter__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

.bb-newsletter__button-icon svg,
.bb-newsletter__button-icon i {
	display: block;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}

/* ---------- Accessibility helpers ---------- */
.bb-newsletter__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot: keep it in the DOM and focusable-free, but out of sight and out
 * of the layout. Real users never see or fill it; bots that fill every input
 * get rejected server-side. */
.bb-newsletter__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Toast message ----------
 * Anchored to the form (position:relative on .bb-newsletter__form), sitting
 * just below the pill so it's right where the user is looking. Full width of
 * the form, centred text. Slides down 6px into place.
 */
.bb-newsletter__message {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 20;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #1f2937;                 /* neutral dark, reads on any background */
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bb-newsletter__message[hidden] {
	display: none;
}

/* JS drops [hidden] and adds --show one frame later so the transition runs. */
.bb-newsletter__message--show {
	opacity: 1;
	transform: translateY(0);
}

.bb-newsletter__message--success {
	background: #166534;                 /* deep green */
}

.bb-newsletter__message--error {
	background: #b91c1c;                 /* deep red */
}

@media (prefers-reduced-motion: reduce) {
	.bb-newsletter__message {
		transition: opacity 0.15s ease;
		transform: none;
	}
	.bb-newsletter__message--show {
		transform: none;
	}
}