.postlist { counter-reset: start-from 37 }
/** Styles only needed for the views summarizing multiple posts */

.postlist {
	list-style: none;
	padding: 0;
}
.postlist-item {
	display: block;
	margin: 1em 0;
	border-bottom: 1px dashed var(--red);
	padding: 0 0 1em 0;
}

.postlist-item-title {
	margin-bottom: 0;
	padding-bottom: 0.25em;
	line-height: 1.4em;
}

.postlist-metadata {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
	gap: .5em 3em;
	padding: 0;
	margin: 0.5em 0;
}
.postlist-metadata p {
	margin: 0;
	line-height: 1.5em;
	font-size: 0.8em;
}
.postlist-tag {
	text-transform: capitalize;
}

.postlist-item :last-child {
	margin-bottom: 0;
}

.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 1em;
	margin: 0;
	padding: 1em;
	list-style: none;
}

.pager li {
	height: fit-content;
}

.pager li a {
	border: 1px solid var(--grey);
	padding: 0.5em;
	text-decoration: none;
	line-height: 1em;
}

.pager li a {
	background-color: var(--blue);
}

.pager li a:is(:hover,:focus) {
	background-color: var(--red);
	color: var(--white);
}

.pager li a[aria-current="page"] {
	background-color: var(--grey);
	color: var(--black);
}
/* Variables and general site-wide styles */
:root {
  --white: #ffffff;
  --blue: #1b2c58;
  --red: #663333;
  --black: #000000;
  --grey: #d1d9e2;
  --max-width: 1400px;
  --main-gutter-x: 1em;
  --main-gutter-y: 2em;
	--syntax-tab-size: 2;
}

@media (prefers-color-scheme: light) {
	:root {
    --background-color: var(--white);
    --text-color: var(--black);
		--text-color-link: var(--blue);
    --text-color-link-hover: var(--white);
    --text-color-link-hover-background: var(--blue);
		--text-color-link-active: var(--black);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
    --background-color: #1E1E1E;
    --text-color: var(--white);
		--text-color-link: var(--white);
    --text-color-link-hover: var(--red);
    --text-color-link-hover-background: var(--white);
		--text-color-link-active: var(--white);
	}
}

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

html {
	overflow-y: scroll;
}

body {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	background-color: var(--red);
	color: var(--text-color);
	font-family: "Atkinson Hyperlegible", sans-serif;
	font-size: 16pt;
}

.container {
	display: block;
	width: calc(var(--max-width) - 2rem);
	margin: 0 auto;
	padding: 1em;
}

@media(max-width: 1360px) {
  .container {
    width: 100%;
  }
}

/* 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 {
	line-height: 1.5;
	margin: 0.5em 0;
}

a {
	text-decoration: underline;
	text-underline-position: under;
}

li {
	line-height: 1.5;
}
header {
    width: 100%;
    background-color: var(--red);
    color: var(--white);
    padding: 0 1em;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 3em;
    padding: 0 var(--main-gutter-x);
}

header a {
    color: var(--white);
}

header a:is(:focus,:hover) {
    background-color: var(--white);
    color: var(--red);
}
/** Pagefind styles for search **/
.pagefind-ui__search-input {
    border: 1px solid var(--black);
    border-radius: 5px;
    padding: 10px;
    background-color: var(--white);
    font-weight: 700;
}

.pagefind-ui__search-input::before {
    mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
    z-index: 9;
    opacity: 0.7;
}

.pagefind-ui__search-clear,
.pagefind-ui__button {
    padding: 0.5em;
    background-color: var(--blue);
    color: var(--white);
}

.pagefind-ui__hidden {
    display: none;
}

.pagefind-ui__drawer {
    padding: 1em;
    background-color: var(--background-color);
}

.pagefind-ui__result-title {
    color: var(--text-color-link);
}
/** Styles common to main, whether it has a sidebar or not **/
.main-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	background-color: var(--grey);
}

main {
    width: 100%;
	max-width: var(--max-width);
	padding: var(--main-gutter-y) var(--main-gutter-x);
    background-color: var(--background-color);
}

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

main a {
    color: var(--text-color-link);
}

main a:is(:hover,:focus) {
    background-color: var(--text-color-link-hover-background);
    color: var(--text-color-link-hover);
}
main a[href]:active {
	color: var(--text-color-link-active);
}

/* Direct Links / Markdown Headers */
.header-anchor {
	text-decoration: none;
	font-style: normal;
	font-size: 1em;
	margin-left: .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;
}

/** Styles for main with a sidebar (most pages) **/
main.main-sidebar {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
}

/** Sidebar **/
.sidebar {
	width: 30%;
	padding: 1em 1em 0 0;
}

.sidebar-block {
	border: 1px dashed var(--red);
	padding: 0.5em;
}

/** Main content **/
.main-content {
    width: 70%;
}

@media(max-width: 60em) {
    .sidebar,
    .main-content {
        width: 100%;
    }
}
footer {
    width: 100%;
    padding: 1em var(--main-gutter-x);
    background-color: var(--red);
    font-size: 0.7em;
}

footer p {
    text-align: center;
    color: var(--white);
}

footer p a {
    color: var(--white);
}

footer p a:is(:hover,:focus) {
    background-color: var(--white);
    color: var(--blue);
}
/** Aligns with the tagslist.njk include **/
.tags-list {
	margin-bottom: 0;
	padding-left: 1em;
	columns: 1;
}

/** Needs to line up with the breakpoint in base.css for when the sidebar moves to the bottom **/
@media(max-width: 60em) {
	.tags-list {
		columns: 2;
	}
}

@media(max-width: 30em) {
	.tags-list {
		columns: 1;
	}
}
/** Aligns with the sociallinks.njk include file **/
.social-links {
    padding-left: 0;
    list-style-type: none;
}

.social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.social-links svg {
    fill: white;
}

.social-links svg:is(:hover, :focus) {
    background-color: var(--white);
    fill: var(--red);
}