/*
 * REACH Supply Contact Us mobile centering and form-focus refinement.
 *
 * RS-DS-028: mobile Contact Us information blocks are centered as complete
 * compositions, quick-link labels are optically centered between equal side
 * columns, and the native Breakdance form card receives a stronger restrained
 * visual emphasis without changing form structure or submission behavior.
 */

/* Make the native form workspace more prominent on every viewport. */
body.reach-design-system.reach-contact-design-page
.reach-contact-form-card {
	background: var(--rs-color-surface) !important;
	border: 1px solid var(--rs-color-border-strong) !important;
	border-radius: var(--rs-radius-lg) !important;
	box-shadow:
		0 18px 44px rgb(27 42 56 / 11%),
		0 0 0 4px rgb(226 166 60 / 8%) !important;
	isolation: isolate !important;
	overflow: visible !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card::before {
	background: var(--rs-color-gold) !important;
	border-radius: var(--rs-radius-lg) var(--rs-radius-lg) 0 0 !important;
	height: 4px !important;
	left: -1px !important;
	top: -1px !important;
	width: calc(100% + 2px) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card > :where(h2, .bde-heading) {
	color: var(--rs-color-ink) !important;
	margin-top: 0.375rem !important;
}

@media (max-width: 767px) {
	/* Center the two principal mobile columns on the viewport rather than only
	 * centering their text inside a potentially offset Breakdance column. */
	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column {
		margin-inline: auto !important;
		max-width: 36rem !important;
		width: 100% !important;
	}

	/* Hero: target the actual direct children instead of relying only on
	 * Breakdance's generated .bde-div class names. */
	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero {
		justify-items: center !important;
		margin-inline: auto !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero > * {
		margin-inline: auto !important;
		max-width: 32rem !important;
		min-width: 0 !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero > *:last-child {
		align-items: center !important;
		display: grid !important;
		justify-items: center !important;
		margin-inline: auto !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero > *:last-child > * {
		margin-inline: auto !important;
		max-width: 100% !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero-contact {
		gap: 0.875rem !important;
		justify-items: stretch !important;
		margin: 0.25rem auto 0 !important;
		max-width: 22rem !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero-contact a {
		justify-items: center !important;
		margin-inline: auto !important;
		max-width: none !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero-contact :where(span, strong) {
		justify-self: center !important;
		text-align: center !important;
		width: 100% !important;
	}

	/* Sidebar information and support routes are centered as complete cards. */
	body.reach-design-system.reach-contact-design-page :where(
		.reach-contact-info-card,
		.reach-contact-routes-card
	) {
		align-items: center !important;
		justify-items: center !important;
		margin-inline: auto !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page :where(
		.reach-contact-info-card,
		.reach-contact-routes-card
	) > * {
		margin-inline: auto !important;
		max-width: 100% !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-official {
		justify-items: center !important;
		margin-inline: auto !important;
		max-width: 22rem !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-official > span {
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-official a {
		justify-content: center !important;
		margin-inline: auto !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-security-note {
		justify-items: center !important;
		margin-inline: auto !important;
		max-width: 30rem !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-security-note :where(strong, span) {
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-routes-card h3 {
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-quicklinks {
		justify-items: stretch !important;
		margin-inline: auto !important;
		max-width: 30rem !important;
		width: 100% !important;
	}

	/* Equal side columns keep each label geometrically centered even when the
	 * icon and arrow have different intrinsic widths. */
	body.reach-design-system.reach-contact-design-page
	.reach-contact-quicklinks a {
		grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem !important;
		justify-items: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-quicklinks a > i,
	body.reach-design-system.reach-contact-design-page
	.reach-contact-quicklinks a > b {
		justify-self: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-quicklinks a > span {
		justify-self: stretch !important;
		text-align: center !important;
		width: 100% !important;
	}

	/* Keep the emphasized form card centered and comfortably inset. */
	body.reach-design-system.reach-contact-design-page
	.reach-contact-form-card {
		margin-inline: auto !important;
		max-width: 36rem !important;
		padding: 1.25rem !important;
		width: 100% !important;
	}
}

@media (max-width: 420px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-quicklinks a {
		grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem !important;
		padding-inline: 0.5rem !important;
	}
}