/**
 * Text alignment
 */
.nav-wrap {
	text-align: center;

	@media (max-width: $bp-medium) {
		.js-astro &.nav-collapse  {
			text-align: left;
		}
	}

	@media (min-width: $bp-medium) {
		text-align: left;
	}
}


/**
 * Logo
 */
.logo {
	color: $color-black;
	display: inline-block;
	font-size: 1.2em;
	line-height: 1.2;
	margin-bottom: calc-em(8px);
	text-decoration: none;

	&:hover {
		color: $color-black;
		text-decoration: none;
	}

	@media (min-width: $bp-medium) {
		.js-astro .nav-collapse & {
			float: left;
		}
	}

	@media (min-width: $bp-medium) {
		float: left;
	}
}


/**
 * Navigation Menu Container
 */
.nav-menu {

	@media (max-width: $bp-medium) {
		.js-astro .nav-collapse & {
			box-sizing: border-box;
			display: none;
			width: 100%;

			&.active {
				display: block;
			}

			li {
				display: block;
				width: 100%;
				padding-top: calc-em(4px);
				padding-bottom: calc-em(4px);
				box-sizing: border-box;
			}
		}
	}
}


/**
 * Navigation Menu
 */
.nav {
	list-style: none;
	margin: 0 calc-em(-8px);
	padding: 0;

	& > li {
		display: inline-block;
		float: none;
		margin-left: calc-em(8px);
		margin-right: calc-em(8px);

		// Active Link Styling
		&.active > a {}
	}

	@media (max-width: $bp-medium) {
		.js-astro .nav-collapse & {
			text-align: left;
		}
	}

	@media (min-width: $bp-medium) {
		text-align: right;
	}
}


/**
 * Navigation Toggle
 */
.nav-toggle {
	display: none;
	visibility: hidden;

	@media (max-width: $bp-medium) {
		.js-astro .nav-collapse & {
			display: block;
			float: right;
			visibility: visible;
		}
	}
}


/**
 * Clearfix
 */

.nav-wrap:before,
.nav-wrap:after {
	display: table;
	content: "";
}

.nav-wrap:after {
	clear: both;
}