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

$dashboard_items: (profil, demandes, famille, paiements, paiements-en-ligne, porte-doc, abonnements);

#nav-skip a {
	color: white;
}

div#header-wrapper {
	background: $primary-color;
	height: 80px;
	#logo {
		display: none;
	}
	#logo-ville {
		position: absolute;
		left: 4rem;
		top: 0px;
		z-index: 10;
		@media screen and ($max-mobile-viewport) {
			left: 0;
			max-width: 100%;
			overflow: hidden;
		}
	}
	#home-link {
		display: block;
		font-size: 1rem;
		color: white;
		position: absolute;
		top: 0;
		left: calc(50% - 114px);
		text-align: center;
		text-transform: uppercase;
		font-weight: 600;
		width: 228px;
		height: 80px;
		line-height: 80px;
		background: url(img/fsb-top-hexa.png);
		z-index: 10;
		&:hover {
			background: url(img/fsb-top-hexa-hover.png);
		}
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
	}
	#toplinks {
		box-shadow: none;
		background: transparent;
		top: 1rem;
		text-transform: uppercase;
		font-size: 0.9rem;
		a {
			color: white;
			.connected-user {
				font-weight: bold;
				&::before {
					content: "Bonjour ";
					font-weight: normal;
				}
			}
		}
	}
}

div#nav-wrapper {
	position: absolute;
	top: 5.5rem;
	right: 0rem;
	width: 500px;
	@media screen and ($max-mobile-viewport) {
		width: auto;
		max-width: 100%;
	}
	z-index: 1000;
	button {
		position: absolute;
		right: 4rem;
		@media screen and ($max-mobile-viewport) {
			top: 1rem;
			right: 2.5rem;
		}
		border-radius: 10px;
		.icon-bar {
			z-index: 10;
		}
		&::before {
			transition: all 250ms ease-in-out 0ms;
			height: 4rem;
			width: 4rem;
			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%20230%22%20transform%3D%22rotate%280%29%22%3E%3Cg%20style%3D%22opacity%3A%201%22%3E%3Cpolygon%20stroke%3D%22%23000%22%20fill%3D%22%23000%22%20stroke-width%3D%2270%22%20stroke-linejoin%3D%22round%22%20points%3D%2277%2C180.9%20153%2C180.9%20191.1%2C115%20153%2C49.1%2077%2C49.1%2038.9%2C115%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
			background-size: 100%;
			left: -0.7rem;
			position: absolute;
			top: -0.7rem;
			content: '';
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			z-index: 1;
		}
		&::after {
			transition: all 250ms ease-in-out 0ms;
			height: 5rem;
			width: 5rem;
			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%20230%22%20transform%3D%22rotate%280%29%22%3E%3Cg%20style%3D%22opacity%3A%200.5%22%3E%3Cpolygon%20stroke%3D%22%23373737%22%20fill%3D%22%23373737%22%20stroke-width%3D%2270%22%20stroke-linejoin%3D%22round%22%20points%3D%2277%2C180.9%20153%2C180.9%20191.1%2C115%20153%2C49.1%2077%2C49.1%2038.9%2C115%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
			background-size: 100%;
			left: -1.2rem;
			position: absolute;
			top: -1.2rem;
			content: '';
			position: absolute;
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			z-index: 0;
		}
	}
	#nav > ul {
		border-top: none;
		position: relative;
		top: $nav-menu-side;
		a {
			color: white;
		}
	}
}

#content {
	margin-top: 2rem;
}

div#a-la-une {
	div {
		position: relative;
		text-align: center;
		&::before {
			content: "";
			height: 1px;
			width: 100%;
			background: $primary-color;
			display: block;
			position: relative;
			top: 24px;
		}
	}
	h1 {
		margin: 0;
		color: #373737;
		font-weight: 400;
		font-size: 2.5rem;
		text-transform: uppercase;
		background: white;
		position: relative;
		display: inline-block;
		padding: 0 1rem;
	}
}

div#a-la-une-texte {
	position: relative;
	height: 403px;
	@media screen and ($max-mobile-viewport) {
		height: auto;
	}
	> div {
		padding-left: 550px;
		padding-right: 150px;
		padding-top: 140px;
		text-align: center;
		@media screen and ($max-mobile-viewport) {
			padding: 0 0 1rem 0;
			background: $primary-color;
			border-radius: 10px;
		}
	}
	img {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 10px;
		max-width: 100%;
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
	}
	h2, p {
		position: relative;
		z-index: 100;
		color: white;
	}
	p:last-child {
		position: static;
		z-index: 0;
	}
	&::after {
		content: '';
		height: 320px;
		width: 320px;
		background-size: 100%;
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%20230%22%20transform%3D%22rotate%280%29%22%3E%3Cg%20style%3D%22opacity%3A%201%22%3E%3Cpolygon%20stroke%3D%22%23da3838%22%20fill%3D%22%23da3838%22%20stroke-width%3D%2270%22%20stroke-linejoin%3D%22round%22%20points%3D%2277%2C180.9%20153%2C180.9%20191.1%2C115%20153%2C49.1%2077%2C49.1%2038.9%2C115%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		z-index: 1;
		position: absolute;
		right: 90px;
		bottom: 0;
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
	}
}

#columns {
	h1 {
		color: $primary-color;
		font-size: 2rem;
		margin: 0 0.5rem;
		@media screen and ($max-mobile-viewport) {
			text-align: center;
		}
	}
}

div#sidebar {
	h1 {
		color: $primary-color;
		font-size: 2.5rem;
		margin: 0 0.5rem;
		line-height: 100%;
	}
}

#content div.trackingcodeinputcell {
	background: url(img/trackingcode.png) 2rem 1rem no-repeat;
	border: 1px solid #c6c6c6;
	border-radius: 10px;
	padding: 1rem 3rem 1rem 160px;
	@media screen and ($max-mobile-viewport) {
		background-position: top center;
		padding: 80px 0 0 0;
		h2 {
			text-align: center;
		}
	}
	form {
		margin-left: 0;
		display: flex;
		flex-wrap: wrap;
		p {
			width: 100%;
		}
		input {
			flex: 1;
			margin-right: 2rem;
			@media screen and ($max-mobile-viewport) {
				margin-right: 0;
			}
		}
		@media screen and ($max-mobile-viewport) {
			margin: 0 1rem 1rem 1rem;
			button {
				margin-right: 0;
			}
		}
	}
}

#content div.cell.with-borders {
	border: 1px solid #c6c6c6;
	border-radius: 10px;
	h2:first-child {
		padding-left: 1rem;
	}
}

button {
	font-weight: bold;
	text-transform: uppercase;
}

div#content {
	%cell-links-list {
		a {
			color: #888;
			padding: 0.5rem 0.5rem;
		}
		li:hover,
		li.selected {
			border-bottom: 1px solid $primary-color;
			a {
				color: $primary-color;
			}
		}
	}
}

#columns {
	div.textcell {
		h1, h2, h3, h4, p, ul {
			margin-left: 0;
		}
	}
}

#columns {
	div.wcsformsofcategorycell {
		img {
			border-radius: 10px;
		}
		h2 {
			background: transparent center left no-repeat;
			height: 80px;
			margin: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 80px;
			text-align: left;
		}
		@media screen and ($max-mobile-viewport) {
			text-align: center;
		}
	}
}

.form-content--sidebox {
	float: none;
	width: auto;
	& + div#rub_service {
		float: none;
	}
	div#side {
		border: 1px solid #c6c6c6;
		border-radius: 10px;
		text-align: center;
		div#tracking-code {
			min-width: 0;
			background: transparent url(img/trackingcode.png) 2rem 1rem no-repeat;
			padding: 1rem 3rem 1rem 130px;
			@media screen and ($max-mobile-viewport) {
				background-position: top left;
				padding: 0 1rem 1rem 80px;
			}
			display: inline-block;
			margin: 0 auto;
			text-align: left;
			h3 {
				padding-bottom: 0;
			}
			a {
				padding-top: 0;
				padding-left: 0.5rem;
				color: $primary-color;
			}
		}
	}
}

// Steps
.wcs-steps {
	border-radius: 10px;
	overflow: hidden;
	font-size: 1.2em;
	margin-bottom: 0;
}
.wcs-step {
	&--marker {
		background-size: 100% !important;
	}
	&--label {
		text-align: left;
	}
	&.current {
		font-weight: normal;
	}
}
@media ($mq-min--wcs-steps-horizontal-layout){
	.wcs-steps--list {
		justify-content: center;
		padding-bottom: 0;
	}
	.wcs-step {
		margin-right: $wcs-steps-spacing;
		flex: 1 1 auto;
		max-width: 33%;
		&:last-child {
			flex-grow: 0;
		}
		&--label {
			text-align: center;
		}
	}
}
@include desktop-horizontal-steps() {
	.wcs-steps{
		font-size: 2.5em;
		&--list {
			margin-bottom: 0;
		}
	}
	.wcs-step {
		$wcs-step-marker-size: 6rem;
		position: relative;
		margin-bottom: 0;
		flex-direction: column;
		&--marker {
			width: $wcs-step-marker-size;
			height: $wcs-step-marker-size;
			flex-basis: $wcs-step-marker-size;
		}
		&--label {
			display: block !important;
			position: static;
			font-size: 0.4em;
			padding-top: 0.5em;
			top: 100%;
			width: $wcs-step-marker-size + 1;
			margin-left: -1 * ($wcs-steps-spacing / 2);
			text-align: center;
			align-self: flex-start;
		}
		// Tie
		&::after {
			position: absolute;
			top: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important;
			left: $wcs-step-marker-size;
			width: calc(100% + #{$wcs-steps-spacing});
		}
	}
}

div#rub_service {
	float: none;
	width: 80%;
	margin-left: 10%;
}


div#rub_service {
	h2 {
		text-align: left;
		font-size: 200%;
		text-transform: none;
	}
	form div.buttons {
		.cancel-button button {
			background: white;
			border: 1px solid #ccc;
			color: #666;
			box-shadow: none;
			font-weight: normal;
		}
	}

	div.text-check-before-submit, ul#evolutions, div.gru-content
	#disclose-dataview, div#receipt-intro {
		margin-left: 0.5rem;
	}

	div.section {
		h2 {
			font-size: 180%;
			color: $primary-color;
		}
	}

	ul#evolutions span.status {
		font-weight: normal;
		text-transform: uppercase;
	}

	ul#evolutions li {
		background: url(img/step-g.png) 5px 15px no-repeat;
		background-size: 50px;
		span {
			background: none !important;
			box-shadow: none;
			border: none;
			&::before {
				content: none;
			}
		}
		&::after {
			content: none;
		}
	}
}

div.back-home-button {
	text-align: center;
	a {
		text-transform: uppercase;
		border: 1px solid #ccc;
		color: #666;
		padding: 0.5rem 1rem;
	}
}

#dashboard-title h2 {
	padding-left: 0.5rem;
}

#dashboard-menu {
	li {
		background: transparent left center no-repeat;
		padding-left: 50px;
		margin-bottom: 4px;
	}
	@each $dashboard_item in $dashboard_items {
		li.menu-#{$dashboard_item} {
			background-image: url(img/#{$dashboard_item}.png);
		}
	}
}

body.has-picture .site-nav::after {
	top: 0;
}

div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service form {
	padding: 1ex 0;
}

div.dataview span.label {
	font-weight: normal;
	color: #666;
}

#footer a {
	color: white;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* hack to revert to block display as IE11 flex-wrap doesn't work */
	#content div.trackingcodeinputcell form {
		display: block;
	}
}