//
//	TYPO
//

html {
	@media ($min-desktop-viewport) {
		font-size: calc(170% / 1.6);
	}
}

h1 {
	font-size: $fz-h1;
	color: $blue;
	font-style: italic;
	font-weight: 900;
	text-transform: none;
}

h2 {
	font-size: $fz-h3;
	color: $green;
	text-transform: uppercase;
	font-style: italic;
	border-bottom: 1px solid;
	padding-bottom: .33em;
	margin-bottom: 1rem;
}

//
// Components
//

%button {
	display: inline-block;
	font-weight: 800;
	box-shadow: none;
	text-transform: uppercase;
	&:hover, &:focus {
		box-shadow: 0px 0px 5px $green;
	}

}

%cancel-button {
	&, &:hover {
		background-color: white;
		color: $blue;
		border-color: currentColor;
	}
}

%gray-button {
	@extend %button;
	&, &:hover {
		background-color: $gray-light;
		color: $blue;
		border-color: $gray-light;
	}
}

.white-btn {
	@extend %button;
	padding: calc(7em / 17) calc(15em  / 17);
	background-color: white;
	color: $blue;
	border-radius: 3em;
	line-height: 1;
	text-transform: none;

	&:hover {
		background-color: $green;
		color: white;
	}
}

//
//	HEADER
//

body {
	margin-top: 2em;
	@media ($min-desktop-viewport) {
		margin-top: 1em;
	}
}

#header-wrapper {
	background-image: linear-gradient(
		to bottom,
		transparent #{$logo-height/2}, #{$blue} #{$logo-height/2}
	);
}

#logo.has-logo {
	@media ($max-mobile-viewport) {
		padding-left: 0;
	}
	a {
		height: $logo-height;
		width: $logo-width;
	}
} 

// User-links
#toplinks {
	// display: flex;
	//justify-content: flex-end;
	position: static;
	border: none;
	box-shadow: none;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	max-width: none;
	font-size: $fz-small;
	text-align: right;
	padding-bottom: 1rem;
	@media ($max-mobile-viewport) {
		padding-top: 2rem;
	}

	a:not(.account-link) {
		@extend .white-btn;
	}
	.account-link {
		display: inline-block;
		color: white;
		margin-right: 1em;
		margin-bottom: 0.5em;
	}
}

//
//	NAV
//

@media ($min-desktop-viewport) {
	// Nav top right header
	$a11y-link-width: 50px;
	.site-nav {
		order: -1;
	}
	div.gru-nav {
		text-align: right;
		position: relative;
		z-index: 1000;
		height: 0;
		> ul {
			margin: 0;
			display: inline-flex;
			width: calc(100% - #{$logo-width} - #{$a11y-link-width});
			justify-content: space-around;
			> li a {
				padding-top: 0;
				padding-bottom: 0;
				display: flex;
				height: 100%;
				> span {
					margin: auto;
				}
			}
		}
	}
	.a11y-link {
		display: inline-block;
		img {
			width: $a11y-link-width;
			height: auto;
			vertical-align: bottom;
		}
	}
}
@media ($max-mobile-viewport) {
	div.gru-nav .gru-nav-button {
		// rounded btn
		border: 8px solid transparent;
		border-radius: 50%;
		width: $nav-menu-side;
		box-shadow: 0 0 0 1px white;
		&.toggled .icon-bar {
			background-color: white;
		}
	}
	// right-to-left adaptation
	@if $responsive-menu == left-to-right {
		body {
			border-left: none;
		}
		div.gru-nav .gru-nav-button {
			left: auto;
			right: 0.7rem;
			+ ul {
				transform: translateX(100%);
				left: auto;
				right: 0;
			}
		}
	}
}

// Top carrousel
.theme-top-carrousel {
	background-color: $blue;
	&--wrapper {
		max-width: $width;
		margin: 0 auto;
		box-shadow: 0 12px 0 0 $green;
		position: relative;
		z-index: 101;
	}

	div.carrousel-content {
		$content-mobile-height: 10rem;
		$content-desktop-width: 50%;
		input + div {
			@media ($max-mobile-viewport) {
				padding-bottom: $content-mobile-height;
			}
			@media ($min-desktop-viewport) {
				padding-right: $content-desktop-width;
			}
			div.carrousel-item {
				padding: 0;
				@media ($min-desktop-viewport) {
					align-items: stretch;
					justify-content: flex-start;
				}
				div.carrousel-item-content {
					background-color: white;
					color: $blue;
					padding: 1.5rem;
					padding-bottom: 2.5rem;
					margin-bottom: 0;
					font-style: italic;
					* {
						display: inline;
					}
					@media ($max-mobile-viewport) {
						flex-grow: 1;
						min-height: $content-mobile-height;
						margin-bottom: -1 * $content-mobile-height;
						text-align: center;
					}
					@media ($min-desktop-viewport) {
						transform: translateX(100%);
						flex: 0 0 100%;
						display: flex;
						align-items: center;
						text-align: left;
						padding: 2rem;
						padding-bottom: 3rem;
					}
				}
			}
		}
		div.carrousel-nav {
			@media ($min-desktop-viewport) {
				width: 50%;
				left: 50%;
				text-align: left;
				padding-left: calc(2rem - 10px);
			}
		}
		a.carrousel-previous,
		a.carrousel-next {
			font-size: 14px;
			width: 2.5em;
			height: 2.5em;
			border-radius: 50%;
			border: 0.2em solid white;
			top: 0;
			bottom: 0;
			margin: auto 0;
			line-height: 2.4em;
			&:after {
				font-size: inherit;
			}
		}
		a.carrousel-next {
			right: calc(50% + 0.7rem);
		}
	}
}

//
//	MAIN
//

main {
	background-color: $gray_light;
	padding-top: 2rem;
	padding-bottom: 2rem;
	.page-template-two-columns-sidebar &,
	.page-template-standard-sidebar & {
		background-color: white;
		padding-top: 0;
		padding-bottom: 0;
	}
}

.gru-content { 
	flex-wrap: wrap;
}

.gru-content #theme-top-section {
	flex: 0 0 100%;
	margin-top: 1rem;
	margin-bottom: 1rem;
	div.cell {
		margin-left: 0;
		margin-right: 0;

		&[class^='grid-'],
		&[class*=' grid-'] {
			padding-right: 0;
			margin-right: $grid-gutter;
		}
	}
}

.gru-content #sidebar {
	background-color: $gray-light;
	padding-top: 2rem;

	& + #columns-wrapper {
		padding-top: 2rem;
		padding-bottom: 2rem;
		@media ($min-desktop-viewport) {
			margin-left: 5em;
			flex: 1 0 0;
		}
	}
	@media ($max-mobile-viewport) {
		margin-left: 0;
		margin-right: 0;
	}

	@media (min-width: $width) {
		box-sizing: content-box;
		margin-left: calc(-50vw + #{$width/2});
		padding-left: calc(50vw - #{$width/2});
	}
}

//
//	CELLS
//

.gru-content div.cell:not(:last-child) {
	margin-bottom: 1.5rem;
}

div.textcell {
	h1, h2 {
		margin: 0.7em 1rem;
	}
}

div.cell:not(.textcell) {
	p {
		color: $blue;
	}
}

div.searchcell form {
	align-items: center;
}

// custom styles
.list-of-forms-cell {
	$image-size: 3rem;
	.gru-content &.cell {
		background-color: white;
		border-radius: 5px;
		overflow: hidden;
		h2:first-child {
			font-size: $fz-h3;
			font-style: normal;
			text-align: left;
			padding-top: 1em;
			padding-bottom: 1em;
		}
		// 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;
					}
				}
			}
		}
	}
}

// Foldable icon
div.cell.foldable > div > h2:first-child {
	padding-right: 3em;
	&::after {
		width: 1em;
		height: 1em;
		border: 1px solid;
		padding: .2em;
		color: $green;
		text-align: center;
		box-sizing: content-box;
		border-radius: 50%;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: white;
	}
}

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

// Footer cells
#footer {
	.link-list-cell {
		h2:first-child {
			font-size: fz-h3;
			color: white;
			font-weight: bold;
			font-style: normal;
			text-transform: none;
		}
		div.links-list ul {
			 > li > a {
			 	padding: 0.33em 0;
			 	font-weight: 700;
			 	&:hover {
			 		background-color: transparent;
			 		text-decoration: underline;
			 	}
			 }
		}
	}
} 

//
//	WCS
//

.wcs-page main {
	background-color: white;
}
// Steps
.wcs-steps {
	@media ($mq-max--wcs-steps-small-layout) {
		padding: 0;
	}
	@include desktop-vertical-steps() {
		padding: 0;
		padding-bottom: 2rem;
		@media (min-width: $width) {
			box-sizing: content-box;
			margin-left: calc(-50vw + #{$width/2});
			padding-left: calc(50vw - #{$width/2});
		}
	}
}
.wcs-step {
	@include desktop-vertical-steps() {
		margin-bottom: 0;
		&--marker {
			&::after {
				content: "-";
				margin: auto auto auto 0;
			}
		}
	}
	&.current &--label {
		@media ($mq-min--wcs-steps-horizontal-layout) and ($max-mobile-viewport) {
			color: $blue;
		}
	}
}
div#tracking-code {
	h3 {
		padding-left: 0;
		padding-bottom: 0;
	}
	a {
		font-size: 1rem;
		color: $blue;
		display: block;
		padding: 0.33em;
		border: 1px solid;
		border-radius: 5px;
		line-height: 1;
	}
}
div.gru-content div#rub_service {
	@media ($min-desktop-viewport) {
		padding-left: 4rem;
	}
	h2 {
		@extend h1;
		padding-left: 0.5rem;
	}
	h3 {
		@extend h2;
		padding-left: 0;
	}

	.submit-button button::after {
		content: "\f138";
		font-family: FontAwesome;
		margin-left: 0.66em;
	}
	.previous-button button {
		@extend %gray-button;
	}
}

//
//	A2
//

.authentic-page {
	main {
		background-image: linear-gradient(
			to bottom,
			$blue 200px,
			$gray-light 200px
		);
	}
	.gru-content {
		background-color: white;
		padding: 2rem;
		margin-bottom: 2rem;
		box-shadow: 0 12px 0 0 $green;

		.a2-block h2,
		.block h2 {
			@extend h2;
		}
	}
}

//
//	FOOTER
//

#footer-wrapper {
	margin-top: 0;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
