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

$header-height: 150px;
$mobile-three-columns-break: 650px;

%title {
	@extend %title;
	background-image: url(img/white-skew.png);
	background-position: top right;
	background-repeat: no-repeat;
	text-align: center;
}

div#header {
	max-width: 1280px;
	height: $header-height;
	#logo {
		width: 50%;
		position: relative;
		z-index: 100;
	}
	#logo.has-logo a {
		background-size: auto 80px;
		background-position: bottom 15px right 80px;
		display: block;
		height: 150px;
	}
	#logo::after {
		content: "";
		display: block;
		background: white;
		position: absolute;
		width: 100px;
		top: 55px;
		right: -60px;
		height: 75px;
		transform: skewX(-21deg);
		transform-origin: top right;
	}
	#logo a::after {
		z-index: 200;
		content: "";
		display: block;
		background: url(img/home.png) top 10px right 20px no-repeat;
		background-size: auto 40px;
		top: 65px;
		height: 75px;
		width: 100px;
		position: absolute;
		right: -30px;
	}

	#toplinks {
		background: $red;
		border: none;
		box-shadow: none;
		border-radius: 0;
		height: $header-height;
		width: 50%;
		padding: 0;
		a:hover {
			text-decoration: underline;
		}
		&::before {
			content: "";
			display: block;
			top: 0;
			left: 0;
			height: $header-height;
			background: $red;
			width: 100px;
			transform-origin: top left;
			transform: skewX(-21deg);
		}
		> span {
			position: absolute;
			display: inline-flex;
			align-items: text-end;
			bottom: 0;
			right: 50px;
			background: white;
			border-radius: 10px 10px 0 0;
			line-height: 50px;
			font-weight: bold;
			padding: 0 10px;
			&::after {
				content: "";
				color: $red;
				display: inline-block;
				align-self: center;
				line-height: 1em;
				width: 2px;
				height: 1.2em;
				overflow: hidden;
				background-color: currentColor;
				margin: 0 .66em;

			}
			> a:last-child {
				order: 1;
			}
		}
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
	}
	@media screen and ($max-mobile-viewport) {
		height: 80px;
		#logo.has-logo::after {
			content: none;
		}
		#logo.has-logo a {
			height: 80px;
			width: calc(100vw - 100px);
			background-position: bottom 10px left 0;
			background-size: auto 40px;
			&::after {
				content: none;
			}
		}
	}
}

#content-top-wrapper {
	background: $gray;
	padding-top: 2rem;
	padding-bottom: 2rem;
	@media screen and ($max-mobile-viewport) {
		padding: 0.5rem 0.5rem 1rem 0.5rem;
	}
	.content-top {
		position: relative;
		width: $width;
		max-width: 100vw;
		margin: 0 auto;
		@media screen and ($max-mobile-viewport) {
			width: auto;
		}
		h1 {
			font-size: 300%;
			color: $red;
			margin-bottom: 6rem;
			@media screen and ($max-mobile-viewport) {
				margin-bottom: 3rem;
				font-size: 200%;
			}
		}
		@media screen and ($max-mobile-viewport) {
			div.cell {
				margin-left: 0;
			}
		}
	}
}

.content-top {
	div.trackingcodeinputcell {
		@extend .block;
		h2 {
			@extend %title;
		}
	}
}

div.trackingcodeinputcell {
	input {
		width: 60%;
		height: 2.5rem;
	}
	button {
		@extend %button;
		width: 35%;
		margin-right: 0;
		height: 2.5rem;
		position: relative;
		top: -2px;
	}
}

div#anomalies {
	background: $bgblue url(/assets/picture:anomalie) top center no-repeat;
	background-size: 100% auto;
	padding-top: 250px;
	padding-right: 0;
	@media screen and ($max-mobile-viewport) {
		background: $bgblue;
		padding-top: 0;
	}
	> div {
		background: $bgblue;
		color: white;
		padding-bottom: 1rem;
		h2 {
			margin: 0;
			font-size: $font-size * 1.1;
			color: $blue;
			background: white;
			display: inline-block;
			position: relative;
			padding: 0.5rem 2rem 0.5rem 1rem;
			text-transform: uppercase;
			&::after {
				z-index: 80;
				content: "";
				display: block;
				background: $bgblue;
				position: absolute;
				width: 40px;
				top: 0;
				right: -40px;
				height: 101%;
				transform: skewX(-21deg);
				transform-origin: top right;
			}
		}
		p {
			margin: 0;
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 50%;
			float: left;
			padding-bottom: 0;
			@media screen and ($max-mobile-viewport) {
				width: auto;
				float: none;
			}
			li {
				margin: 0;
				padding: 0;
				a {
					color: white;
					border-bottom: 1px solid white;
					display: block;
					margin: 0 1rem;
					padding: 5px 5px;
					&:hover {
						background: white;
						color: $blue;
					}
				}
				&.inverse {
					margin-top: 0.5rem;
					a {
						background: white;
						color: $blue;
						&:hover {
							background: transparent;
							color: white;
						}
					}
				}
			}
		}
		&:last-child::after {
			content: "";
			display: block;
			clear: both;
		}
	}
}

.site-nav {
	display: none;
	@media screen and ($max-mobile-viewport) {
		display: block;
		#nav button {
			transform: skewX(-21deg);
			transform-origin: bottom right;
			width: 120px;
			margin-left: -50px;
			.icon-bar {
				left: 60px;
				width: $nav-menu-side/6*4;
			}
			+ ul {
				border-top-width: 3px;
			}
		}
	}
}

div#main-content-wrapper {
	padding-top: 20px;
}

#col1, #col2, #col3 {
	float: left;
	width: 33%;
	@media screen and (max-width: #{$mobile-three-columns-break - 1px}) {
		float: none;
		width: 100%;
	}
}

#content div.linkcell {
	border: none;
	a {
		@extend %title;
		text-align: left;
		border-bottom: 0;
		font-size: $font-size;
	}
}

#content div.wcsformsofcategorycell {
	border: 0;
	h2 {
		background: white;
		text-align: left;
		color: black;
		text-transform: uppercase;
		padding-left: 0;
		font-weight: bold;
		padding-top: 5px;
		min-height: 3.5rem;
		padding-bottom: 0;
		@media screen and ($max-mobile-viewport) {
			min-height: 2.5rem;
		}
	}
	&.foldable h2::after {
		background: url(img/unfold.png) top right no-repeat;
		background-size: 25px 25px;
		content: '';
		display: block;
		width: 25px;
		height: 25px;
		position: absolute;
		top: 5px;
		right: 0;
	}
	&.foldable.folded h2::after {
		background-image: url(img/fold.png);
	}
	li a {
		padding: 5px 2px;
		color: black;
		border-bottom: 1px solid black;
	}
	padding-bottom: 10px;
	picture {
		height: 150px;
		overflow: hidden;
		@media screen and (min-width: #{$mobile-three-columns-break}) {
			img {
				max-width: none;
				max-height: 100%;
			}
		}
	}
}

footer {
	#footer-wrapper {
		padding-bottom: 0;
	}
	div.red {
		background: $red;
		color: white;
		text-align: right;
		background-image: url(img/white-skew.png);
		background-position: top right;
		background-repeat: no-repeat;
		height: 115px;
		h3 {
			padding-right: 1rem;
			font-size: $font-size * 1.5;
		}
	}
}

div#gauche {
	width: 25%;
	+ div#rub_service {
		width: 71%;
		margin-top: 0;
		form {
			padding-top: 0;
		}
	}
	div#tracking-code {
		height: 45px;
		margin: 0;
		padding: 0;
		position: absolute;
		top: -45px;
		left: 29%;
		background: $red;
		div {
			padding: 0 1rem 0 0.5rem;
			display: inline-block;
			h3, a {
				background: transparent;
				display: inline-block;
				height: 45px;
				font-size: 1rem;
				color: white;
			}
			a {
				font-weight: bold;
			}
			float: left;
		}
		form {
			float: left;
			display: inline-block;
			margin: 0;
			button {
				margin-left: 1rem;
				margin-right: 0;
				box-shadow: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	@media screen and ($max-mobile-viewport) {
		width: 100%;
		+ div#rub_service {
			width: 100%;
			clear: both;
		}
		div#side {
			display: block;
			margin-top: -40px;
		}
		div#tracking-code, div#steps {
			position: static;
			clear: both;
			width: 100%;
			background: transparent;
		}
		div.tracking-code-part {
			margin-top: -40px;
			background: $red;
			height: 45px;
			width: 100%;
		}
		div#tracking-code {
			height: auto;
			text-align: center;
			form {
				margin-top: 0.5rem;
				float: none;
			}
		}
	}
}

//Steps 
.wcs-steps {
	clear: both;
	padding-top: $wcs-steps-spacing;
}
.wcs-step {
	box-shadow: 0 5px 5px #666;
	border-radius: 10px;
	font-weight: normal;
	overflow: hidden;

	&--marker,
	&--label {
		font-weight: normal !important;
	}
}
@include desktop-vertical-steps() {
	.wcs-steps {
		padding-top: 0;
		margin-top: -80px;
		h2 {
			font-size: 1.5rem;
			display: block;
			font-weight: normal;
			margin-top: 0;
			margin-left: 1rem;
			text-transform: uppercase;
			color: $red;
		}
		&--list {
			padding-top: 1rem;
		}
	}
	.wcs-step {
		min-height: $wcs-step-marker-size;
		margin-bottom: 1.5rem;

		&--marker {
			background: $red;
			color: #fff;
			height: auto;
			&-nb::after {
				content: "-"
			}
		}
		&--label {
			font-size: .8em;
			padding-top: $wcs-steps-spacing;
			padding-bottom: $wcs-steps-spacing;
			color: inherit !important;
		}

		&.current {
			background: $red;
			color: #fff;			
		}
	}
}

#columns div#rub_service {
	// titre de la page (form-validation & dataview)
	div.dataview div.title h3,
	div.form-validation div.page > h3 {
		font-size: 1.4rem;
	}
	// widget "titre"
	h3[data-field-id],
	div.dataview div.title h3 {
		color: $red;
		border: 0;
		text-transform: uppercase;
		font-size: 1.5rem;
		font-weight: normal;
	}
	// widget "sous titre"
	h4[data-field-id],
	div.dataview div.subtitle h4 {
	 	font-weight: bold;
		color: $red;
	}
	div.buttons {
		display: flex;
		@media screen and (max-width: $width) {
			flex-wrap: wrap;
		}
		div.savedraft-button {
			display: none;
		}
		div.widget {
			div.content,
			button {
				width: 100%;
				text-align: left;
				box-shadow: none;
				border: 0;
				padding: 1rem 1rem;
				background-size: contain;
				background-repeat: no-repeat;
			}
			div.content {
				padding-right: 1rem;
				@media screen and ($max-mobile-viewport) {
					padding: 0 1rem;
				}
			}
			@media screen and (max-width: $width) {
				margin-bottom: 0.75rem;
			}
		}
		div.previous-button {
			flex: 1;
			order: 0;
			button {
				background-image: url(img/white-skew.png);
				background-position: top right;
				&::before {
					content: "\f0d9";  // caret-left
					font-family: FontAwesome;
					padding-right: 0.5rem;
				}
			}
			@media screen and (max-width: 500px) {
				flex-basis: 50%;
			}
			@media screen and (max-width: 320px) {
				flex-basis: 100%;
			}
		}
		div.cancel-button {
			flex: 1;
			order: 1;
			button {
				background-color: #e6e7e8;
				background-image: url(img/white-skew.png), url(img/left-white-skew.png);
				background-position: top right, top left;
				background-repeat: no-repeat, no-repeat;
				color: $red;
				text-align: center;
			}
			@media screen and (max-width: 500px) {
				flex-basis: 50%;
			}
			@media screen and (max-width: 320px) {
				flex-basis: 100%;
			}
		}
		div.submit-button {
			flex: 1;
			order: 2;
			button {
				background-image: url(img/left-white-skew.png);
				background-position: top left;
				text-align: right;
				&::after {
					content: "\f0da";  // caret-right
					font-family: FontAwesome;
					padding-left: 0.5rem;
				}
			}
			@media screen and (max-width: 500px) {
				flex-basis: 100%;
			}
		}
		@media screen and ($max-mobile-viewport) {
			div.previous-button {
				order: 1;
			}
			div.cancel-button {
				order: 2;
			}
			div.submit-button {
				order: 0;
			}
		}
	}
}

#pwa-navigation {
	ul {
		li:last-child {
			background: $red url(img/white-skew.png) top right no-repeat;
			a {
				background-size: 40px;
				background-position: right 30px top 50%;
			}
			&:hover a {
				background-color: transparent;
			}
			span {
				display: none;
			}
		}
	}
}

button.synbird-btn.synbird-navigation-button {
	padding: 0 0.5rem;
}
