@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("default.css");
@import url("prism.css");

:root {
	--max-page-width: min(120ch, 100% - 2em);
	--max-content-width: min(80ch, 100% - 2em);
	--body-padding: 1em;
	--rainbow: conic-gradient(
		in oklch,
		var(--wa-color-red-60),
		var(--wa-color-yellow-80),
		var(--wa-color-green-70),
		var(--wa-color-cyan-70),
		var(--wa-color-blue-60),
		var(--wa-color-indigo-60),
		var(--wa-color-purple-60),
		var(--wa-color-pink-60),
		var(--wa-color-red-60)
	);
	--header-height: 5.5rem;
}

body {
	display: flex;
	flex-flow: column;
}

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

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

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

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

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

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

h1 {
	position: relative;
	display: flex;
	align-items: center;
	font-size: var(--wa-font-size-2xl);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;

	&[data-version]::after {
		content: "v" attr(data-version);
		display: inline-block;
		margin-inline-start: var(--wa-space-2xs);
		font-size: var(--wa-font-size-s);
		font-weight: var(--wa-font-weight-semibold);
		color: var(--wa-color-on-quiet);
	}

	.logo {
		width: 1.6em;
		margin-right: var(--wa-space-s);

		@media (width > 1360px) {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 100%;
		}
	}

	span {
		color: var(--wa-color-pink);
		font-weight: 400;
	}
}

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);

	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);
		}
	}
}

i {
	&.fa-chrome {
		color: var(--wa-color-green);
	}

	&.fa-firefox {
		color: color-mix(in oklch, var(--wa-color-red) 30%, var(--wa-color-yellow));
	}

	&.fa-safari {
		color: var(--wa-color-blue);
	}
}

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

aside {
	border-inline-end: var(--wa-border-style) var(--wa-panel-border-width)
		var(--wa-color-surface-border);
	padding-block: var(--wa-space-l);
	padding-inline: var(--wa-space-l);

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

	@media (width <= 625px) {
		border-inline-end: none;

		ul {
			position: static;
		}
	}

	@media (width > 625px) {
		padding-inline-start: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
		font-size: var(--wa-font-size-s);
		font-weight: var(--wa-font-weight-semibold);
		white-space: nowrap;
	}
}

.readme-only {
	display: none;
}

main {
	ul:first-of-type {
		list-style: "✅ ";
		padding-inline-start: 0;

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

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

	p:has(+ p > .compat) {
		margin-block-end: var(--wa-space-s);
	}
}

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

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

.blurb {
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-semibold);
	line-height: var(--wa-line-height-condensed);
}

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

.social {
	max-width: 80ch;
	max-height: 60ch;
	margin: auto;

	h1 {
		font-size: var(--wa-font-size-4xl);
		translate: -0.1em 0;
	}

	.logo {
		margin-right: var(--wa-space-xl);
	}

	.blurb {
		margin: 0;
	}

	.caption {
		font-weight: var(--wa-font-weight-bold);
		color: var(--wa-color-gray-60);
		margin: 0;
		margin-top: var(--wa-space-xs);

		> span {
			transition: 0.1s calc(1s * var(--index)) ease-in-out;
			@starting-style {
				opacity: 0;
			}
		}
	}
}