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

#header {
	height: 150px;
	background-color: #fff;
	background-image: url('img/header-left.png'), url('img/logo.png');
	background-repeat: no-repeat;
	background-position: 0 center, 6em center;
	background-size: 5% auto, 55% auto;
	@media screen and ($max-mobile-viewport) {
		background-image: url('img/logo.png');
		background-position: 3em center;
		background-size: 75% auto;
	}
	#logo {
		text-indent: -999999px;
	}
}

#toplinks {
	background: $primary-color;
	border-radius: 0 0 0 1em;
	right: 0;
	padding: 1ex 2em 1ex 2em;
	a {
		color: #fff;
	}
}

div#nav {
	margin: 0 auto;
	> ul {
		margin: 0;
		display: flex;
		justify-content: space-between;
		> li {
			> a {
				font-size: 1.1em;
				line-height: 3.5em;
			}
			&.selected, &:hover {
				> a {
					background: $nav-item-hover-background;
					border-bottom: 5px solid $primary-color;
					@media screen and ($max-mobile-viewport) {
						border: 0;
					}
				}
			}
			&.selected {
				> a {
					font-weight: bold;
				}
			}
			&.menu-contact {
				border-top: 1px solid $nav-background;
				background: #fff;
				width: calc(#{$sidebar-width} - 20px);
				@media screen and ($max-mobile-viewport) {
					background: transparent;
					width: auto;
				}
				&.selected a {
					background: $nav-item-hover-background;;
					border-bottom: 5px solid $primary-color;
				}
				a {
					width: 100%;
					color: $primary-color;
					border-bottom: 5px solid #fff;
					@media screen and ($max-mobile-viewport) {
						border: 0
					}
					&:hover {
						border-bottom: 5px solid $primary-color;
						@media screen and ($max-mobile-viewport) {
							border: 0;
						}
					}
					span::after {
						@media screen and ($max-mobile-viewport) {
							display: none;
						}
						content: ' ';
						display: inline-block;
						background: url('img/contact.png') no-repeat;
						width: 1em;
						height: 1em;
						margin: 0 2ex;
						background-size: contain;
						background-position: 0 100%;
					}
				}
			}
			&.selected > a {
				font-weight: bold;
			}
			a {
				font-weight: normal;
			}
		}
	}
}

#content {
	#columns-wrapper {
		margin-top: 2ex;
		img {
			width: 100%;
		}
		div.menucell.navigation {
			li {
				&.selected {
					ul {
						display: block;
					}
					> a {
						color: $primary-color;
					}
				}
				ul {
					display: none;
				}
			}
		}
	}
	div.top {
		display: flex;
		flex-direction: row;
		margin-bottom: 2ex;
		.carrousel-wrapper {
			display: flex;
			flex: 0 0 calc(#{$width} - #{$sidebar-width});
			@media screen and ($max-mobile-viewport) {
				flex-direction: column;
				flex: 0;
			}
			div.menu {
				display: flex;
				align-items: center;
				width: 25%;
				@media screen and ($max-mobile-viewport) {
					width: 100%;
					margin: 0 auto;
					display: block;
				}
				a {
					text-align: center;
					@media screen and ($max-mobile-viewport) {
						text-align: justify;
					}
				}
				ul {
					border-right: 1px solid #000;
					@media screen and ($max-mobile-viewport) {
						border: 0;
					}
					li {
						margin: 10px 0;
						&.selected {
							border-right: 3px solid $primary-color;
							margin: 10px -2px;
							a {
								color: $primary-color;
							}
						}
					}
				}
			}
		}
		@media screen and ($max-mobile-viewport) {
			flex-direction: column;
		}
	}
	#sidebar {
		div.textcell.espace-personnel {
			margin-bottom: 0;
			h1 {
				padding: 0.5ex 1ex;
				background: $primary-color;
				color: #fff;
				text-align: right;
				margin: 0;
				font-size: 1.5em;
				&::after {
					content: '';
					display: inline-block;
					width: 65%;
					border-bottom: 1px solid #fff;
				}
			}
		}
		div.notificationscell {
			margin-top: 0.5em;
			h2 {
				background: transparent;
				color: $primary-color;
				border: 2px solid $nav-background;
				border-radius: 1em 0 0 1em;
			}
		}
		div.lien-agents {
			li a {
				background: #000000;
				color: #FFFFFF;
				border-radius: 1em 0 0 1em;
				text-align: right;
			}
		}
	}
	div.mes-demandes {
		background: $nav-background;
		border-radius: 0 0 0 1em;
		margin: 0;
		text-align: right;
		&:hover {
			background: $nav-submenu-background;
			color: $primary-color;
			a {
				color: $nav-item-selected-color;
			}
		}
		a {
			color: #000;
			font-weight: normal;
		}
	}
	div#espace-personnel {
		background: $primary-color url('img/moncompte.png') no-repeat;
		background-position: 250% 50%;
		background-size: contain;
		color: #fff;
		margin-bottom: 5px;
		padding: 0 0.5em 0.5em 0.5em;
		div.description {
			color: #fff;
			display: block;
			border: 0;
		}
		ul > li {
			text-align: right;
			> a {
				color: #fff;
				padding-bottom: 0;
				font-size: 1.2em;
				font-weight: 600;
			}
		}
	}
	div.searchcell {
		position: absolute;
		top: -7.5em;
		right: 0;
		border: 0;
		background: transparent;
		z-index: 10;
		width: 15em;
		form.combo-search-form {
			padding: 0;
			&:before {
				position: absolute;
				content: "\f002"; /* search icon */
				font-family: FontAwesome;
				display: block;
				width: 2em;
				height: 2em;
				top: 0.25em;
				padding-left: 5px;
				font-size: 1.5em;
				color: $primary-color;
			}
			input {
				border: 1px solid $primary-color;
				padding-left: 3.5ex;
				width: 25ex;
				color: $primary-color;
			}
		}
		button {
			display: none;
		}
		div.combo-search-results {
			background: $nav-item-hover-background;
			a {
				padding-bottom: 0;
			}
		}
	}
	div#gauche {
		width: 27.5%;
		@media screen and ($max-mobile-viewport) {
			width: 100%;
		}
		+  div#rub_service {
			width: 70.5%;
			@media screen and ($max-mobile-viewport) {
				width: 100%;
			}
		}
	}

	// STEPS
	.wcs-steps {
		@include desktop-vertical-steps() {
			clear: both;
			margin-top: $wcs-steps-spacing*3;
		}

	}
	.wcs-step {		
		&--marker {
			font-weight: bold;
		}
		@include desktop-vertical-steps() {
			flex-direction: row-reverse;
			padding-bottom: $wcs-steps-spacing*2;
			&--label {
				margin-right: $wcs-steps-spacing;
				text-align: right;
				font-size: .8em;
			}
			&::after {
				right: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
				left: auto;
			}
		}
	}

	div#tracking-code {
		h3 {
			font-size: 110%;
			display: inline;
			&::after {
				content: ':';
				padding: 0 0 0 1ex;
			}
		}
		a {
			font-size: 110%;
			color: $primary-color;
		}
	}
	div#liens-divers {
		max-width: $width;
		margin: 0 auto;
		div.description {
			display: block;
			text-align: center;
			font-size: 0.75em;
			border: 0;
		}
		ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			@media screen and ($max-mobile-viewport) {
				justify-content: space-around;
			}
			li {
				margin: 1ex 0.5ex;
				width: 10em;
				@each $category in (associations, base-nautique, demenagement, etat-civil, famille, mediatheque) {
					&.menu-#{$category} {
						@media screen and ($max-mobile-viewport) {
							background-color: $primary-color;
							box-shadow: 0px 0px 10px #888888;
							div.description {
								color: #FFFFFF;
							}
						}
						a {
							@media screen and ($max-mobile-viewport) {
								background-color: $primary-color;
								color: #FFFFFF;
							}
							background-image: url('img/#{$category}.png');
							background-repeat: no-repeat;
							background-position: center 0.5em;
							background-size: 5em;
							width: 10em;
							padding: 6em 0 0 0;
							&:hover {
								background-image: url('img/#{$category}-hover.png');
								@media screen and ($max-mobile-viewport) {
									background-color: $nav-item-hover-background;
									+ div.description {
										background-color: $nav-item-hover-background;
									}
								}
								background-repeat: no-repeat;
								background-size: 5em;
								background-position: center 0.5em;
								color: $primary-color;
								+ div.description {
									color: $primary-color;
								}
							}
						}
					}
				}
				a {
					text-align: center;
					white-space: nowrap;
					padding-bottom: 0;
					&:hover {
						background: transparent;
					}
				}
			}
		}
	}
	div.wcsformsofcategorycell {
		h2:first-child {
			background: transparent;
			color: $primary-color;
		}
		a {
			background: $primary-color;
			color: #ffffff;
			&::before {
				content: '\f061'; /* arrow-right */
				font-family: FontAwesome;
				width: 1em;
				margin-right: 0.5em;
			}
			&:hover {
				color: $primary-color;
				background: $nav-item-hover-background;
			}
		}
	}
	div.cell {
		p {
			line-height: 1.5em;
		}
	}
	div#a2-profile {
		div.field {
			margin: 0 0 1em 0;
			span.label {
				display: inline;
				font-weight: bold;
				font-size: 100%;
			}
			div.value {
				display: inline;
				&::before {
					content: ':';
					margin: 0 2px;
				}
			}
		}
	}
	input, textarea, select {
		border: 1px solid $primary-color;
	}
	span.helptext, div.hint {
		color: #767676;
	}
}

div.cell.sticky > div {
	position: fixed;
	bottom: 0;
	right: 0;
	background: $primary-color;
	border: 1px solid $nav-background;
	font-size: 85%;
	a {
		color: #ffffff;
	}
}

