/*
 * Mailing list signup form.
 *
 * Deliberately minimal. Colour and type come from the active theme's
 * theme.json presets where available, with fallbacks so the form stays
 * legible under any theme. Themes style it further in their own CSS.
 */

.groundrules-signup__field,
.groundrules-signup__consent {
	margin-block: 1rem;
}

.groundrules-signup__field label {
	display: block;
	margin-bottom: 0.35em;
}

.groundrules-signup__field input[type="email"] {
	width: 100%;
	max-width: 24rem;
	padding: 0.5em 0.6em;
	border: 1px solid var(--wp--preset--color--rule, #767676);
	background: var(--wp--preset--color--background, #fff);
	color: inherit;
}

/*
 * Checkbox and its label sit on one line, with the label able to wrap
 * without sliding under the control.
 */
.groundrules-signup__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	max-width: 34rem;
}

.groundrules-signup__consent input {
	margin-top: 0.25em;
	flex: 0 0 auto;
}

.groundrules-signup__privacy {
	font-size: 0.9em;
}

/* The wording shown when the checkbox is filtered off — submission itself
   is the consenting act, but the statement stays in front of the visitor. */
.groundrules-signup__consent-note {
	margin-block: 1rem;
	max-width: 34rem;
	font-size: 0.9em;
}

.groundrules-signup__submit {
	padding: 0.5em 1.2em;
	border: 1px solid currentColor;
	background: var(--wp--preset--color--foreground, #1a1a1a);
	color: var(--wp--preset--color--background, #fff);
	cursor: pointer;
}

/* The status region only occupies space once it has something to say. */
.groundrules-signup__status:empty {
	display: none;
}

.groundrules-signup__status {
	margin-block: 1rem;
	padding: 0.75em 1em;
	border-inline-start: 3px solid var(--wp--preset--color--accent, #8a5a2b);
}

/* Honeypot: away from sighted users, and out of the tab order. */
.groundrules-signup__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.groundrules-signup :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #8a5a2b);
	outline-offset: 2px;
}