/* Defaults */
:root {
	/* modernfontstacks.com */
	--font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
		source-sans-pro, sans-serif;
	--font-family-monospace: ui-monospace, "Cascadia Code", "Source Code Pro",
		Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

/* Theme colors */
:root {
	--color-gray-20: #e0e0e0;
	--color-gray-50: #c0c0c0;
	--color-gray-90: #333;

	--background-color: #fff;

	--text-color: var(--color-gray-90);
	--text-color-link: #0e6fbf;
	--text-color-link-active: rebeccapurple;
	--text-color-link-visited: #17050f;

	--epg-box-highlight: var(--text-color-link) !important;  /* Eleventy Post Graph highlights */

	--syntax-tab-size: 2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-20: #333;
		--color-gray-50: #c0c0c0;
		--color-gray-90: #dad8d8;

		/* --text-color is assigned to --color-gray-_ above */
		--text-color-link: #1493fb;
		--text-color-link-active: rebeccapurple;
		--text-color-link-visited: #a6a6f8;

		--background-color: #15202b;
	}
}

/* Global stylesheet */
* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-size: 0.9em;
	font: -apple-system-body;
	font-family: var(--font-family);
	color: var(--text-color);
	background-color: var(--background-color);

	@media screen and (min-width: 801px) {
		font-size: 1rem;
	}
}
html {
	overflow-y: scroll;
}
body {
	max-width: 40em;
}

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

p:last-child {
	margin-bottom: 0;
}
p,
li {
	line-height: 1.5;
	hanging-punctuation: first;
	-webkit-hyphens: auto;
	hyphens: auto;
}

a[href] {
	color: var(--text-color-link);
	text-decoration: none;
}
/* a[href]:visited {
	color: var(--text-color-link-visited);
} */
a[href]:hover,
a[href]:active {
	color: var(--text-color-link-active);
}

img {
	margin-left: auto;
	margin-right: auto;
	max-height: 67vi;
	max-width: 100%;
	width: auto;
	height: auto;
}

blockquote {
	margin: 1rem 1rem;
	padding: 0 0.85rem;
	border-left: 2px solid var(--text-color-link);
}

hr {
	border: none;
	text-align: center;
	font-size: 0.8em;
}

hr:before {
	content: "• • •";
}

main {
	padding: 1rem;
}
main :first-child {
	margin-top: 0;
}

header {
	border-bottom: 1px dashed var(--color-gray-20);
}
header:after {
	content: "";
	display: table;
	clear: both;
}

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

pre,
code {
	font-family: var(--font-family-monospace);
	font-size: 0.9em;
}
pre:not([class*="language-"]) {
	margin: 0.5em 0;
	line-height: 1.375; /* 22px /16 */
	-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;
}
code {
	word-break: break-word; /* This was `break-all` but was needlessly breaking in the middle of words */
}

/* Header */
header {
	display: flex;
	gap: 1em 0.5em;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em;
}
.home-link {
	font-size: 1em; /* 16px /16 */
	font-weight: 700;
	margin-right: 2em;
}
.home-link:link:not(:hover) {
	text-decoration: none;
}

/* Nav */
.nav {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav-item {
	display: inline-block;
	margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
	text-decoration: none;
}
.nav a[href][aria-current="page"] {
	font-weight: 700;
}

/* Footer */
footer {
	display: flex;
	gap: 1em 0.5em;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em;
	font-size: var(--font-size-minus-1);
	border-top: 1px dashed var(--color-gray-20);
}
.copyright {
	display: flex;
	margin-right: 2em;
}
.footer-links {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}
.footer-links a {
	display: inline-block;
	margin-right: 1em;
}
.footer-links a[href]:not(:hover) {
	text-decoration: none;
}

/* Posts list */
.postlist {
	list-style: none;
	padding: 0;
	/* padding-left: 1.5rem; */
}
.postlist-item {
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}
.postlist-full .postlist-item:not(:last-of-type) {
	padding-bottom: 1em;
	border-bottom: 1px dashed var(--color-gray-20);
}
.postlist-title {
	font-size: 1.1875em; /* 19px /16 */
	font-weight: 700;
}
.postlist-date {
	font-size: 0.8125em; /* 13px /16 */
	font-weight: normal;
	/* font-style: italic; */
	color: var(--color-gray-50);
}
a .postlist-date {
	color: inherit;
}
.postlist-link {
	flex-basis: calc(100% - 1.5rem);
	text-decoration: none;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Pagination */
.pagination {
	position: relative;
	margin: 1.25rem auto;
	font-size: var(--font-size-minus-2);
	text-align: center;
}

.pagination:not(:first-child) {
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}

.pagination a {
	position: absolute;
	display: inline-block;
	max-width: 49%;
	margin-bottom: 1rem;
}

.older-posts,
.prev-post {
	left: 0;
	max-width: calc(49% - 1rem);
	text-align: left;
	text-indent: -1.2em;
	margin-left: 1.2em;
}

.newer-posts,
.next-post {
	right: 0;
	text-align: right;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	font-size: 0.8125em; /* 13px /16 */
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	padding: 0;
	margin: 0;
	color: var(--color-gray-50);
}
.post-metadata time {
	margin-right: 1em;
}

/* Direct Links / Markdown Headers */
.header-anchor {
	text-decoration: none;
	font-style: normal;
	font-size: 1em;
	margin-left: 0.1em;
}
a[href].header-anchor,
a[href].header-anchor:visited {
	color: transparent;
}
a[href].header-anchor:focus,
a[href].header-anchor:hover {
	text-decoration: underline;
}
a[href].header-anchor:focus,
:hover > a[href].header-anchor {
	color: #aaa;
}

h2 + .header-anchor {
	font-size: 1.5em;
}

/* Subscribe Page */

a.tldr-link {
	font-size: 0.9rem;

	/* Show TL;DR link on mobile only */
	@media screen and (min-width: 501px) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

.feed-list {
	padding-left: 0;

	li {
		display: block;

		i {
			display: inline-block;
			width: 1.2rem;
			margin-right: 0.25rem;
		}
	}
}