$remote-font-path: 'https://perso.entrouvert.org/~fred/quimper/';

@font-face {
	font-family: 'Geometric 231';
	src: url('#{$remote-font-path}/geometric_231_heavy_bt-webfont.woff2') format('woff2'),
		url('#{$remote-font-path}/geometric_231_heavy_bt-webfont.woff') format('woff'),
		url('#{$remote-font-path}/geometric_231_heavy_bt-webfont.ttf') format('truetype');
}

%cell {
	overflow: visible;
}

button::-moz-focus-inner {
	border: 0;
}

#header-wrapper {
	background: $primary-color;
	height: 100px;
	@media screen and (max-width: $nav-mobile-limit) {
		position: fixed;
		top: 0;
		left: 0;
		height: $mobile-header-height;
		width: 100%;
		z-index: 100;
	}
}

div#header {
	@media screen and (max-width: $nav-mobile-limit) {
		h1 {
			padding-left: 90px;
		}
	}
	h1 a {
		background: url(img/header.png) left center no-repeat;
		width: 258px;
		height: 100px;
		display: block;
		text-indent: -10000px;
		@media screen and (max-width: $nav-mobile-limit) {
			float: right;
			height: $mobile-header-height - 10px;
			margin-top: 5px;
			margin-right: 10px;
			background-position: right center;
			background-size: contain;
		}
	}
}

#pwa-navigation {
	text-transform: uppercase;
	a {
		background-position: 50% 10px;
		background-size: 20px;
		padding-top: 32px;
		span {
			font-size: 0.688rem;
		}
	}
	@media screen and ($min-desktop-viewport) {
		display: block;
		max-width: $width;
		margin: auto;
		background: transparent;
		position: relative;
		height: auto;
		> div {
			width: 380px;
			background: white;
			position: absolute;
			right: 0;
			top: -48px - 100px;  // $nav-height - $header-height
			a {
				height: 100px;
				background-position: 50% 30px;
				background-size: 30px;
				padding-top: 70px;
				span {
					font-size: 0.75rem;
				}
				span.badge {
					top: 30px;
				}
			}
		}
	}
}

div.gru-nav-wrapper {
	@media screen and (max-width: $nav-mobile-limit) {
		position: fixed;
		width: 100%;
		pointer-events: none;
		top: 0;
		left: 0;
		z-index: 1000;
		margin-top: 0;
		background: transparent;
		div.gru-nav .gru-nav-button.toggled + ul {
			min-height: calc(100vh - 40px);
		}
		div.gru-nav .gru-nav-button + ul {
			pointer-events: all;
			border-top: 0;
			padding: 0 1rem;
			li:first-child {
				margin-top: 1rem;
				border-top: 1px solid $green;
			}
			li {
				border-bottom: 1px solid $green;
				a {
					padding: 0;
					line-height: 4em;
				}
				&.footer-link {
					font-size: 80%;
					border-bottom: 0;
					a {
						padding-top: 1rem;
						line-height: 100%;
					}
				}
			}
		}
		div.gru-nav .gru-nav-button {
			width: 80px;
			margin-left: 0;
			pointer-events: all;
		}
	}
}

#nav {
	> ul {
		margin-top: 0;
		margin-bottom: 0;
	}
}

div#main-content-wrapper {
	margin-top: 1rem;
	@media screen and (max-width: $nav-mobile-limit) {
		margin-top: $mobile-header-height;
		#columns-wrapper {
			padding: 1rem;
			padding-bottom: 0;
		}
		#sidebar + #columns-wrapper {
			padding-top: 0;
		}
	}
}

a.big-image-link {
	display: block;
	background-repeat: no-repeat;
	background-position: 50% 0px;
	background-size: 100% auto;
	transition: background ease 0.2s;
	&:hover {
		background-size: 110% auto;
	}
	padding-top: 200px;
	box-shadow: 0 0 5px #888;
	div {
		background: white url(img/plus.svg) right 0.5rem bottom 0.5rem no-repeat;
		background-size: 25px 25px;
		@media screen and (max-width: $nav-mobile-limit) {
			background-size: 20px;
		}
		padding: 1rem;
		strong {
			font-family: $title-font-family;
			text-transform: uppercase;
		}
		p {
			font-size: 90%;
			margin-bottom: 0;
			padding-right: 2rem;
		}
	}
	margin-bottom: 2rem;
	@media screen and (max-width: $nav-mobile-limit) {
		margin-bottom: 1rem;
		height: 160px;
		padding-top: 0;
		padding-left: 160px;
		overflow: hidden;
		background-position: -66px 50%;
		background-size: auto 100%;
		&:hover {
			background-size: auto 110%;
			background-position: -80px 50%;
		}
		div {
			background-position: 95% 95%;
			height: 100%;
			position: relative;
			strong {
				position: absolute;
				bottom: 3rem;
				width: calc(100% - 2rem);
			}
			p {
				display: none;
			}
		}
	}
}

.page-template-standard-sidebar .grid-1-4 {
	a.big-image-link {
		padding-top: 110px;
		margin-bottom: 0;
	}
}

.gru-content div.cell.wcsformcell {
	margin-bottom: 1rem;
}

a.image-link {
	display: block;
	background-repeat: no-repeat;
	background-position: 50% -20px;
	background-size: 340px 180px;
	transition: background ease 0.2s;
	padding-top: 160px;
	&:hover {
		background-size: 370px 200px;
	}
	@media screen and (max-width: 500px) {
		background-size: auto 120px;
		padding-top: 100px;
		&:hover {
			background-size: auto 140px;
		}
	}
	box-shadow: 0 0 5px #888;
	div {
		position: relative;
		background: white url(img/plus.svg) right 0.5rem bottom 0.5rem no-repeat;
		background-size: 25px 25px;
		@media screen and (max-width: $nav-mobile-limit) {
			background-size: 20px;
		}
		padding: 1rem;
		height: 50px;
		strong {
			font-family: $title-font-family;
			text-transform: uppercase;
			position: absolute;
			bottom: 10px;
			display: block;
			padding-right: 3rem;
		}
	}
}


footer {
	@media screen and (max-width: $nav-mobile-limit) {
		#footer-wrapper {
			margin-top: 0;
			padding-top: 0;
			padding-bottom: 0;
		}
		#footer {
			display: none;
		}
	}
}

@media screen and ($max-mobile-viewport) {
	.gru-content {
		#sidebar {
			order: 0;
			margin: 1rem;
			margin-bottom: 0;
		}
	}
}

@media screen and (max-width: $nav-mobile-limit) {
	div.gru-nav .gru-nav-button {
		border: solid transparent;
		border-width: 0 28px 4px;
		&:not(.toggled) {
			.icon-bar-1,
			.icon-bar-3 {
				width: calc(100% / 2);
			}
		} 
	}
}

.gru-content div.cell {
	&.transparent {
		background: transparent;
		h2:first-child {
			padding-left: 0;
		}
	}
}

div.gru-content div.cell.trackingcodeinputcell {
	background: $altgreen;
	color: white;
	div.wcs-tracking-code-input {
		display: flex;
		@media screen and (max-width: $nav-mobile-limit) {
			display: block;
		}
		h2 {
			font-family: $font-family;
			font-size: 1.5rem;
			color: white;
			max-width: 11ex;
			text-align: right;
			@media screen and (max-width: $nav-mobile-limit) {
				font-size: 1rem;
				max-width: none;
				text-align: left;
				padding-bottom: 0;
			}
		}
		p {
			box-sizing: content-box;
			border-left: 1px solid white;
			padding-left: 1rem;
			max-width: 30ex;
			@media screen and (max-width: $nav-mobile-limit) {
				display: none;
			}
		}
		form {
			flex: 1;
			text-align: right;
			margin: 0;
			padding: 1rem;
			@media screen and (max-width: $nav-mobile-limit) {
				display: flex;
			}
			input {
				border: 1px solid white;
				flex: 1;
				&:focus {
					background: $button-background;
				}
			}
			button {
				box-shadow: none;
				margin-left: 1rem;
				margin-right: 0;
			}
		}
	}
}

div.hint,
div.title label {
	margin-left: 0.7rem;
}

#columns div#login-page > div.block {
	background: transparent;
	> div {
		padding: 0;
	}
	@media screen and (max-width: $nav-mobile-limit) {
		margin: 0 -1rem;
	}
	h2 {
		display: none;
	}
}

#login-title {
	font-family: $title-font-family;
	font-size: 1.125rem;
	color: $title-color;
	text-transform: uppercase;
	span {
		text-transform: none;
		font-size: 0.875rem;
		font-family: $font-family;
	}
}

div.widget div.title label,
form p label {
	font-weight: bold;
	color: $mauve;
}

#login-buttons {
	display: flex;
	align-items: center;
	a {
		display: inline-block;
		font-size: 0.75rem;
	}
}

div#rub_service form[action="."] {  // target form pages
	div.buttons {
		display: flex;
		div.widget {
			&.previous-button {
				order: 0;
			}
			&.submit-button {
				order: 1;
			}
			&.cancel-button {
				order: 2;
			}
			&.savedraft-button {
				display: none;
			}
		}
	}
}

// Steps
.wcs-steps {
	margin-bottom: 0;
	border-radius: 0;
	@include desktop-vertical-steps() {
		background-color: transparent;
	}
}
@media ($mq-max--wcs-steps-small-layout) {
	.wcs-steps {
		padding: 0;
	}
	.wcs-step {
		padding: $wcs-steps-spacing;
		padding-left: $wcs-steps-spacing*2;
		position: relative;
		&--marker {
			position: static;
			transform: none !important;
			height: auto;
			width: auto;
			font-size: 1.2em;
			&::before {
				display: none;
			}
			&-nb {
				transform: none;
			}
			&-total {
				transform: none;
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				padding: $wcs-steps-spacing;
				font-weight: inherit;
				font-size: inherit;
				background-color: #ccc;
				color: #333;
				display: flex;
				align-items: center;
			}
		}
		&--label {
			text-transform: uppercase;
			font-weight: normal;
			color: #333 !important;
			font-size: 0.875rem;
			padding-right: 2em;
			align-self: flex-end;
		}
	}
}


@media screen and ($max-mobile-viewport) {
	#columns-wrapper {
		padding: 0;
	}
	#login-title {
		padding: 0 0.7rem;
		height: 45px;
	}
	#login-page > .block {
		padding: 0 0.7rem;
		&.block-fc {
			padding: 0;
		}
	}
	#login-page {
		div div#fc-button {
			padding: 0;
			box-shadow: none;
			border-radius: 0;
			&:hover {
				background: transparent;
			}
			width: 100%;
			img {
				height: 80px;
			}
		}
		div div#fc-button-wrapper {
			padding-bottom: 0;
		}
		div div#fc-explanation-text {
			display: none;
		}
	}
	#frontend-registration-email {
		padding-bottom: 3px;
		margin-bottom: 1rem;
	}
	#registration-button {
		background: $green;
		margin: 0 -1rem;
		a {
			text-align: center;
			display: block;
			padding: 1rem;
			color: white;
			font-size: 0.875rem;
			strong {
				font-size: 1.125rem;
				text-transform: uppercase;
			}
		}
	}
	#columns div#login-page > div.block.block-password {
		min-height: calc(100vh - 50px - 55px - 95px - 130px - 65px);
		margin: 0;
		input {
			width: 100%;
		}
		button[name=login-password-submit] {
			background-image: url(img/valider.svg);
			background-position: center right 5px;
			background-repeat: no-repeat;
			background-size: auto 80%;
			padding-right: 50px;
			text-transform: uppercase;
		}
	}
	div.a2-block {
		margin: 0 auto;
	}
	div#tracking-code {
		margin-bottom: 0;
		h3 {
			padding: 0.5rem;
		}
		a {
			font-size: 0.875rem;
		}
	}
	div.form-validation form,  // target form validation
	div#rub_service form[action="."] {  // target form pages
		div.buttons {
			margin: 0;
			/* cancel page & form padding */
			margin-left: -1.5rem;
			margin-right: -1.5rem;
			margin-bottom: -1rem;
			display: flex;
			div.widget {
				margin-bottom: 0;
				div.content {
					display: block;
				}
				button {
					text-align: right;
					padding-bottom: 10px;
					padding-top: 40px;
					text-transform: uppercase;
					font-size: 0.875rem;
					border: none;
					box-shadow: none;
					border-radius: 0;
					margin-right: 0;
					width: 100%;
					padding-right: 10px;
					background-position: top 10px right 10px;
					background-size: 25px;
					background-repeat: no-repeat;
				}
				&.cancel-button {
					button {
						background-color: #f5a021;
						background-image: url(img/annuler.svg);
					}
				}
				&.previous-button {
					button {
						background-color: #00aa9f;
						background-image: url(img/fleche-gauche.svg);
					}
				}
				&.submit-button {
					flex: 1;
					button {
						background-color: #005fb9;
						background-image: url(img/fleche-droite.svg);
					}
				}
			}
		}
	}
	br.quixoteform {
		display: none;
	}
	#disclose-dataview,
	div#receipt-intro {
		font-size: 0.875rem;
		color: $mauve;
	}
}

div#gauche, div#rub_service {
	margin-top: 0;
	background: transparent;
	@media screen and (max-width: $nav-mobile-limit) {
		margin-top: -1rem;
		margin-left: -1rem;
		margin-right: -1rem;
		width: auto;
	}
}

div#rub_service.has-sidebox > h2 {
	padding-left: 0.5rem;
	@media screen and (max-width: $nav-mobile-limit) {
		display: none;
	}
}

.form-content--titlebar {
	@media screen and (max-width: $nav-mobile-limit) {
		display: none;
	}
}

div#rub_service h3[data-field-id] {
	font-family: $title-font-family;
	color: $title-color;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0.5rem 0;
}

div#rub_service h4[data-field-id] {
	color: $title-color;
}

.form-content--title,
div#rub_service h2 {
	text-align: left;
}

div#summary {
	background: white url(img/arrow-down.png) no-repeat top 0.5rem right 1rem;
	h2:first-child::after {
		content: none;
	}
	#disclose-dataview {
		margin-top: 0;
		padding-bottom: 0.7rem;
	}
}

div#evolution-log {
	h2:first-child::after {
		content: none;
	}
}

ul#evolutions {
	li {
		&:first-child {
			margin-top: 0;
		}
		&::after {
			content: none;
		}
		span.item {
			top: 0;
			background: $mauve !important;
			border-color: $mauve;
			&::before {
				background: white;
			}
		}
		div.evolution-metadata {
			padding-top: 0;
			span.status {
				color: $mauve;
			}
		}
		span.time {
			font-size: 90%;
			color: $mauve;
		}
		span.user {
			color: $mauve;
			opacity: 1;
		}
	}
	&::after {
		background: $mauve;
	}
}

div.qommon-map {
	height: 500px;
	@media screen and ($max-mobile-viewport) {
		height: 280px;
		max-height: 40vh;
	}
}

div.carrousel-item-content {
	a {
		margin-bottom: 2rem;
	}
	strong {
		font-family: $title-font-family;
		font-size: 3.75rem;
	}
}

div.back-home-button {
	display: none;
}

div.parkings {
	.parking-photo {
		float: left;
		img {
			width: 300px;
		}
	}
	div.infos {
		padding-right: 1ex;
		&::after {
			content: "";
			display: block;
			clear: both;
		}
	}
}

@media screen and (max-width: $nav-mobile-limit) {
	div.tracking-code-part {
		background: #d5d5d5;
	}
	div.cell.map {
		div.combo-cell-map.leaflet-container {
			height: calc(100vh - #{$mobile-header-height} - #{$nav-mobile-bottom-bar-height} - 2rem);
		}
	}
	.gru-content div.cell.parkings {
		margin: 0;
	}
	div.parkings {
		div.parking {
			display: none;
			font-size: 90%;
			&.shown {
				display: block;
			}
			position: absolute;
			bottom: $nav-mobile-bottom-bar-height;
			left: 0;
			right: 0;
			z-index: 1000;
			background: $mauve;
			padding-right: 90px;
			.parking-photo {
				display: none;
			}
			color: white;
			h2:first-child {
				color: white;
			}
			div.infos {
				padding: 0 1rem 1rem 1rem;
				p {
					margin: 0;
				}
				p.dispo {
					font-weight: bold;
				}
			}
			div.goto {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 100px;
				text-align: center;
				a {
					height: 100%;
					display: flex;
					align-items: end;
					border-radius: 0;
					background: $blue;
					span {
						background: transparent url(img/flecheparking.svg) top center no-repeat;
						background-size: 40px;
						display: block;
						padding-top: 50px;
						text-transform: uppercase;
						font-weight: bold;
					}
					&:hover {
						box-shadow: none;
					}
				}
			}
		}
	}
}

div#tracking-code h3 {
	font-family: $font-family;
	color: $font-color;
}

ul#evolutions li div.msg div.comment {
	background: white;
	color: $mauve;
}

li.combo-notification {
	cursor: pointer;
	&.combo-notification-acked {
		opacity: 0.6;
		cursor: inherit;
	}
}

div.notificationscell h2 + p {
	padding: 0 1rem 1rem 1rem;
}

.gru-nav-button {
	border-radius: 0;
}

#columns div.textcell:first-child > div > h2:first-child {
	padding-top: 0;
}

@media screen and ($max-mobile-viewport) {
	body.focus-in {
		#pwa-navigation {
			display: none;
		}
	}
}

div.comment-field p {
	margin: 0.5rem 0;
}
