/* ================================================================
   WILD MEADOWS — EMAIL CAPTURE
   Colours come from the site's foundation tokens (Additional CSS).
   Every var() carries a fallback so the popup still looks right if it
   is ever rendered on a page where the token block has not loaded.
   ================================================================ */

.wm-ec-root[hidden] { display: none; }

.wm-ec-root {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.wm-ec-overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, .55);
	animation: wm-ec-fade .25s ease;
}

.wm-ec-modal {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: var(--wm-cream, #FBF7EF);
	border: 1px solid var(--wm-tan, #E8DCC9);
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
	animation: wm-ec-rise .28s cubic-bezier(.16, .84, .44, 1);
}

.wm-ec-body { padding: clamp(1.5rem, 5vw, 2.25rem); }

.wm-ec-close {
	position: absolute;
	top: .4rem;
	right: .4rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--wm-mid-grey, #555);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.wm-ec-close:hover { background: rgba(0, 0, 0, .06); color: var(--wm-near-black, #1A1A1A); }

/* ---- shared form ---------------------------------------------- */

.wm-ec-heading {
	font-family: var(--wm-font-head, Georgia, serif);
	color: var(--wm-forest, #004B23);
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.25;
	margin: 0 0 .6rem;
}

.wm-ec-text {
	font-family: var(--wm-font-body, Arial, sans-serif);
	color: var(--wm-near-black, #1A1A1A);
	font-size: 15px;
	line-height: var(--wm-line-body, 1.7);
	margin: 0 0 1.15rem;
}

.wm-ec-row { display: grid; gap: .75rem; }

/* The label is kept in the markup for screen readers and hidden on
   screen; the placeholder carries it visually. Safe here because the
   form is one or two obvious fields — a placeholder disappearing on
   focus matters far more on a long form than on "Email address". */
.wm-ec-field label,
.wm-ec-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wm-ec-field input::placeholder {
	color: var(--wm-mid-grey, #555);
	opacity: 1;
}

.wm-ec-field input {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	font-family: var(--wm-font-body, Arial, sans-serif);
	/* 16px minimum stops iOS Safari zooming the page on focus. */
	font-size: 16px;
	color: var(--wm-near-black, #1A1A1A);
	background: var(--wm-white, #fff);
	border: 1px solid var(--wm-rule-grey, #CCC);
	border-radius: 6px;
}
.wm-ec-field input:focus {
	outline: 2px solid var(--wm-pasture, #1E7A3C);
	outline-offset: 1px;
	border-color: var(--wm-pasture, #1E7A3C);
}
.wm-ec-field input.wm-ec-invalid { border-color: var(--wm-error, #C0392B); }

/* Off-screen rather than display:none — bots look for the latter. */
.wm-ec-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wm-ec-error {
	font-family: var(--wm-font-body, Arial, sans-serif);
	font-size: 13px;
	color: var(--wm-error, #C0392B);
	margin: .7rem 0 0;
}
.wm-ec-error[hidden] { display: none; }

.wm-ec-submit {
	width: 100%;
	margin-top: 1rem;
	cursor: pointer;
}

/* Only styled here if the foundation .wm-btn rules are absent. */
.wm-ec-submit:not(.wm-btn) {
	padding: .8rem 1.25rem;
	font-family: var(--wm-font-body, Arial, sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--wm-white, #fff);
	background: var(--wm-bright, #36A200);
	border: 2px solid var(--wm-bright, #36A200);
	border-radius: 6px;
}

.wm-ec-submit[disabled] { opacity: .6; cursor: progress; }

.wm-ec-consent {
	font-family: var(--wm-font-body, Arial, sans-serif);
	font-size: 12px;
	line-height: 1.55;
	color: var(--wm-mid-grey, #555);
	margin: .85rem 0 0;
}

/* ---- success --------------------------------------------------- */

.wm-ec-success { text-align: center; padding: 1rem 0 .5rem; }
.wm-ec-success[hidden] { display: none; }

.wm-ec-success-mark {
	width: 3rem;
	height: 3rem;
	margin: 0 auto .9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wm-sage, #EAF0E3);
	border: 1px solid var(--wm-sage-border, #CBD9BF);
	color: var(--wm-forest, #004B23);
	font-size: 22px;
	font-weight: 700;
}

.wm-ec-success-text {
	font-family: var(--wm-font-head, Georgia, serif);
	font-size: 17px;
	line-height: 1.5;
	color: var(--wm-forest, #004B23);
	margin: 0;
}

/* ---- inline variant -------------------------------------------- */

.wm-ec-inline {
	background: var(--wm-sage, #EAF0E3);
	border: 1px solid var(--wm-sage-border, #CBD9BF);
	border-radius: 10px;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	margin: 1.5rem 0;
	/* Centred: the panel spans the content width, so left-aligned fields
	   leave a large empty right-hand side and the block reads as
	   unfinished rather than composed. */
	text-align: center;
}

/* Prose stays readable by being capped, not by being left-aligned. */
.wm-ec-inline .wm-ec-heading,
.wm-ec-inline .wm-ec-text,
.wm-ec-inline .wm-ec-consent {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* The field row is narrower than the panel and centred within it. */
.wm-ec-inline .wm-ec-row {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.wm-ec-inline .wm-ec-submit {
	width: auto;
	min-width: 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wm-ec-inline .wm-ec-error { text-align: center; }

@media (min-width: 620px) {
	/* Two columns only when there is a name field to fill the second. */
	.wm-ec-inline .wm-ec-row.wm-ec-row-two { grid-template-columns: 1fr 1.4fr; max-width: 560px; }
}

.wm-ec-inline-compact .wm-ec-text { display: none; }

/* ---- mobile ----------------------------------------------------- */

@media (max-width: 600px) {
	.wm-ec-root { padding: 0; align-items: flex-end; }
	.wm-ec-modal {
		max-width: none;
		border-radius: 12px 12px 0 0;
		border-bottom: 0;
		animation: wm-ec-sheet .3s cubic-bezier(.16, .84, .44, 1);
	}
}

/* ---- motion ------------------------------------------------------ */

@keyframes wm-ec-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-ec-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wm-ec-sheet { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.wm-ec-overlay,
	.wm-ec-modal { animation: none; }
}

/* ---- minimal variant -------------------------------------------
   For a sitewide footer. Centred, capped, one row.

   Built on flexbox rather than grid, and it resets the shared inline
   rules above rather than layering on top of them: the .wm-ec-inline
   two-column row at 620px was splitting a single-field row into
   1fr / 1.4fr, which is what left the field narrow with dead space
   beside it. Field and button are given the same explicit height so
   their edges line up exactly instead of relying on padding maths
   agreeing across two different elements. */

.wm-ec-inline-minimal {
	background: transparent;
	border: 0;
	border-radius: 0;
	max-width: 440px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.wm-ec-inline-minimal .wm-ec-heading {
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 .3rem;
}

.wm-ec-inline-minimal .wm-ec-text { display: none; }

.wm-ec-inline-minimal [data-wm-ec-fields] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	/* Horizontal gap sets the field-to-button spacing; the vertical one
	   is kept much tighter so the heading, form and fine print read as a
	   single block rather than three separate rows. */
	column-gap: .85rem;
	row-gap: .35rem;
}

/* Belt and braces against theme form styles: block themes commonly give
   inputs and paragraphs their own margins, which stack on top of the gap
   above and pull the fine print away from the form. */
.wm-ec-inline.wm-ec-inline-minimal .wm-ec-field,
.wm-ec-inline.wm-ec-inline-minimal .wm-ec-field input,
.wm-ec-inline.wm-ec-inline-minimal .wm-ec-row {
	margin: 0;
}

/* Full-width children sit on their own lines. */
.wm-ec-inline-minimal .wm-ec-heading,
.wm-ec-inline-minimal .wm-ec-error,
.wm-ec-inline-minimal .wm-ec-consent {
	flex: 0 0 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Reset the inherited two-column row: there is only one field here. */
.wm-ec-inline-minimal .wm-ec-row {
	display: block;
	flex: 1 1 210px;
	max-width: 260px;
	gap: 0;
}

/* Smaller than the page forms: this is a footer, not a call to action.
   The field keeps a 16px font regardless, because anything below that
   makes iOS Safari zoom the page when it is focused. */
.wm-ec-inline-minimal .wm-ec-field input,
.wm-ec-inline-minimal .wm-ec-submit {
	height: 40px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	line-height: normal;
}

.wm-ec-inline-minimal .wm-ec-field input {
	padding-left: .7rem;
	padding-right: .7rem;
}

.wm-ec-inline-minimal .wm-ec-submit {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding-left: 1.1rem;
	padding-right: 1.1rem;
	font-size: 14px;
	white-space: nowrap;
	/* Centre the label from the box rather than from a line-height the
	   theme's .wm-btn may define differently. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wm-ec-inline.wm-ec-inline-minimal .wm-ec-consent {
	font-size: 11px;
	line-height: 1.45;
	margin: 0 0 .8rem;
}

.wm-ec-inline-minimal .wm-ec-error {
	text-align: center;
	margin: 0;
}

.wm-ec-inline-minimal .wm-ec-success { padding: .35rem 0; }
.wm-ec-inline-minimal .wm-ec-success-mark { display: none; }
.wm-ec-inline-minimal .wm-ec-success-text { font-size: 15px; }

/* On a phone the two stack. The field is capped rather than run edge to
   edge, and the button sizes to its label instead of spanning the width:
   a full-bleed button reads as the main action on the page, which in a
   footer it is not. */
@media (max-width: 419px) {
	.wm-ec-inline-minimal { max-width: 300px; }
	.wm-ec-inline-minimal [data-wm-ec-fields] { column-gap: .6rem; row-gap: .35rem; }
	.wm-ec-inline-minimal .wm-ec-row { flex: 0 0 100%; max-width: none; }
	.wm-ec-inline-minimal .wm-ec-submit { flex: 0 0 auto; width: auto; }
	.wm-ec-inline-minimal .wm-ec-heading { font-size: 17px; margin: 0 0 .3rem; }
	.wm-ec-inline.wm-ec-inline-minimal .wm-ec-consent { margin: 0 0 .7rem; }
}