@layer reset, defaults, themes, utilities;

/* ===========
	THEMES
=========== */

@layer themes {
	:root {
		--fore-colour: white;
		--back-colour: transparent;
		--hot-colour: hotpink;
		--cold-colour: mediumslateblue;
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--fore-colour: white;
			--back-colour: transparent;
			--hot-colour: hotpink;
			--cold-colour: mediumslateblue;
		}
	}

	/* =========== END THEMES */
}

/* ==========
	RESET
========== */

@layer reset {
	*,
	::before,
	::after {
		box-sizing: border-box;
	}

	/* ========== END RESET */
}

/* ==============
	UTILITIES
============== */

@layer utilities {
	.uppercase {
		text-transform: uppercase;
	}
	.lowercase {
		text-transform: lowercase;
	}
	.undo-case {
		text-transform: none;
	}

	/* ============== END UTILITIES */
}

/* ==============
	DEFAULTS
============== */

@layer defaults {
	/* STRUCTURE */

	:root {
		--gap: 0.2rem;
		--line: 2px solid var(--fore-colour);
		--interface-font-size: 1.2em;
		--meta-font-size: 0.8em;
	}
	body {
		font-size: 18px;
		font-family: Fungis;
		margin: 0;
		color: #389dd7;
		background-color: var(--back-colour);
		line-height: 1.5;
	}
	#skip-link {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		color: var(--back-colour);
		background-color: var(--fore-colour);
		clip-path: inset(50%);
		&:focus {
			clip-path: unset;
		}
	}
	#container {
		margin: 20px auto;
		max-inline-size: 550px;
		border: var(--line);
		border-style: dashed;
		border-color: hotpink;
		& > * {
			padding-inline: 1rem;
		}
		background-color: white;
	}
	.flex-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-inline-start: 0;
		list-style-type: "";
	}

	/* HEADER */

	#header {
		color: white;
		background-color: mediumslateblue;
		* {
			margin-block: 0;
		}
	}
	#main-nav {
		a {
			display: block;
			padding-block-start: 0.3em;
			padding-block-end: 0.2em;
			padding-inline: 0.4em;
			font-size: var(--interface-font-size);
			color: white;
			text-decoration: unset;
			&:hover {
				color: white;
				background-color: var(--hot-colour);
			}
		}
	}
	#header-message {
		padding-block-start: 0.3rem;
		padding-block-end: 0.2rem;
		padding-inline: 0.5rem;
		border-block-start: var(--line);
		border-block-start-style: dashed;
		border-color: hotpink;
		&::before {
			content: "\25c9 \a0"; /* fisheye + non-breaking space */
			color: var(--hot-colour);
		}
		a {
			color: inherit;
			background-color: inherit;
		}
	}

	/* TEXT */
	:is(h1, h2, h3) + * {
		margin-block-start: 0;
	}
	h1 {
		margin-block-start: 1rem;
		margin-block-end: 0;
	}
	h2 {
		margin-block-start: 3rem;
		margin-block-end: 0.25rem;
	}
	h3 {
		margin-block-start: 2rem;
		margin-block-end: 0.25rem;
	}
	details {
		margin-block: 1rem;
		margin-inline-start: var(--gap);
	}
	summary {
		cursor: pointer;
		font-weight: bold;
		margin-inline-start: -1rem;
		& + * {
			margin-block-start: 0;
		}
	}
	a:link {
		color: hotpink;
	}
	a:visited {
		color: var(--cold-colour);
	}
	a:hover {
		&:link {
			color: white;
			background-color: var(--hot-colour);
		}
		&:visited {
			color: white;
			background-color: var(--cold-colour);
		}
	}
	code {
		font-size: 0.8em;
	}
	.code-block {
		display: block;
		margin-block: 1rem;
		color: var(--back-colour);
		background-color: var(--fore-colour);
		overflow-x: auto;
		white-space: pre;
		tab-size: 4ch;
	}
	blockquote {
		margin-inline: var(--gap);
	}
	::marker {
		color: var(--hot-colour);
	}

	/* MEDIA */

	img {
		display: block;
		margin-inline: auto;
	}
	figure {
		margin-inline: var(--gap);
	}
	figcaption {
		text-align: center;
		blockquote + &::before {
			content: "\2014 \a0"; /* em dash + non-breaking space */
		}
	}
	.gallery {
		--gallery-cols: 1;
		display: grid;
		grid-template-columns: repeat(var(--gallery-cols), 1fr);
		gap: calc(2rem / var(--gallery-cols));
		padding-left: 0;
		list-style-type: "";
		&:has(:nth-child(2)) {
			--gallery-cols: 2;
		}
		&:has(:nth-child(5)) {
			--gallery-cols: 3;
		}
		&:has(:nth-child(10)) {
			--gallery-cols: 4;
		}
		img {
			height: 100%;
			width: 100%;
			aspect-ratio: 1;
			object-fit: cover;
		}
	}
	iframe {
		max-inline-size: 100%;
		display: block;
		margin-block: 1rem;
		border: var(--line);
	}

	/* POST LISTS */

	.post-list {
		padding-inline-start: var(--gap);
		list-style-type: "";
		text-indent: calc(-1 * var(--gap));
		font-size: var(--interface-font-size);
	}
	#tag-index {
		padding-inline-start: 0;
		list-style-type: "";
		details {
			margin-block: 0;
		}
		[open] {
			margin-block-end: 1rem;
		}
		summary {
			font-size: var(--interface-font-size);
		}
	}

	/* POSTS */

	article > header {
		margin-block-end: 1rem;
		padding-block-end: 1rem;
		border-block-end: var(--line);
		h1 {
			margin-block-end: 0.5rem;
			font-size: 2.2rem;
		}
		& + * {
			margin-block-start: 0;
		}
	}
	#post-tags {
		margin-block: 0;
		& > li:not(:last-child)::after {
			content: ",\a0"; /* comma + non-breaking space */
		}
		a::before {
			content: "#";
		}
	}
	#post-nav > ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap);
		padding-inline-start: 0;
		list-style-type: "";
		& > :first-child > a::before {
			content: "\2190 \a0"; /* left arrow + non-breaking space */
		}
		& > :last-child {
			text-align: right;
			a::after {
				content: "\2192 \a0"; /* right arrow + non-breaking space */
			}
		}
	}

	/* FOOTER */

	#footer {
		padding-block-start: 0.3rem;
		padding-block-end: 0.2rem;
		padding-inline: 0.5rem;
		border-block-start: var(--line);
		border-block-start-style: dashed;
		border-color: hotpink
		font-size: var(--meta-font-size);
		[rel="return"]::before {
			content: "\2191 \a0"; /* up arrow + non-breaking space */
		}
	}
	#contact-links {
		& > li:not(:last-child)::after {
			content: "\a0 |\a0"; /* non-breaking space + pipe + non-breaking space */
		}
	}

	/* ============== END DEFAULTS */
}