/**
 * Just Vege Catering – contact form (1.6.0). Uses the theme's colours when present.
 */

.jvc-cf {
	--_black: var(--jv-black, #17191b);
	--_white: var(--jv-white, #fff);
	--_green: var(--jv-green, #84dc31);
	--_green-ink: var(--jv-green-ink, #3d6a0c);
	--_silver: var(--jv-silver, #c7c9cc);
	--_muted: var(--jv-muted, #50565c);
	--_error: var(--jv-error, #b42318);
	--_error-bg: var(--jv-error-bg, #fef3f2);
	color: var(--_black);
}

.jvc-cf:focus {
	outline: none;
}

.jvc-cf__title {
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
	line-height: 1.2;
}

.jvc-cf__intro {
	margin: 0 0 20px;
	color: var(--_muted);
}

.jvc-cf__form {
	display: grid;
	gap: 18px;
}

.jvc-cf__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

@media (min-width: 600px) {
	.jvc-cf__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.jvc-cf__field {
	display: grid;
	gap: 6px;
	align-content: start;
}

.jvc-cf__label {
	font-weight: 700;
}

.jvc-cf__req {
	color: var(--_error);
}

.jvc-cf__opt {
	color: var(--_muted);
	font-weight: 500;
}

.jvc-cf__input {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--_silver);
	border-radius: 10px;
	background: var(--_white);
	color: var(--_black);
	font: inherit;
	font-size: 1rem;
}

.jvc-cf__textarea {
	min-height: 150px;
	resize: vertical;
}

.jvc-cf__input:focus,
.jvc-cf__input:focus-visible {
	border-color: var(--_black);
	outline: 3px solid var(--_green);
	outline-offset: 1px;
}

.jvc-cf__input[aria-invalid="true"] {
	border-color: var(--_error);
}

.jvc-cf__error {
	margin: 0;
	color: var(--_error);
	font-size: 0.9375rem;
	font-weight: 600;
}

.jvc-cf__field--consent {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 6px 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.jvc-cf__field--consent input {
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--_black);
}

.jvc-cf__field--consent .jvc-cf__error {
	grid-column: 1 / -1;
}

.jvc-cf__link {
	color: var(--_black);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jvc-cf__link:hover {
	color: var(--_green-ink);
}

.jvc-cf__note {
	margin: -6px 0 0;
	color: var(--_muted);
	font-size: 0.875rem;
}

.jvc-cf__submit {
	justify-self: start;
	min-height: 52px;
	padding: 14px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--_green);
	color: var(--_black);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.jvc-cf__submit:hover {
	background: var(--jv-green-hover, #74c825);
}

.jvc-cf__submit:active {
	transform: scale(0.97);
}

.jvc-cf__submit:focus-visible {
	outline: 3px solid var(--_black);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.jvc-cf__submit {
		justify-self: stretch;
	}
}

/* Hidden field for bots. */
.jvc-cf__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.jvc-cf__errors {
	margin-bottom: 18px;
	padding: 14px 18px;
	border: 1px solid #fecdca;
	border-radius: 10px;
	background: var(--_error-bg);
	color: var(--_error);
}

.jvc-cf__errors-title {
	margin: 0 0 6px;
	font-weight: 700;
}

.jvc-cf__errors ul {
	margin: 0;
	padding-left: 18px;
}

.jvc-cf__errors a {
	color: inherit;
}

.jvc-cf__sent {
	padding: 22px 24px;
	border-left: 4px solid var(--_green);
	border-radius: 10px;
	background: var(--jv-green-tint, #eef9e3);
}

.jvc-cf__sent p {
	margin: 8px 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.jvc-cf__submit {
		transition: none;
	}
}