/*
	Shared top navigation bar — extracted from assets/css/main.css (header + slide-out menu)
	so pages outside the homepage/blog template (portfolioWoW.html, portfolioCC.html) can
	reuse the exact same nav without pulling in main.css's full page layout.
*/

@import url(fontawesome-all.min.css);

:root {
	--nav-color-primary: #522C81;
	--nav-color-accent: #14B8A6;
	--nav-color-surface: #FFFFFF;
	--nav-color-muted: #606060;
	--nav-color-text: #3A3A3A;
	--nav-font-heading: 'Work Sans', sans-serif;
}

/* Self-contained text baseline: #header/#menu must not inherit color or
   font-family from the host page's <body>, since pages outside the
   main.css template (portfolioWoW.html, portfolioCC.html, their subpages)
   set their own body color/font that would otherwise leak in here and
   make the shared nav render differently per page. */
#header, #menu {
	color: var(--nav-color-text);
	font-family: var(--nav-font-heading);
	font-size: 16px;
}

#header {
	display: flex;
	justify-content: space-between;
	background-color: var(--nav-color-surface);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	height: 4em;
	left: 0;
	line-height: 4em;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}

	#header a, #menu a {
	color: inherit;
	text-decoration: none;
	}

	#header ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	}

		#header ul li {
		display: inline-block;
		padding-left: 0;
		}

	#header h1 {
	/* normalize to a known 1rem baseline so the em-based padding/sizing below
	   is deterministic — host pages outside the main.css template don't carry
	   the UA-stylesheet reset that neutralizes <h1>'s default 2em/bold sizing */
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	height: inherit;
	line-height: inherit;
	padding: 0 0 0 1.5em;
	white-space: nowrap;
	}

		#header h1 a {
		font-size: 0.7em;
		}

	#header .links {
	flex: 1;
	border-left: solid 1px rgba(160, 160, 160, 0.3);
	height: inherit;
	line-height: inherit;
	margin-left: 1.5em;
	overflow: hidden;
	padding-left: 1.5em;
	}

		#header .links ul li {
		border-left: solid 1px rgba(160, 160, 160, 0.3);
		line-height: 1;
		margin-left: 1em;
		padding-left: 1em;
		}

		#header .links ul li:first-child {
		border-left: 0;
		margin-left: 0;
		padding-left: 0;
		}

		#header .links ul li a {
		border-bottom: 0;
		font-family: var(--nav-font-heading);
		font-size: 0.7em;
		font-weight: 400;
		letter-spacing: 0.25em;
		}

	#header .main {
	height: inherit;
	line-height: inherit;
	text-align: right;
	}

		#header .main ul {
		height: inherit;
		line-height: inherit;
		}

		#header .main ul li {
		border-left: solid 1px rgba(160, 160, 160, 0.3);
		height: inherit;
		line-height: inherit;
		white-space: nowrap;
		}

		#header .main ul li > * {
		display: block;
		float: left;
		}

		#header .main ul li > a {
		text-decoration: none;
		border-bottom: 0;
		color: var(--nav-color-muted);
		overflow: hidden;
		position: relative;
		text-indent: 4em;
		width: 4em;
		}

		#header .main ul li > a:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		}

		#header .main ul li > a:before {
		display: block;
		height: inherit;
		left: 0;
		line-height: inherit;
		position: absolute;
		text-align: center;
		text-indent: 0;
		top: 0;
		width: inherit;
		}

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

	#header .links {
	display: none;
	}

}

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

	#header {
	height: 2.75em;
	line-height: 2.75em;
	}

	#header h1 {
	padding: 0 0 0 1em;
	}

}

/* Slide-out menu (mobile) */

#menu {
	transform: translateX(25em);
	transition: transform 0.5s ease, visibility 0.5s;
	-webkit-overflow-scrolling: touch;
	background: var(--nav-color-surface);
	border-left: solid 1px rgba(160, 160, 160, 0.3);
	box-shadow: none;
	height: 100%;
	max-width: 80%;
	overflow-y: auto;
	position: fixed;
	right: 0;
	top: 0;
	visibility: hidden;
	width: 25em;
	z-index: 10002;
}

	#menu > * {
	border-top: solid 1px rgba(160, 160, 160, 0.3);
	padding: 3em;
	}

		#menu > * > :last-child {
		margin-bottom: 0;
		}

	#menu > :first-child {
	border-top: 0;
	}

	#menu .links {
	list-style: none;
	padding: 0;
	}

		#menu .links > li {
		border: 0;
		border-top: dotted 1px rgba(160, 160, 160, 0.3);
		margin: 1.5em 0 0 0;
		padding: 1.5em 0 0 0;
		}

		#menu .links > li a {
		display: block;
		border-bottom: 0;
		}

		#menu .links > li a h3 {
		font-weight: 600;
		letter-spacing: 0.05em;
		line-height: 1.3;
		transition: color 0.2s ease;
		font-size: 0.7em;
		}

		#menu .links > li a p {
		font-family: var(--nav-font-heading);
		font-size: 0.6em;
		font-weight: 400;
		letter-spacing: 0.25em;
		margin-bottom: 0;
		text-decoration: none;
		}

		#menu .links > li a:hover h3 {
		color: var(--nav-color-accent);
		}

		#menu .links > li:first-child {
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
		}

	body.is-menu-visible #menu {
	transform: translateX(0);
	visibility: visible;
	}

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

	#menu > * {
	padding: 1.5em;
	}

	}

.brand-name {
	color: var(--nav-color-primary);
}

/* Push page content below the fixed header */
body.has-site-nav {
	padding-top: 4em;
}

@media screen and (max-width: 736px) {
	body.has-site-nav {
	padding-top: 2.75em;
	}
}