/**
 * Dedicated contact page at /contact.
 *
 * The form itself is styled by components/css/contact-form.css, shared with the
 * site-wide dialog.
 */

/* The site sets main { min-height: 3000px } for its long pages. This one is
   short, so opt out rather than trail a screen and a half of empty page. */
body:has(#contact-hero) main {
	min-height: auto;
}

#contact-hero {
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto 64px;
	font-family: Poppins;
}

/* typography.css aligns every heading and paragraph left, so centering has to
   be stated on the elements themselves - the same way the other pages do it. */
#contact-hero .header-title {
	font-size: var(--rem-4xl);
	color: var(--edge-color);
	margin-bottom: 24px;
	text-align: center;
}

#contact-hero .header-subtitle {
	font-size: var(--rem-l);
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

#contact {
	display: block;
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto 100px;
}

#contact .contact-block {
	max-width: 760px;
	margin: 0 auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 64px;
}

@media all and (max-width: 904px) {

	#contact .contact-block {
		padding: 32px 24px;
	}

	#contact-hero .header-title {
		font-size: var(--rem-2xl);
	}
}