/**
 * signup: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- Email sign-up --------------------------------------------------
 *
 * Two shapes from one block. The full form is a page in its own right — ten
 * lists, names, consent — and the inline one is a single line dropped on a
 * ministry page: address, button, done. They share everything but their
 * layout, which is the only thing that should differ.
 * -------------------------------------------------------------------------- */

.cong-signup {
	container-type: inline-size;
}

.cong-signup__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
}

.cong-signup__lede {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-muted);
}

.cong-signup__said {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--lime);
	border-radius: var(--wp--custom--radius--sm, 6px);
	background: var(--wp--preset--color--surface);
}

.cong-signup__said--bad { border-inline-start-color: var(--wp--preset--color--coral); }

.cong-signup__form { margin-block-start: var(--wp--preset--spacing--30); }

/* The honeypot. Off-screen rather than display:none, because some robots
   skip what is hidden and a real person never reaches it either way. */
.cong-signup__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cong-signup__fields {
	display: grid;
	/* minmax(0, 1fr): a long label must wrap, not widen the column. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.cong-signup__field { margin: 0; }
.cong-signup__field--wide { grid-column: 1 / -1; }

.cong-signup__field label,
.cong-signup__lists legend {
	display: block;
	margin-block-end: 0.3rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.cong-signup__required { color: var(--wp--preset--color--coral); }

.cong-signup__field input {
	inline-size: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--sky-mid);
	border-radius: var(--wp--custom--radius--sm, 6px);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
}

.cong-signup__field input:focus-visible {
	outline: 2px solid var(--wp--preset--color--leaf);
	outline-offset: 1px;
}

.cong-signup__lists {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	border: 0;
}

.cong-signup__lists legend { padding: 0; }

/*
 * Each list a card the whole of which is the tap target: a finger aims at a
 * line, not at a 13px box at the start of it. Two or three to a row where
 * there is room, one on a phone.
 */
.cong-signup__lists {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.6rem;
}

.cong-signup__lists legend {
	grid-column: 1 / -1;
	margin-block-end: 0.5rem;
}

.cong-signup__list {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	min-block-size: 3.5rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--wp--preset--color--sky-mid, #c8dbe6);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: var(--wp--preset--color--base, #fff);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.cong-signup__list:hover {
	border-color: var(--wp--preset--color--navy, #164a6e);
}

.cong-signup__list:has(input:checked) {
	border-color: var(--wp--preset--color--navy, #164a6e);
	background: var(--wp--preset--color--sky-soft, #eaf6fb);
}

.cong-signup__list:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--leaf);
	outline-offset: 2px;
}

.cong-signup__list input,
.cong-signup__consent input {
	flex: none;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	margin: 0;
	accent-color: var(--wp--preset--color--navy, #164a6e);
	cursor: pointer;
}

.cong-signup__note {
	display: block;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
}

.cong-signup__consent {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	min-block-size: 3rem;
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	cursor: pointer;
}

.cong-signup__go { margin: var(--wp--preset--spacing--40) 0 0; }

/* ---- The one-line version ---- */

.cong-signup--inline {
	/*
	 * Room above and below by default. Placed straight after a tinted band,
	 * the box otherwise sat on a strip of white exactly its own height,
	 * touching the band above and the one below. A margin set on the block
	 * itself still wins.
	 */
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	background: var(--wp--preset--color--surface);
}

.cong-signup--inline .cong-signup__heading { font-size: var(--wp--preset--font-size--lg); }

/* As specific as the designed page's "no gap between sections" rule, and
   later, so the room above the box survives it. */
.wp-block-post-content > .cong-signup,
.wp-block-post-content > * + .cong-signup {
	margin-block: var(--wp--preset--spacing--60);
}

/*
 * The grid is on the form, not on the fields.
 *
 * The button is a sibling of the fields with the consent tick between them,
 * so laying out the fields alone could never put the address and the button
 * on one line. Making the form the grid places all three.
 */
.cong-signup--inline .cong-signup__form {
	display: grid;
	/*
	 * Named areas, not bare columns. In source order the consent tick sits
	 * between the address and the button, so auto-placement put the consent
	 * across row two and bumped the button down to row three — beside
	 * nothing. Naming the cells puts each where it belongs whatever the
	 * markup order.
	 */
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"fields  go"
		"consent consent";
	align-items: end;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
}

.cong-signup--inline .cong-signup__fields { grid-area: fields; }
.cong-signup--inline .cong-signup__go { grid-area: go; margin: 0; }
.cong-signup--inline .cong-signup__consent { grid-area: consent; margin-block-start: 0; }

.cong-signup--inline .cong-signup__consent {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xs);
}

@container (max-width: 30rem) {
	.cong-signup__fields,
	.cong-signup--inline .cong-signup__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.cong-signup--inline .cong-signup__form {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "fields" "go" "consent";
	}
}

/* The privacy policy and terms, small, under the agreement they belong to. */
.cong-signup__policies {
	display: block;
	margin-block-start: 0.25em;
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
}

.cong-signup__policies a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}