/* 
 * The Navigation menu.
 */

/* 
 * section.topnav
 * #navbarNav
 */
 
 
/*
 * top-nav is the main navigation menu
 *
 * grep in themes/segm/templates/: 
 *     templates/layout/page-menu.html.twig
 */

section.top-nav {
	/* v1, v2, v3, v4 */
	padding: 40px 0 20px 0;
	
	/* v4 */
	padding-bottom: 1.6em;
	box-shadow: 0px 0px 17px 0px #9F9F9F;
	padding-top: 2em;
	z-index: 550;
	position: relative;
}

section.top-nav .container {
	/* v4 */
	/*! max-width: 1450px; */
}

section.top-nav nav {
	/* v1, v2, v3, v4 */
	display: flex;
}

section.top-nav nav a {
	/* v1, v2, v3 */
	margin: 0 1.2em;
	color: #4D4D4D;
	text-transform: none;
	font-family: "Metropolis";
	font-weight: bolder;
	font-size: 19px;
	position: relative;
	
	/* v4 */
	margin: 0 0.9em;
	color: #4D4D4D;
	text-transform: none;
	font-family: "Metropolis";
	font-weight: bolder;
	position: relative;
	
	/* v4 */
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: #000;
	padding: 0 1em;
	margin: 0;
	font-size: 13pt;
}

section.top-nav nav a.is-active:after {
	/* v1, v2, v3, v4 */
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.5em;
	width: 100%;
	height: 3px;
	background-color: #0D8894;
}

section.top-nav nav a:hover {
	/* v1, v2, v3, v4 */
	text-decoration: none;
	Color: #000;
	
	/* v4 */
	text-decoration: underline;
}

section.top-nav nav a.is-active {
	/* v4 */
	color: #0d8894;
	font-weight: 600;
}

section.top-nav nav a.is-active::after {
	/* v4 */
	display: none;
}

@media (max-width: 991px) {
	
	#navbarNav {
		/* v1, v2, v3, v4 */
		display: block;
		padding-top: 1.5em;
		padding-bottom: 0.5em;
	}

	#navbarNav:not(.show) {
		/* v1, v2, v3, v4 */
		display: none;
	}

	#navbarNav nav {
		/* v1, v2, v3, v4 */
		display: block;
	}

	#navbarNav nav a {
		/* v1, v2, v3, v4 */
		display: block;
		width: max-content;
		margin-bottom: 1.4em;
	}

	section.top-nav nav a.is-active::after {
		/* v1, v2, v3, v4 */
		bottom: 0.1em;
	}
}

/* v4 has the following screen-width related things: */

@media (max-width:1100px) {
	
	section.top-nav nav {
		/* v4 */
		margin-top: 1em;
	}
}

@media (max-width:800px){
	
	section.top-nav nav {
		/* v4 */
		margin-top: 1em;
	}
}



/*
 * navbar-toggler is apparently the main navigation hamburger shown when the browser is in portrait mode.
 * I don't know what actually makes the change, presumably something in the base theme "stable"?
 *
 * grep in themes/segm/templates/: 
 *     templates/layout/page-menu.html.twig
 */

.navbar-toggler {
	/* v1, v2, v3, v4 */
	position: absolute;
	top: -1em;
}

.navbar-toggler-icon {
	/* v1, v2, v3, v4 */
	background-image: url(../images/iconfinder_menu.svg);
}



/*
 * home-link, in the main navigation menu, is an <a> that wraps around the SEGM logo.
 *
 * grep in themes/segm/templates/: 
 *     templates/layout/page-menu.html.twig
 */

.home-link {
	/* v4 */
	padding: 0 2.5em 0 0;
	display: flex;
}

.home-link img {
	/* v1, v2, v3, v4 */
	max-width: 100%;
	
	/* v4 */
	width: 100%;
}

@media (max-width: 991px) {
	
	.home-link img {
		/* v1, v2, v3, v4 */
		margin-bottom: 1.5em;
	}
}