/*
	Variables
*/

html {
	--primary-color: black;
	--bg-color: white;
	--nav-current-page-highlight: rgb(34, 180, 80);
	--soft-highlight: lightgray;
	--highlight: gray;
	--hard-highlight: #313131;
	--table-row-highlight: #eeeeee;
}

html.dark-mode {
	--primary-color: white;
	--bg-color: black;
	--nav-current-page-highlight: rgb(34, 180, 80);
	--soft-highlight: #313131;
	--highlight: gray;
	--hard-highlight: lightgray;
	--table-row-highlight: #111;
	--pagefind-ui-primary: #eeeeee;
	--pagefind-ui-text: #eeeeee;
	--pagefind-ui-background: #152028;
	--pagefind-ui-border: #152028;
	--pagefind-ui-tag: #152028;

	.toggle-color-scheme svg {
		fill: var(--primary-color);
		transform: rotate(180deg);
	}

	img {
    opacity: .85;
    transition: opacity .5s ease-in-out;
  }

  img:hover {
    opacity: 1;
  }
}


/*
  Reset
*/ 

/* Source: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  margin: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/*
  Global styles
*/ 

p {
	line-height: 1.5rem;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

code {
	background: var(--soft-highlight);
	padding: .1rem .2rem;
	border-radius: .15rem;
}

pre code {
	display: block;
	padding: .5rem;
	text-wrap: wrap;
}

blockquote {
	border-left: 2px solid var(--highlight);
	margin: 0;
	padding-left: 1rem;
	font-style: italic;
}

ul, ol {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

ul li, ol li {
	line-height: 1.5rem;
	margin-bottom: .5rem;
}

ul ul, ol ul, ul ol, ol ol {
	margin-top: 0;
	margin-bottom: 0;
}

blockquote {
	line-height: 1.5rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

table {
	margin-top: 1.5rem;
	border-spacing: 0px;
	border-collapse: collapse;

	tr:nth-child(even) {
		background: var(--table-row-highlight);
	}

	td, th {
		line-height: 33px;
		text-align: center;

		img {
			margin: 0 auto;
		}
	}

	th {
		padding: .2rem;
		border-bottom: 1px solid gray;
	}
}

code {
	vertical-align: bottom;
}

body {
	padding-bottom: 2rem;
	position: relative;
	background: var(--bg-color);
	color: var(--primary-color);
}

svg {
	stroke: var(--primary-color);
}

/* 
	Typography
*/

html {
	font-family: sans-serif;
	font-size: 137.5%;
	-webkit-font-smoothing: antialiased;

h1, h2, h3, h4, h5, h6 {
	margin-top: 1.5rem;
	margin-bottom: 0;
	line-height: 1.5rem;

	& + p, & + ul, & + ol, & + blockquote, & + table {
		margin-top: .5rem;
	}
}

h1, .u-step-1 {
	font-size: 2.027rem;
	line-height: 2.2rem;
}

h2, .u-step-2 {
	font-size: 1.802rem;
	line-height: 2rem;
}

h3, .u-step-3 {
	font-size: 1.602rem;
	line-height: 1.8rem;
}

h4, .u-step-4 {
	font-size: 1.424rem;
	line-height: 1.6rem;
}

h5, .u-step-5 {
	font-size: 1.266rem;
	line-height: 1.4rem;
}

h6, .u-step-6 {
	font-size: 1.125rem;
	line-height: 1.2rem;
}

a {
	text-decoration-thickness: .1ex;
	text-underline-offset: .3ex;
	transition: 100ms;

	&, &:visited {
		color: var(--primary-color);
	}

	&:hover {
		text-decoration-thickness: .2ex;
	}
}

/* 
	Utilities
*/

.wrapper {
	margin-inline: auto;
	padding-inline: 1rem;
	max-width: 35rem;
	margin-top: 0;
}

.text-wrapper {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 25ch;
}

.sticky {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--bg-color);
}

/* 
	Components
*/

.main {
	.summary {
		margin-top: .5rem;
	}

	.logo {
		margin: 0 2rem 0 0;
	}

	nav ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
		column-gap: .5rem;
		flex-wrap: wrap;

		li {
			margin: 0;
		}

		a.active, a.active:visited {
			color: var(--primary-color);
			text-decoration-color: var(--nav-current-page-highlight);
		}

		a, a:visited {
			color: grey;
			text-decoration-thickness: .2ex;

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

.author {
	font-style: italic;
}

.description {
	font-style: italic;
	font-size: .8rem;
	line-height: 1rem;
	color: var(--highlight);
}

.summary {
	display: flex;
	flex-wrap: wrap;
	&, a, a:visited {
		color: var(--highlight);
	}

	a:hover {
		color: var(--primary-color);
	}

	a {
		padding-left: .25rem;
	}

	time {
		padding-right: .25rem;
	}
}

.back-bar, header.main {
	display: flex;
	flex-wrap: wrap;

}

.back-bar, header.main {
	padding: 0.5rem 0;
	
	border-bottom: 1px dotted var(--highlight);
	z-index: 1;
}

.buttons {
	display: flex;
	column-gap: .5rem;

	&.right {
		margin-left: auto;
	}

	button, .button {
		width: 1.8rem;
		height: 1.8rem;
		background: none;
		border: 0;
		cursor: pointer;
		display: inline-block;
		padding: 0;
		border-radius: 20em;
		transition: 100ms;

		svg {
			opacity: .5;
			transition: 300ms;
			padding: .3rem;
			max-width: 100%;
			max-height: 100%;
		}

		&:hover {
			background: var(--soft-highlight);
			svg {
				opacity: 1;
			}
		}
	}
}

iframe.contentIframe {
	width: 1px;
	min-width: 100%;
}

.pagination {
	margin-top: 1em;
}

.search-box {
	margin-top: 1rem;
}

.following {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	text-align: right;

	a {
		background: var(--bg-color);
		color: var(--primary-color);
		padding: 0.3rem;
		font-size: .7rem;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		text-decoration: none;
		transition: 100ms;
		border: 1px solid var(--hard-highlight);

		&:hover {
			border-color: var(--primary-color);
			text-decoration: underline;
		}
	}
}