#contact-form {
	display: grid;
	gap: 1.5rem;
	grid-column: col-one / span-16;
	grid-template-columns: subgrid;
	max-width: var(--page-width);
	padding-block: var(--contact-form-padding-block, var(--space-2xl));
	width: 100%;
}

#contact-response-box ul {
	list-style-position: outside
}

#contact-response-box ul li {
	text-indent: unset;
}

#contact-form fieldset {
	border: none;
	display: grid;
	grid-column: col-one / span 16;
	grid-template-columns: repeat(16, 1fr);
	grid-template-rows: auto;
	gap: 1rem;
	width: 100%;
}

#contact-form p {
	grid-column: col-one / span 16;
	max-width: var(--page-text-max-width, 60rem);
}

#contact-form label:not(.checkbox) {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	font-weight: bold;
	gap: 0.75rem;
	grid-column: col-one / span 16;
	justify-content: space-between;
}


#contact-form label.checkbox,
#contact-form .button-bar {
	grid-column: col-one / span 16;
}

#contact-form label.checkbox {
	align-items: center;
	display: flex;
	flex-direction: row;
	font-weight: 400;
	gap: 0.75rem;
	justify-content: flex-start;
	width: 100%;
}

#contact-form input[type="checkbox"] {
	border-radius: var(--checkbox-border-radius, 5px);
	width: 2rem;
	height: 2rem;
}

#contact-form label:has(input:required) .field-label::after,
#contact-form label:has(textarea:required) .field-label::after {
	color: var(--contact-form-required-marker-foreground-color, red);
	content: " *";
}

#contact-form input,
#contact-form textarea {
	background-color: var(--form-input-background-color);
	border-radius: 20px;
	border: var(--form-input-border, 2px solid black);
	color: var(--form-input-foreground-color);
	font-weight: 400;
	height: 4rem;
	max-width: min(88svw, 48rem);
	padding-block: var(--contact-form-field-padding-block, var(--space-xs));
	padding-inline: var(--contact-form-field-padding-inline, var(--space-xs));
	width: min(100%, 34rem);
}

#contact-form textarea {
	height: 16rem;
	width: min(100%, 48rem);
}

#contact-form input:focus,
#contact-form input:hover,
#contact-form textarea:focus,
#contact-form textarea:hover {
	background-color: var(--form-input-background-color-hover);
	border-color: var(--form-input-border-color-hover);
	color: var(--form-input-foreground-color-hover);
}

#contact-form input:focus,
#contact-form textarea:focus {
	outline-offset: 3px;
	outline: var(--form-field-outline, 2px solid currentcolor);
}

#contact-form button {
	align-items: center;
	background-color: var(--contact-form-button-background-color);
	border-radius: 20px;
	border: var(--contact-form-button-border, 1px solid var(--color-black));
	color: var(--contact-form-button-foreground-color);
	display: flex;
	font-family: var(--metadata-font-family);
	font-style: italic;
	height: 4rem;
	justify-content: center;
	padding-inline: var(--contact-form-button-padding-inline, var(--space-l));
	text-transform: uppercase;
}

#contact-form button:focus,
#contact-form button:hover {
	background-color: var(--contact-form-button-background-color-hover, white);
	color: var(--contact-form-button-foreground-color-hover, black);
}

#contact-form button:focus {
	outline-offset: 3px;
	outline: var(--form-field-outline, 2px solid currentcolor);
}


.checkbox {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
	justify-content: flex-start;
}

.checkbox input[type="checkbox"] {
	appearance: none;
	border-radius: 0.15rem;
	border: 2px solid
		var(
			--checkbox-border-color,
			var(--color-mid-gray-light)
		);
	display: grid;
	font-family: inherit;
	height: 1.25rem;
	place-content: center;
	transform: translateY(-0.075em);
	max-width: 1.25rem;
	min-width: 1.25rem;
	width: 1.25rem;
}

.checkbox input[type="checkbox"]::before {
	background-color: var(
		--checkbox-background-color-before,
		var(--color-dark-gray-2)
	);
	box-shadow: inset 1rem 1rem var(--checkbox-check-color);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	content: "";
	height: var(--checkbox-check-height, 0.65em);
	transform-origin: bottom left;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	width: var(--checkbox-check-width, 0.65em);
}

.checkbox:focus-within input[type="checkbox"] {
	border-radius: 0.15rem;
	outline: 3px solid
		var(
			--checkbox-outline-color-focus,
			var(--color-green-shaded)
		);
	outline-offset: 0.15rem;
}

.checkbox input[type="checkbox"]:checked {
	background-color: var(
		--checkbox-background-color-checked,
		var(--color-light-gray-1)
	);
}

.checkbox input[type="checkbox"]:checked::before {
	background-color: var(
		--checkbox-background-color-checked-before,
		var(--color-dark-gray-2)
	);
	transform: scale(1);
}