//
//	TYPO
//
%title {
	position: relative;
	margin-left: 1rem;
	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50px;
		height: 0.2em;
		background-color: currentColor;

	}
	@media ($max-mobile-viewport) {
		font-size: $fz-3;
	}
}
h1 {
	@extend %title;
	font-size: $fz-1;
	@media ($max-mobile-viewport) {
		font-size: $fz-2;
	}
}
h2 {
	@extend %title;
}
%button {
	text-transform: uppercase;
	font-weight: bold;
}
%cancel-button {
	background-color: $gray;
	border-color: $gray;
	&:hover {
		color: $gray-dark;
	}
}

//
//	SITE HEADER
//
$header-desktop-height: 100px;
$logo-width: 310px;

div#header {
	max-width: $header-width;
	#top {
		display: flex;
		align-items: center;

		@media ($min-desktop-viewport) {
			height: $header-desktop-height;
		}
		@media ($max-mobile-viewport) {
			flex-wrap: wrap;
			padding: calc(10px + 0.7rem) 10px;
			.site-nav {
				order: 1;
				flex: 1 1 100%;
			}
		}
	}
	// Logo
	#logo {
		flex: 1 1 $logo-width;
		@media ($max-mobile-viewport) {
			flex-basis: 100%;
		}
		padding: 0;
		font-size: 1em;
		&::before {
			content: none;
		}
		a {
			display: block;
			width: $logo-width;
			height: 40px;
			@media ($min-desktop-viewport) {
				margin-top: 10px;
			}
			@media ($max-mobile-viewport) {
				margin-bottom: 10px;
			}
		}
	}
}

// User links
#toplinks {
	$icon-size: 38px;
	position: static;
	z-index: 1;
	box-shadow: none;
	border: none;
	border-radius: 0;
	padding: 0.33em;
	padding: $fz-small 1rem;
	padding-left: calc(#{$icon-size} + (#{$fz-small} * 2));
	background: url(img/account.svg) left $fz-small center no-repeat $green;
	background-size: $icon-size;
	@media ($max-mobile-viewport) {
		margin-right: $nav-menu-side;
	}
	a {
		color: $violet-dark;
		display: block;
		font-weight: bold;
		&:last-child {
			font-size: $fz-small;
			font-weight: normal;
		}
	}
}

//
//	NAV
//	inside header-content
//
.gru-nav-wrapper {
	@media ($max-mobile-viewport) {
		margin-top: calc(-1 * #{$nav-menu-side});
	}
}

div.gru-nav {
	text-transform: uppercase;
	> ul {
		margin: 0;
		> li {
			a {
				font-weight: normal;
			}
			&.selected > a,
			a:hover, a:focus {
				font-weight: bolder;
			}
		}
	}
	@media ($max-mobile-viewport) {
		$header-gutter: '(10px + 0.7em)';
		text-align: right;
		.gru-nav-button {
			display: inline-block;
			border: 5px solid transparent;
			+ ul {
				position: relative;
				text-align: left;
				border-top: 0;
				margin-left: calc(-1 * #{$header-gutter});
				margin-right: calc(-1 * #{$header-gutter});
			}
			&.toggled + ul {
				border-top: 10px solid white;
				overflow: visible;
				&::before {
					content: "";
					display: block;
					width: 20px;
					height: 20px;
					border: 10px solid transparent;
					border-bottom-color: $green;
					position: absolute;
					top: -20px;
					right: calc(#{$nav-menu-side / 2} - 10px + #{$header-gutter});
				}
			}
		}
	}
}

//
//	PAGE HEADER
//

%page-title {
	background-color: $violet-dark;
	background-image: var(--page-picture);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding : 4em 0;	
	color: white;
	> div, > h1 {
		max-width: $width;
		margin-left: auto;
		margin-right: auto;
	}
	* {
		color: inherit;
	}
}
.theme-page-header {
	max-width: $header-width;
	margin: 0 auto 2rem;

	.text-cell {
		@extend %page-title;
		display: flex;
		align-items: flex-end;
		min-height: calc(360em / 15);
		@media ($max-mobile-viewport) {
			min-height: calc(240em / 15);
		}
		> div {
			flex: 0 0 100%;
		}
	}
	div.carrousel-content {
		min-height: calc(360em / 15);
		@media ($max-mobile-viewport) {
			min-height: calc(240em / 15);
		}
		input + div div.carrousel-item {
			padding-bottom: $carrousel-navigation-bullet-size + 20;
			div.carrousel-item-content{
				flex: 0 1 $width;
				margin-left: auto;
				margin-right: auto;

				> a {
					max-width: 40rem;
					strong {
						@extend h1;
						margin-left: 0;
						color: white;
						display: block;
						line-height: normal;
					}
				}
			}
		}
		div.carrousel-nav {
			max-width: $width;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			text-align: left;
			label {
				background-color: black;
			}
		}
	}
}

//
//	MAIN
//
div#main-content-wrapper {
	position: static;
}
// home page template
.page-template-homepage {
	.gru-content { 
		flex-wrap: wrap;
	}
	#theme-top-section {
		flex: 0 0 100%;
		margin-top: 1rem;
		margin-bottom: 1rem;
		@media ($max-mobile-viewport) {
			padding-left: 0.7rem;
			padding-right: 0.7rem;
		}
		.cell {
			@media ($min-desktop-viewport) {
				margin-left: #{$columns-gutter / 2};
				margin-right: #{$columns-gutter / 2};
			}
		}

	}
	// 3 cols layout
	@media ($min-desktop-viewport) {
		#columns {
			display: flex;
			.column {
				flex: 1 1 0;

				.cell {
					margin-left: #{$columns-gutter / 2};
					margin-right: #{$columns-gutter / 2};
				}
			}
		}
	}
}

//
//	CELLS
//

.gru-content div.cell {
	margin-bottom: $columns-gutter;
}

// cells custom style
.shadowed-cell {
	overflow: hidden;
	padding-top: 2rem;
	padding-bottom: 2rem;

	> div {
		box-shadow: 0 0 1.9em -0.8em #000;
		padding-top: 1rem;
		padding-bottom: 0.5rem;
	}
}

.shadowed-cell-top {
	@extend .shadowed-cell;
	padding-bottom: 0;
	> div {
		padding-bottom: 0;
	}
}

.shadowed-cell-bottom {
	@extend .shadowed-cell;
	padding-top: 0;
	> div {
		padding-top: 0;
	}
}

.list-of-forms-cell {
	$image-size: 2.5rem;
	.gru-content &.cell {
		color: white;
		background-color: $red-dark;
		h2:first-child {
			color: inherit;
			font-size: $fz-5;
			text-align: left;
			min-height: 5em;
			display: flex !important;
			align-items: center;
			padding-right: 3rem;
			padding-bottom: 0;
			padding-left: 1rem;
			margin-left: 0;
			background-color: $red;
			&::before {
				content: none;
			}
		}
		&.foldable.folded {
			h2:first-child {
				background-color: $violet-dark;
			}
		}
		// Picture position
		&.has-asset-picture {
			h2:first-child {
				padding-left: $image-size + 2;
			}
			> div {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				> * {
					flex: 0 0 100%;
				}
				> h2:first-child {
					flex: 1 0 50%;
					margin-left: -1 * ($image-size + 1);
				}
				> picture {
					display: block;
					order: -1;
					flex: 0 0 $image-size;
					align-self: center;
					margin-left: 1rem;
					position: relative;
					z-index: 1;
					img {
						padding: 0;
						height: $image-size;
						width: $image-size;
						object-fit: contain;
					}
				}
			}
		}
		ul > li {
			border-bottom: none;
			color: inherit;
			> *, a::after {
				color: inherit !important;
			}
			> a:hover {
				background-color: $red-xdark;
			}
		}
	}
}

#theme-top-section {
	.tracking-code-input-cell {
		@extend .shadowed-cell-bottom;
		.wcs-tracking-code-input {
			@media ($min-desktop-viewport) {
				&, & form {
					display: flex;
					align-items: flex-start;
				}
				h2 {
					flex: 1 0 auto;
					& + div {
						padding-top: 0;
						padding-left: 1.5rem;
					}
				}
				form {
					p {
						flex: 1 1 50%;
						margin-right: 0.5rem;
					}
					input {
						margin-right: 1rem;
					}
					button {
						margin-right: 0;
					}
				}
			}
		}
	}
}

.search-cell {
	.combo-search--button::before {
		content: "\f002"; // search icon
		font-family: FontAwesome;
		font-size: $fz-5;
	}
	.combo-search--button-label {
		display: none;
	}
}

.wcs-forms-of-category-cell {
	@extend .list-of-forms-cell;
}

//
//	Forms
//

label {
	font-style: italic;
	font-weight: 300;
}

//
//	WCS
//
.wcs-steps {
	text-transform: uppercase;
	font-weight: bold;
	font-size: $fz-5;
	@media ($min-desktop-viewport) {
		font-size: $fz-4;
	}
}

div#gauche {
	padding: 0.5rem;
	div#tracking-code {
		@extend .shadowed-cell;
		h3 {
			margin-left: 0;
		}
		a {
			font-weight: bold;
			color: $red;
			@media ($min-desktop-viewport) {
				padding-left: 0;
			}
			@media ($max-mobile-viewport) {
				padding-left: 1em;
			}
		}
	}
}
.theme-form-title {
	@extend %page-title;
	padding-left: calc(0.7rem + 0.5rem);
	@media ($min-desktop-viewport) {
		padding-left: 0.5rem;
	}
}
div#rub_service {
	h3 {
		@extend h2;
		margin-left: 0;
	}
	h4 {
		font-size: $fz-3;
	}
}

//
//	FOOTER
//
#theme-gray-footer-wrapper {
	background-color: $gray-light;
}
#theme-gray-footer {
	max-width: $width;
	margin-left: auto;
	margin-right: auto;
}
#footer-wrapper {
	margin-top: 0;
	padding: 0;
}
#theme-gray-footer,
#footer {
	padding: 3rem 0.7rem 2rem;
	@media ($min-desktop-viewport) {
		padding-top: 4.5rem;
		padding-bottom: 3.5rem;
	}
	.cell {
		margin-bottom: 1rem;
	}
}
