@font-face {
	font-family: 'Akko Pro';
	src: url('/font/akkopro-bold-webfont.woff2') format('woff2'),
	url('/font/akkopro-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Akko Pro';
	src: url('/font/akkopro-bolditalic-webfont.woff2') format('woff2'),
	url('/font/akkopro-bolditalic-webfont.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: 'Calibri';
	src: url('/font/calibri-webfont.woff2') format('woff2'),
	url('/font/calibri-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Calibri';
	src: url('/font/calibrib-webfont.woff2') format('woff2'),
	url('/font/calibrib-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Calibri';
	src: url('/font/calibrii-webfont.woff2') format('woff2'),
	url('/font/calibrii-webfont.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Calibri';
	src: url('/font/calibriz-webfont.woff2') format('woff2'),
	url('/font/calibriz-webfont.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}

:root {
	--colour-bg-dark-text: var(--colour-bg);
	--colour-bg-dark: var(--colour-text);
	--colour-bg-hover: #fafafa;
	--colour-bg-light: #f0f0f0;
	--colour-bg: #e8e8e8;
	--colour-border: #e9ecef;
	--colour-button-border: var(--colour-text);
	--colour-button-hover: #1d2e38;
	--colour-primary-button: var(--colour-primary);
	--colour-primary: #f97037;
	--colour-primary: #f97037;
	--colour-text-faded: #646464;
	--colour-text-header: #343e47;
	--colour-text-hover: #0053fa;
	--colour-text-link: #396dd7;
	--colour-text: #343e47;
	--gutter-header-mobile: 1rem;
	--gutter-header: 2.5rem;
	--height-header-mobile: 5rem;
	--height-header: 7rem;
	--height-logo: 32px;
	--padding-gutter: 24px;
	--width-content: 1240px;
}
body {
	background-color: white;
	color: var(--colour-text);
	display: flex;
	flex-direction: column;
	font-family: Calibri, sans-serif;
	font-size: 1.125rem;
	justify-content: flex-start;
	margin: 0;
	padding-top: var(--height-header);
}
h1, h2, h3, h4 {
	font-family: "Akko Pro", serif;
	font-weight: 700;
	text-transform: capitalize;
	em {
		color: var(--colour-primary);
		font-style: normal;
	}
	a {
		color: inherit;
	}
	&.component {
		text-transform: none;
	}
}
h1 {
	font-size: 3rem;
}
a {
	text-decoration: none;
}
blockquote {
	background-color: var(--colour-bg-light);
	border-left: 3px solid var(--colour-bg);
	line-height: 2;
	margin-left: 0;
	padding-left: 1rem;
}
form {
	ul {
		list-style: none;
		padding-left: 0;
	}
	li {
		margin-top: .5rem;
		margin-bottom: 1rem;
	}
	label {
		display: block;
		text-transform: capitalize;
		color: var(--colour-text-faded);
		margin-bottom: .25rem;
	}
	input, textarea {
		padding: .25rem;
		line-height: 1.5;
		border: 1px solid var(--colour-border);
		width: 60%;
	}
	input[type='checkbox'] {
		width: auto;
	}
	input.hp {
		z-index:-1;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		height: 0;
	}
}
button, a.button {
	border-radius: 3rem;
	border: 1px solid var(--colour-button-border);
	color: var(--colour-text) !important;
	cursor: default;
	padding: .5rem 1.5rem;
	text-transform: uppercase;
	&[type='submit'] {
		background-color: var(--colour-primary-button);
		border-color: var(--colour-primary-button);
		color: white !important;
	}
}
pre {
	background-color: var(--colour-bg-hover);
	font-family: monospace;
	font-size: .825rem;
	padding: 1rem;
	white-space: pre-wrap;
	word-wrap: break-word;
}
table {
	border-bottom: 1px solid var(--colour-border);
	border-collapse: collapse;
	font-size: 1rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
	th {
		border-bottom: 2px solid var(--colour-border);
		font-weight: 700;
	}
	td {
		border-bottom: 1px solid var(--colour-border);
	}
}
dl {
	margin-bottom: 1rem;
	dt {
		font-weight: bold;
	}
	dd {
		overflow: auto;
		display: inline-block;
	}
}
span.label {
	color: var(--colour-text-faded);
	text-transform: capitalize;
}
.errors {
	color: red;
}
.container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--width-content);
	padding-left: var(--padding-gutter);
	padding-right: var(--padding-gutter);
	width: 100%;
}
.hex {
	background-color: var(--colour-bg-light);
	border: 1px solid var(--colour-bg);
	font-family: monospace;
	font-size: .825rem;
	padding-left: 2px;
	padding-right: 2px;
}
header.site {
	background-color: var(--colour-bg);
	border-bottom: 1px solid var(--colour-border);
	font-weight: 700;
	height: var(--height-header);
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10;
	.container {
		display: flex;
	}
	a {
		color: var(--colour-text-header);
	}
	.logo {
		margin-bottom: var(--gutter-header);
		margin-top: var(--gutter-header);
		max-width: 50%;
		img {
			height: var(--height-logo);
		}
	}
	nav {
		align-items: center;
		display: flex;
		flex-grow: 1;
		ul {
			display: flex;
			flex-direction: row;
			flex-grow: 1;
			justify-content: right;
			list-style: none;
			margin-bottom: var(--gutter-header);
			margin-top: var(--gutter-header);
			padding: 0;
			li {
				margin-left: 1rem;
				a {
					margin-right: 1rem;
					text-transform: capitalize;
				}
			}
		}
	}
}
.content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	&:has(.secondary) {
		flex-direction: row;
	}
	nav.secondary {
		border-right: 1px solid var(--colour-border);
		flex: 0 1 250px;
		margin-top: 2rem;
		padding-left: var(--padding-gutter);
		padding-right: var(--padding-gutter);
		ul {
			list-style: none;
			padding-left: 0;
		}
	}
	main {
		flex-grow: 1;
		padding-left: var(--padding-gutter);
		padding-right: var(--padding-gutter);
		position: relative;

		.highlight {
			clip-path: circle(50%);
			float: right;
			margin-top: -5%;
			margin-left: 2rem;
			margin-bottom: 2rem;
			margin-right: var(--padding-gutter);
			max-width: 500px;
			max-height: 500px;
			z-index: -10;
		}
		a {
			color: var(--colour-primary);
		}
	}
	nav.secondary + main {
		flex-grow: 1;
	}
}
footer.site {
	background-color: white;
	border-top: 1px solid var(--colour-border);
	color: var(--colour-text-faded);
	margin-top: 2rem;
	padding-bottom: 4rem;
	padding-top: 3rem;
	a {
		color: var(--colour-text-header);
	}
}
.files {
	list-style: none;
	padding-left: 0;
	.file {
		background-position: 5px;
		background-repeat: no-repeat;
		background-size: 2rem;
		display: flex;
		flex-direction: column;
		margin-bottom: 1.5rem;
		padding-left: 3rem;
		&.pdf { background-image: url(/img/icon-pdf.svg); }
		&.gz { background-image: url(/img/icon-gz.svg); }
		&.zip { background-image: url(/img/icon-zip.svg); }
		&.sha256 { background-image: url(/img/icon-txt.svg); }
		.size {
			color: var(--colour-text-faded);
			display: inline-block;
		}
	}
}
body.admin {
	header.site { background-color: red; }
	.field { display: block; }
	.company { color: var(--colour-text-faded); }
	li.user {
		display: inline-block;
		outline: 1px solid black;
		padding: 5px;
		vertical-align: top;
		width: 24%;
	}
}
body.home {
	background-color: var(--colour-bg);
	h1 {
		margin-top: 160px;
	}
	header.site {
		background-color: white;
	}
	main {
		overflow: hidden;
	}
}
body.about {
	.container.content {
		overflow: hidden;
	}
}
body.trust-anchors {
	.certificate {
		font-size: 1rem;
	}
}

@media (width <= 1240px) {
	.content {
		main {
			.highlight {
				float: none;
				margin: 0;
				opacity: 0.3;
				position: absolute;
				right: 0;
				top: -90px;;
			}
		}
	}
	body.home {
		h1 {
			margin-top: 60px;
		}
	}
}
.toggler {
	color: #676c6e;
	cursor: pointer;
	display: none;
	margin-bottom: var(--gutter-header-mobile);
	margin-top: var(--gutter-header-mobile);
	text-align: right;
	text-transform: uppercase;
	width: 50%;
}
.toggle-state {
	display: none;
}
.toggle-state:checked ~ .toggled {
	visibility: visible;
}

/* taken from Pandoc HTML5 CSS */
/* .sourceCode { overflow: visible; } */
/* blockquote { margin: 1em 0 1em 0; padding-left: 1em; border-left: 2px solid #e6e6e6; } */
/* code.sourceCode > span { color: inherit; text-decoration: inherit; } */
/* code{white-space: pre-wrap;} */
/* div.sourceCode { margin: 1em 0; } */
/* pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } */
/* pre > code.sourceCode > span:empty { height: 1.2em; } */
/* pre > code.sourceCode { white-space: pre; position: relative; } */
/* pre code { padding: 0; overflow: visible; overflow-wrap: normal; } */
/* pre { margin: 1em 0; overflow: auto; } */
/* pre.numberSource code > span > a:first-child::before { content: counter(source-line); position: relative; left: -1em; text-align: right; vertical-align: baseline; border: none; display: inline-block; padding: 0 4px; width: 4em; color: #aaaaaa; } */
/* pre.numberSource code > span { position: relative; left: -4em; counter-increment: source-line; } */
/* pre.numberSource code { counter-reset: source-line 0; } */
/* pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; } */
/* pre.sourceCode { margin: 0; } */
/* span.smallcaps{font-variant: small-caps;} */
/* @media screen { */
/* 	pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } */
/* 	div.sourceCode { overflow: auto; } */
/* } */
/* @media print { */
/* 	pre > code.sourceCode { white-space: pre-wrap; } */
/* 	pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } */
/* } */

code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */

@media screen and (width <= 900px) {
	body {
		padding-top: var(--height-header-mobile);
	}
	.toggler {
		display: block;
		line-height: var(--height-logo);
	}
	.toggled {
		height: 100vh;
		visibility: collapse;
		width: 100%;
	}
	.content {
		flex-direction: column;
		overflow: auto;
		padding: 0;
		&:has(.secondary) {
			flex-direction: column;
		}
		nav.secondary {
			flex-basis: fit-content;
			border-right: 0;
		}
		main {
			padding-left: var(--padding-gutter);
			padding-right: var(--padding-gutter);
			.highlight {
				right: -90px;
			}
		}
	}
	form {
		input, textarea, select {
			width: 100%;
		}
	}
	header.site {
		height: var(--height-header-mobile);
		min-height: var(--height-header-mobile);
		.logo {
			margin-bottom: var(--gutter-header-mobile);
			margin-top: var(--gutter-header-mobile);
		}
		nav {
			align-items: flex-start;
			background-color: var(--colour-bg);
			left: 0;
			position: absolute;
			top: var(--height-header-mobile);
			ul {
				flex-direction: column;
				margin-bottom: 2rem;
				margin-top: 0;
				li {
					margin-bottom: 1rem;
					margin-top: 1rem;
				}
			}
		}
	}
}