/* Task 3: Global powder-blue page canvas and responsive layout system. */
html {
	overflow-x: clip;
}

body {
	min-width: 0;
	background: var(--hhr-color-powder);
	color: var(--hhr-color-text);
	font-family: var(--hhr-font-body);
	overflow-wrap: break-word;
}

main {
	width: min(100% - clamp(1rem, 5vw, 3rem), var(--hhr-container));
	margin-inline: auto;
	padding-block: clamp(var(--hhr-space-6), 6vw, var(--hhr-space-8));
}

main > *,
.site-header__inner,
.site-footer__inner,
.site-footer__grid,
.site-footer__brand,
.site-footer__navigation,
.site-footer__contact,
.home-help-rush-page-collection,
.home-help-rush-page-collection__grid,
.card-grid {
	min-width: 0;
}

img,
svg,
video,
iframe,
table,
pre,
code {
	max-width: 100%;
}

img,
svg,
video {
	height: auto;
}

pre,
table {
	overflow-x: auto;
}

:where(
	.home-hero,
	.connection-process,
	.editable-page-content,
	.hhr-home__services,
	.hhr-home__areas,
	.home-help-rush-page-shell > article,
	.hhr-page
) {
	padding: clamp(var(--hhr-space-5), 4vw, var(--hhr-space-7));
	border-radius: var(--hhr-radius-large);
}

:where(
	.home-hero,
	.editable-page-content,
	.hhr-home__services,
	.home-help-rush-page-shell > article,
	.hhr-page
) {
	background: var(--hhr-color-white);
}

:where(
	.connection-process,
	.hhr-home__areas
) {
	background: var(--hhr-color-powder-strong);
}

main > * + * {
	margin-block-start: clamp(var(--hhr-space-6), 5vw, var(--hhr-space-8));
}

@media (max-width: 24rem) {
	body {
		overflow-wrap: anywhere;
	}

	main {
		width: min(100% - 1rem, var(--hhr-container));
		padding-block: var(--hhr-space-5);
	}

	:where(
		.home-hero,
		.connection-process,
		.editable-page-content,
		.hhr-home__services,
		.hhr-home__areas,
		.home-help-rush-page-shell > article,
		.hhr-page
	) {
		padding: var(--hhr-space-4);
		border-radius: var(--hhr-radius-card);
	}

	.site-footer__grid,
	.home-help-rush-page-collection__grid,
	.card-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-footer__inner,
	.site-footer__grid,
	.site-footer__actions,
	.footer-navigation__list,
	.home-help-rush-page-card,
	.card {
		max-width: 100%;
	}
}