/**
 * Clavé mailing list popup.
 *
 * Deliberately inherits the theme's existing identity rather than introducing a
 * new one: sage greens, Lato for body copy, Dancing Script for the heading —
 * the same script face the site already uses for brand voice.
 *
 * Positioning note: the theme's .scroll-top button is fixed at bottom:30/right:30
 * at 45x45px with z-index 999. This panel sits directly above it, sharing the
 * same right edge, so the two never overlap.
 */

.clave-signup {
	/* Local tokens, falling back to the theme's globals if they are present. */
	--clave-green: var(--header-green, #709663);
	--clave-green-soft: var(--primary-green, #9ab596);
	--clave-ink: var(--text-dark, #333);
	--clave-muted: var(--text-gray, #666);
	--clave-surface: #fff;
	--clave-line: #e3e6e1;

	position: fixed;
	right: 30px;
	bottom: 88px; /* Clears the 45px scroll-top button plus a 13px gap. */
	z-index: 9998;

	width: 330px;
	max-width: calc(100vw - 40px);

	background: var(--clave-surface);
	border: 1px solid var(--clave-line);
	border-top: 3px solid var(--clave-green);
	border-radius: 3px;
	box-shadow: 0 12px 34px rgba(40, 55, 38, 0.16);

	font-family: var(--font-sans, "Lato", sans-serif);
	color: var(--clave-ink);
	line-height: 1.5;
	text-align: left;

	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.32s ease, transform 0.32s ease;
}

.clave-signup[hidden] {
	display: none;
}

.clave-signup.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.clave-signup.is-leaving {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

.clave-signup__inner {
	padding: 22px 24px 20px;
}

/* --- Close ------------------------------------------------------------- */

.clave-signup__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	background: none;
	border: 0;
	border-radius: 3px;
	cursor: pointer;

	font-size: 22px;
	line-height: 1;
	color: #a8b0a5;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.clave-signup__close:hover,
.clave-signup__close:focus-visible {
	color: var(--clave-ink);
	background: #f2f4f1;
}

/* --- Type -------------------------------------------------------------- */

.clave-signup__eyebrow {
	margin: 0 0 6px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--clave-green-soft);
}

.clave-signup__heading {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--font-script, "Dancing Script", cursive);
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--clave-green);
	text-align: center;
}

.clave-signup__body {
	margin: 0 0 16px;
	font-size: 0.86rem;
	color: var(--clave-muted);
}

/* --- Form -------------------------------------------------------------- */

.clave-signup__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.clave-signup__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.clave-signup__input {
	width: 100%;
	padding: 11px 12px;

	background: #fbfcfa;
	border: 1px solid var(--clave-line);
	border-radius: 2px;

	font-family: inherit;
	font-size: 0.9rem;
	color: var(--clave-ink);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.clave-signup__input::placeholder {
	color: #aeb4ab;
}

.clave-signup__input:focus {
	outline: none;
	background: #fff;
	border-color: var(--clave-green-soft);
	box-shadow: 0 0 0 3px rgba(154, 181, 150, 0.28);
}

.clave-signup__input.has-error {
	border-color: #b4483c;
	background: #fdf7f6;
}

.clave-signup__submit {
	width: 100%;
	padding: 12px 18px;

	background: var(--clave-green);
	border: 0;
	border-radius: 2px;
	cursor: pointer;

	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;

	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.clave-signup__submit:hover {
	background: #5f8354;
}

.clave-signup__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Honeypot: removed from the visual and accessibility trees, but still a real
   focusable input as far as a naive bot is concerned. */
.clave-signup__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- Status + footnote ------------------------------------------------- */

.clave-signup__status {
	margin: 10px 0 0;
	font-size: 0.8rem;
	min-height: 1px;
}

.clave-signup__status:empty {
	margin: 0;
}

.clave-signup__status.is-error {
	color: #b4483c;
}

.clave-signup__status.is-success {
	color: var(--clave-green);
	font-weight: 700;
}

.clave-signup__footnote {
	margin: 12px 0 0;
	font-size: 0.68rem;
	color: #9aa197;
}

/* Success state: the form is replaced by the confirmation, so the panel
   shrinks to just the message rather than sitting there half-empty. */
.clave-signup.is-complete .clave-signup__form,
.clave-signup.is-complete .clave-signup__body {
	display: none;
}

.clave-signup.is-complete .clave-signup__status {
	margin: 4px 0 0;
	font-size: 0.88rem;
}

/* --- Focus visibility -------------------------------------------------- */

.clave-signup :focus-visible {
	outline: 2px solid var(--clave-green);
	outline-offset: 2px;
}

/* --- Narrow screens ---------------------------------------------------- */

@media (max-width: 600px) {
	.clave-signup {
		right: 12px;
		left: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
	}

	.clave-signup__inner {
		padding: 18px 20px 16px;
	}

	.clave-signup__heading {
		font-size: 1.6rem;
	}
}

/* --- Motion preferences ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.clave-signup {
		transition: none;
		transform: none;
	}

	.clave-signup.is-visible {
		transform: none;
	}
}