$header-height: 400px;

html, body {
	background: #353e45;
}

div#header {
	display: flex;
	padding: 0;
	@media screen and ($max-mobile-viewport) {
		display: block;
		height: auto;
		min-height: 150px;
	}

	div#welcome {
		background: $primary-color;
		color: white;
		padding: 20px 30px 20px 20px;
		text-transform: uppercase;
		@media screen and ($max-mobile-viewport) {
			padding-top: 25px;
		}
		width: 100%;
		a {
			color: white;
			font-weight: bold;
		}
	}

	div#top {
		#toplinks {
			box-shadow: none;
			border: none;
			background: none;
			top: 20px;
			@media screen and ($max-mobile-viewport) {
				top: 0;
				left: 0;
				right: 0;
				padding: 0;
				max-width: none;
				text-align: right;
				padding-right: 1rem;
			}
			padding-top: 0;
			a, span {
				color: white;
				text-transform: uppercase;
				font-weight: bold;
			}
		}
	}

	div#header-title {
		display: none;
	}
}

.page-template-homepage_1col div#header,
.page-template-homepage div#header {
	height: $header-height;
	@media screen and ($max-mobile-viewport) {
		display: block;
		height: auto;
	}
	div#welcome {
		flex: 0 0 $sidebar-width;
		max-width: $sidebar-width;
		color: white;
		overflow: hidden;
		text-transform: none;
		padding: 20px 30px 20px 50px;
		h2 {
			border: 1px solid white;
			text-transform: uppercase;
			padding: 0.5ex 1ex;
			display: inline-block;
		}
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
	}


	div#top {
		background: url(img/bandeau.jpeg) top right no-repeat;
		flex-grow: 1;
		height: $header-height;
		text-align: center;
		@media screen and ($max-mobile-viewport) {
			height: auto;
			background-size: cover;
			padding-top: 3rem;
			padding-bottom: 3rem;
		}
	}


	div#header-title {
		display: block;
		width: 37rem;
		margin: $header-height / 3 auto 0 auto;
		@media screen and ($max-mobile-viewport) {
			width: 80%;
			margin-top: 0;
		}
		border: 2px solid white;
		text-transform: uppercase;
		padding: 1rem;
		color: white;
		a {
			color: white;
		}
		h1 {
			font-size: 2.857rem;
			@media screen and ($max-mobile-viewport) {
				padding-left: 0;
				font-size: 2.143rem;
			}
		}
		h2 {
			font-size: 1.429rem;
			font-weight: normal;
			@media screen and ($max-mobile-viewport) {
				font-size: 1.286rem;
				margin: 0;
			}
		}
	}
}

div#sidebar {
	.links-list h2 {
		padding-left: 1rem;
		text-transform: uppercase;
		color: #a9a9a9;
		font-weight: bold;
	}
}

div#content {
	padding-top: 1em;
	min-height: calc(100vh - 200px);
	@media screen and ($max-mobile-viewport) {
		padding-top: 0;
	}
}

.page-template-homepage_1col div#content,
.page-template-homepage div#content {
	min-height: calc(100vh - #{$header-height});
}

#content #sidebar {
	margin-top: -1em; /* cancel #content padding-top */
	background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);

	div.gris {
		background: #9099a4;
		color: white;
		margin-right: 0;
	}
	div.vert {
		background: $primary-color;
		margin-right: 0;
		a {
			color: white;
		}
	}
	div.textcell {
		padding: 1ex 1rem;
	}
	div.searchcell form {
		display: flex;
		input {
			width: 100%;
		}
		button {
			box-shadow: none;
		}
	}
	div.trackingcodeinputcell {
		padding-top: 1rem;
		padding-bottom: 0.2rem;
		h2 {
			margin-left: 1rem;
			color: white;
			text-transform: uppercase;
			display: inline-block;
			border: 1px solid white;
		}
		button {
			background: transparent;
			box-shadow: none;
		}
	}

	@media screen and ($max-mobile-viewport) {
		margin: 0;
	}

	a {
		color: $primary-color;
		font-weight: bold;
	}
}

#columns div.wcsformsofcategorycell {
	h2 {
		background: 1rem 1rem no-repeat;
		background-size: 100px;
		text-align: center;
		height: 128px;
		text-transform: uppercase;
		text-align: left;
		padding-left: 140px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-weight: bold;
		span {
			display: block;
			padding-bottom: 3px;
		}
		span.description {
			color: #666;
			display: block;
			text-transform: none;
			font-weight: normal;
			font-size: 90%;
		}
	}
	div.forms {
		position: static;
		z-index: 100;
		width: 100%;
		background: #ddf0d5;
		left: $sidebar-width;
		padding: 1rem;
		@media screen and ($max-mobile-viewport) {
			position: static;
			width: auto;
		}
		div.subtitle {
			clear: both;
			text-transform: uppercase;
			padding-left: 1rem;
			span {
				background: #ddf0d5;
				position: relative;
				z-index: 1;
				padding-right: 0.5rem;
			}
			&::after {
				content: "";
				border-bottom: 2px solid $primary-color;
				width: 100%;
				display: block;
				position: relative;
				top: -10px;
			}
		}
		ul li {
			a {
				color: #3b4758;
				display: block;
			}
			@media screen and ($max-mobile-viewport) {
				display: block;
				width: auto;
			}
		}
		ul::after {
			content: "";
			display: block;
			clear: both;
			width: 5px;
			height: 20px;
		}
	}
	&.folded div.forms {
		display: none;
	}
	&.foldable > div > h2:first-child::after {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		background: #ddf0d5;
		position: absolute;
		left: 55px;
		bottom: -12px;
		transform: rotate(45deg);
	}
	&.folded.foldable > div > h2:first-child::after {
		content: none;
	}
}

#nav {
	padding-left: $sidebar-width;
	@media screen and ($max-mobile-viewport) {
		padding-left: 0;
	}
	text-align: center;
	text-transform: uppercase;
	ul {
		margin: 0;
	}
	@media screen and ($max-mobile-viewport) {
		text-align: left;
	}
}

#footer-wrapper {
	position: relative;
	padding: 0;
	margin: 0 auto;
	max-width: $width;
}

div#footer-wrapper::before {
	content: "";
	display: block;
	left: 0;
	width: calc((100% - #{$width}) / 2 + #{$sidebar-width});
	height: 100%;
	background-repeat: no-repeat;
	background-image: url(img/cias.png), url(img/agglo-blois.png), url(img/blois.png), linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);

	background-position: right 40px top 20px, right 130px top 20px, right 270px top 20px, right 0px top 0px;
	position: absolute;
	@media screen and ($max-mobile-viewport) {
		background-image: url(img/cias.png), url(img/agglo-blois.png), url(img/blois.png);
		background-position: right 40px top 20px, right 130px top 20px, right 270px top 20px;
		position: static;
		width: 100%;
		height: 80px;
		bottom: 0;
	}
}

#footer {
	padding: 1rem 0 1rem 0;
	div.textcell {
		padding-left: $sidebar-width;
		@media screen and ($max-mobile-viewport) {
			padding-left: 0;
		}
		a {
			color: white;
		}
	}
}

#content #columns {
	margin-left: 0;
}

div#gauche {
	width: 100%;
	margin-top: 0;
	padding-top: 0;
	background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);
	min-height: 100%;
	@media screen and ($max-mobile-viewport) {
		min-height: 0;
		background: none;
		width: auto;
	}
	div#tracking-code {
		background: #9099a4;
		padding: 10px 0 10px 20px;
		h3 {
			padding-left: 0.5rem;
			color: white;
			color: white;
			text-transform: uppercase;
			display: inline-block;
			border: 1px solid white;
		}
		a {
			display: inline-block;
			padding-left: 1rem;
			font-size: $title-font-size;
			color: white;
		}
	}
}

// WCS Steps
.wcs-steps {
	padding-left: $wcs-steps-spacing * 2;
}
.wcs-step {
	font-size: 1.2em;
	@include desktop-vertical-steps() {
		font-size: 1.8em;
		padding-bottom: $wcs-steps-spacing;

		&--label {
			font-size: 0.6em;
		}
	}
}

#main-content {
	background: white;
}

#main-content > br.clear {
	display: none;
}

.gru-content #columns div.textcell {
	padding: 0 3rem;
	line-height: 140%;
	h1 {
		font-size: 130%;
		color: $primary-color;
		text-transform: uppercase;
		line-height: 120%;
	}
	h2 {
		background: $primary-color;
		color: white;
		text-transform: uppercase;
		font-weight: none;
		font-size: 100%;
		display: inline-block;
		padding: 0.5ex 1ex;
	}
	h3 {
		color: $primary-color;
		text-transform: uppercase;
	}
	h3, h4, h5, p {
		margin-left: 0;
	}

	&.gris-clair,
	&.vert-clair {
		background: #def0d6;
		margin-bottom: 0;
		padding: 1rem 3rem;
		min-height: 14rem;
		color: #5b6a77;
		h2 {
			font-weight: bold;
			background: transparent;
			color: #5b6a77;
			padding: 0;
			display: block;
			display: table;
			white-space: nowrap;
			&::after {
				border-top: 2px solid $primary-color;
				content: '';
				display: table-cell;
				position: relative;
				top: 0.6em;
				width: 100%;
				left: 1ex;
			}
		}
		margin-right: 0;
	}
	&.gris-clair {
		background: #d2d4db;
		h2::after {
			border-color: #5b6a77;
		}
	}
}

div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service form {
	padding: 0.5rem;
}

div#rub_service {
	margin-top: 0;
	padding: 0 3rem;
	@media screen and ($max-mobile-viewport) {
		padding: 0 0.5rem;
	}
	h2:first-child {
		font-size: 130%;
		color: $primary-color;
		text-transform: uppercase;
		line-height: 120%;
		font-weight: bold;
		text-align: left;
		padding-left: 0;
	}
	form {
		h3 {
			color: $primary-color;
			text-transform: uppercase;
		}
	}
	ul#evolutions, div.gru-content #disclose-dataview, div#receipt-intro {
		margin: 1rem 0;
	}
	#summary h2,
	#evolution-log h2 {
		display: table;
		white-space: nowrap;
		&::after {
			border-top: 2px solid #cdd3d6;
			content: '';
			display: table-cell;
			position: relative;
			top: 0.6em;
			width: 100%;
			left: 1ex;
		}
	}
	a {
		&:hover {
			text-decoration: underline;
		}
	}
}

ul#evolutions {
	li span.item {
		background: white !important;
	}
	span.status {
		color: $primary-color;
	}
}

ul#evolutions li div.msg div.comment,
ul#evolutions li div.msg p.wf-attachment {
	background: #d3d7da;
}

ul#evolutions li div.msg p.wf-attachment {
	padding-top: 1rem;
}

ul#evolutions li div.msg div.comment + p.wf-attachment {
	margin-top: 0px;
	padding-top: 0;
}

ul#evolutions p.wf-attachment a {
	display: inline-block;
	background: #5a6c78;
	color: white;
	padding: 0.8ex 2ex;
	margin-bottom: 1rem;
	position: relative;
	&::before {
		font-family: FontAwesome;
		content: "\f0c6"; /* paperclip */
		position: absolute;
		left: 20px;
		color: $primary-color;
		border: 1px solid $primary-color;
		border-radius: 100%;
		width: 38px;
		display: inline-block;
		height: 38px;
		text-align: center;
		line-height: 38px;
		top: -5px;
		left: -50px;
		font-size: 1.429rem;
		background: white;
	}
	margin-left: 60px;
	&:hover {
		text-decoration: underline;
	}
}

#content .wcscurrentdraftscell,
#content .wcscurrentformscell {
	ul li a {
		color: black;
	}
}

div.wcsformsofcategorycell ul {
	& > li > a {
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}
}
