/* Layout: container, grid, main and content widths. Header, navigation and footer live in components.css. */

.nbt-container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.nbt-grid-12 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap);
}

@media (min-width: 48rem) {

	.nbt-grid-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

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

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

/* Content: constrained inner width; alignfull children run edge to edge. */
.nbt-content > * {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The rule above replaces list padding, which would put bullets in the gutter: indent top-level lists past it. */
.nbt-content > ul,
.nbt-content > ol,
.nbt-content > .wp-block-list {
	padding-inline-start: calc(var(--gutter) + 1.5em);
}

/* Nested lists indent further than their parent item. */
.nbt-content li > ul,
.nbt-content li > ol {
	margin-block: var(--space-2) 0;
	padding-inline-start: 1.5em;
}

.nbt-content > .alignfull {
	max-width: none;
	padding-inline: 0;
}

.nbt-content > .alignwide {
	max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

.nbt-plain-title {
	padding-block: var(--section-y-sm) var(--space-6);
}

.nbt-entry {
	padding-block: var(--space-6);
	border-bottom: var(--border);
}

.nbt-entry h2 {
	margin-bottom: var(--space-2);
	font-size: var(--text-xl);
}

/* 404 */
.nbt-404 {
	padding-block: var(--section-y);
}