/* Font */

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-regular.woff2) format("woff2");
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-regular-italic.woff2) format("woff2");
	font-style: italic;
	font-weight: normal;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-extrabold.woff2) format("woff2");
	font-style: normal;
	font-weight: bold;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url(/public/fonts/atkinson-hyperlegible-next-extrabold-italic.woff2) format("woff2");
	font-style: italic;
	font-weight: bold;
}

/* Default styles */

* {
	margin: 0;
	padding: 0;
	font-family: "Atkinson Hyperlegible Next", sans-serif;
	box-sizing: border-box;
}   
body {
	font-size: 14px;
}
*:focus,
a:hover {
	outline: 0.2em solid #f00;
}
ol, ul {
	list-style-position: inside;
}

/* Header */

header {
	padding: 1em;
	border-bottom: 1px solid #000;
}

/* Logo and main heading */

header div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
h1 {
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: 1em;
}
h1 svg {
	width: 3em;
}
h1 line {
	stroke: #fff;
	stroke-width: 0.15em;
	stroke-linecap: round;
}

/* Menu button */

header button {
	display: flex;
	align-items: center;
	gap: 0.5em;
	background-color: transparent;
	border: 1px solid #000;
	border-radius: 0.5em;
	padding: 1em;
}
header button svg {
	width: 1em;
	transition: transform 0.2s;
}
header button line {
	stroke: #000;
	stroke-width: 0.15em;
	stroke-linecap: round;
}
header [aria-expanded=true] svg {
	transform: rotate(180deg);
}
header button:hover,
header button:focus {
	box-shadow: 0.5em 0.5em 0 #333;
	background-color: #fcc;
	cursor: pointer;
}

/* Navigation menu */

header nav {
	padding: 2em;
	display: none;
}
header nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2em;
}
header nav li {
	list-style-type: none;
}
header nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #000;
	padding: 1em;
}
header nav svg {
	width: 3em;
}
header nav line {
	stroke: #fff;
	stroke-width: 0.2em;
	stroke-linecap: round;
}
a:focus .ico-base,
a:hover .ico-base {
	fill: #c00;
}
circle.ico-wcag {
	fill: none;
	stroke: #fff;
	stroke-width: 0.6em;
}
circle.ico-contact {
	fill: #fff;
}

/* Footer */

footer {
	padding: 2em 0;
	text-align: center;
	border-top: 1px dashed #333;
}
footer ul {
	display: flex;
	justify-content: center;
	gap: 2em;
	padding: 1em 0;
	list-style-type: none;
}
footer a {
	padding: 0.5em;
}

/*
@media (prefers-color-scheme: dark) {
}
*/
@media (min-width: 1024px) {
	body {
		font-size: 18px;
	}
}
@media print {
	header button,
	footer {
		display: none;
	}
}