/**
 * DigialiTay Forms — frontend styles.
 *
 * Minimal CSS. The form uses Bootstrap 5 classes from the theme
 * for all layout and component styling. This file only handles
 * accent colour theming and things Bootstrap cannot do.
 */

/* --- Spacing and accent custom property --- */

.dgty-form {
	--form-accent: var(--colour-green, #148051);
	--form-hover: #454545;
}

/* --- Accent colour variants (brand palette) --- */

.dgty-form--green  { --form-accent: var(--colour-green, #148051); }
.dgty-form--blue   { --form-accent: var(--colour-blue, #007EA8); }
.dgty-form--teal   { --form-accent: var(--colour-teal, #25818D); }
.dgty-form--red    { --form-accent: var(--colour-red, #cf3721); }
.dgty-form--purple { --form-accent: var(--colour-purple, #8b5399); }

/* --- Submit button — matches site-button-link convention --- */

.dgty-form .dgty-form-submit {
	color: #fff;
	background-color: var(--form-accent);
	border-color: var(--form-accent);
}

.dgty-form .dgty-form-submit:hover,
.dgty-form .dgty-form-submit:focus {
	color: #fff;
	background-color: var(--form-hover);
	border-color: var(--form-hover);
}

.dgty-form .dgty-form-submit:focus-visible {
	outline: 3px solid var(--form-accent);
	outline-offset: 2px;
}

/* --- Form control focus — must match digialitay.css specificity --- */

.dgty-form input[type=text]:focus,
.dgty-form input[type=email]:focus,
.dgty-form input[type=tel]:focus,
.dgty-form textarea:focus {
	border-color: var(--form-accent);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--form-accent) 25%, transparent);
}

/* --- Checkbox — must match digialitay.css specificity --- */

.dgty-form input[type=checkbox]:focus {
	border-color: var(--form-accent);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--form-accent) 25%, transparent);
}

.dgty-form input[type=checkbox]:checked {
	background-color: var(--form-accent);
	border-color: var(--form-accent);
}

/* --- Field validation errors --- */

.dgty-form-error {
	display: block;
	width: 100%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 0.875em;
	color: #b91c1c;
}

.dgty-form .form-control.is-invalid,
.dgty-form input[type=text].is-invalid,
.dgty-form input[type=email].is-invalid,
.dgty-form input[type=tel].is-invalid,
.dgty-form textarea.is-invalid {
	border-color: var(--bs-danger, #ff0000);
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb, 255, 0, 0), 0.25);
}

.dgty-form input[type=checkbox].is-invalid {
	border-color: var(--bs-danger, #ff0000);
}

/* --- Honeypot field — hidden from real users, visible to bots --- */

.dgty-forms-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Required field indicator --- */

.dgty-form-required {
	color: #b91c1c;
}