%button {
	@extends %button;
	font-weight: bold;
}

//
//	Typo
//

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h1 {
	font-size: $fz-h1;
	color: $title-color;
}
h2 {
	font-size: $fz-h2;
	color: $secondary-color;
	padding: $title-padding;
}

h3 {
	font-size: $fz-h3;
	color: $secondary-color;
}

h4 {
	font-size: $fz-h4;
	color: $gray-1;
}

h5 {
	font-size: $fz-h4;
	color: $gray-2;
}

h6 {
	font-size: $fz-h4;
	color: $gray-2;
}

div#header {
	height: $header-height;
	h1 {
		padding-left: 0;
	}
	@media ($max-mobile-viewport) {
		height: $mobile-header-height;
	}
}

#toplinks {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0.5em 0;
	position: relative;
	a {
		font-weight: bold;
		color: $link-color;
		margin: 0 1.5em;
		@media ($max-mobile-viewport) {
			margin: 0;
		}
		&.account-link {
			font-weight: normal;
			margin-left: 0;
		}
		&:hover {
			text-decoration: none;
		}
	}
	> span {
		display: flex;
		justify-content: space-between;
	}
	@media ($min-desktop-viewport) {
		right: $nav-menu-side;
	}
	@media ($max-mobile-viewport) {
		max-width: 100%;
		width: 100%;
		border-bottom: 1px solid #dcdcdc;
	}
}

#top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0.5em 0;
	@media ($max-mobile-viewport) {
		flex-direction: column-reverse;
		align-items: baseline;
	}
}

#banner {
	height: 300px;
	background: url('/assets/banner:background') center no-repeat;
	background-size: cover;
	display: flex;
	padding: 2rem;
	justify-content: flex-end;
	&-logo {
		background: url('/assets/banner:logo') center no-repeat;
		width: 4rem;
		height: 4rem;
	}
}

.wcs-page #banner {
	display: none;
}

#platform-title {
	background: $primary-color;
	h1 {
		margin: 0 auto;
		max-width: calc(#{$width} + 0.5em);
		padding: 0.25em;
	}
}

main {
	padding-top: 2em;
}

div.title label {
	font-weight: bold;
	font-size: 15px;
	color: $gray-1;
}

.gru-content {
	div.tracking-code-input-cell, div.searchcell {
		form {
			display: flex;
		}
		button, input {
			margin: 0;
			line-height: 1em;
		}
		button {
			&::after {
				content: '\f002';
				font-family: FontAwesome;
			}
		}
	}
	div.searchcell {
		form {
			padding: 0;
		}
		input {
			border-right: 0;
		}
		button span {
			display: none;
		}
	}
	div.tracking-code-input-cell {
		background: $gray-6;
		color: #fff;
		h2:first-child {
			background: transparent;
			color: #fff;
		}
		button, input {
			border: 0;
		}
		#tracking-code {
			width: 75%;
		}
	}
	div.textcell a {
		font-size: 18px;
		text-decoration: underline;
		&.pk-button, &.pk-big-button {
			text-decoration: none;
		}
	}
	div.wcs-tracking-code-input h2:first-child {
		padding-bottom: 0;
	}
	div.wcsformsofcategorycell, div.linklistcell {
		background: transparent;
	}
	div.cell h2.commune--title {
		background: transparent;
		color: $gray-1;
		padding-bottom: 0;
	}
}

div#tracking-code {
	background: $gray-6;
	&, a, h3 {
		color: #fff;
	}
	h3 {
		background: transparent;
	}
}

a.registration::before {
	content: '\f2c0';
	font-family: FontAwesome;
	margin-right: 0.25em;
}

a.login-link, a.logout {
	&::before {
		content: '\f090';
		font-family: FontAwesome;
		margin-right: 0.25em;
	}
	@media (min-width: $mobile-limit + 1) {
		border-bottom: 2px solid $red;
	}
}

@if $responsive-menu == top-to-bottom {
	div.gru-nav-wrapper {
		margin: 0;
		background-color: $nav-background;
	}
	div.gru-nav {
		position: relative;
		.gru-nav-button {
			position: absolute;
			left: auto;
			right: 0.7em;
			@media ($max-mobile-viewport) {
				bottom: calc(100% + 0.5em);
			}
			@media ($min-desktop-viewport) {
				top: calc(-1 * #{$header-height + $nav-menu-side} / 2);
			}
			+ ul {
				margin: 0;
				border: 0;
				position: absolute;
				width: 100%;
				z-index: 200;
				li {
					&:last-child {
						border-bottom: 0;
					}
					a:hover span {
						border-bottom: 2px solid $nav-mobile-menu-item-color;
					}
				}
			}
		}
	}
}

div.cell.has-asset-picture {
	$image-width: 3rem;
	> div {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		> * {
			flex: 0 0 100%;
		}
		> h2:first-child {
			flex: 1 0 50%;
			margin-left: -1 * $image-width;
			padding-left: $image-width + 0.25;
		}
		> picture {
			display: block;
			order: -1;
			flex: 0 0 $image-width;
			align-self: stretch;
			position: relative;
			z-index: 1;
			img {
				padding: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
				position: absolute;
				top: 0; bottom: 0; left: 0; right: 0;
				border-top: 4px solid transparent;
				border-bottom: 4px solid transparent;
			}
		}
		&.linkcell li, li {
			padding-left: $image-width - 0.75;
		}
	}
	&.linkcell li {
		background-size: $image-width - 0.5;
		background-position: center left 2%;
		background-repeat: no-repeat;
	}
	&.lien-signalement li {
		background-size: $image-width - 1.5;
	}
}


div.wcsformsofcategorycell, div.linklistcell, div.linkcell {
	ul > li {
		background-color: #fff;
		margin: 5px 0;
		&:not(:last-child) {
			border-bottom: 0;
		}
		a {
			font-weight: bold;
		}
	}
}

div.links-list {
	ul {
		li {
			div:first-of-type {
				margin-top: -1rem;
			}
			div.description, div.keyword {
				color: #8e8e8e;
			}
			div.description {
				padding: 0;
			}
			div.keyword {
				padding: 0 1em 0.5em 1em;
				font-weight: bold;
			}
		}
		> li > a:hover {
			background-color: transparent;
			text-decoration: underline;
		}
	}
}


// Custom placeholder on top and bottom of 2 column layouts

.content-top {}

.content-bottom {
	clear: both;
}

// Custom "Services des communes" cell

div#services-communes {
	background: $cell-background;
	select {
		width: 100%;
	}
}

div.lien-signalement div.links-list {
	border: $widget-border;
	li {
		margin: 0;
	}
	a {
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
		&, &:hover {
			color: $red;
		}
	}
}

#footer-wrapper {
	margin-top: 0;
}

@media (min-width: #{$very-small-limit}) {
	.wcs-step--marker {
		transform: rotate(45deg);
		&-nb {
			transform: rotate(-45deg);
		}
	}
}

.wcs-steps {
	margin-top: 1.5rem;
	margin-left: 1rem;
}
.wcs-step {
	&--label {
		font-weight: bold;
	}
	&--marker {
		border-style: solid;
		border-color: $primary-color;
		border-width: 2px;
		background: #fff;
		&-nb {
			font-weight: bold;
		}
	}
	&.step-before & {
		&--marker {
			border-color: $wcs-step-before-border-color;
			&-nb {
				color: $wcs-step-before-nb-color;
			}
		}
		&--label {
			color: $wcs-step-before-label-color;
		}
	}
	&.step-after & {
		&--marker {
			border-color: $wcs-step-marker-color;
		}
	}
	@media ($max-mobile-viewport) {
		margin-bottom: 1rem;
		&--label {
			margin-left: $wcs-steps-spacing / 2;
		}
	}
}

.a2-block {
	padding-bottom: 0.1em;
}
