/* =====================================================================
   contact.css
   Contact details on the left, the message form on the right. The
   form itself posts to admin-post.php and works without any
   JavaScript — contact-form.js (a later step) only adds inline
   validation on top of this, it doesn't replace the send.
   ===================================================================== */

.contact-grid {
	display: grid;
	gap: var(--space-7);
	align-items: start;
}
@media (min-width: 900px) {
	.contact-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

.contact-copy h2 {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-4);
}
.contact-copy p {
	color: var(--muted);
	max-width: 34em;
}

.contact-list {
	list-style: none;
	margin: var(--space-5) 0;
	display: grid;
	gap: var(--space-3);
}
.contact-list li {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}
.contact-list span {
	display: inline-block;
	min-width: 80px;
	color: var(--muted);
}
.contact-list a {
	text-underline-offset: 3px;
}

.contact-form {
	display: grid;
	gap: var(--space-4);
}
.contact-form label {
	display: grid;
	gap: 5px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	font-family: var(--font-body);
	font-size: var(--text-base);
	padding: 0.7rem 0.8rem;
}
.contact-form textarea {
	min-height: 120px;
	resize: vertical;
}
.contact-form-status {
	background: var(--paper);
	border-radius: var(--radius-sm);
	padding: 0.6rem 0.8rem;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
}
.contact-form-status.is-error {
	color: #B3261E;
}

/* The honeypot field: present in the markup so bots that fill in every
   field trip it, but positioned off-screen so no real visitor sees or
   tabs into it. display:none is avoided on purpose — some spam bots
   skip hidden fields, defeating the point. */
.contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}