/* This is an arbitrary CSS string added to the bundle */
@import url("https://fonts.bunny.net/css?family=inter:400,600,700|jetbrains-mono:400,700");
@layer base, components, utilities;

@layer base {
	:root {
		color-scheme: light dark;

		--font-family: "Inter", -apple-system, system-ui, sans-serif;
		--font-family-monospace: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		--syntax-tab-size: 2;

		--color-text: light-dark(oklch(20% 0.02 262), oklch(88% 0.02 262));
		--color-text-muted: light-dark(oklch(40% 0.03 260), oklch(65% 0.02 260));
		--color-link: light-dark(#1D4ED8, oklch(70% 0.18 262));
		--color-link-hover: light-dark(#1a43c4, oklch(78% 0.18 262));
		--color-link-visited: light-dark(#17050F, oklch(80% 0.05 300));
		--color-bg: light-dark(#FFFFFF, oklch(15% 0.02 262));
		--color-surface: light-dark(#FFFFFF, oklch(20% 0.02 262));
		--color-border: light-dark(#D1D5DB, oklch(30% 0.02 262));
		--color-tag-bg: light-dark(oklch(96% 0.01 262), oklch(25% 0.03 262));

		&,
		body {
			padding: 0;
			margin: 0 auto;
			font-family: var(--font-family);
			color: var(--color-text);
			background-color: var(--color-bg);
		}

		html {
			overflow-y: scroll;
		}

		body {
			max-width: 62em;
		}

		img {
			max-width: 100%;
		}

		img[width][height] {
			height: auto;
		}

		img[src$=".svg"] {
			width: 100%;
			height: auto;
			max-width: none;
		}

		.icon {
			width: 32px;
			height: 32px;
			display: inline-block;
			object-fit: contain;
			fill: var(--color-text);
		}

		video,
		iframe {
			width: 100%;
			height: auto;
		}

		iframe {
			aspect-ratio: 16/9;
		}

		p {
			line-height: 1.7;
			text-wrap: pretty;
		}

		p:last-child {
			margin-bottom: 0;
		}

		li {
			line-height: 1.7;
		}

		h1, h2, h3, h4, h5, h6 {
			text-wrap: balance;
		}

		table {
			margin: 1em 0;
		}

		table td,
		table th {
			padding-right: 1em;
		}

		pre,
		code {
			font-family: var(--font-family-monospace);
		}

		pre:not([class*="language-"]) {
			margin: .5em 0;
			line-height: 1.375;
			-moz-tab-size: var(--syntax-tab-size);
			-o-tab-size: var(--syntax-tab-size);
			tab-size: var(--syntax-tab-size);
			-webkit-hyphens: none;
			-ms-hyphens: none;
			hyphens: none;
			direction: ltr;
			text-align: left;
			white-space: pre;
			word-spacing: normal;
			word-break: normal;
			overflow-x: auto;
		}

		code {
			word-break: break-all;
		}

		pre,
		code {
			font-family: var(--font-family-monospace);
			font-size: 1em;
		}

		@view-transition {
			navigation: auto;
		}
	}
}

@layer components {
	/* Header */
	header {
		display: flex;
		gap: 1em;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 1em 2rem;
		border-bottom: 1px solid var(--color-border);
	}

	.home-link {
		flex-grow: 1;
		font-size: 1.125em;
		font-weight: 600;
		text-decoration: none;
		color: var(--color-text);

		&:hover {
			color: var(--color-link);
		}
	}

	/* Nav */
	.nav {
		display: flex;
		gap: .5em 1.5em;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.nav a[href][aria-current="page"] {
		color: var(--color-text);
		font-weight: 600;
	}

	/* Posts list */
	.postlist {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.postlist-item {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--color-border);

		&:last-child {
			border-bottom: none;
		}
	}

	.postlist-link {
		display: block;
		font-size: 1.1rem;
		font-weight: 600;
		line-height: 1.4;
		text-decoration: none;
		color: var(--color-text);

		&:hover {
			color: var(--color-link);
		}
	}

	.postlist-date {
		display: block;
		font-size: 0.8rem;
		color: var(--color-text-muted);
		margin-top: 0.15rem;
	}

	/* Tags */
	.post-tag {
		display: inline-block;
		font-size: 0.75rem;
		padding: 0.15em 0.6em;
		border: 1px solid var(--color-border);
		border-radius: 0.25em;
		text-decoration: none;
		color: var(--color-text-muted);
		text-transform: capitalize;
		transition: color 0.15s ease, border-color 0.15s ease;

		&:hover {
			color: var(--color-link);
			border-color: var(--color-link);
			box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.1);
		}
	}

	/* Tags list */
	.post-metadata {
		display: inline-flex;
		flex-wrap: wrap;
		gap: .5em;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.post-metadata time {
		margin-right: 1em;
	}

	h1, h2, h3, h4, h5, h6,
	.h1, .h2, .h3, .h4, .h5, .h6 {
		margin-bottom: 0.6rem;
		font-family: var(--font-family);
		font-weight: 600;
		line-height: 1.2;
		color: var(--color-text);
	}

	a[href] {
		color: var(--color-link);
		transition: color 0.15s ease;
	}

	a[href]:hover,
	a[href]:active {
		color: var(--color-link-hover);
	}

	a[href]:visited {
		color: var(--color-link-visited);
	}

	/* Nav hover — after global link rules so they override visited color */
	.nav-item a[href] {
		text-decoration: none;
		color: var(--color-text-muted);
		transition: color 0.15s ease;

		&:hover,
		&:active {
			color: var(--color-text-muted);
			text-decoration: underline;
			text-decoration-color: #B91C1C;
		}
	}

	/* Layout: main and footer */
	main,
	footer {
		padding: 2.5rem 2rem;
	}

	main :first-child {
		margin-top: 0;
	}

	/* Footer */
	footer {
		border-top: 1px solid var(--color-border);
		color: var(--color-text-muted);
		font-size: 0.875em;
	}

	/* Prev/Next post navigation */
	.links-nextprev {
		display: flex;
		justify-content: space-between;
		gap: .5em 1em;
		list-style: "";
		border-top: 1px solid var(--color-border);
		padding: 1.5em 0;
	}

	.links-nextprev > * {
		flex-grow: 1;
	}

	.links-nextprev-next {
		text-align: right;
	}

	/* Portfolio */
	.portfolio-item {
		border: 1px solid var(--color-border);
	}

	@media (prefers-color-scheme: dark) {
		.portfolio-media img {
			background-color: rgba(255, 255, 255, 0.8);
		}
	}

	.portfolio-links {
		border-top: 1px solid var(--color-border);
	}

	/* Message box */
	.message-box {
		color: var(--color-text);
		padding: 1em 1.5em;
		border: 2px solid var(--color-text-muted);
	}
}

@layer utilities {
	/* https://www.a11yproject.com/posts/how-to-hide-content/ */
	.visually-hidden:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	/* Prevent visually-hidden skip link from pushing content around when focused */
	#skip-link.visually-hidden:focus {
		position: absolute;
		top: 1rem;
		left: 1rem;
		z-index: 999;
	}

	/* Skip link */
	#skip-link {
		text-decoration: none;
		background: var(--color-bg);
		color: var(--color-text);
		padding: 0.5rem 1rem;
		border: 1px solid var(--color-text);
		border-radius: 2px;
	}
}