/*
 * Styling for the Mailchimp embedded signup form, written against the cnps theme's own
 * tokens so the form belongs to the page rather than sitting on it.
 *
 * This REPLACES Mailchimp's classic-061523.css, which is no longer loaded. That stylesheet
 * sets its own Helvetica stack, its own spacing and its own controls, and overriding it
 * piecemeal left more of it showing than not. Everything the embed needs is below,
 * including the states mc-validate.js applies at runtime (.mce_inline_error, #mce-responses).
 *
 * Every colour, face and radius is a var(--wp--preset--*) that theme.json already defines,
 * so restyling the theme restyles the form with it.
 */

#mc_embed_signup {
	max-width: 38rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: clamp(1.25rem, 4vw, 1.75rem);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

/* The cnps/newsletter pattern supplies the section heading, so the one inside the embed
   would be a second heading saying the same thing. */
#mc_embed_signup h2 {
	display: none;
}

#mc_embed_signup form {
	margin: 0;
	padding: 0;
}

#mc_embed_signup_scroll {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* Email spans the full width; the two name fields pair up once there is room for them.
   Guarded on :has() so a browser without it simply keeps the single column. */
@supports selector(:has(*)) {
	@media (min-width: 34em) {
		#mc_embed_signup_scroll { grid-template-columns: 1fr 1fr; }
		#mc_embed_signup_scroll > .indicates-required,
		#mc_embed_signup_scroll > .mc-field-group:has(#mce-EMAIL),
		#mc_embed_signup_scroll > #mce-responses,
		#mc_embed_signup_scroll > .clear { grid-column: 1 / -1; }
	}
}

#mc_embed_signup .indicates-required {
	margin: 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

#mc_embed_signup .asterisk {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

#mc_embed_signup .mc-field-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-height: 0;
	padding: 0;
	width: auto;
}

/* Field labels borrow the .cnps-eyebrow treatment the theme uses for its section kickers,
   at a smaller size, so the form reads as the same hand as the rest of the page. */
#mc_embed_signup .mc-field-group label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

#mc_embed_signup .mc-field-group input[type="email"],
#mc_embed_signup .mc-field-group input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.72em 0.85em;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#mc_embed_signup .mc-field-group input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 0.7;
}

#mc_embed_signup .mc-field-group input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft);
}

/* Submit matches theme.json's button element exactly: same accent, radius, weight and
   padding as every other button on the site. */
#mc_embed_signup .clear {
	margin: 0;
}

#mc_embed_signup input[type="submit"],
#mc_embed_signup .button {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.72em 1.3em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	color: #1A1206;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#mc_embed_signup input[type="submit"]:hover,
#mc_embed_signup .button:hover {
	background: #9C6E17;
}

#mc_embed_signup input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Responses and validation. mc-validate.js reveals #mce-responses and injects
   .mce_inline_error nodes, so these states only ever appear at runtime. */
#mc_embed_signup #mce-responses {
	margin: 0;
	padding: 0;
	width: auto;
}

#mc_embed_signup .response {
	margin: 0;
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	font-size: 0.92rem;
}

#mc_embed_signup #mce-error-response {
	color: #7E2420;
	background: #FBEDEC;
	border: 1px solid #E7C4C1;
}

#mc_embed_signup #mce-success-response {
	color: #1E4A34;
	background: #EAF3EE;
	border: 1px solid #BFD9CB;
}

#mc_embed_signup div.mce_inline_error {
	margin: 0.35rem 0 0;
	padding: 0;
	font-size: 0.82rem;
	font-weight: 500;
	color: #9E2B25;
	background: transparent;
}

#mc_embed_signup input.mce_inline_error {
	border-color: #C8756F;
}

#mc_embed_signup input.mce_inline_error:focus {
	box-shadow: 0 0 0 3px #F3D9D7;
}

/*
 * Dark theme. Everything above is already token-driven and follows the palette on its own;
 * only these five literals have to be restated, because a validation message needs a tinted
 * ground and the theme has no red or green token to build one from.
 *
 * Both selectors are needed, and in this order: the media query catches visitors who never
 * touch the switch, the attribute catches those who did, and the :not() guard lets an
 * explicit light choice win on a dark operating system.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #mc_embed_signup #mce-error-response {
		color: #F2B5B0; background: #2A1614; border-color: #5A2B27;
	}
	:root:not([data-theme="light"]) #mc_embed_signup #mce-success-response {
		color: #A8D8BE; background: #12241B; border-color: #264935;
	}
	:root:not([data-theme="light"]) #mc_embed_signup div.mce_inline_error { color: #F0A9A3; }
	:root:not([data-theme="light"]) #mc_embed_signup input.mce_inline_error { border-color: #8C4640; }
	:root:not([data-theme="light"]) #mc_embed_signup input.mce_inline_error:focus { box-shadow: 0 0 0 3px #3A1D1A; }
}

:root[data-theme="dark"] #mc_embed_signup #mce-error-response {
	color: #F2B5B0; background: #2A1614; border-color: #5A2B27;
}
:root[data-theme="dark"] #mc_embed_signup #mce-success-response {
	color: #A8D8BE; background: #12241B; border-color: #264935;
}
:root[data-theme="dark"] #mc_embed_signup div.mce_inline_error { color: #F0A9A3; }
:root[data-theme="dark"] #mc_embed_signup input.mce_inline_error { border-color: #8C4640; }
:root[data-theme="dark"] #mc_embed_signup input.mce_inline_error:focus { box-shadow: 0 0 0 3px #3A1D1A; }