/*
 * Layout: page shell and containers.
 * Component-level styles live in components.css.
 */

.site {
	min-height: 100vh;
	overflow-x: clip; /* .alignfull uses 100vw, which includes the scrollbar width */
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
	padding-block: var(--wp--preset--spacing--50);
}

.container,
.content-area {
	--gutter: var(--wp--preset--spacing--40); /* 24px, 16px on small screens */
	width: min(100% - 2 * var(--gutter), var(--wp--style--global--wide-size, 1200px));
	margin-inline: auto;

	@media (max-width: 639px) {
		--gutter: var(--wp--preset--spacing--30);
	}
}

/* Readable line length. Post/page content children are
 * constrained in blocks.css instead, so .alignwide/.alignfull can still break out. */
.content-area :where(.page-header, .entry-header, .post-thumbnail, .entry-footer, .card, .no-results, .post-navigation, .pagination, .error-404) {
	width: 100%; /* auto margins would shrink grid items (page-header) to their content */
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}

/* Page with its area's section navigation: content + 280px nav on desktop, nav under the
 * content on mobile (source order). */
.page-layout.has-section-nav {
	display: grid;
	gap: var(--wp--preset--spacing--50);

	@media (min-width: 960px) {
		grid-template-columns: minmax(0, var(--wp--style--global--content-size, 760px)) 280px;
		justify-content: space-between;
	}
}

.page-layout:not(.has-section-nav) > .page-layout__main {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}