/* 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;
	}
}
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
/*
 * New diff- syntax
 */

pre[class*="language-diff-"] {
	--eleventy-code-padding: 1.25em;
	padding-left: var(--eleventy-code-padding);
	padding-right: var(--eleventy-code-padding);
}
.token.deleted {
	background-color: hsl(0, 51%, 37%);
	color: inherit;
}
.token.inserted {
	background-color: hsl(126, 31%, 39%);
	color: inherit;
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
	-webkit-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 2px;
	padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
	width: var(--eleventy-code-padding);
	background-color: rgba(0,0,0,.2);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
	display: block;
	margin-left: calc(-1 * var(--eleventy-code-padding));
	margin-right: calc(-1 * var(--eleventy-code-padding));
	text-decoration: none; /* override del, ins, mark defaults */
	color: inherit; /* override del, ins, mark defaults */
}