/**
 * BoltPress Forms — front end.
 *
 * Decorative rules sit inside :where() (zero specificity) so any theme rule
 * wins. Restyle with --boltpress-form-* variables (a "form" token group emits
 * them at :root) or with one rule on any ancestor. Only behaviour that must
 * hold regardless of the theme keeps normal specificity: [hidden], the
 * honeypot, visually hidden text, focus rings and the busy state.
 *
 * @package BoltPress_Helper
 * @since   1.4.0
 */

:where(.boltpress-form-wrap) {
	/* A definite width: shrink-to-fit parents (Row/Stack blocks, floats) must not size it to its content. */
	width: 100%;
	scroll-margin-top: var(--boltpress-form-scroll-margin, 6rem);
}

:where(.boltpress-form) {
	--_bpf-font: var(--boltpress-form-font, var(--boltpress-typography-font-family-body, var(--boltpress-typography-font-family-primary, inherit)));
	--_bpf-text: var(--boltpress-form-text, var(--boltpress-colors-text, currentColor));
	--_bpf-label: var(--boltpress-form-label-color, var(--_bpf-text));
	--_bpf-bg: var(--boltpress-form-field-bg, var(--boltpress-colors-background, #fff));
	/* Not the decorative --boltpress-colors-border: field boundaries need 3:1 (WCAG 1.4.11). */
	--_bpf-border: var(--boltpress-form-border, #8c8f94);
	--_bpf-radius: var(--boltpress-form-radius, var(--boltpress-border-radius-md, .375rem));
	--_bpf-focus: var(--boltpress-form-focus, var(--boltpress-colors-primary, #2271b1));
	--_bpf-error: var(--boltpress-form-error, var(--boltpress-colors-error, #c53030));
	--_bpf-success: var(--boltpress-form-success, var(--boltpress-colors-success, #2f855a));
	--_bpf-btn-bg: var(--boltpress-form-button-bg, var(--boltpress-colors-primary, #2271b1));
	--_bpf-btn-fg: var(--boltpress-form-button-color, #fff);
	--_bpf-btn-bg-hover: var(--boltpress-form-button-bg-hover, var(--_bpf-btn-bg));
	--_bpf-btn-width: var(--boltpress-form-button-width, auto);
	--_bpf-gap: var(--boltpress-form-gap, 1.25rem);
	--_bpf-pad: var(--boltpress-form-field-padding, .625rem .875rem);
	position: relative;
	margin: 0;
	color: var(--_bpf-text);
	font-family: var(--_bpf-font);
}

.boltpress-form [hidden] {
	display: none;
}

/*
 * Layout lives on the fields wrapper: WP Armour appends nodes to <form>.
 * Half-width fields pair up while two fit at 14rem each and stack below that.
 */
:where(.boltpress-form .boltpress-form__fields) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_bpf-gap);
	margin: 0 0 var(--_bpf-gap);
}

:where(.boltpress-form .boltpress-form__field) {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

:where(.boltpress-form .boltpress-form__field--half) {
	flex: 1 1 calc(50% - var(--_bpf-gap) / 2);
	min-width: min(100%, 14rem);
}

/* Focus and #fragment targets clear a sticky header. */
:where(.boltpress-form .boltpress-form__field, .boltpress-form .boltpress-form__summary, .boltpress-form .boltpress-form__success-title) {
	scroll-margin-top: var(--boltpress-form-scroll-margin, 6rem);
}

:where(.boltpress-form .boltpress-form__legend) {
	margin: 0 0 1rem;
	font-size: .875rem;
}

:where(.boltpress-form .boltpress-form__label) {
	display: block;
	margin: 0 0 .375rem;
	padding: 0;
	color: var(--_bpf-label);
	font-size: .9375rem;
	font-weight: var(--boltpress-typography-font-weight-semibold, 600);
	line-height: 1.4;
}

:where(.boltpress-form .boltpress-form__req) {
	color: var(--_bpf-error);
}

:where(.boltpress-form .boltpress-form__help) {
	margin: 0 0 .375rem;
	font-size: .875rem;
	line-height: 1.45;
}

:where(.boltpress-form .boltpress-form__input) {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: var(--_bpf-pad);
	font: inherit;
	font-family: var(--_bpf-font);
	font-size: max(1rem, 16px);
	line-height: 1.5;
	color: var(--_bpf-text);
	background-color: var(--_bpf-bg);
	border: 1px solid var(--_bpf-border);
	border-radius: var(--_bpf-radius);
}

:where(.boltpress-form .boltpress-form__textarea) {
	resize: vertical;
}

:where(.boltpress-form .boltpress-form__select) {
	appearance: none;
	padding-right: 2.5rem;
	background-image: var(--boltpress-form-select-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23646970' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"));
	background-repeat: no-repeat;
	background-position: right .875rem center;
	background-size: 1rem;
}

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

:where(.boltpress-form .boltpress-form__choice) {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	min-height: 2.75rem;
	padding: .5rem 0;
	box-sizing: border-box;
	line-height: 1.45;
	cursor: pointer;
}

:where(.boltpress-form .boltpress-form__choice-input) {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: .0625rem 0 0;
	accent-color: var(--_bpf-focus);
}

:where(.boltpress-form .boltpress-form__error) {
	margin: .375rem 0 0;
	color: var(--_bpf-error);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
}

:where(.boltpress-form .boltpress-form__submit) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: var(--_bpf-btn-width);
	min-height: 2.75rem;
	padding: .625rem 1.5rem;
	font: inherit;
	font-family: var(--_bpf-font);
	font-weight: var(--boltpress-typography-font-weight-semibold, 600);
	line-height: 1.25;
	color: var(--_bpf-btn-fg);
	background: var(--_bpf-btn-bg);
	border: 1px solid transparent;
	border-radius: var(--_bpf-radius);
	cursor: pointer;
}

:where(.boltpress-form .boltpress-form__submit:hover) {
	background: var(--_bpf-btn-bg-hover);
}

/* Focus rings keep normal specificity so a theme's `input:focus{outline:0}` cannot remove them. */
.boltpress-form .boltpress-form__input:focus-visible,
.boltpress-form .boltpress-form__choice-input:focus-visible,
.boltpress-form .boltpress-form__submit:focus-visible,
.boltpress-form .boltpress-form__summary a:focus-visible {
	outline: 2px solid var(--_bpf-focus);
	outline-offset: 2px;
}

:where(.boltpress-form .boltpress-form__input:focus-visible) {
	border-color: var(--_bpf-focus);
}

.boltpress-form .boltpress-form__submit[aria-disabled="true"] {
	cursor: progress;
}

.boltpress-form .boltpress-form__submit.is-busy::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
}

:where(.boltpress-form .boltpress-form__summary, .boltpress-form .boltpress-form__success, .boltpress-form .boltpress-form__noscript) {
	margin: 0 0 var(--_bpf-gap);
	padding: 1rem 1.25rem;
	color: var(--_bpf-text);
	border-left: 4px solid var(--_bpf-error);
	background: rgba(197, 48, 48, .06);
	background: color-mix(in srgb, var(--_bpf-error) 7%, var(--_bpf-bg));
}

:where(.boltpress-form .boltpress-form__summary:focus) {
	outline: 2px solid var(--_bpf-error);
	outline-offset: 2px;
}

:where(.boltpress-form .boltpress-form__summary-title, .boltpress-form .boltpress-form__success-title) {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
}

:where(.boltpress-form .boltpress-form__summary-list) {
	margin: .5rem 0 0;
	padding-left: 1.25rem;
}

:where(.boltpress-form .boltpress-form__summary-list a) {
	color: var(--_bpf-error);
	font-weight: 600;
	text-decoration: underline;
}

:where(.boltpress-form .boltpress-form__success) {
	border-left-color: var(--_bpf-success);
	background: rgba(47, 133, 90, .08);
	background: color-mix(in srgb, var(--_bpf-success) 10%, var(--_bpf-bg));
}

:where(.boltpress-form .boltpress-form__status) {
	margin: .75rem 0 0;
	font-size: .9375rem;
}

:where(.boltpress-form .boltpress-form__status:empty) {
	margin: 0;
}

/*
 * Visually hidden, not display:none: bots skip fields they can tell are hidden
 * (honeypot), and screen readers must still read the text (__sr).
 */
.boltpress-form .boltpress-form__hp,
.boltpress-form .boltpress-form__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: no-preference) {
	:where(.boltpress-form .boltpress-form__input) {
		transition: border-color .15s ease;
	}

	:where(.boltpress-form .boltpress-form__submit) {
		transition: background-color .15s ease, transform .15s ease;
	}

	:where(.boltpress-form .boltpress-form__submit:hover:not([aria-disabled="true"])) {
		transform: translateY(-1px);
	}

	.boltpress-form .boltpress-form__submit.is-busy::after {
		animation: boltpress-form-spin .7s linear infinite;
	}
}

@keyframes boltpress-form-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (forced-colors: active) {
	:where(.boltpress-form .boltpress-form__select) {
		appearance: auto;
		padding-right: .875rem;
		background-image: none;
	}

	:where(.boltpress-form .boltpress-form__input[aria-invalid="true"]) {
		border-width: 2px;
	}

	:where(.boltpress-form .boltpress-form__submit) {
		border-color: ButtonText;
	}

	:where(.boltpress-form .boltpress-form__summary, .boltpress-form .boltpress-form__success, .boltpress-form .boltpress-form__noscript) {
		border: 1px solid CanvasText;
		border-left-width: 4px;
	}
}