/*
 * Layout: page shell, container, main area, full-width content.
 */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-main {
	flex: 1 0 auto;
}

.site-main:focus {
	outline: none;
}

/* 1200 px content column; 16 px side margins on phones, 32 px on tablets. */
.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

/* page.php: block content on the full width; blocks that are not full width sit in the container. */
.page-content > * {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.page-content > .alignfull {
	width: 100%;
}

.page-content > .alignwide {
	width: min(100% - 2 * var(--gutter), var(--container));
}

.page-content > :first-child {
	margin-top: 0;
}

/* page.php: the title of a page whose content has no H1 (as the pattern first screens). */
.page-header {
	padding-top: 20px;
	padding-bottom: var(--space-5);
}

.page-header__title {
	margin: 0;
}

.page-content--plain {
	padding-bottom: 40px;
}

@media (min-width: 1024px) {
	.page-header {
		padding-top: 40px;
		padding-bottom: var(--space-6);
	}

	.page-content--plain {
		padding-bottom: 80px;
	}
}

.section {
	padding-block: var(--space-7);
}

@media (min-width: 1024px) {
	.section {
		padding-block: var(--space-9);
	}
}

/* Mobile contact bar is fixed at the bottom: keep the page end visible above it. */
body.has-contact-bar {
	padding-bottom: calc(var(--contact-bar-h) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767.98px) {
	body.has-contact-bar {
		--contact-bar-h: 65px;
	}
}