/*
 * Contact Form 7 in the SANA look (palette B "Wild Water").
 * Scoped to forms rendered with html_class="sana-cf7", so other CF7 forms keep
 * the plugin defaults. Fields: white, 1px sand line, 10px radius, teal focus
 * ring. Button: the SANA amber button (Manrope 700, 16px, ink text, 10px radius).
 */
.sana-cf7 {
	--sana-cf7-ink: #0B262B;
	--sana-cf7-heading: #123F46;
	--sana-cf7-teal: #267D89;
	--sana-cf7-teal-text: #216D77;
	--sana-cf7-line: #D8CFBD;
	--sana-cf7-amber: #E3A64C;
	--sana-cf7-amber-hover: #C98B33;
	--sana-cf7-error: #A3341F;
	padding: 2.5rem;
	border: 1px solid var(--sana-cf7-line);
	border-radius: 10px;
	background: #fff;
	color: var(--sana-cf7-ink);
	font-family: "Manrope", sans-serif;
	display: flex;
	flex-direction: column;
}

/* CF7 inserts Turnstile at the top of the form; show it above the button. */
.sana-cf7 .wpcf7-turnstile {
	order: 1;
}

.sana-cf7 .sana-cf7__submit {
	order: 2;
}

.sana-cf7 .wpcf7-response-output {
	order: 3;
}

.sana-cf7 p {
	margin: 0 0 1.25rem;
}

.sana-cf7 br {
	display: none;
}

.sana-cf7__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

.sana-cf7 label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--sana-cf7-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.sana-cf7__req {
	color: var(--sana-cf7-teal-text);
}

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

.sana-cf7 input[type="text"],
.sana-cf7 input[type="email"],
.sana-cf7 input[type="tel"],
.sana-cf7 select,
.sana-cf7 textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0.8125rem 1rem;
	border: 1px solid var(--sana-cf7-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--sana-cf7-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.sana-cf7 textarea {
	min-height: 160px;
	resize: vertical;
}

.sana-cf7 ::placeholder {
	color: #587378;
	opacity: 1;
}

.sana-cf7 input:hover,
.sana-cf7 textarea:hover {
	border-color: var(--sana-cf7-teal);
}

.sana-cf7 input:focus,
.sana-cf7 textarea:focus {
	border-color: var(--sana-cf7-teal);
	outline: 2px solid var(--sana-cf7-teal);
	outline-offset: 0;
}

/* Turnstile widget, inserted by CF7 before the button. */
.sana-cf7 .wpcf7-turnstile {
	margin: 0 0 1.25rem;
}

.sana-cf7__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0 !important;
}

.sana-cf7 .wpcf7-submit {
	min-height: 52px;
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: 10px;
	background: var(--sana-cf7-amber);
	color: var(--sana-cf7-ink);
	font-family: "Manrope", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.sana-cf7 .wpcf7-submit:hover {
	background: var(--sana-cf7-amber-hover);
}

.sana-cf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--sana-cf7-heading);
	outline-offset: 3px;
}

.sana-cf7 .wpcf7-spinner {
	margin: 0;
}

/* Validation. */
.sana-cf7 .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--sana-cf7-error);
}

.sana-cf7 .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	color: var(--sana-cf7-error);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Response box under the form. */
.sana-cf7 .wpcf7-response-output {
	margin: 1.25rem 0 0 !important;
	padding: 0.875rem 1rem !important;
	border: 1px solid var(--sana-cf7-line) !important;
	border-radius: 10px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.sana-cf7.sent .wpcf7-response-output {
	border-color: var(--sana-cf7-teal) !important;
	background: #EAF5F5;
}

.sana-cf7.invalid .wpcf7-response-output,
.sana-cf7.unaccepted .wpcf7-response-output,
.sana-cf7.failed .wpcf7-response-output,
.sana-cf7.spam .wpcf7-response-output {
	border-color: var(--sana-cf7-error) !important;
	background: #FBF0EC;
}

@media (max-width: 767px) {
	.sana-cf7 {
		padding: 1.5rem;
	}

	.sana-cf7__grid {
		grid-template-columns: 1fr;
	}

	.sana-cf7 .wpcf7-submit {
		width: 100%;
	}
}