/* === page-contact.php ===
   Styles scoped to the contact page only. Enqueued conditionally in
   functions.php (apex_child_enqueue_assets) when is_page( 'contact' ).
   Relies on design tokens from the parent style.css :root and on the
   global input/textarea/notice styling already defined there — this
   file does not redefine those, only lays out the contact-specific
   structure and the aside/button pieces unique to this page. */

.apex-contact {
	padding-block: clamp( 3rem, 8vw, 5.5rem );
}

.apex-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp( 1rem, 4vw, 2rem );
}

.apex-contact h1.entry-title {
	margin-bottom: 1rem;
}

.apex-contact__intro {
	max-width: 60ch;
	margin-bottom: 2.5rem;
}

/* Status notices (success / error) shown above the form. */
.apex-form-notice {
	padding: 1rem 1.25rem;
	border: 2px solid var( --apex-ink );
	background: var( --apex-card );
	margin-bottom: 2rem;
	font-weight: 500;
}

.apex-form-notice--ok {
	border-left: 6px solid var( --apex-teal );
}

.apex-form-notice--err {
	border-left: 6px solid var( --apex-red );
}

/* Two-column layout: form + aside. Stacks under 768px. */
.apex-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 2rem, 5vw, 3.5rem );
}

@media ( min-width: 768px ) {
	.apex-contact__grid {
		grid-template-columns: 3fr 2fr;
	}
}

/* Form fields. Input/textarea borders + focus rings are global in
   style.css, so only spacing and label typography live here. */
.apex-field {
	margin: 0 0 1.25rem;
}

.apex-field label {
	display: block;
	font-family: var( --apex-ff-body );
	font-weight: 600;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .4rem;
}

.apex-field input,
.apex-field textarea {
	width: 100%;
}

/* Honeypot: hidden from sighted users and off the tab order, but still
   present in the DOM for bots to (hopefully) fill in. */
.apex-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Button: this page does not load home.css, so the full store button
   recipe is defined here rather than relying on another stylesheet. */
.apex-contact .apex-btn {
	display: inline-block;
	background: var( --apex-amber );
	color: var( --apex-ink );
	font-family: var( --apex-ff-body );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	border: 2px solid var( --apex-ink );
	border-radius: 2px;
	padding: .85rem 1.75rem;
	box-shadow: 3px 3px 0 var( --apex-ink );
	cursor: pointer;
	transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease;
}

.apex-contact .apex-btn:hover {
	background: var( --apex-amber-dark );
}

.apex-contact .apex-btn:active {
	box-shadow: 0 0 0 var( --apex-ink );
	transform: translate( 2px, 2px );
}

.apex-contact .apex-btn:focus-visible {
	outline: 3px solid var( --apex-amber );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.apex-contact .apex-btn {
		transition: none;
	}
}

/* Aside: Email us / Hours / Trade accounts. */
.apex-contact__aside-block {
	margin-bottom: 2rem;
}

.apex-contact__aside h2 {
	font-family: var( --apex-ff-display );
	text-transform: uppercase;
	font-size: 1.1rem;
	letter-spacing: .05em;
	margin-bottom: .5rem;
}

.apex-contact__aside .apex-mono {
	font-family: var( --apex-ff-mono );
	font-size: .9rem;
}