.site-header {
	z-index: 10;
	a {
		text-decoration: none;
		color: inherit;
		&:link {

		}
		
		&:visited {
		
		}
		
		&:focus {
			background: var(--primary-accent-transparent);
			padding: unset;
			border-radius: unset;
		}
		
		&:hover {
			
		}
		
		&:active {
		
		}
	}
	.container {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	background: var(--ui-background);
	color: var(--ui-text);
	
}

.site-masthead {
	display: flex;
	flex-flow: row-reverse;
	align-items: center;
	padding: 1em 0;
	gap: 1em;
	flex: 1;
	@media (min-width: $container-width) {
		flex: unset;
	}
}
.site-icon {
	width: 2em;
	height: 2em;
	border-radius: 100em;
}
.site-title {
	margin: 0;
	line-height: 1;
	font-size: 1em;
}

.site-nav {
	flex-grow: 1;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	background: var(--ui-background);
	color: var(--ui-text-muted);
	z-index: 2;
	ul {
		height: var(--nav-height);
		max-width: $container-width;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		li {
			flex: 1;
			border-bottom: 4px solid var(--ui-background-track);
			&.active {
				color: var(--ui-text-bold);
				border-bottom: 6px solid var(--primary-accent);
				font-weight: 700;
			}
			a {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				span {padding: 0.25em;}
				svg {
					width: 1em;
					height: 1em;
				}
				&:link {

				}
				
				&:visited {
				
				}
				
				&:focus {
					background: var(--primary-accent-transparent);
					padding: unset;
					border-radius: unset;
				}
				
				&:hover {
					
				}
				
				&:active {
				
				}
			}
		}
	}
	box-shadow: 0px -2px 2px rgba(0,0,0,0.2);
	@media (min-width: $container-width) {
		position: unset;
		bottom: unset;
		left: unset;
		flex-grow: unset;
		width: 20em;
		box-shadow: unset;
	}
}

@media (min-width: $container-width) {
	.site-header {
		position: sticky;
		top: 0;
	}
}