/* Variable declarations */
:root {
	/* Colors */
	--dark: #141714;
	--white: #ffffff;

	--primary-light: #b8dab8;
	--primary-medium: #6d9375;
	--primary-dark: #467250;

	/* Typography */
	--font-size-h1: 40px;
	--font-size-h2: 26px;
	--font-size-h3: 16px;
	--font-size-body: 16px;

	--font-weight-heading: 700;
	--font-weight-body: 400;
	--font-weight-link: 500;

	/* Borders */
	--border-width: 8px;
	--border-radius: 16px;
	--border-color: var(--primary-dark);

	/* Layout */
	--container-width-tablet: 538px;
	--container-width-desktop: 960px;

	--column-width-tablet: 30px;
	--column-width-desktop: 58px;

	--column-gap-mobile: 8px;
	--column-gap-tablet: 16px;
	--column-gap-desktop: 24px;

	/*
	Other important CSS values:
	- Tablet breakpoint: >= 586px
	- Desktop breakpoint: >= 1024px
	*/
}

/* Global styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	background-color: var(--dark);
	line-height: 1.4;

	/* System font stack from https://systemfontstack.com/ */
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
}

p {
	color: var(--white);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-link);
}

span {
	color: var(--white);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-link);
}

blockquote {
	color: var(--white);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-link);

	padding: 8px 0 8px 16px;
	border-left: var(--border-width) solid var(--border-color);
}

a {
	color: var(--primary-light);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-link);
}
a:hover, a:active {
	color: var(--primary-medium);
}

h1, h2, h3 {
	color: var(--primary-light);
	font-weight: var(--font-weight-heading);
}
h1 {
	font-size: var(--font-size-h1);
}
h2 {
	font-size: var(--font-size-h2);
}
h3 {
	font-size: var(--font-size-h3);
}

/* Common styles and components */
body:not(.index-layout) {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 32px;

	min-height: 100vh;
	padding: 24px 18px;
}

main, article {
	display: flex;
	flex-direction: column;
	row-gap: 32px;

	margin-bottom: auto;  /* Pushes the footer down if the page is shorter than 100vh */
}

section {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

header {
	width: 100%;
}

nav {
	display: flex;
	align-items: center;
	column-gap: 24px;
}
nav a.logo {
	margin-right: 8px;
}
nav a.logo img {
	height: 40px;
}
nav .current-page {
	color: var(--primary-light);
	font-weight: var(--font-weight-link);
}

footer {
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;

	row-gap: 8px;
	column-gap: 8px;
}
footer .copyright {
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;

	row-gap: 8px;
	column-gap: 8px;
}
footer address {
	font-style: normal;
}

.img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: auto;

	border-radius: var(--border-radius);
	border: var(--border-width) solid var(--border-color);
}

.citation {
	display: flex;
	flex-direction: column;
}

/* Responsive styling */
@media only screen and (min-width: 586px) {  /* Tablet and desktop */
	header, main, footer {
		max-width: calc((var(--column-width-tablet) * 12) + (var(--column-gap-tablet) * 11));
	}
}

@media only screen and (min-width: 1024px) {  /* Desktop only */
	header, main, footer {
		max-width: calc((var(--column-width-desktop) * 12) + (var(--column-gap-desktop) * 11));
	}

	footer {
		width: 100%;
	}

	footer address {
		margin-left: auto;
	}
}