/**
 * DSBN Basic Form — public form styling.
 *
 * Built on the theme's global design tokens (css/design-tokens.css, already
 * on :root site-wide). The markup used to lean on Bootstrap classes
 * (form-control, row/col, btn, alert…) which stopped existing when Bootstrap
 * was removed from the theme (2026-07-15) — this replaces that with a real
 * dsbn-form component. The submit button reuses the theme's own .dsbn-btn
 * system (css/patterns.css), so it is not restyled here.
 */

.dsbn-form-wrapper {
	--dsbn-form-error: #b3261e;
	max-width: 46rem;
}

/* ---------- Layout ---------- */
.dsbn-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dsbn-space-md) var(--dsbn-space-sm);
}

@media (min-width: 40rem) {
	.dsbn-form__grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.dsbn-form__field {
	min-width: 0;
}

/* Full-width fields regardless of the 2-column setting. */
.dsbn-form__field--wide,
.dsbn-form__field--section,
.dsbn-form__field--divider,
.dsbn-form__field--checkbox {
	grid-column: 1 / -1;
}

/* ---------- Labels ---------- */
.dsbn-form__label {
	display: block;
	margin-bottom: var(--dsbn-space-2xs);
	font-family: var(--dsbn-font-body);
	font-size: 1rem;
	font-weight: var(--dsbn-fw-semibold);
	line-height: var(--dsbn-lh-heading);
	color: var(--dsbn-color-ink);
}

.dsbn-form__required {
	color: var(--dsbn-color-primary-bright);
}

/* ---------- Controls ---------- */
.dsbn-form input[type="text"],
.dsbn-form input[type="email"],
.dsbn-form input[type="tel"],
.dsbn-form input[type="date"],
.dsbn-form input[type="url"],
.dsbn-form input[type="number"],
.dsbn-form textarea,
.dsbn-form select {
	display: block;
	width: 100%;
	/* This theme has no universal box-sizing reset (see patterns.css ~L2037),
	   so without this the padding adds to width:100% and overflows the grid. */
	box-sizing: border-box;
	margin: 0;
	padding: 0.7rem 0.9rem;
	font-family: var(--dsbn-font-body);
	font-size: var(--dsbn-fs-body);
	line-height: var(--dsbn-lh-body);
	color: var(--dsbn-color-body);
	background-color: var(--dsbn-color-surface);
	border: 1px solid var(--dsbn-color-line);
	border-radius: var(--dsbn-radius-sm);
	box-shadow: none;
	transition: border-color var(--dsbn-transition), box-shadow var(--dsbn-transition);
	-webkit-appearance: none;
	appearance: none;
}

.dsbn-form textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Native select — down-chevron affordance (design-tokens' --dsbn-icon-chevron
   points right, so this is its own down-pointing variant in the same style). */
.dsbn-form select {
	padding-right: 2.5rem;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2306213E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1rem;
}

.dsbn-form input::placeholder,
.dsbn-form textarea::placeholder {
	color: var(--dsbn-color-muted);
	opacity: 1;
}

.dsbn-form input:focus-visible,
.dsbn-form textarea:focus-visible,
.dsbn-form select:focus-visible {
	outline: 3px solid var(--dsbn-color-accent-blue);
	outline-offset: 2px;
	border-color: var(--dsbn-color-accent-blue);
}

.dsbn-form [aria-invalid="true"] {
	border-color: var(--dsbn-form-error);
	box-shadow: inset 0 0 0 1px var(--dsbn-form-error);
}

/* ---------- Radio / checkbox ---------- */
.dsbn-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dsbn-space-sm);
}

.dsbn-form__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-size: var(--dsbn-fs-body);
	color: var(--dsbn-color-body);
}

.dsbn-form__choice input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--dsbn-color-accent-blue);
}

.dsbn-form__choice input:focus-visible {
	outline: 3px solid var(--dsbn-color-accent-blue);
	outline-offset: 2px;
}

.dsbn-form__field--checkbox .dsbn-form__choice {
	align-items: flex-start;
}

/* ---------- Section header + divider ---------- */
.dsbn-form__section {
	margin: var(--dsbn-space-xs) 0 0;
	font-family: var(--dsbn-font-body);
	font-size: var(--dsbn-fs-body-header-sm);
	font-weight: var(--dsbn-fw-semibold);
	line-height: var(--dsbn-lh-heading);
	color: var(--dsbn-color-ink);
}

.dsbn-form__divider {
	margin: var(--dsbn-space-xs) 0;
	border: 0;
	border-top: 1px solid var(--dsbn-color-line);
}

/* ---------- Submit ---------- */
.dsbn-form__actions {
	margin-top: var(--dsbn-space-lg);
}

/* .dsbn-btn base sizing comes from the theme (css/patterns.css). The colour
   variants there are scoped to `a.dsbn-btn--primary` / the block-button
   wrapper, so a real <button> submit needs its fill restated here — same
   token values as .dsbn-btn--primary. */
.dsbn-form__actions .dsbn-btn {
	font: inherit;
	font-weight: var(--dsbn-fw-medium);
}

.dsbn-form__actions .dsbn-btn--primary {
	background: var(--dsbn-btn-main);
	color: #fff;
}

.dsbn-form__actions .dsbn-btn--primary:hover {
	background: var(--dsbn-color-primary);
	color: #fff;
}

/* ---------- Notices ---------- */
.dsbn-form__notice {
	margin-bottom: var(--dsbn-space-md);
	padding: var(--dsbn-space-sm) var(--dsbn-space-md);
	border-radius: var(--dsbn-radius-sm);
	border-left: 4px solid var(--dsbn-color-line);
	background: var(--dsbn-color-surface-alt);
	color: var(--dsbn-color-body);
	font-size: var(--dsbn-fs-body);
	line-height: var(--dsbn-lh-body);
}

.dsbn-form__notice p {
	margin: 0.35rem 0 0;
}

.dsbn-form__notice--success {
	border-left-color: #1BAF7A;
	background: var(--dsbn-surface-mint);
}

.dsbn-form__notice--warning {
	border-left-color: var(--dsbn-color-accent);
	background: var(--dsbn-surface-butter);
}

.dsbn-form__notice--error {
	border-left-color: var(--dsbn-form-error);
	background: var(--dsbn-surface-pink);
}

/* ---------- Inline field errors ---------- */
.dsbn-form__error {
	display: block;
	margin-top: var(--dsbn-space-2xs);
	font-size: 0.9375rem;
	font-weight: var(--dsbn-fw-medium);
	color: var(--dsbn-form-error);
}