/**
 * Nav
 *
 * Description: Contains styling for the navigations.
 * Version: 1.0.8
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Nav grid/list
 * 2.0 - Nav list
 *   2.1 - Nav grid/list (responsive)
 * 3.0 - Nav tree
 * 4.0 - Nav service
 *   4.1 - Nav service (responsive)
 * 5.0 - Breadcrumbs
 *   5.1 - Breadcrumbs (responsive)
 * 6.0 - Follow
 * 7.0 - Ordered/unordered column
 *   7.1 - Ordered/unordered column (reponsive)
 * 8.0 - Jump to top
 * 9.0 - Nav mobile contacts
 * 10.0 - Nav language
 *   10.1 - Nav language (Responsive)
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Nav grid/list
 * -----------------------------------------------------------------------------
 */

.nav-grid, .nav-list {
	background-color: $white;
	border-bottom: em(15px) solid $white;
	padding: em(15px) em(15px) 0 em(15px);
	overflow: hidden;

	.nav-grid-header {
		padding: em(4px) em(15px) em(12px);

		> * {
			margin-bottom: 0;
		}
	}

	ul {
		margin: 0 em(-1px) em(-1px) 0;
		padding: 0;
		overflow: hidden;
		list-style: none;

		&.indent li {
			padding-left: em(20px);
		}

		li {
			background-color: $white;
			position: relative;
			border: 1px solid $grey-lighter;
			border-width: 0 em(1px) em(1px) 0;
			margin: 0;
			padding-left: 0;
			overflow: hidden;

			&:nth-child(3n) {
				border-right: 0;
			}

			a {
				display: block;
				padding: em(9px) em(25px) 0 em(15px);
				height: em(127px);
				border: em(3px) solid $white;

				&:hover {
					text-decoration: none;
					background-color: $hover-background-color;
					border-color: $hover-background-color;

					.header {
						text-decoration: underline;
					}
				}

				&:focus {
					border-color: $accent-color-negative-dark;
					box-shadow: none;
					outline: 0;
					margin-right: em(3px);
				}

				&.is-disabled {
					color: $grey-dark;
					cursor: default;
					pointer-events: none;

					&:hover, &:focus {
						background-color: transparent;
						border-color: $white;
					}
				}

				.header {
					display: block;
					@include addLinkArrow();
				}

				.description {
					display: block;
					font-size: em(16px);
					line-height: em(24px, 16px);
					margin-bottom: em(16px, 16px);
					color: $text-color;
					text-decoration: none !important;
					height: em(70px, 16px);
					overflow: hidden;
				}
			}
		}
	}
}

.nav-grid {
	ul {
		display: flex;
		flex-wrap: wrap;

		li a {
			height: auto !important;
		}
	}
}


/**
 * 2.0 - Nav list
 * -----------------------------------------------------------------------------
 */

.nav-list {
	padding: 0;
	border-bottom: 0;

	&.nav-list-block {
		border-bottom: em(10px) solid $white;
		padding: em(10px) em(13px) 0 em(13px);
	}

	&.nav-list-small {
		ul {
			margin-bottom: 0;

			li {
				border-bottom: 1px solid $grey-lighter;

				a {
					$font-size: 18px;
					font-size: em(18px);
					line-height: em(22px, $font-size);
					padding: em(8px, $font-size) em(15px, $font-size) em(10px, $font-size) 0;
					@include addLinkArrow();

					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}

	ul {
		li {
			width: 100%;
			float: none;
			border-right: 0;

			a {
				height: auto;
				padding: em(13px) em(25px) em(9px) em(15px);

				.description {
					height: auto;
					max-width: em(580px, 16px);
					margin: 0 0 em(1px, 16px) 0;
				}
			}
		}
	}

	ul ul > li:last-child {
		border-bottom: 0;
	}
}


/**
 * 2.1 - Nav grid/list (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.nav-grid, .nav-list {

		.nav-grid-header {
			padding-left: 0;
			padding-right: 0;
		}

		ul {
			li {
				a {
					min-height: em(55px);
					padding: em(10px) em(0px) em(2px) em(0px);

					.description {
						padding-bottom: 0;
						margin-bottom: em(12px, 16px);
						height: auto;
					}
				}
			}
		}

		&.nav-list-small {
			ul li a {
				$font-size: 18px;
				padding: em(8px, $font-size) em(15px, $font-size) em(8px, $font-size) 0;
				min-height: 0;
			}
		}
	}

	.nav-grid {
		border-bottom: em(10px) solid $white;
		padding: em(10px) em(13px) 0 em(13px);

		ul {
			li {
				border-right: 0;

				a {
					height: auto;
				}
			}
		}
	}
}



/**
 * 3.0 - Nav tree
 * -----------------------------------------------------------------------------
 */

.nav-tree {
	$font-size: 18px;
	font-size: em($font-size);

	&--microsite {
		margin-top: em(60px);
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			position: relative;
			border-bottom: 1px solid $grey-light;

			&.has-children:after {
				@include huddingeIcons();
				content: "\f105";
				color: $grey;
				display: block;
				position: absolute;
				font-size: em(22px, $font-size);
				top: em(12px, 22px);
				right: em(8px, 22px);

				&.is-active-trail {
					content: "\f107";
				}
			}

			&.has-children.is-active-trail:after {
				content: "\f107";
			}

			a {
				display: block;
				color: $text-color;
				padding: em(10px, $font-size) em(23px, $font-size) em(9px, $font-size);

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

				&.is-active {
					background-color: $hover-background-color;
					//color: $white;
					font-weight: bold;
				}
			}
		}
	}

	/* We increase the padding of a with 17px for each ul level. */
	$chain: '';
	@for $i from 0 to 7 {
		$chain: $chain + 'ul ';
		$padding: 11px + (17px * $i + 1);
		#{$chain} a {
			padding-left: em($padding, $font-size);
		}
	}

	> ul {
		border-top: em(4px, $font-size) solid $accent-color;
		ul {
			display: none;
			border-top: em(1px) solid $grey-light;
		}
		> li.is-active-trail {
			border-top: em(1px) solid $pink;
			margin-top: em(-1px);
			border-bottom: 0;
		}
	}

	> ul > li.is-active-trail > a, > ul > li.is-active-trail > a.is-active {
		color: $white;
		background-color: $accent-color;
	}

	li.is-active-trail {
		a {
			background-color: $pink-lightest;
			&.is-active {
				background-color: $hover-background-color;
			}
		}

		 > ul {
			 display: block;

			 > li:last-child {
				 border-bottom: 0;
			 }
		 }
	}

	> ul > li.is-active-trail > ul {
		> li:last-child {
			border-bottom: 1px solid $accent-color;
		}
	}

	.tab-content & > ul {
		border-top: 0;
	}
}



/**
 * 4.0 - Nav service
 * -----------------------------------------------------------------------------
 */

.nav-service {
	ul {
		@include clearfix();
		padding: 0;
		list-style: none;

		li {
			float: left;
		}
	}

	> ul {
		margin: 0;

		> li {
			text-align: center;
			padding: em(10px) em(11px) em(6px);
			border-left: 1px solid $grey-light;

			&:first-child {
				padding-left: 0;
				border-left: 0;
			}

			> .label {
				$font-size: 15px;
				font-size: em($font-size);
				height: em(82px, $font-size);
				display: block;
				//color: $grey-darker;
				padding: em(9px, $font-size) em(10px, $font-size) em(19px, $font-size);
				margin: em(-9px, $font-size) 0 em(-20px, $font-size);

				.icon {
					display: block;
					font-size: em(30px, $font-size);
					line-height: em(20px, 30px);
					padding-bottom: em(6px, 30px);
				}

				&:hover, &.is-active {
					background-color: $hover-background-color;
					text-decoration: none;
				}
			}
		}
	}
}

.nav-service-content {
	background-color: $hover-background-color;

	.nav-dropdown-bar {
		ul {
			@include clearfix();
			padding: 0;
			margin: 0;
			list-style: none;

			li {
				float: left;
			}
		}

		> .nav-dropdown-bar-inner {
			padding: em(23px) 0 em(23px) 16%;

			li {
				margin: 0 em(13px);
				min-height: em(56px);
				line-height: em(56px);
				vertical-align: middle;
			}

			p {
				margin: em(15px) 0 0 0;
			}

			a {
				@include addLinkArrow();

				&.btn {
					color: $white;
				}
			}

			.icon {
				font-size: em(40px);
				color: $text-color;
				vertical-align: middle;
				display: inline-block;
				margin-top: em(-5px, 40px);
			}

			form {
				width: 80%;
			}
		}
	}
}


/**
 * 4.1 - Nav service (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-medium-min) {
	.nav-service-content {
		.nav-dropdown-bar {
			> .nav-dropdown-bar-inner {
				padding-left: 0;

				form {
					width: 100%;
					padding: 0 em(10px);
				}
			}
		}
	}
}

@media (max-width: $device-small-max) {
	.nav-service {
		> ul > li {
			padding: em(4px) em(8px) em(8px);
			margin-bottom: em(12px);

			&.is-hidden-small + li {
				padding-left: 0;
				border-left: 0;
			}

			> .label {
				$font-size: 13px;
				font-size: em($font-size);
				height: em(75px, $font-size);
				padding: em(5px, $font-size) em(8px, $font-size) em(23px, $font-size);
				margin: em(-5px, $font-size) 0 em(-23px, $font-size);

				.icon {
					font-size: em(26px, $font-size);
					line-height: em(20px, 26px);
				}
			}
		}
	}

	.nav-service-content {
		.nav-dropdown-bar {
			> .nav-dropdown-bar-inner {
				li {
					display: block;
					float: none;
					padding-bottom: em(10px);

					&:last-child {
						padding-bottom: 0;
					}
				}
			}
		}
	}
}

@media (max-width: $device-xsmall-max) {
	.nav-service {
		> ul > li {
			padding: em(6px) em(4px);
			margin-bottom: 0;

			> .label {
				$font-size: 12px;
				font-size: em($font-size);
				height: em(82px, $font-size);
				padding: em(5px, $font-size) em(5px, $font-size) em(19px, $font-size);
				margin: em(-5px, $font-size) 0 em(-19px, $font-size);

				.icon {
					font-size: em(24px, $font-size);
					line-height: em(20px, 24px);
				}
			}
		}
	}
}



/**
 * 5.0 - Breadcrumbs
 * -----------------------------------------------------------------------------
 */

.nav-breadcrumbs {
	@include clearfix();
	padding: 0;
	list-style: none;
	margin: 0;

	li {
		float: left;

		&.seperator {
			padding: 0 em(10px);
		}
	}
}


/**
 * 5.1 - Breadcrumbs (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.nav-breadcrumbs {
		margin: em(-10px, 16px) 0 em(-15px, 16px);
		font-size: em(16px);

		li {
			padding-bottom: em(5px, 16px);
			display: none;

			&:nth-last-child(3) {
				display: block;

				&:before {
					content: "«";
					margin: 0 5px;
				}
			}
		}
	}
}



/**
 * 6.0 - Follow
 * -----------------------------------------------------------------------------
 */

.nav-follow {
	@include clearfix();
	padding: 0;
	list-style: none;
	margin: 0;
	margin-top: em(14px);

	li {
		float: left;
		margin-right: em(10px);

		&:last-child {
			margin-right: 0;
		}

		a {
			$font-size: 40px;
			display: inline-block;
			width: em(70px, $font-size);
			height: em(70px, $font-size);
			line-height: em(70px, $font-size);
			font-size: em($font-size);
			border: em(6px, $font-size) solid $accent-color;
			border-radius: 50%;
			text-align: center;
			vertical-align: middle;

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

			&.instagram {
				line-height: em(67px, $font-size);
			}
			&.linkedin {
				line-height: em(62px, $font-size);
			}
		}
	}
}



/**
 * 7.0 - Ordered/unordered column
 * -----------------------------------------------------------------------------
 */

.nav-ordered-column, .nav-unordered-column {
	@include clearfix();
	border-bottom: em(4px) solid $accent-color;
	padding-bottom: em(33px);
	margin-bottom: em(13px);

	ol {
		margin: 0;
		padding: 0 0 0 em(27px);
		//list-style-position: inside;

		li {
			padding: 0 em(30px) em(10px) 0;

			a {
				display: block;
				margin-left: em(8px);
			}
		}
	}
}

.nav-unordered-column {
	ol {
		list-style: none;
		li {
			position: relative;

			&:before {
				content: "»";
				position: absolute;
				font-size: em(22px);
				left: em(-18px, 22px);
				top: em(-2px, 22px);
			}
		}
	}
}


/**
 * 7.1 - Ordered/unordered column (reponsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.nav-ordered-column, .nav-unordered-column {
		padding-bottom: em(27px);

		ol, ul {
			font-size: em(17px);
		}

		ol li {
			padding-bottom: em(6px, 17px);

			a {
				margin-left: em(6px, 17px);
			}
		}
	}
}



/**
 * 8.0 - Jump to top
 * -----------------------------------------------------------------------------
 */

.jump-to-top {
	$font-size: 30px;

	font-size: em($font-size);
	position: fixed;
	right: em(30px, $font-size);
	bottom: 0;
	display: block;
	width: em(60px, $font-size);
	height: em(60px, $font-size);
	line-height: em(50px, $font-size);
	text-align: center;
	vertical-align: middle;
	background: rgba(188, 190, 192, 0.6);
	color: $text-color;
	z-index: 850;

	.leave-site-button + & {
		bottom: em(59px, $font-size);
	}

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

	@media (max-width: $device-small-max) {
		right: 2%;
		width: em(65px, $font-size);
		height: em(70px, $font-size);
	}
}



/**
 * 9.0 - Nav mobile contacts
 * -----------------------------------------------------------------------------
 */

.nav-mobile-contacts {
	@include font-size($p-small-sizes);
	list-style: none;
	margin: $margin-standard 0 $margin-standard / 4 em(10px, getFontsize($p-small-sizes, null));
	padding: 0;

	li {
		padding-bottom: em(10px, getFontsize($p-small-sizes, null));

		.icon {
			padding-right: em(3px, getFontsize($p-small-sizes, null));
		}
	}
}



/**
 * 10.0 - Nav language
 * -----------------------------------------------------------------------------
 */

.nav-language {
	position: relative;
	padding: em(27px) $margin-standard * 2 0;
	z-index: 100;
	margin-bottom: em(-20px);
	overflow: hidden;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: right;

		li {
			display: inline;
			padding-right: em(25px);

			&:last-child {
				padding-right: 0;
			}

			&.language-icon {
				padding-right: em(1px, 22px);
				color: $link-color;
			}

			&.left {
				float: left;
			}

			.icon {
				vertical-align: middle;
				font-size: em(22px);
				padding-right: em(6px, 22px);
			}

			a[aria-expanded="true"] {
				color: $text-color;
				text-decoration: underline;
			}
		}
	}

	.language-block & {
		margin-bottom: 0;
		padding: em(20px) $margin-standard * 2;
	}
}


/**
 * 10.1 - Nav language (Responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-medium-max) {
	.nav-language {
		margin-bottom: 0;
	}
}

@media (max-width: $device-small-max) {
	.nav-language {
		font-size: em(17px);
		padding-left: $margin-standard / 2;
		padding-right: $margin-standard / 2;
	}
}