/**
 * Lacto Newsletter - front-end form.
 *
 * Works on any background: the status message uses solid colour chips rather
 * than tinted text, so it stays legible on both dark and light sections.
 * Override --ln-accent on .ln-wrap to match another palette.
 */
.ln-wrap {
	--ln-accent: var(--lf-accent, #e9a23b);
	--ln-accent-ink: #2a1e05;
	--ln-field-h: 52px;
	--ln-radius: 999px;
	max-width: 560px;
	margin-inline: auto;
	width: 100%;
}

.ln-title { margin: 0 0 .4rem; }
.ln-text { margin: 0 0 1rem; }

.ln-form {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: stretch;
}

.ln-input {
	/* No flex-basis: in a column layout a basis would become a HEIGHT and
	   balloon the field into an oval. Width is driven by min-width instead. */
	flex: 1 1 auto;
	width: auto;
	min-width: 12rem;
	min-height: var(--ln-field-h);
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--ln-radius);
	padding: .75rem 1.25rem;
	font: inherit;
	font-size: max(16px, 1em); /* stops iOS zooming the page on focus */
	line-height: 1.3;
	background: #fff;
	color: #1c2b26;
}
.ln-input::placeholder { color: #6a776f; opacity: 1; }
.ln-input:focus-visible {
	outline: 2px solid var(--ln-accent);
	outline-offset: 2px;
}

.ln-btn {
	flex: 0 0 auto;
	min-height: var(--ln-field-h);
	box-sizing: border-box;
	border: 0;
	border-radius: var(--ln-radius);
	padding: .75rem 1.75rem;
	font: inherit;
	font-size: max(16px, 1em);
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	background: var(--ln-accent);
	color: var(--ln-accent-ink);
	transition: filter .15s ease, transform .15s ease;
	white-space: nowrap;
}
.ln-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.ln-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ln-btn:disabled { opacity: .65; cursor: default; transform: none; }

/* Honeypot: off-screen for people, still fillable by bots. */
.ln-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status message: a solid chip, so it reads on any background colour. */
.ln-msg {
	margin: .85rem 0 0;
	font-size: .92rem;
	line-height: 1.4;
	overflow-wrap: break-word;
}
.ln-msg:empty { margin: 0; }
.ln-msg:not(:empty) {
	display: inline-block;
	padding: .45rem .95rem;
	border-radius: var(--ln-radius);
	font-weight: 600;
	color: #fff;
}
.ln-msg.is-ok:not(:empty) { background: #2f9e6e; }
.ln-msg.is-error:not(:empty) { background: #c0392b; }

/* ---------- Tablets ---------- */
@media (max-width: 1024px) {
	.ln-wrap { max-width: 520px; }
}

/* ---------- Phones: stack ---------- */
@media (max-width: 560px) {
	.ln-form { flex-direction: column; }
	.ln-input,
	.ln-btn {
		flex: 0 0 auto;   /* never let basis become a height */
		width: 100%;
		min-width: 0;
	}
	.ln-msg { font-size: .88rem; }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 360px) {
	.ln-wrap { --ln-field-h: 48px; }
	.ln-input { padding-inline: 1rem; }
}

/* ---------- Touch: comfortable targets ---------- */
@media (hover: none) and (pointer: coarse) {
	.ln-wrap { --ln-field-h: 52px; }
	.ln-btn:hover { transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ln-btn { transition: none; }
	.ln-btn:hover { transform: none; }
}