/*
 * Contact page redesign (page-contact.php). Kedyn: "we can rebuild contact
 * page to be honest. in current state it's very bland and simple."
 *
 * Deliberately does NOT redesign input[type=submit] or the generic `label`
 * element (screen.css) - both already carry good on-brand styling (solid
 * accent-gold button, Oswald/uppercase labels). This page's own
 * `.contact_form_wrapper label { display:none }` and float-based
 * `width:46%` input layout (screen.css) were fighting that existing good
 * styling, not missing it - this file's job is winning that fight for
 * THIS page only (everywhere else that reuses `.contact_form_wrapper`,
 * if anywhere ever does, is unaffected since every rule here is scoped
 * under `.contact-page`).
 */

/*
 * float:none matters: the theme's .sidebar_content class carries
 * float:left, and a floated box ignores margin:0 auto - the whole column
 * was hugging the left edge of the content area on wide screens.
 * The wrapper is wide (1100px) so canvas rows (e.g. the 2-tile
 * content-bg-image row) can breathe; the form and reading copy are
 * re-constrained to 680px individually below.
 */
/*
 * Selector repeats the theme's own ancestor chain because screen.css's
 * `.page_content_wrapper .inner .sidebar_content` (0,3,0) sets
 * float:left + a fixed/calc width and would beat a bare .contact-page.
 */
#page_content_wrapper .inner .sidebar_content.contact-page,
.page_content_wrapper .inner .sidebar_content.contact-page,
.contact-page {
	float: none;
	width: auto;
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 20px 60px;
}

.contact-page .contact_form_wrapper,
.contact-page .contact_form_response {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.contact-page .kcb-heading,
.contact-page > h2 {
	text-align: center;
	font-size: 32px;
	margin-bottom: 18px;
}

.contact-page .kcb-heading::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--color-accent);
	margin: 18px auto 0;
}

.contact-page .kcb-paragraph,
.contact-page > p {
	text-align: center;
	font-size: 17px;
	line-height: 1.7;
	color: #555;
	max-width: var(--measure-reading, 520px);
	margin: 0 auto 50px;
}

.contact-page .contact_form_wrapper {
	margin-top: 0;
}

.contact-page .contact_form_wrapper label {
	display: block;
	color: #333;
}

.contact-page__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}

.contact-page__field {
	margin-bottom: 22px;
}

.contact-page .contact_form_wrapper input[type=text],
.contact-page .contact_form_wrapper input[type=email],
.contact-page .contact_form_wrapper select {
	width: 100%;
	display: block;
	margin: 0;
}

/*
 * The vendored form styles never targeted `select` (this page had none
 * until the Field Plan Phase 4 inquiry-type field) - borrows the same
 * border/padding/background screen.css gives text inputs so the new
 * field doesn't look like a foreign browser-default dropdown.
 */
.contact-page .contact_form_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #ddd;
	border-radius: 0;
	/* 13px vertical, not 12 (A31, 2026-08-26 audit). Measured on the live
	   form at 1100px: this select rendered 45px tall while every input and
	   the textarea beside it rendered 47px, so the one control in the middle
	   of the column sat 2px short of its neighbours. screen.css gives the
	   text inputs 13px; matching it makes the whole column one height. The
	   36px on the right stays - that is the room the custom dropdown arrow
	   needs, and it has no bearing on the height. */
	padding: 13px 36px 13px 14px;
	font-family: inherit;
	/* 16px minimum, matching the text inputs - anything smaller makes iOS
	   Safari zoom the whole page when the control gains focus. */
	font-size: 16px;
	color: #333;
	background-color: #fafafa;
	background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.contact-page .contact_form_wrapper input[type=text]:focus,
.contact-page .contact_form_wrapper input[type=email]:focus,
.contact-page .contact_form_wrapper select:focus,
.contact-page .contact_form_wrapper textarea:focus {
	border-color: var(--color-accent);
	background-color: var(--color-white);
	outline: none;
}

.contact-page__promise {
	text-align: center;
	font-size: 13.5px;
	/* #888 on white is 3.54:1 at 13.5px - fails AA. #6d6d6d is 5.17:1. */
	color: #6d6d6d;
	max-width: 680px;
	margin: -34px auto 30px;
}

.contact-page .contact_form_wrapper textarea {
	width: 100%;
	display: block;
}

/*
 * Honeypot (CAPTCHA retirement, Field Plan Phase 0, 2026-08-23) - off-screen
 * positioning, not display:none/visibility:hidden, which some bots detect
 * and skip filling. A sighted user never sees it; a screen reader never
 * announces it (aria-hidden on the wrapper); a bot that blindly fills every
 * input still fills it, which is exactly what functions.php's mailer checks
 * for.
 */
.contact-page__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact_submit_wrapper {
	text-align: right;
}

.contact-page .contact_form_wrapper input[type=submit] {
	float: none;
	margin-inline-end: 0;
	min-width: 160px;
}

@media (max-width: 640px) {
	.contact-page {
		padding: 0 16px 40px;
	}

	.contact-page .kcb-heading,
	.contact-page > h2 {
		font-size: 26px;
	}

	.contact-page__row {
		grid-template-columns: 1fr;
	}

	.contact_submit_wrapper {
		text-align: center;
	}

	.contact-page .contact_form_wrapper input[type=submit] {
		width: 100%;
	}
}