@import '../includes/fonts/montserrat';

$header-height: 400px;
$mobile-header-height: 230px;

$header-border-height: 80px;
$mobile-header-border-height: $nav-menu-side;

body.has-header-background {
	.site-header {
		background: none;
	}
}

#header-wrapper {
	background: url(/assets/header:background) center no-repeat;
	@media screen and ($min-desktop-viewport) {
		height: $header-height;
		border-top: $header-border-height solid $primary-color;
	}
	@media screen and ($max-mobile-viewport) {
		height: $mobile-header-height;
		border-top: $mobile-header-border-height solid $primary-color;
		background-size: cover;
	}
}

#header #top #logo {
	position: absolute;
	line-height: 1em;
	margin-top: 10px;
	padding-left: 0;
	@media screen and ($min-desktop-viewport) {
		top: -$header-border-height;
	}
	@media screen and ($max-mobile-viewport) {
		top: -$mobile-header-border-height;
	}
	a {
		color: $secondary-color;
		@media screen and ($min-desktop-viewport) {
			text-indent: 150px;
		}
		@media screen and ($max-mobile-viewport) {
			text-indent: -10000px;
		}
	}
}

#toplinks {
	top: -$header-border-height;
	background: transparent;
	@media screen and ($max-mobile-viewport) {
		top: -$header-border-height;
		display: none;
	}
	a {
		color: white;
	}
}

#nav-wrapper {
	@media screen and ($max-mobile-viewport) {
		margin: 0;
		position: absolute;
		right: 0;
		top: $header-border-height;
		z-index: 1;
	}
	button {
		position: absolute;
		top: -$header-border-height;
		right: 0;
	}
}

div#nav {
	margin-top: -15px;
	ul {
		margin-top: 0;
	}
	ul ul > li a:not(:hover) {
		color: $tertiary-color;
	}
}

#nav-wrapper ul {
	border: none;
	li:last-child {
		border: none
	}
}

div.cell.foldable.folded > div > h2:first-child + picture {
	display: block;
}

#sidebar {
	box-shadow: 3px 3px 20px 0px #dedede;
	margin-right: 2.5em;
}

div.linkcell.has-asset-picture {
	border: 1px solid $secondary-color;
	text-transform: uppercase;
	font-size: 90%;
	&:hover {
		background-color: $secondary-color;
	}
	@media screen and ($max-mobile-viewport) {
		box-sizing: content-box;
	}
	a.image-link {
		padding: 5rem 0 0.5em 1.5em;
		background-position: 1rem 1rem;
		background-size: auto 2.5rem;
		background-repeat: no-repeat;
		display: block;
		&::after {
		    display: block;
		    margin-top: 0.5em;
		    content: '';
		    background: $tertiary-color;
		    width: 2em;
		    height: 2px;
		}
		@media screen and ($max-mobile-viewport) {
			padding-top: 1rem;
			padding-left: 5rem;
			background-position: 1rem center;
		}
		text-decoration: none;
	}
}

@mixin form-icon($content) {
	content: $content;
	font-family: FontAwesome;
}

div#footer-wrapper {
	padding: 66px 0 73px;
}
div#footer {
	* {
		box-sizing: content-box;
	}
	img {
		max-width: 100%;
		width: 320px;
		height: 163px;
	}
	border-color: #fff;
	max-width: 1320px;
	li {
		list-style: none;
	}
	a {
		color: #fff;
	}
	.ghost {
		display: none;
	}
	.btn:focus, .btn:hover {
		background-color: #0f183b;
		border-color: transparent !important;
		text-decoration: none;
	}
	address.site-infos__listitems {
		font-size: 0.75rem;
		font-weight: 400;
		font-style: normal;
		p:first-child {
			font-size: 1.05rem;
			font-weight: 700;
		}
		@media screen and (max-width: $my-mobile-limit) {
			text-align: center;
		}
	}
	a.contact-social__link {
		display: block;
		font-size: 1rem;
		font-weight: 700;
		border: solid 1px;
		border-radius: 5px;
		padding: 25px 0px 25px 25px;
	}
	a.contact-social__link:hover {
		background-color: $secondary-color;
		color: $primary-color;
	}
	a.contact-social__link::before {
		@include form-icon("\f003");
		font-weight: 400;
		padding-right: 10px;
		padding-top: 20px;
	}
	.social-networks {
		display: flex;
	}
	.social-networks li a::after {
		padding-left: 6px;
	}
	.social-networks {
		li:nth-child(1) a::after {
			@include form-icon("\f09a");
		}
		li:nth-child(2) a::after {
			@include form-icon("\f099");
		}
		li:nth-child(3) a::after {
			@include form-icon("\f16a");
		}
		li:nth-child(4) a::after {
			@include form-icon("\f16d");
		}
	}
	.social-networks__item a {
		height: 30px;
		width: 30px;
		border: 1px solid #fff;
		border-radius: 50%;
		display: grid;
		text-decoration: none;
	}
	div.menu-cross__nav {
		padding-left: 20px;
		ul {
			margin: 0;
			padding: 0;
			li {
				a {
					font-size: 0.7rem;
					text-transform: uppercase;
				}
			}
		}
	}
	.menu-cross__item::before {
		@include form-icon("\f105");
		padding-right: 5px;
		font-size: 0.8rem;
		font-weight: 800;
	}
}
