/**
 * ZonePlay newsletter (Mailchimp) form.
 *
 * Ported 1:1 from the marketing site's Newsletter.astro block (Tailwind):
 *
 *   card    bg-white rounded-[2rem] border-4 border-slate-100 shadow-2xl p-8 md:p-12
 *   icon    text-5xl mb-6
 *   h2      text-3xl md:text-4xl font-display font-bold text-zp-darkblue mb-4
 *   p       text-lg text-slate-600 font-medium mb-8 leading-relaxed
 *   form    space-y-3
 *   inputs  w-full pl-12 pr-5 py-4 rounded-full border-4 border-slate-200
 *           focus:border-<accent> focus:outline-none text-base font-medium
 *   button  w-full font-display font-bold py-4 px-8 rounded-full text-base
 *           shadow-[0_6px_0_0_<shadow>] hover:shadow-[0_2px_0_0_<shadow>]
 *           hover:translate-y-[4px] active:shadow-none active:translate-y-[6px]
 *
 *   slate-100 #f1f5f9  slate-200 #e2e8f0  slate-400 #94a3b8
 *   slate-500 #64748b  slate-600 #475569  zp-darkblue #0e355d
 *   zp-green  #7ac142  zp-red    #e12128
 *   font-display Fredoka   font-sans Nunito
 *
 * Accent colours arrive as custom properties on `.zpmc` (Support\Theme):
 * --zpmc-accent, --zpmc-accent-hover, --zpmc-accent-shadow,
 * --zpmc-accent-contrast.
 */

.zpmc {
	--zpmc-border: #e2e8f0; /* slate-200 */
	--zpmc-border-card: #f1f5f9; /* slate-100 */
	--zpmc-heading: #0e355d; /* zp-darkblue */
	--zpmc-body: #1e293b; /* slate-800 — the marketing site's default text */
	--zpmc-text: #475569; /* slate-600 — the description paragraph */
	--zpmc-icon: #94a3b8; /* slate-400 */
	--zpmc-muted: #64748b; /* slate-500 */
	--zpmc-ok: #7ac142; /* zp-green */
	--zpmc-danger: #e12128; /* zp-red */

	--zpmc-font-body: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--zpmc-font-display: "Fredoka", var(--zpmc-font-body);

	/* Outer container  ->  max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10
	 * (Newsletter.astro). max-width includes the side padding, so the white
	 * card ends up ~38rem wide on desktop, not the full 42rem. */
	box-sizing: border-box;
	position: relative;
	max-width: 42rem; /* max-w-2xl */
	margin-inline: auto;
	padding-inline: 1rem; /* px-4 */
	color: var(--zpmc-body);
	font-family: var(--zpmc-font-body);
	line-height: 1.5;
}

@media (min-width: 640px) {
	.zpmc {
		padding-inline: 1.5rem; /* sm:px-6 */
	}
}

@media (min-width: 1024px) {
	.zpmc {
		padding-inline: 2rem; /* lg:px-8 */
	}
}

.zpmc *,
.zpmc *::before,
.zpmc *::after {
	box-sizing: border-box;
}

/* Card ------------------------------------------------------------------- */
.zpmc__card {
	padding: 2rem; /* p-8 */
	background: #fff;
	border: 4px solid var(--zpmc-border-card);
	border-radius: 2rem; /* rounded-[2rem] */
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
	text-align: center;
}

@media (min-width: 768px) {
	.zpmc__card {
		padding: 3rem; /* md:p-12 */
	}
}

.zpmc__icon {
	margin-bottom: 1.5rem; /* mb-6 */
	font-size: 3rem; /* text-5xl */
	line-height: 1;
}

/* h2  ->  text-3xl md:text-4xl font-display font-bold text-zp-darkblue mb-4 */
.zpmc__title {
	margin: 0 0 1rem;
	font-family: var(--zpmc-font-display);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 2.25rem;
	color: var(--zpmc-heading);
}

@media (min-width: 768px) {
	.zpmc__title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

/* p  ->  text-lg text-slate-600 font-medium mb-8 leading-relaxed */
.zpmc__desc {
	margin: 0 0 2rem;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.625;
	color: var(--zpmc-text);
}

.zpmc__admin-hint {
	margin: 0 0 1.25rem;
	padding: 0.6rem 0.9rem;
	border-radius: 10px;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	font-size: 0.85rem;
	color: #92400e;
}

/* Form  ->  space-y-3 (0.75rem between rows) */
.zpmc__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-align: left;
}

.zpmc__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem; /* gap-3 */
}

@media (min-width: 640px) {
	.zpmc__row {
		grid-template-columns: 1fr 1fr;
	}
}

.zpmc__field {
	position: relative;
	margin: 0;
}

/* Lucide icon inside the field  ->  absolute left-4 top-1/2 -translate-y-1/2
 * w-5 h-5 text-slate-400 */
.zpmc__field-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	color: var(--zpmc-icon);
	pointer-events: none;
}

.zpmc__hp,
.zpmc .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Inputs  ->  w-full pl-12 pr-5 py-4 rounded-full border-4 border-slate-200
 *             text-base font-medium ; focus: border-<accent>, no ring */
.zpmc__field input {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 1rem 1.25rem 1rem 3rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5rem;
	color: var(--zpmc-body);
	background: #fff;
	border: 4px solid var(--zpmc-border);
	border-radius: 999px;
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease;
}

.zpmc__field input::placeholder {
	color: var(--zpmc-icon);
	font-weight: 500;
	opacity: 1;
}

.zpmc__field input:focus {
	outline: none;
	box-shadow: none;
	border-color: var(--zpmc-accent);
}

/* Button  ->  w-full font-display font-bold py-4 px-8 rounded-full text-base
 *             bg-<accent> shadow-[0_6px_0_0_<shadow>]
 *             hover:bg-<hover> hover:shadow-[0_2px_0_0_<shadow>] hover:translate-y-[4px]
 *             active:shadow-none active:translate-y-[6px] disabled:opacity-70 */
.zpmc__submit {
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 1rem 2rem;
	border: 0;
	cursor: pointer;
	font-family: var(--zpmc-font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5rem;
	text-align: center;
	color: var(--zpmc-accent-contrast);
	background: var(--zpmc-accent);
	border-radius: 999px;
	box-shadow: 0 6px 0 0 var(--zpmc-accent-shadow);
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.zpmc__submit:hover,
.zpmc__submit:focus,
.zpmc__submit:active {
	color: var(--zpmc-accent-contrast);
}

.zpmc__submit:hover {
	background: var(--zpmc-accent-hover);
	box-shadow: 0 2px 0 0 var(--zpmc-accent-shadow);
	transform: translateY(4px);
}

.zpmc__submit:active {
	box-shadow: none;
	transform: translateY(6px);
}

.zpmc__submit:focus-visible {
	outline: 3px solid var(--zpmc-heading);
	outline-offset: 3px;
}

.zpmc__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
	box-shadow: 0 6px 0 0 var(--zpmc-accent-shadow);
	background: var(--zpmc-accent);
}

.zpmc__form.is-busy .zpmc__submit {
	pointer-events: none;
	opacity: 0.75;
}

/* Message  ->  text-sm font-bold ; slate-500 while sending, zp-green ok,
 * zp-red on error */
.zpmc__msg {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--zpmc-muted);
}

.zpmc__msg[hidden] {
	display: none;
}

.zpmc__msg.is-ok {
	color: var(--zpmc-ok);
}

.zpmc__msg.is-error {
	color: var(--zpmc-danger);
}

@media (prefers-reduced-motion: reduce) {
	.zpmc__submit,
	.zpmc__field input {
		transition: none;
	}

	.zpmc__submit:hover,
	.zpmc__submit:active {
		transform: none;
	}
}