@import '/open-props.css';

/* CONTAINER */
html {
	overflow-y: scroll;
}

.page {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr minmax(auto, var(--size-content-3)) 1fr;
	grid-template-areas:
		'header header header'
		'. main .'
		'aside aside aside'
		'footer footer footer';
	min-height: 100vh;
	padding-block: 3rem;
	padding-inline: 3vw;
	row-gap: var(--size-6);
}

.page.docs {
	grid-template-areas:
		'header header header'
		'aside main main'
		'footer footer footer';
	column-gap: var(--size-8);
}

.page.docs aside.sitemap {
	margin-top: 0;
	padding-top: 0;
}

.page.docs main {
	max-width: var(--size-content-3);
}

.page.docs aside.sitemap > ul > li:not(.docs) {
	display: none;
}

@media only screen and (max-width: 600px) {
	.page {
		grid-template-areas:
			'header header header'
			'main main main'
			'aside aside aside'
			'footer footer footer';
	}
}

/* HEADER */

header {
	grid-column-start: 1;
	grid-column-end: 4;
	display: grid;
	grid-template-columns: subgrid;
	row-gap: var(--size-6);
}

h1 {
	grid-column-start: 1;
	grid-column-end: 3;
	line-height: 1;
	text-transform: uppercase;
	font-stretch: 105%;
}

.slogan {
	margin-top: auto;
	margin-left: auto;
	margin-bottom: 4px;
	width: min-content;
	line-height: 0.9;
	font-size: var(--font-size-1);
	text-transform: uppercase;
	font-weight: 100;
	font-stretch: 115%;
	text-align: right;
	grid-column-start: 3;
	grid-column-end: 4;
}

nav {
	grid-column-start: 1;
	grid-column-end: 4;
	width: 100%;
	display: flex;
	gap: 1rem;
	/* justify-content: space-between; */
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--h1-color);
	text-transform: uppercase;
	font-weight: 300;
	font-stretch: 105%;
	font-size: var(--font-size-1);
	opacity: 80%;
}

nav a {
	color: var(--h6-color);
}

nav:not(:first-of-type) {
	display: none;
}

.breadcrumbs {
	font-size: var(--font-size-1);
	width: 100%;
	max-width: var(--size-content-3);
	grid-column-start: 2;
	grid-column-end: 3;
}

/* MAIN */

main {
	grid-area: main;
	overflow-x: hidden;
}

/* BREADCRUMBS */

.breadcrumbs {
	text-transform: uppercase;
	font-size: 0.8rem;
}

.breadcrumbs .separator:after {
	margin-inline: 0.2rem;
	content: '/';
}

/* FRONTMATTER */

main > header > h2 {
	margin-bottom: 5rem;
	/* color: var(--gray-3); */
}

header a {
	color: unset;
	text-decoration: unset;
}

time {
	color: grey;
	font-family: Arial, Helvetica, sans-serif;
}

dl {
	padding: 0;
	gap: 1rem;
	grid-template-columns: auto 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 0px;
	font-family: Georgia;
	display: none;
}

dt {
	display: none;
}

dd {
	margin: 0;
}

dd {
	display: none;
}

dd.description {
	display: block;
}

/* PAGES */

.home > header > h2 {
	display: none;
}

main > .content > :is(h2, h3, h4, pre, ul, ol, p, article) {
	margin-bottom: var(--size-4);
}

main > .content > :is(h2, h3, h4) {
	margin-top: var(--size-6);
}

/* THUMBNAILS */

.thumbnail .content {
	display: none;
}

.thumbnail :is(dl, dd) {
	display: block;
	font-family: var(--sans-serif);
}

.thumbnail {
	border: 2px solid white;
	border-radius: var(--size-4);
	padding: var(--size-4);
	margin-block: var(--size-4);
}

.thumbnail a:hover {
	text-decoration: none;
}

/* TYPOGRAPHY */

pre {
	background: var(--surface-2);
	padding: var(--size-2) var(--size-4);
	display: block;
	max-inline-size: 100%;
	overflow-x: scroll;
}

/* IMAGES */

p img {
	margin: 5rem auto;
}

/* FOOTER */

footer {
	grid-area: footer;
	margin: 5rem auto;
}

/* SITEMAP */

aside.sitemap {
	display: flex;
	border-top: 1px solid var(--h6-color);
	margin-block: 2rem;
	padding-block: 2rem;
	grid-area: aside;
	justify-content: center;
}

aside.sitemap ul {
	list-style: none;
	opacity: 0.8;
	padding: 0;
}

aside.sitemap ul {
	/* margin-block: 0; */
}

a article.link-preview {
	/* display: none; */
}

article.link-preview:has(a) {
	display: block;
}

article.link-preview p {
	color: var(--h5-color);
}

a:hover:has(article) {
	text-decoration: none;
}