/* Site-wide phone layout fixes. Loaded after the template stylesheet. */
@media (max-width: 767.98px) {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	img,
	video,
	iframe {
		max-width: 100%;
	}

	img {
		height: auto;
	}

	#pageWraper,
	#mastContent,
	.container,
	.container-fluid {
		width: 100%;
		max-width: 100%;
	}

	#pageWraper {
		overflow: hidden;
	}

	/* The source template fixes the hero to a 960px desktop canvas. */
	#mainimg {
		width: 100%;
		height: 100svh;
		min-height: 620px;
	}

	#mainimg .mainimg-logo {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: 100% auto !important;
		background-position: center top !important;
		background-attachment: scroll !important;
	}

	#mainimg .banner-logo.d-md-none {
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 0 env(safe-area-inset-bottom);
	}

	#mainimg .banner-logo.d-md-none > p {
		width: 100%;
		margin: 0 auto;
	}

	#mainimg .banner-logo.d-md-none img {
		display: block;
		width: 100%;
		height: auto;
	}

	#mainimg .banner-logo.d-md-none .header-brand a {
		font-size: clamp(2rem, 9vw, 3rem);
	}

	#mainimg .banner-logo.d-md-none .header-info {
		flex-wrap: wrap;
		font-size: clamp(.75rem, 3.5vw, 1rem);
	}

	/* Keep multi-column content and wide tables within the phone viewport. */
	.row {
		margin-right: 0;
		margin-left: 0;
	}

	table {
		max-width: 100%;
	}

	.table-responsive {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}