@import "/styles/layers/components/tags.css" layer(page);
@import "/styles/layers/components/byline.css" layer(page);
@import "/styles/layers/components/siblings.css" layer(page);

@layer page {
	:root {
		--landmark-header-background-color: var(--color-light-gray-2);
		--landmark-header-foreground-color: var(--color-dark-gray-2);
		--think-header-background-color: var(--color-light-gray-2);
		--think-header-foreground-color: var(--color-dark-gray-2);
		--think-page-border-bottom: 3px solid var(--color-light-gray-3);
		--nav-header-background-color: var(--body-background-color);
		--uplink-background-color: var(--landmark-header-background-color-shaded);
		--uplink-foreground-color: var(--landmark-header-foreground-color-shaded);
	}

	table.think-table {
		border: 1px solid var(--color-light-gray-3);
		border-radius: 5px;
		margin-block: 1rem 2rem;
	}

	table.think-table thead {
		background-color: var(--color-light-gray-3);
		color: var(--color-dark-gray-1);
	}

	table.think-table tbody td,
	table.think-table tbody th {
		vertical-align: top;
	}

	table.think-table tbody th {
		background-color: var(--color-light-gray-1);
		color: var(--color-dark-gray-1);
	}

	table#risk-table tbody tr td:nth-child(2) {
		background-color: var(--color-green-1);
		color: var(--color-dark-gray-1);
	}

	table#risk-table tbody tr td:nth-child(3) {
		background-color: var(--color-yellow-1);
		color: var(--color-dark-gray-1);
	}

	table#risk-table tbody tr td:nth-child(4) {
		background-color: var(--color-red-2);
		color: var(--color-dark-gray-1);
	}

	table.think-table td,
	table.think-table th {
		padding-block: 1rem;
		padding-inline: 1rem;
	}

	.think-page > header {
		background-color: var(--think-header-background-color);
	}

	.think-page article > header {
		background-color: var(--think-header-background-color);
		border-bottom: var(--think-page-border-bottom);
		color: var(--think-header-foreground-color);
		padding-block-end: var(--article-header-padding-block-end, var(--space-xl));
	}

	.think-page article > header,
	.think-page article > section {
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
	}

	.think-page article > header > *,
	.think-page article > section > *,
	.think-page article > section > section > * {
		grid-column: col-one / span 12;
	}

	.think-page article > section > header {
		margin-block-end: var(--space-xs);
		margin-block-start: var(--space-2xl);
	}


	.think-page article > header + section:not(.box) {
		margin-block-start: var(--space-xl);
	}

	.think-page article > section > section {
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
	}

	.think-page article > section > header > *,
	.think-page article > section > section > * {
		grid-column: col-one / span 12;
	}

	.think-page article > section > aside {
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
	}

	.think-page article > section > section > aside {
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
	}

	.think-page article > section > header {
		margin-block: var(--thinks-page-section-header-margin-block, 0);
	}

	img.hero {
		height: auto;
		width: 100%;
	}

	@media (width < 64rem) {

		.think-page article > section > :not(section, aside),
		.think-page article > section > section > *,
		.think-page article > header > * {
			grid-column: col-one / span 16;
		}
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--landmark-header-background-color: var(--color-dark-gray-2);
			--landmark-header-foreground-color: var(--color-light-gray-2);
			--think-header-background-color: var(--color-dark-gray-2);
			--think-header-foreground-color: var(--color-light-gray-2);
		}
	}
}