/*
 * Page structure: the container, the content area and its spacing.
 */

/* The footer stays at the bottom of short pages. */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
}

#page .site-content {
	flex-grow: 1;
}

/* Centres content at --st-content-width, with --st-gutter on each side.
   .ast-container is Astra's name for the same thing; old content uses it. */
.st-container,
.ast-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	padding-left: var(--st-gutter);
	padding-right: var(--st-gutter);
}

@media (min-width: 922px) {
	.st-container,
	.ast-container {
		max-width: calc(var(--st-content-width) + 2 * var(--st-gutter));
	}
}

#primary {
	width: 100%;
	margin: 0;
}

/* Pages and single posts: no space above the content until 1200px wide. */
@media (min-width: 1200px) {
	.page #primary,
	.single #primary {
		margin: 60px 0;
	}
}

/* Below 922px the page or post itself gets some padding, as under Astra. */
@media (max-width: 921px) {
	.st-article {
		padding: 20px;
	}
}

@media (max-width: 544px) {
	.st-article {
		padding: 10px;
	}
}

/* Lists of posts, search results and the "not found" page. */
.blog #primary,
.archive #primary,
.search #primary,
.error404 #primary {
	margin: 4em 0;
}

@media (max-width: 921px) {
	.blog #primary,
	.archive #primary,
	.search #primary,
	.error404 #primary {
		margin: 1.5em 0;
	}
}

/* A grey page with the content in a white box ("not found"). */
.st-boxed {
	background-color: var(--ast-global-color-4);
}

.st-box {
	background-color: var(--ast-global-color-5);
	padding: 3em;
}

@media (max-width: 921px) {
	.st-box {
		padding: 20px;
	}
}

@media (max-width: 544px) {
	.st-box {
		padding: 10px;
	}
}

.error-404 {
	text-align: center;
}

.error-404 .page-header {
	margin-bottom: 1.5em;
}

.error-404 .page-title {
	font-size: 36px;
	font-weight: 400;
	line-height: 1.4;
	margin-bottom: 0;
}

.error-404 .page-sub-title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.st-404-search {
	margin: 1.5em auto 0;
	max-width: 500px;
}