/**
 * WLRE Theme - Newsletter Section Styles (Lotus Casa updated, point 075).
 *
 * One row: heading+sub on the left, [email input + Iscriviti pill] on the
 * right. The form sits inline (flex-direction: row) instead of stacked.
 * Mobile collapses everything to a column so the input gets its full
 * width and the button drops below.
 *
 * States (Figma 6779:280141 typing / 6779:280248 submitted):
 *  - Typing: 1px solid #0A2438 border + floating "Email" label
 *  - Submitted: input resets, green confirmation below field,
 *               button stays visible at opacity 0.20
 */

.wlre-newsletter {
	background-color: var(--wlre-color-surface-50);
	padding: 64px 0;
}

.wlre-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.wlre-newsletter__copy {
	flex: 1 1 0;
	min-width: 0;
}

.wlre-newsletter__heading {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0 0 12px;
}

.wlre-newsletter__text {
	font-size: 18px;
	line-height: 1.48;
	color: var(--wlre-color-neutral-600);
	max-width: 450px;
	margin: 0;
}

/* === Form — single inline row =================================== */
.wlre-newsletter__form {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-12);
	min-width: 420px;
	max-width: 480px;
	flex-shrink: 0;
}

/* === Input field wrapper ===
 * Height is always exactly the input's 52 px — label and success msg
 * are both position:absolute so they have zero layout effect and can
 * never shift the field or the parent alignment. */
.wlre-newsletter__field {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.wlre-newsletter__input {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 var(--wlre-space-24);
	border: 0.5px solid #666;
	border-radius: var(--wlre-radius-sm);
	font-family: var(--wlre-font-body);
	font-size: 14px;
	line-height: 1.48;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	outline: none;
	transition: border-color 0.2s ease, border-width 0.2s ease;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.wlre-newsletter__input::placeholder {
	color: #666;
	opacity: 1;
}

/* Typing state: thick navy border (Figma 6779:280141) */
.wlre-newsletter__input:focus {
	border: 1px solid var(--wlre-color-text-900);
}

/* === Floating label === */
.wlre-newsletter__label {
	position: absolute;
	top: -9px;
	left: 20px;
	padding: 0 4px;
	background: var(--wlre-color-white);
	font-family: var(--wlre-font-body);
	font-size: 12px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	white-space: nowrap;
}

/* Show when focused or when input has a value (placeholder hidden) */
.wlre-newsletter__input:focus ~ .wlre-newsletter__label,
.wlre-newsletter__input:not(:placeholder-shown) ~ .wlre-newsletter__label {
	opacity: 1;
}

/* === Global error (rate-limit / server error) ===
 * JS prepends .wlre-form__global-error as first flex child; pull it out of
 * the row with position:absolute so it appears below the field. */
.wlre-newsletter__form {
	position: relative;
}

.wlre-newsletter__form .wlre-form__global-error {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	margin: 0;
	font-size: 12px;
	text-align: left;
}

/* === Success message (Figma 6779:280248) === */
/* Override the generic .wlre-form__toast card style for this inline use */
.wlre-newsletter .wlre-form__toast.wlre-newsletter__success-msg {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	font-family: var(--wlre-font-body);
	font-size: 12px;
	line-height: 1.48;
	color: #2a5133;
	display: block;
}

.wlre-newsletter .wlre-form__toast.wlre-newsletter__success-msg[hidden] {
	display: none;
}

.wlre-newsletter .wlre-form__toast--visible.wlre-newsletter__success-msg {
	display: block;
}

/* === Submitted state: button fades to 20% opacity (Figma 6779:280248) === */
.wlre-newsletter__form:has(.wlre-newsletter__success-msg.wlre-form__toast--visible) .wlre-newsletter__submit {
	opacity: 0.20;
	pointer-events: none;
	cursor: default;
}

/* === Submit button === */
.wlre-newsletter__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wlre-space-4);
	height: 52px;
	padding: 0 var(--wlre-space-16);
	background: #0f0f0f;
	color: var(--wlre-color-white);
	border: 0;
	border-radius: var(--wlre-radius-sm);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	width: auto;
	max-width: none;
	margin: 0;
	flex-shrink: 0;
}

/* Hover swap is desktop-only. iOS Safari keeps :hover applied after a tap
 * until the user taps elsewhere, which made the post-submit faded button
 * render teal instead of the intended gray; @media (hover: hover) limits
 * the swap to devices with a real pointer. Keyboard focus still gets the
 * teal accent via :focus-visible regardless of pointer type. */
@media (hover: hover) {
	.wlre-newsletter__submit:hover {
		background: var(--wlre-color-accent-500);
		color: var(--wlre-color-text-900);
	}
}

.wlre-newsletter__submit:focus-visible {
	background: var(--wlre-color-accent-500);
	color: var(--wlre-color-text-900);
}

.wlre-newsletter__submit svg {
	width: 18px;
	height: 18px;
}

/* Scoped override — beats forms.css .wlre-form__submit (0-1-0 specificity) */
.wlre-newsletter .wlre-form__submit {
	padding: 0 var(--wlre-space-16);
	height: 52px;
	margin: 0;
	border-radius: var(--wlre-radius-sm);
	max-width: none;
	display: inline-flex;
	width: auto;
	align-self: flex-start;
	flex-shrink: 0;
}

/* === Responsive === */
@media (max-width: 1023px) {
	.wlre-newsletter__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wlre-space-32);
	}

	.wlre-newsletter__form {
		min-width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.wlre-newsletter {
		padding: 32px 0;
	}

	.wlre-newsletter__heading {
		font-size: 24px;
		margin-bottom: 12px;
	}

	.wlre-newsletter__text {
		font-size: 16px;
		max-width: 100%;
	}

	.wlre-newsletter__form {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wlre-space-12);
	}

	.wlre-newsletter__field {
		width: 100%;
	}

	.wlre-newsletter__input {
		height: 52px;
	}

	.wlre-newsletter__submit {
		height: 52px;
		width: auto;
		align-self: flex-start;
	}

	.wlre-newsletter .wlre-form__submit {
		width: auto;
		height: 52px;
		align-self: flex-start;
	}

	/* Success message: switch from absolute (which overlaps the stacked
	 * Subscribe button below the field) to inline-block flow so it pushes
	 * the button down naturally. */
	.wlre-newsletter .wlre-form__toast.wlre-newsletter__success-msg {
		position: static;
		top: auto;
		margin-top: var(--wlre-space-4);
	}

	/* Privacy note: appears below Subscribe button (order:3 > button order:0) */
	.wlre-newsletter__privacy {
		display: block;
		order: 3;
		width: 100%;
		margin: 0;
		font-family: var(--wlre-font-body);
		font-size: var(--wlre-font-size-s);
		line-height: var(--wlre-line-height-body);
		color: var(--wlre-color-neutral-600);
	}
}

/* Privacy note — hidden on desktop (doesn't fit the inline flex row).
 * On mobile it appears below the Subscribe button via order:3. */
.wlre-newsletter__privacy {
	display: none;
}

.wlre-newsletter__privacy a {
	color: var(--wlre-color-accent-500);
	text-decoration: underline;
}