/**
 * Contact Form 7 forms: stacked bold labels, full-width fields with a sand border and a
 * bronze focus ring, a native select with a drawn chevron, and the theme's pill button.
 * Loaded only when a form renders (snathp_enqueue_form()).
 */

.wpcf7-form p {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.wpcf7-form label {
	display: block;
	margin-bottom: 5px;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

/* The form template puts some fields on the line after their label: CF7 turns that
   line break into a <br>, which would add a blank line above the field. */
.wpcf7-form p > br {
	display: none;
}

.wpcf7-form input:is([type="text"], [type="email"], [type="tel"]),
.wpcf7-form select,
.wpcf7-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 12px 13px;
	border: 1px solid #e0d8c8;
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
	color: #333;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7-form textarea {
	height: 316px;
	resize: vertical;
}

.wpcf7-form select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23644c19' stroke-width='1.5'/%3E%3C/svg%3E");
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	appearance: none;
}

.wpcf7-form :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.wpcf7-form ::placeholder {
	color: #999;
	opacity: 1;
}

/* The submit button takes the look of the theme buttons (theme.json "button" element). */
.wpcf7-form input.wpcf7-submit {
	padding: 10px 36px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 99px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	cursor: pointer;
}

.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form input.wpcf7-submit:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: var(--wp--preset--color--highlight);
	font-size: var(--wp--preset--font-size--small);
}