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

%button {
	@extend %button;
	clip-path: polygon(0 0,90% 0,100% 30%,100% 100%,10% 100%,0 70%,0 0);
	transition: background 0.2s linear;
	text-transform: uppercase;
	font-weight: 700;
	padding: 10px 15px;
	display: inline-block;
	max-width: 20em;
	text-align: center;
}

%cancel-button {
	@extend %cancel-button;
	background: #ddd;
	color: $black;
	&:hover {
		background: #ccc;
	}
}

%transparent-cell {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

%h1 {
	font-size: $fz-h1;
	font-weight: 900;
	margin-top: 0;
	margin-bottom: .7rem;
}
%h2 {
	font-size: $fz-h2;
	font-weight: 800;
	margin-top: 0;
	margin-bottom: .7rem;
}
%h3 {
	font-size: $fz-h3;
	font-weight: 800;
	margin-top: 0;
	margin-bottom: 1.4rem;
}
%h4 {
	font-size: $fz-h4;
	font-weight: 800;
	margin-top: 0;
	margin-bottom: 1.4rem;
}

body {
	line-height: 1.4;
}

a.pk-button {
	text-transform: inherit;
	font-size: 1rem;
}


// FORMS
label {
	font-weight: bold;
}
input, select, textarea {
	box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.15);
}

// HEADER
div#header {
	padding-top: 10px;
	@media ($min-desktop-viewport) {
		padding-top: 20px;
		background: no-repeat url(img/fond-header.svg) right;
		background-size: 100% auto;
	}

	&::after {
		content: "";
		display: block;
		clear: both;
	}
	#logo {
		padding: 0;
		a {
			text-indent: -9999em;
			display: block;
			float: left;
			background: url(img/logo.svg) center center no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 50px;

			@media ($max-mobile-viewport) {
				margin-bottom: 30px;
			}

			@media ($min-desktop-viewport) {
				height: 86px;
				width: 486px;
			}
		}
	}
}

// TOPLINKS
#toplinks {
	position: static;
	background: none;
	font-size: $fz-small;
	border-radius: 0;
	margin-top: 0px;
	margin-bottom: 20px;
	border: none;
	box-shadow: none;
	text-align: center;
	padding: 0;
	max-width: none;

	@media ($min-desktop-viewport) {
		float: right;
		margin-bottom: 0;
	}

	> * {
		display: inline-flex;
		flex-direction: column;
	}

	a.logout,
	a.login-link {
		@extend %button;
		margin-right: 0;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	a.login-link {
		&::before {
			content: "\f007";
			font-family: 'FontAwesome';
			font-weight: 300;
			vertical-align: baseline;
			margin-right: .66em;
		}
	}
	a.registration {
		display: block;
		span.no-account {
			color: $font-color;
		}
	}
	a.account-link {
		margin-right: 1em;
	}
	a.logout {
		display: inline-block;
	}
}

// NAV
div.gru-nav-wrapper {
	margin-top: 0;
	box-shadow: 0px 15px 15px 0 rgba(0, 0, 0, 0.15);

	ul  {
		margin: 0;
		> li {
			text-transform: uppercase;
			li {
				text-transform: none;
			}
			a {
				padding-top: .33em;
				padding-bottom: .33em;
			}
		}
	}
	@media ($max-mobile-viewport) {
		.gru-nav-button {
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 1em;

			+ ul {
				background-color: $nav-mobile-menu-background;
				background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent 20px)
			}

			&.toggled + ul {
				padding-top: 20px;
				padding-bottom: 20px;
			}
		}
	}
	@media ($min-desktop-viewport) {
		margin-top: 1rem;
		ul li {
			a {
				padding-left: 0.7rem;
				padding-right: 3em;
			}

			ul {
				border: 4px solid $blue;
				padding-left: 1em;

				a::before {
					content: "▶";
					color: $blue;
					margin-right: .66em;
					display: inline;
					font-size: .7em;
					vertical-align: 0.2em;
				}
			}
		}
	}
}

// Home image
.page-index {
	.site-nav {
		width: 1920px;
		max-width: 100%;
		margin: 0 auto;

		&::after {
			content: "";
			display: block;
			padding-top: 90%;
			background: center url(img/couverture-mobile.svg) no-repeat;
			background-size: cover;

			@media (min-width: 560px) {
				background-image: url(img/couverture-desktop.svg);
				padding-top: 11%;
			}
			@media (min-width: 1200px) {
				padding-top: 7.3%;
			}
		}
	}
}


// MAIN
main {
	background: transparent url(img/fond.svg)  center no-repeat;
	background-attachment: fixed;
	background-size: cover;
	padding-top: 3rem;
}


// CELLS & tracking code
#tracking-code,
%cell {
	box-shadow: $gpseo-shadow;
	margin-bottom: 20px;

	input, select, textarea {
		background: white;
	}
}

.gru-content div.cell {

	// FORMS OF CAT
	// Image à côté du titre (avec $cell-image-position: top)
	&.wcs-forms-of-category-cell {
		padding-top: 1rem;
		padding-bottom: .5rem;
		> div {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: baseline;

			> h2 {
				flex-grow: 1;
				padding: 0;
				padding-left: .33em;
			}

			> picture {
				height: $fz-h4;
			}

			> div {
				flex: 0 0 100%;
				padding-top: .5em;
			}

		}
	}

	// TRACKING CODE INPUT
	&.tracking-code-input-cell h2 {
		padding-bottom: 0;
	}

	// TEXT CELL
	&.text-cell {
		@extend %transparent-cell;

		> div {
			> * {
				margin-left: 0;
				margin-right: 0;
			}
			h1 { @extend %h1; }
			h2 { @extend %h2; }
			h3 { @extend %h3; }
			h4 { @extend %h4; }
			p {
				margin-top: 1.4em;
				margin-bottom: 1.4em;
			}
		}
	}

	// LINK CELLS
	&.link-cell,
	&.wcs-form-cell,
	&.wcs-category-cell {
		@extend %transparent-cell;

		h2 {
			padding: 0;
		}

		li {
			border: none;
		}
		a {
			@extend .pk-button;
			display: block;

			&::before {
				content: none;
			}
		}

		// OTHER COLORS LINK
		&.asso,
		&.pro,
		&.particuliers {
			min-width: 15em;
			a {
				text-align: left;
				min-height: 4.8em;
				display: flex;
				align-items: center;
				background-size: 3em;
				background-repeat: no-repeat;
				background-position: 20px 50%;
				padding-left: 4.8em;
			}
		}
		&.particuliers a {
			background-image: url(img/habitant.svg);
		}
		&.asso a {
			background-color: $pink;
			background-image: url(img/asso.svg);
			&:hover {
				background-color: darken($pink, 20%);
			}
		}
		&.pro a {
			background-color: $green;
			background-image: url(img/entreprise.svg);
			&:hover {
				background-color: darken($green, 20%);
			}
		}
	}
}

div#tracking-code {
	background-color: $cell-background;
	padding: 20px;
	border: $cell-border;

	* {
		padding: 0 !important;
	}

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

	a {
		font-size: $fz-h4;
		display: block;
		&:hover {
			color: $blue;
		}
	}
}

// LINKS LIST
%cell-links-list {
	& > li {
		> a {
			display: block;
			font-weight: bold;
			padding-top: 0.5em;
			padding-bottom: 0.5em;
		}

		&:not(.add-more-items) {
			> a::before {
				content: "▶";
				color: $blue;
				margin-right: .66em;
				display: inline;
				font-size: .7em;
				vertical-align: 0.2em;
			}
		}

		&.add-more-items {
			text-align: center;
			> a {
				@extend .pk-button;
				font-size: $fz-h4;
				line-height: 1;
			}
		}
	}
}

// FOLDABLE
.gru-content div.cell,
div.section {
	&.foldable {
		> h2:first-child,
		> div > h2:first-child {
			color: $blue !important;
			&::after {
				content: "\25b2";
				line-height: 1em;
				transform: scaleY(0.7);
			}
		}
		&.folded {
			> h2:first-child,
			> div > h2:first-child {
				&::after {
					content: "\25bc";
				}
			}
		}
	}
}

// WCS typo
div#rub_service {
	h2 {
		@extend %h2;
		padding-left: 0.5rem;
		@media ($min-desktop-viewport) {
			font-size: $fz-h1;
		}
	}
	h3 {
		@extend %h3;
	}

	// Add caret icon to next & prev buttons
	.previous-button button::before {
		content: "\f0d9";  // caret-left
		font-family: FontAwesome;
		padding-right: 0.5rem;
	}
	.submit-button button::after {
		content: "\f0da";  // caret-right
		font-family: FontAwesome;
		padding-left: 0.5rem;
	}
}

// STEPS
.wcs-steps {
	font-weight: bold;
}
.wcs-step--marker {
	font-weight: 900;
	font-size: $fz-h3;
}


// FOOTER
#footer {
	@media (max-width: $width + 20) {
		padding-left: .7rem;
		padding-right: .7rem;
	}
}

#footer .menucell a,
footer .textcell a {
	color: white;
	&:hover {
		color: #E0B500;
	}
}

#frontend-registration-email {
	padding: 0 0.7rem 0.7rem 0.7rem;

	* {
		padding-left: 0;
		padding-right: 0;
		margin-left:0;
		margin-right: 0;
	}
}

// SAML
.block-saml {
	p {
		color: $font-color;
	}
	> div {
		color: #999;
		button {
			background: #999;
			margin-bottom: .5em;
			&:hover {
				background: #777;
			}
		}
	}
}
