@import '../includes/fonts/montserrat';
@import '../includes/fonts/montserrat-alternates';

//
//	Components
//

%title {
	line-height: 1;
}

%button {
	font-weight: bold;
}

h1 {
	font-family: "Montserrat";
	font-size: $fz-h2;
	font-weight: 900;
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 0.5em;
	@media ($min-desktop-viewport) {
		font-size: $fz-h1;
	}
}

h2, .gru-content div.textcell h2:first-child {
	font-family: "Montserrat";
	font-size: $fz-h3;
	font-weight: bold;
	@media ($min-desktop-viewport) {
		font-size: $fz-h2;
	}
}

//
//	HEADER
//
#logo {
	@media ($max-mobile-viewport) {
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 0;
	}
	@media ($min-desktop-viewport) {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	&.has-logo a {
		height: 100px;
		display: block;
		@media ($min-desktop-viewport) {
			height: 150px;
		}
	}
}

//
//	NAV
//	user-infos block is child of #nav-wrapper
//
$skew-value: 15deg;

#page {
	overflow-x: hidden;
}

#nav-wrapper {
	position: relative;
	display: flex;
	margin-top: 0;
}

div#nav {
	margin-left: 0;
	flex-grow: 1;
	@media ($min-desktop-viewport) {
		margin-right: $columns-gutter;
	}
	@media (min-width: $width) {
		margin-left: calc(50vw - #{$width / 2});
	}
	> ul {
		margin: 0;
		border-top: none;

		@media (max-width: $mobile-limit) {
			position: absolute;
			z-index: 1;
			width: 100vw;
		}
	}
	// skew in desktop
	@media ($min-desktop-viewport) {
		> ul > li > a {
			transform: skewX(#{ -1 * $skew-value});
			border-right: 1px solid $nav-active-color;
			transform-origin: top left;
			> span {
				transform: skewX($skew-value);
				display: block;
			}
		}
	}
}

#toplinks {
	// reset
	background: none;
	box-shadow: none;
	border: none;
	border-radius: 0;
	position: static;
	padding: 0;

	background-color: $orange;

	@media ($max-mobile-viewport) {
		font-size: $fz-small;
	}

	> span::before {
		content: "\f007";
		font-family: fontawesome, sans-serif;
		align-self: center;
		color: $blue;
		padding-left: .66em;
	}

	&, & > span {
		display: flex;
		align-items: center;
	}
	& > span {
		flex-wrap: wrap;
	}
	a {
		align-items: center;
		padding: .33em .66em;
		color: white;
		font-weight: bold;

		&:hover {
			color: $blue;
		}

		&.logout {
			font-weight: normal;
		}
	}

	// skew
	& {
		transform: skewX(#{ -1 * $skew-value});
		transform-origin: bottom right;
		padding-right: .5em;
		> span {
			transform: skewX($skew-value);
		}
	}
}

//
//	MAIN
//

.page-header, .gru-content {
	padding-top: $columns-gutter;

	div.cell {
		margin-bottom: 10px;
	}
}

// Page header
.page-header {
	@extend .clearfix;
	@media ($max-mobile-viewport) {
		padding-left: 0.7em;
		padding-right: 0.7em;
	}
	h1, h2, h3 {
		color: $blue;
	}
	button {
		@extend %button;
	}
	div.text-cell {
		font-size: $fz-h4;
		color: $orange-dark;
		font-weight: 500;

		p {
			line-height: 1.3;
			font-family: "Montserrat Alternates";
			font-size: 21pt;
			font-weight: bold;
			font-style: italic;
			@media ($max-mobile-viewport) {
				font-size: 14pt;
			}
		}
	}

	div.searchcell form {
		padding: 0;
		input {
			margin-right: 0;
		}
		button {
			flex: 0 0 auto;
			color: white;
			background-color: $orange;
			font-weight: bold;
			&:focus {
				background-color: $blue !important;
				color: white !important;
			}
		}
	}
	.tracking-code-input-cell {
		form {
			input, button {
				vertical-align: middle;
			}
		}
	}
}

//
//	CELLS
//

.en-1-clic {
	padding-top: 40px;
	clear: both;
	& > div {
		background-color: $blue-light;
		color: white;
		padding: 1rem;
		display: flex;
		flex-wrap: wrap;

		@media ($max-mobile-viewport) {
			font-size: $fz-small;
		}

		&::before {
			content: "";
			background: url(img/en1clic.svg) top left no-repeat;
			background-size: contain;
			width: 5em;
			margin-right: 1.5em;
		}
	}
	& &--header {
		width: 13em;
		line-height: 1.1;
		margin-bottom: 1rem;
	}
	& &--title,
	& &--subtitle {
		color: inherit;
		margin: 0;
	}
	& &--title {
		font-size: $fz-h2;
		margin-left: -1.5rem;
	}
	& &--subtitle {
		font-size: $fz-h3;
	}
	& &--list {
		list-style-type: none;
		margin: 0;
		padding: 0;
		flex: 1 1 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	& &--link {
		display: flex;
		text-align: center;
		align-items: center;
		color: inherit;
		border: 1px solid currentColor;
		width: 9em;
		height: 9em;
		padding: 1em;
		margin: 0.5em;
		border-radius: 50%;
		font-weight: bold;
		hyphens: auto;
		&:hover {
			background-color: $blue;
			text-decoration: none;
		}
	}
	div.link-list-cell.en-1-clic div ul > li {
		border-bottom: none;
	}
}

.right-icon {
	// $image-width: #{$title-font-size + 1.4};
	$image-width: 4.15rem;
	.gru-content &.cell {
		// Picture position
		&.has-asset-picture {
			> div {
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;

				> * {
					flex: 0 0 100%;
				}

				> h2:first-child {
					flex: 1 0 50%;
					margin-left: calc(-1 * #{$image-width});
					padding-left: #{$image-width + 1};
					line-height: 1;
				}
				> picture {
					display: block;
					order: -1;
					flex: 0 0 $image-width;
					height: $image-width;
					align-self: center;
					position: relative;
					z-index: 1;

					background-color: $blue-light;
					border: 2px solid white;
					border-radius: 50%;
					padding: .66em;


					img {
						padding: 0;
						object-fit: contain;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		&.foldable.folded {
			> div {
				h2:first-child {
					background-color: $gray;
					color: $blue;
				}

			}
		}
	}
}

.blue-title {
	.gru-content &.textcell h2:first-child,
	.gru-content &.cell h2:first-child {
		color: $blue;
		background-color: transparent;
	}
}

#columns {
	.wcs-forms-of-category-cell,
	.link-list-cell {
		@extend .right-icon;
	}
	.wcs-forms-of-category-cell {
		h2:first-child {
			font-size: 24pt;
			padding-top: .7em;
			padding-bottom: .45em
		}
		div.links-list ul > li > a {
			font-size: 20pt;
		}
	}
}

#main-content div.text-cell > div {
	> * {
		margin-right: 1rem;
		margin-left: 1rem;
	}
	h1, h2:not(:first-child), h3 {
		color: $blue;
	}
}

//
//	WCS
//

.wcs-page {
	.page-header {
		display: none;
	}
	h1.form-content--title {
		padding: 0;
		margin-bottom: 0.5em;
		color: $blue;
		background: transparent;
		font-size: $fz-h2;
		@media ($max-mobile-viewport) {
			padding: 0 0.7rem;
		}
	}
}

//
//	footer
//

#footer .link-list-cell .links-list ul {
	& > li {
		border-bottom:none
	}
	& > li a {
		padding-top: 3px;
		padding-bottom: 3px;
		&:before {
			content: "▶";
			color: $orange;
			margin-right: .2em;
		}
		&:hover::before {
			color: white;
		}
	}
}
