/* Generic styles */
:root {
	--accent-color: #f23d09;
	--background-color: light-dark(#f9f5ee, #212121);
	--border: 1px dashed var(--text-color);
	--border-radius: 0.5rem;
	--copy-size: 1.25rem;
	--gap: 1.5rem;
	--header-height: 2.5rem;
	--mobile-button-width: 2.5rem;
	--padding: 1rem;
	--text-color: light-dark(#222222, #cccccc);

	color-scheme: dark;
	scroll-padding-top: calc(var(--header-height) + (var(--padding) * 4));
	box-sizing: border-box;
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}

html {
	overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
	html {
		overflow-y: auto;
		scrollbar-gutter: stable;
	}
}

body {
	display: flex;
	flex-flow: column nowrap;
	min-height: 100vh;
	margin: 0;
	padding-block-start: calc(var(--header-height) + (var(--padding) * 2));
	background-color: var(--background-color);
	color: var(--text-color);
	font-family:
		Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic",
		source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol", "Noto Color Emoji";
	font-size: var(--copy-size);
}

a {
	color: var(--text-color);
	font-weight: bold;
	text-underline-offset: calc(var(--padding) / 3);
	text-decoration-thickness: calc(var(--padding) / 8);
	transition: transform 0.1s ease-in-out;

	&:hover,
	&:active {
		text-decoration: underline !important;
		text-decoration-color: var(--accent-color) !important;
		text-decoration-thickness: calc(var(--padding) / 4) !important;
	}

	&:active {
		transform: scale(0.9);
	}
}

button {
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--border);
	border-radius: var(--border-radius);
	padding: calc(var(--padding) / 2);
	color: var(--text-color);
	background-color: transparent;
	transition: transform 0.1s ease-in-out;

	&:hover,
	&:active {
		background-color: var(--text-color);
		color: var(--background-color);
	}

	&:active {
		transform: scale(0.9);
	}
}

h1,
h2,
h3 {
	margin-block: calc(var(--padding) * 0.5);
	text-wrap: balance;
}

ol {
	list-style: none;
	counter-reset: start -1;

	li::before {
		content: counter(start) ". ";
		counter-increment: start;
	}
}

dialog form[method="dialog"] {
	width: var(--mobile-button-width);
	aspect-ratio: 1;
	position: absolute;
	top: calc(0 - var(--padding));
	right: var(--padding);
	color: var(--text-color);
}

code,
pre {
	color: var(--accent-color);
	font-size: calc(var(--copy-size) * 0.9);
}

pre {
	white-space: pre-wrap;
	word-break: break-word;
	border: var(--border);
	border-radius: var(--border-radius);
	padding: calc(var(--padding) / 2);
}

/* Components */

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.spacer {
	flex: 1;
}

.hidden {
	display: none;
}

.heading-link {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	gap: calc(var(--gap) / 3);
	text-decoration: none;

	svg {
		transition: transform 0.2s ease-in-out;
		transform: rotate(45deg);

		&:active {
			transform: rotate(55deg) scale(0.9);
		}
	}
}

#table-of-contents,
#highlights {
	position: fixed;
	top: calc(var(--header-height) + (var(--padding) * 3));
	right: calc(var(--padding) * 3);
	font-size: 90%;
	max-width: 13vw;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: calc(var(--gap) / 2);
	border: var(--border);
	border-radius: var(--border-radius);
	padding: var(--padding);
	background-color: var(--background-color);

	h2:first-child {
		margin: 0;
		text-decoration: underline;
		text-decoration-color: var(--accent-color);
		text-decoration-thickness: calc(var(--padding) / 4);
	}

	&.hidden {
		display: none;
	}

	a {
		text-decoration: none;
	}
}

@media (max-width: 1150px) {

	#table-of-contents,
	#highlights {
		display: none;
	}
}

nav.tag-container {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
}

main {
	nav.tag-container {
		justify-content: flex-start;
		margin-inline-start: calc(0rem - 2 * var(--padding));
	}
}

nav.pagination {
	width: 80%;
	align-self: center;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	gap: var(--gap);
	padding: var(--padding);
}

/* UI Sections */

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: linear-gradient(to bottom,
			var(--background-color) 0%,
			transparent 100%);
	backdrop-filter: blur(2px);
	padding: calc(var(--padding) * 0.75);

	nav {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--gap);
		font-weight: bold;
		height: var(--header-height);

		>a:first-child {
			font-size: 1.5rem;
		}

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}

		.nav-links {
			display: flex;
			flex-flow: row nowrap;
			gap: var(--gap);
			justify-content: space-between;
			align-items: center;
		}

		@media (max-width: 600px) {
			div.nav-links {
				display: none;
			}

			dialog .nav-links {
				height: 100%;
				width: 100%;
				display: flex;
				flex-flow: column nowrap;
				justify-content: center;
			}
		}

		button.theme-toggle {
			border: none;
			cursor: pointer;

			&.header {
				margin-inline-start: calc(0rem - (var(--padding) / 2));
			}

			&.dialog {
				margin-block-start: calc(0rem - (var(--padding) / 2));
			}
		}

		svg {
			height: var(--copy-size);
			width: auto;
			fill: var(--text-color);
			stroke: var(--text-color);

			&.mail:hover {
				fill: var(--accent-color);
			}

			&.rss:hover {
				stroke: var(--accent-color);
			}

			&.theme-toggle-icon {
				stroke: var(--accent-color);
			}
		}

		@media (min-width: 600px) {
			button.nav-dialog-toggle[commandfor="nav-dialog"] {
				display: none;
			}
		}

		button[commandfor="nav-dialog"] {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			justify-content: center;
			gap: 4px;
			width: var(--mobile-button-width);
			aspect-ratio: 1;

			.line {
				width: 80%;
				border: 1px solid var(--text-color);
			}

			&:active .line,
			&:hover .line {
				border: 1px solid var(--background-color);
			}
		}

		dialog {
			height: 80vh;
			width: 80vw;
			background: radial-gradient(var(--background-color) 40%,
					transparent 100%);
			backdrop-filter: blur(2px);
			border: var(--border);
			border-radius: var(--border-radius);
			padding: var(--padding);

			&::backdrop {
				backdrop-filter: blur(2px);
			}
		}
	}
}

main {
	max-width: min(70ch, 90%);
	padding: var(--padding);
	margin: auto;
	line-height: 1.75;
	font-size: var(--copy-size);

	p {
		text-align: justify;
	}
}

footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
	padding: var(--padding);
}