/* Contact form styling, modelled on the shadcn/ui look (Input, Textarea, Button, Label, form messages):
   40px controls, 6px radius, 1px neutral border, 2px focus ring with an offset, muted hints, destructive text for
   errors. Plain CSS (no Tailwind/React); colours come from the site's own palette. Scoped to form.ui-form. */

form.ui-form {
	--ui-fg: #38247d;          /* site purple: text, focus ring, primary button */
	--ui-fg-hover: #2b1b61;
	--ui-border: #d4d4dc;
	--ui-muted: #595766;
	--ui-bg: #ffffff;
	--ui-ring: #38247d;
	--ui-bad: #b91c1c;
	--ui-bad-bg: #fef2f2;
	--ui-good: #166534;
	--ui-radius: 6px;
	font-family: inherit;
}

/* one stacked field: label above control */
form.ui-form {
	max-width: 480px;
}
form.ui-form .field {
	margin-top: 16px;
}
form.ui-form .field > label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* text-like controls */
form.ui-form input[type="text"],
form.ui-form input[type="tel"],
form.ui-form input[type="email"],
form.ui-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 40px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ui-fg);
	background: var(--ui-bg);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
form.ui-form textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
}
form.ui-form input::placeholder,
form.ui-form textarea::placeholder {
	color: var(--ui-muted);
}
form.ui-form input:focus-visible,
form.ui-form textarea:focus-visible {
	border-color: var(--ui-ring);
	box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-ring);
}
form.ui-form input[aria-invalid="true"],
form.ui-form textarea[aria-invalid="true"] {
	border-color: var(--ui-bad);
}
form.ui-form input[aria-invalid="true"]:focus-visible,
form.ui-form textarea[aria-invalid="true"]:focus-visible {
	box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-bad);
}

/* demo question: a bordered group, radios in the brand colour */
form.ui-form fieldset {
	margin: 0;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	padding: 8px 14px 10px;
}
form.ui-form legend {
	font-weight: 600;
	padding: 0 6px;
	font-size: 14px;
}
form.ui-form fieldset label {
	font-size: 14px;
	margin-right: 14px;
	cursor: pointer;
}
form.ui-form input[type="radio"] {
	accent-color: var(--ui-fg);
	margin-right: 4px;
	vertical-align: -1px;
}
form.ui-form input[type="radio"]:focus-visible {
	outline: 2px solid var(--ui-ring);
	outline-offset: 2px;
}

/* primary button */
form.ui-form input[type="submit"] {
	height: 40px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background: var(--ui-fg);
	border: 0;
	border-radius: var(--ui-radius);
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease;
}
form.ui-form input[type="submit"]:hover {
	background: var(--ui-fg-hover);
}
form.ui-form input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-ring);
}

/* server-side messages (field errors, captcha / mail notices): shadcn "form message" look */
form.ui-form .errorBox {
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.35;
	color: var(--ui-bad);
	background: var(--ui-bad-bg);
	border: 1px solid #fecaca;
	border-radius: var(--ui-radius);
}

/* live feedback added by js/contact-form.js */
form.ui-form .field-hint {
	min-height: 18px;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--ui-muted);
}
form.ui-form .field-hint.is-valid {
	color: var(--ui-good);
}
form.ui-form .field-hint.is-invalid {
	color: var(--ui-bad);
}
form.ui-form .field-hint:empty {
	min-height: 0;
	margin-top: 0;
}