/**
 * Component: Contact info
 * The Contact page's layout (a 2/3 + 1/3 Columns block) is standard
 * WordPress core block markup (.wp-block-columns/.wp-block-column),
 * styled by core's own block-library CSS — no custom layout classes
 * needed here. This file covers only the two pieces placed on that page
 * via shortcode (see inc/contact-form.php, inc/social-links.php): the
 * contact form and its status notice.
 */

/*
 * The map image's source file is narrower than its column (155px wide,
 * see the media library), so core's default img{max-width:100%} caps it
 * at that native size instead of filling the column — max-width alone
 * never upscales. width:100% overrides that so it always fills the
 * available column width, whatever image is there.
 */
.contact-content .wp-block-image img {
	width: 100%;
	height: auto;
}

/*
 * Native contact form (see inc/contact-form.php) — matches the
 * .comment-form input treatment in content.css rather than introducing
 * a third input style.
 */
.contact-form {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-3);
}

.contact-form label {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form textarea {
	width: 100%;
	padding: var(--space-2);
	margin-bottom: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	background: var(--color-paper);
	color: var(--color-ink);
	transition: border-color var(--transition-base);
}

.contact-form input[type='text']:focus-visible,
.contact-form input[type='email']:focus-visible,
.contact-form textarea:focus-visible {
	border-color: var(--color-primary);
}

.contact-form button {
	align-self: flex-start;
}

/* Off-screen, not display:none — some bots skip obviously-hidden
   fields, but still auto-fill anything merely positioned off-canvas. */
.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__notice {
	font-family: var(--font-sans);
	font-weight: 600;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
	margin-bottom: var(--space-3);
}

.contact-form__notice--success {
	background: var(--color-primary);
	color: var(--color-paper);
}

.contact-form__notice--error {
	background: var(--color-accent);
	color: var(--color-paper);
}