@import url("https://kit.fontawesome.com/5956551eb3.css");
@import url("https://early.webawesome.com/webawesome@3.0.0-alpha.10/dist/styles/themes/default.css");
@import url("https://early.webawesome.com/webawesome@3.0.0-alpha.10/dist/styles/webawesome.css");
@import url("defaults.css");
@import url("prism.css");

:root {
	--body-padding: 1rem;
	--max-page-width: min(125ch, 100% - 2 * var(--body-padding));
	--max-content-width: min(80ch, 100%);
	--header-height: 6.5rem;

	--color-magenta: hsl(340 90% 50%);
	--color-pink: hsl(340 90% 80%);
	--color-aqua: oklch(65% 0.15 210);

	--color-accent: var(--color-magenta);
	--color-accent-85: color-mix(in oklch, var(--color-accent) 0%, oklch(85% none none));
	--color-accent-98: color-mix(in oklch, color-mix(in oklch, var(--color-accent) 0%, oklch(98% none none)) 30%, oklch(none 0% none));

	--color-accent-2: var(--color-aqua);

	--color-neutral: hsl(210 10% 50%);
	--color-neutral-95: color-mix(in oklch, var(--color-neutral) 0%, oklch(95% none none));
	--color-neutral-90: color-mix(in oklch, var(--color-neutral) 0%, oklch(90% none none));
	--color-neutral-85: color-mix(in oklch, var(--color-neutral) 0%, oklch(85% none none));
	--color-neutral-80: color-mix(in oklch, var(--color-neutral) 0%, oklch(80% none none));
	--color-neutral-60: color-mix(in oklch, var(--color-neutral) 0%, oklch(60% none none));
	--color-neutral-50: color-mix(in oklch, var(--color-neutral) 0%, oklch(50% none none));
	--color-neutral-45: color-mix(in oklch, var(--color-neutral) 0%, oklch(45% none none));
	--color-neutral-40: color-mix(in oklch, var(--color-neutral) 0%, oklch(40% none none));
	--color-neutral-30: color-mix(in oklch, var(--color-neutral) 0%, oklch(30% none none));
}

body {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}

header, footer {
	box-sizing: content-box;
	padding-inline: clamp(1em, 50vw - var(--max-page-width) / 2, 50vw);
	max-width: var(--max-page-width);
}

footer {
	border-top: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
}

header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
	padding-block: var(--wa-space-s);
	background: var(--wa-color-surface-default);

	div {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	& h1,
	& p {
		margin: 0;
	}

	& h1 {
		font-size: 300%;
		white-space: nowrap;
		margin-inline-end: var(--wa-space-xs);

		& > :is(a, a:hover) {
			color: inherit;
			text-decoration: none;

			& img {
				block-size: .75em;
			}
		}

		& strong {
			color: hsl(85 85% 30%); /* a bit darker than in the logo to visually match it */
			margin-inline-end: -.13em;
		}
	}

	& p {
		margin-block-start: var(--wa-space-xs);
		font-size: var(--wa-font-size-s);
		font-weight: var(--wa-font-weight-semibold);
		color: var(--color-neutral-50);
		line-height: 1.12;

		@media (width <= 425px) {
			margin-block-start: 0;

			br {
				display: none;
			}
		}
	}

	nav {
		display: flex;
		gap: var(--wa-space-m);
		align-items: center;

		a {
			font-weight: var(--wa-font-weight-bold);
			color: var(--wa-color-on-quiet);
			font-size: var(--wa-font-size-m);
		}

		a:has(> .fa-github) {
			margin-inline-start: var(--wa-space-m);
			font-size: var(--wa-font-size-xl);
		}
	}
}

nav {
	a:not(:hover) > i {
		color: var(--wa-color-on-quiet);
	}
}

.page {
	flex: 1;
	display: flex;
	max-width: var(--max-page-width);
	margin-inline: auto;

	@media (width > 1360px) {
		&:has(#main-contents) {
			padding-inline-start: var(--wa-space-3xl);
		}
	}

	@media (width > 1000px) {
		&:has(> .sidebar) {
			> .sidebar {
				> .toc .toc {
					block-size: calc(100vh - var(--header-height) - 1.2lh);
					padding-block-end: var(--wa-space-3xl); /* allow scrolling past the last item */
					overflow-y: auto;
					overscroll-behavior: contain;
				}

				~ .sidebar {
					padding-inline-end: 0;
					border-inline-start: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
					border-inline-end: none;
				}
			}

			#section-contents {
				padding-inline-start: 0;
			}
		}
	}

	@media (width <= 1000px) {
		&:has(.sidebar ~ .sidebar) {
			flex-direction: column;

			.sidebar {
				border: none;
			}

			#section-contents {
				order: 999;
			}
		}

		#page-contents {
			order: -1;
		}
	}

	@media (width > 625px) {
		&:not(:has(.sidebar ~ .sidebar)) .sidebar {
			padding-inline-start: 0;
		}
	}

	@media (width <= 625px) {
		flex-direction: column;

		.sidebar {
			border: none;
		}
	}
}

main {
	max-inline-size: var(--max-content-width);
	min-inline-size: 0;
	padding: var(--wa-space-xl);
	margin-inline-end: auto;

	ul:is(#features-at-a-glance + *) {
		list-style: "✅ ";
		padding-inline-start: 0;

		span:first-of-type {
			display: none;
		}

		li::marker {
			font: var(--fa-font-solid);
			color: var(--wa-color-green);
		}
	}

	& h1 {
		color: var(--color-neutral);
		margin-bottom: 0;
	}

	:is(h1, h2):first-child {
		margin-block-start: 0;
	}
}

:is(nav, aside) a,
:is(h1, h2, h3, h4) > a:only-child {
	text-decoration: none;
	color: inherit;
}

:is(h1, h2, h3, h4) {
	scroll-margin-block-start: var(--header-height);
}

.sidebar {
	border-inline-end: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
	padding: var(--wa-space-l);
	font-size: var(--wa-font-size-s);
	color: var(--color-neutral-30);

	h2 {
		margin-block-start: var(--wa-space-xs);
		color: var(--color-accent);
		font-size: var(--wa-font-size-s);
		text-transform: uppercase;
	}

	.toc {
		:is(.sidebar > &) {
			margin: 0;
			position: sticky;
			top: var(--header-height);
		}

		.active.toc-link {
			font-weight: var(--wa-font-weight-bold);
			color: var(--color-accent);
		}

		ul, ol {
			margin: 0;
			list-style-type: none;

			& & {
				padding-inline-start: var(--wa-space-s);

				li {
					color: var(--color-neutral-50);
					font-weight: var(--wa-font-weight-normal);
				}

				#page-contents & {
					li ~ li {
						margin-block-start: var(--wa-space-xs);
					}
				}
			}

			:is(.toc > &) {
				> li {
					font-weight: var(--wa-font-weight-semibold);
				}
			}

			&:is(.toc > *):not(:has(&)) > li {
				font-weight: var(--wa-font-weight-normal);

				& + & {
					margin-block-start: var(--wa-space-xs);
				}
			}
		}
	}
}

#section-contents {
	white-space: nowrap;
}

#main-contents {
	ul {
		margin: 0;
		position: sticky;
		top: var(--header-height);
		list-style: none;
		line-height: var(--wa-line-height-expanded);
	}

	a {
		font-weight: var(--wa-font-weight-semibold);
		white-space: nowrap;
	}
}

.readme-only {
	display: none;
}

.scrollable,
pre:has(code) {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior: contain;
}

:nth-child(1) { --index: 1; }
:nth-child(2) { --index: 2; }
:nth-child(3) { --index: 3; }