/* components/forms.css
   Form fields, notices and the honeypot.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

input, textarea, select {
	font-family: inherit;
}

.contact-form { display: flex; flex-direction: column; gap: 22px; }

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.field { display: flex; flex-direction: column; gap: 8px; }

.field > span { font-size: 12px; font-weight: 500; color: var(--ink-2); }

.field input,
.field textarea {
	border: 1px solid var(--line-2);
	padding: 14px 15px;
	font-size: 14px;
	outline: none;
	background: #fff;
	color: var(--ink);
	width: 100%;
}

.field textarea { resize: vertical; }

.field input:focus,
.field textarea:focus { border-color: var(--navy); }

.contact-form .btn { align-self: flex-start; padding: 17px 36px; }

.notice { padding: 16px 18px; font-size: 13px; line-height: 1.6; border: 1px solid; }

.notice-ok { border-color: var(--green); background: #F2FCF3; color: #0B5D12; }

.notice-bad { border-color: var(--red); background: #FEF3F3; color: #8A0000; }

.notice-quote { border-color: var(--green); background: #F2FCF3; color: var(--ink); }

/* Honeypot: off-screen rather than display:none, because some bots skip hidden
   inputs. Never focusable, never announced. */
.vivo-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (max-width: 680px) {
	.form-grid { grid-template-columns: 1fr; }
}