/*
	Site navigation bar.

	Not part of HTML5 UP "Story" — that template ships no nav component. Kept in its own
	file rather than in main.css, because main.css is compiled from assets/sass/ and any
	edit there is lost on the next Sass build. Load this AFTER main.css.

	The bar is a fixed overlay and deliberately does not push content down: index.html's
	banner is `fullscreen` (100vh) and padding on the wrapper would cause a scroll seam.
	On the inner pages `.wrapper.style1 > .inner` already has 7rem of top padding, so the
	bar floats over whitespace rather than over any text.
*/

#site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: solid 1px rgba(255, 255, 255, 0.125);
}

#site-nav .site-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 3.5rem;
	height: 3.5rem;
}

#site-nav a {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: none;
	color: #ffffff;
	transition: color 0.2s ease;
}

#site-nav a:hover,
#site-nav a:focus-visible {
	color: #47D3E5;
}

#site-nav a:focus-visible {
	outline: 2px solid #47D3E5;
	outline-offset: 4px;
}

#site-nav .site-nav-brand {
	letter-spacing: 0.15rem;
	white-space: nowrap;
}

#site-nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-nav li {
	padding: 0;
}

/* Current page: underline via box-shadow so it doesn't fight Story's border rules. */
#site-nav a[aria-current="page"] {
	color: #47D3E5;
	box-shadow: inset 0 -2px 0 0 #47D3E5;
}

@media screen and (max-width: 736px) {

	#site-nav .site-nav-inner {
		padding: 0 1.5rem;
		height: 3rem;
		gap: 1rem;
	}

	#site-nav a {
		font-size: 0.7rem;
		letter-spacing: 0.1rem;
	}

	#site-nav ul {
		gap: 1.25rem;
	}

	/* Brand would crowd the links on narrow screens; the links still reach every page. */
	#site-nav .site-nav-brand {
		display: none;
	}

}