/*
 * Bright Path -- forms.
 *
 * OWNER: the forms track. Last shard in the cascade:
 * global-styles -> foundation -> bands -> posts -> forms.
 *
 * Every colour, radius, shadow and transition is a token. There is no hex in
 * this file: a hard-coded value here defeats the point of the token layer, and
 * the two error colours the design needs already exist as
 * --wp--custom--status--error / --error-bg.
 */

/* ---------------------------------------------------------------
 * 1. The form shell
 * --------------------------------------------------------------- */

.bp-form-wrap {
	max-width: var(--wp--custom--container--narrow);
	margin-inline: auto;
}

.form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.form__actions {
	margin-top: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------
 * 2. A field
 * --------------------------------------------------------------- */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.field__label,
.field__group > legend {
	font-weight: 600;
	color: var(--wp--custom--color--text);
	font-size: var(--wp--preset--font-size--small);
}

.field__required {
	color: var(--wp--custom--status--error);
}

.field__hint {
	margin: 0;
	color: var(--wp--custom--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}

.input,
.select,
.textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--text);
	background-color: var(--wp--custom--color--surface);
	border: 1px solid var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.textarea {
	resize: vertical;
	min-height: 6em;
	line-height: 1.6;
}

.select {
	appearance: none;
	padding-right: 2.4em;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.1em) 1.15em, calc(100% - 0.75em) 1.15em;
	background-size: 0.36em 0.36em, 0.36em 0.36em;
	background-repeat: no-repeat;
}

.input:hover,
.select:hover,
.textarea:hover {
	border-color: var(--wp--custom--color--border-hover);
}

/*
 * Focus is a visible ring, never `outline: none`. These forms are the site's
 * keyboard-heaviest surface and this is a disability services provider.
 */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.check__input:focus-visible + .check__mark,
.upload:focus-within {
	outline: 2px solid var(--wp--custom--color--focus);
	outline-offset: 2px;
	border-color: var(--wp--custom--color--focus);
}

/* ---------------------------------------------------------------
 * 3. Errors
 * --------------------------------------------------------------- */

.field__error {
	display: none;
	margin: 0;
	align-items: center;
	gap: 0.4em;
	color: var(--wp--custom--status--error);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}

/*
 * The error node is always in the DOM and is revealed by content, so screen
 * readers announce a change inside a node that already existed rather than the
 * arrival of a new one.
 */
.field--invalid .field__error,
.field__error.is-visible {
	display: flex;
}

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea,
[aria-invalid="true"].input,
[aria-invalid="true"].select,
[aria-invalid="true"].textarea {
	border-color: var(--wp--custom--status--error);
	background-color: var(--wp--custom--status--error-bg);
}

/* ---------------------------------------------------------------
 * 4. The error summary -- focusable, and focused
 * --------------------------------------------------------------- */

.form-summary {
	padding: var(--wp--preset--spacing--30);
	border: 2px solid var(--wp--custom--status--error);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--status--error-bg);
	color: var(--wp--custom--color--text);
}

.form-summary:focus-visible {
	outline: 2px solid var(--wp--custom--color--focus);
	outline-offset: 2px;
}

.form-summary__title {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-weight: 700;
}

.form-summary__list {
	margin: 0;
	padding-left: 1.2em;
}

.form-summary__list a {
	color: var(--wp--custom--status--error);
}

.form-summary--fatal .form-summary__title {
	margin: 0;
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * 5. Checkboxes and radios
 * --------------------------------------------------------------- */

.field__group {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7em;
	align-items: start;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--custom--color--text-body);
}

/* The native input stays in the accessibility tree; it is only visually
   replaced by .check__mark. clip-path rather than display:none, which would
   remove it from the tab order entirely. */
.check__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.check__mark {
	inline-size: 1.25em;
	block-size: 1.25em;
	margin-top: 0.15em;
	border: 1px solid var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--custom--color--surface);
	display: grid;
	place-items: center;
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

.check input[type="radio"] + .check__mark {
	border-radius: var(--wp--custom--radius--full);
}

.check__input:checked + .check__mark {
	background-color: var(--wp--custom--color--primary);
	border-color: var(--wp--custom--color--primary);
}

.check__input:checked + .check__mark::after {
	content: "";
	inline-size: 0.42em;
	block-size: 0.72em;
	border: solid var(--wp--preset--color--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-4%, -12%);
}

.check input[type="radio"]:checked + .check__mark::after {
	inline-size: 0.5em;
	block-size: 0.5em;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--white);
	transform: none;
}

/* ---------------------------------------------------------------
 * 6. Upload
 * --------------------------------------------------------------- */

.upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	border: 1px dashed var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--color--surface);
	cursor: pointer;
	transition: border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast);
}

.upload:hover,
.upload.is-dragover {
	border-color: var(--wp--custom--color--border-hover);
	background-color: var(--wp--custom--color--bg-soft);
}

.upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.upload__title {
	font-weight: 600;
	color: var(--wp--custom--color--text);
	font-size: var(--wp--preset--font-size--small);
}

.upload__hint {
	color: var(--wp--custom--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.upload__list {
	margin-top: 0.4em;
	color: var(--wp--custom--color--text-body);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---------------------------------------------------------------
 * 7. Success
 * --------------------------------------------------------------- */

.form-success {
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--custom--color--success-bg);
	box-shadow: var(--wp--custom--shadow--sm);
	text-align: center;
}

.form-success:focus-visible {
	outline: 2px solid var(--wp--custom--color--focus);
	outline-offset: 2px;
}

.form-success__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-3);
}

.form-success__body {
	margin: 0;
	color: var(--wp--custom--color--text-body);
}

/* ---------------------------------------------------------------
 * 8. The honeypot
 *
 * Off-canvas rather than display:none. It must not be announced, must not be
 * reachable by tab, and must still be a real field a naive bot will fill.
 * --------------------------------------------------------------- */

.bp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------
 * 9. The referral stepper
 * --------------------------------------------------------------- */

.stepper {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.stepper__progress-text {
	margin: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--custom--color--text-muted);
}

.stepper__bar {
	block-size: 6px;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--custom--color--border);
	overflow: hidden;
}

.stepper__fill {
	display: block;
	block-size: 100%;
	inline-size: 0%;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--custom--color--primary);
	transition: inline-size var(--wp--custom--transition--base);
}

.stepper__dots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stepper__dot {
	display: flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--custom--color--text-subtle);
}

.stepper__dot-mark {
	display: grid;
	place-items: center;
	inline-size: 1.7em;
	block-size: 1.7em;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--custom--color--border);
	color: var(--wp--custom--color--text-body);
	font-weight: 700;
}

.stepper__dot.is-current {
	color: var(--wp--custom--color--text);
	font-weight: 600;
}

.stepper__dot.is-current .stepper__dot-mark,
.stepper__dot.is-done .stepper__dot-mark {
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--preset--color--white);
}

/*
 * Steps. With JavaScript OFF every step is visible and the form is one long
 * page that still submits -- the no-JS path is a working form, not a broken
 * one. Only .bp-js hides the inactive steps, exactly as the reveal layer
 * scopes its opacity:0.
 */
.form-step {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.bp-js .form-step {
	display: none;
}

.bp-js .form-step.is-active {
	display: flex;
}

.form-step__head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-3);
}

.form-step__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

.form-step__nav-right {
	margin-left: auto;
}

/* ---------------------------------------------------------------
 * 10. Dependent fields
 * --------------------------------------------------------------- */

.bp-js .field[data-depends][hidden],
.field[data-depends][hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.input,
	.select,
	.textarea,
	.check__mark,
	.upload,
	.stepper__fill {
		transition: none;
	}
}