/**
 * ASAN Farm Map — public submission form.
 *
 * Scoped under .asan-fm-submit and deliberately low-specificity so a host theme
 * can restyle without fighting !important. The tokens mirror the directory's so
 * the two components read as one plugin, but they are redeclared rather than
 * inherited: the form and the directory are not guaranteed to appear together.
 */

.asan-fm-submit {
	--asan-fm-accent: #1a6b3c;
	--asan-fm-accent-contrast: #ffffff;
	--asan-fm-border: #d6d8da;
	--asan-fm-muted: #55595c;
	--asan-fm-bg: #ffffff;
	--asan-fm-bg-alt: #f6f7f7;
	--asan-fm-text: #1d2327;
	/* 5.9:1 on white. Error text is the one string on the page a user must be
	   able to read, so it does not inherit the theme's red. */
	--asan-fm-error: #b32d2e;
	--asan-fm-error-bg: #fcf0f1;
	--asan-fm-success-bg: #edf7ed;
	--asan-fm-radius: 6px;

	max-width: 46rem;
	color: var( --asan-fm-text );
	font-size: 16px;
	line-height: 1.5;
}

.asan-fm-submit *,
.asan-fm-submit *::before,
.asan-fm-submit *::after {
	box-sizing: border-box;
}

.asan-fm-submit [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- headings */

.asan-fm-submit-title {
	margin: 0 0 0.5rem;
}

.asan-fm-submit-intro {
	margin: 0 0 1.5rem;
	color: var( --asan-fm-muted );
}

/* ------------------------------------------------------------------ notice */

.asan-fm-submit-notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var( --asan-fm-error );
	border-left-width: 4px;
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-error-bg );
}

.asan-fm-submit-notice p {
	margin: 0;
	font-weight: 600;
}

.asan-fm-submit-notice ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.asan-fm-submit-notice a {
	color: var( --asan-fm-error );
}

/* A focus ring on the summary matters: the script moves focus here after a
   failed submit, and a focused element with no visible indicator strands
   anyone who is not looking at the mouse pointer. */
.asan-fm-submit-notice:focus {
	outline: 2px solid var( --asan-fm-error );
	outline-offset: 2px;
}

.asan-fm-submit-success {
	padding: 1.5rem;
	border: 1px solid var( --asan-fm-accent );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-success-bg );
}

.asan-fm-submit-success h2 {
	margin-top: 0;
}

.asan-fm-submit-success p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- sections */

.asan-fm-submit-section {
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-bg );
}

.asan-fm-submit-section > legend {
	padding: 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
}

.asan-fm-submit-section-intro {
	margin: 0 0 1rem;
	color: var( --asan-fm-muted );
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ fields */

.asan-fm-field {
	display: block;
	margin: 0 0 1.25rem;
}

.asan-fm-field:last-child {
	margin-bottom: 0;
}

.asan-fm-field > label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.asan-fm-field input[type="text"],
.asan-fm-field input[type="email"],
.asan-fm-field input[type="url"],
.asan-fm-field input[type="tel"],
.asan-fm-field select,
.asan-fm-field textarea {
	display: block;
	width: 100%;
	padding: 0.5rem 0.625rem;
	border: 1px solid var( --asan-fm-border );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-bg );
	color: var( --asan-fm-text );
	font: inherit;
}

.asan-fm-field textarea {
	resize: vertical;
}

.asan-fm-field input:focus,
.asan-fm-field select:focus,
.asan-fm-field textarea:focus {
	outline: 2px solid var( --asan-fm-accent );
	outline-offset: 1px;
	border-color: var( --asan-fm-accent );
}

.asan-fm-required {
	color: var( --asan-fm-muted );
	font-weight: 400;
	font-size: 0.875rem;
}

.asan-fm-field-desc {
	display: block;
	margin-top: 0.25rem;
	color: var( --asan-fm-muted );
	font-size: 0.875rem;
}

.asan-fm-field-error {
	display: block;
	margin-top: 0.25rem;
	color: var( --asan-fm-error );
	font-size: 0.875rem;
	font-weight: 600;
}

.asan-fm-field--error input[type="text"],
.asan-fm-field--error input[type="email"],
.asan-fm-field--error input[type="url"],
.asan-fm-field--error input[type="tel"],
.asan-fm-field--error select,
.asan-fm-field--error textarea {
	border-color: var( --asan-fm-error );
	/* Colour is not the only signal: a second border weight keeps the error
	   legible to anyone who cannot distinguish the red. */
	border-width: 2px;
}

/* ------------------------------------------------------------ check groups */

.asan-fm-field--group {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.asan-fm-field--group > legend {
	margin-bottom: 0.25rem;
	padding: 0;
	font-weight: 600;
}

.asan-fm-checkbox-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 13rem, 1fr ) );
	gap: 0.375rem 1rem;
	margin-top: 0.5rem;
}

.asan-fm-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.25rem 0;
	font-weight: 400;
	cursor: pointer;
}

.asan-fm-choice input {
	/* Nudged down to sit on the first line's baseline rather than its top. */
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.asan-fm-field--check label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
}

.asan-fm-field--check input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------- honeypot */

/* Off-canvas rather than display:none. A bot that reads the stylesheet skips
   anything hidden outright, but will fill a field it believes is merely
   positioned. aria-hidden and tabindex="-1" keep it away from real users. */
.asan-fm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------- controls */

.asan-fm-submit-actions {
	margin: 0 0 1rem;
}

.asan-fm-submit-button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 1px solid var( --asan-fm-accent );
	border-radius: var( --asan-fm-radius );
	background: var( --asan-fm-accent );
	color: var( --asan-fm-accent-contrast );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.asan-fm-submit-button:hover {
	background: #14522e;
}

.asan-fm-submit-button:focus-visible {
	outline: 2px solid var( --asan-fm-text );
	outline-offset: 2px;
}

.asan-fm-submit-button[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.asan-fm-submit-smallprint {
	margin: 0;
	color: var( --asan-fm-muted );
	font-size: 0.875rem;
}

/* ----------------------------------------------------------------- mobile */

@media ( max-width: 480px ) {
	.asan-fm-submit-section {
		padding: 1rem;
	}

	.asan-fm-checkbox-grid {
		grid-template-columns: 1fr;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.asan-fm-submit * {
		transition: none !important;
		animation: none !important;
	}
}