/* alloway-forms front-end: Bold-system form styling. Reads theme
   presets with plain fallbacks so the plugin renders sanely even
   outside the Bold theme (stable-core-APIs doctrine). */

.af-form {
	max-width: 640px;
}

.af-form__notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 3px solid var(--wp--preset--color--primary, #fbd64a);
	background: var(--wp--preset--color--surface, #f6f4f1);
	font-weight: 600;
}

.af-form__notice--err {
	border-left-color: #b3261e;
}

/* The success state stands alone (the confirmation replaces the form),
   so it carries enough presence to read as the page's answer. */
.af-form--done .af-form__notice--ok {
	margin: 0;
	padding: 24px 28px;
	font-size: 1.1rem;
	line-height: 1.5;
}

/* Newsletter: a single-row signup that must read on BOTH grounds it
   ships on: the dark homepage band and the gold insights box. The
   label inherits the surface's ink; the input stays a white field. */
.af-form--newsletter {
	max-width: none;
	margin-top: 16px;
	text-align: left; /* The gold insights box centers its copy; the form stays ranged left. */
}

.af-form--newsletter form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}

.af-form--newsletter .af-form__row {
	/* Wide enough that the email row never shares a line with a
	   trailing pill: pills complete their own row(s) first. */
	flex: 1 1 320px;
	margin: 0;
}

.af-form--newsletter .af-form__label {
	color: inherit;
}

.af-form--newsletter .af-form__actions {
	margin: 0;
}

/* Topic pills: real checkboxes styled as toggles. Checked = a white
   pill with dark ink, which reads as "selected" on BOTH grounds (the
   near-black homepage band and the gold insights box). */
.af-form--newsletter .af-form__row--check {
	flex: 0 0 auto;
	margin: 0 0 4px;
}

.af-form__pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1.5px solid currentcolor;
	border-radius: 3px;
	font-family: var(
		--wp--preset--font-family--heading,
		"Roboto Condensed",
		sans-serif
	);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	user-select: none;
}

.af-form__pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.af-form__pill:has(input:checked) {
	background: #fff;
	border-color: #fff;
	color: var(--bold-ink, #1c1917);
	font-weight: 700;
}

.af-form__pill:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary, #fbd64a);
	outline-offset: 2px;
}

/* The withheld-state note (block-owned copy; the old per-surface note
   classes retired with the pattern swap). */
.alloway-newsletter__note {
	margin: 12px 0 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

.af-form__row {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.af-form__label {
	font-family: var(
		--wp--preset--font-family--heading,
		"Roboto Condensed",
		sans-serif
	);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.af-form__req {
	color: #b3261e;
}

.af-form__input {
	padding: 12px 14px;
	border: 1.5px solid var(--wp--preset--color--border, #d8d2c9);
	border-radius: 3px;
	background: #fff;
	font: inherit;
	color: var(--wp--preset--color--contrast, #1c1917);
}

.af-form__input:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #fbd64a);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--contrast, #1c1917);
}

.af-form__actions {
	margin: 20px 0 0;
}

.af-form__submit {
	display: inline-block;
	padding: 14px 28px;
	border: 0;
	border-radius: 3px;
	background: var(--bold-dark, #1c1917);
	color: #fff;
	font-family: var(
		--wp--preset--font-family--heading,
		"Roboto Condensed",
		sans-serif
	);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.af-form__submit:hover,
.af-form__submit:focus-visible {
	background: var(--wp--preset--color--primary, #fbd64a);
	color: var(--bold-ink, #1c1917);
}

.af-form__submit:focus-visible {
	outline: 3px solid var(--bold-dark, #1c1917);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.af-form__submit {
		transition:
			background-color 160ms ease,
			color 160ms ease;
	}
}