//
// Layout
//
html {
	--add-main-padding: .5rem;
	--core-main-padding: 0.7rem;
	--main-margin: 0.7rem;
	@media ($min-desktop-viewport) {
		--add-main-padding: #{$columns-gutter};
		--core-main-padding: 0;
	}
	@media ($max-mobile-viewport) {
		font-size: 93.75%;
	}
}

//
//	typo
//
h1, .h1 {
	font-size: $fz-1;
	font-weight: 700;
	line-height: 1;
}
h2, .h2 {
	font-size: $title-font-size;
	font-weight: $title-weight;
	text-transform: $title-transform;
}
h3, .h3 {
	font-size: $fz-3;
	font-weight: 500;
}
.pwa-label {
	font-size: $fz-xsmall;
	text-transform: uppercase;
	line-height: 1.2;
}

body {
	background: url(/assets/portal:background-mobile) no-repeat;
	background-size: 100% auto;
	@media ($min-desktop-viewport){
		background-image: url(/assets/portal:background-desktop);
	}
}

//
//	Graphic
//
.shadow {
	--shadow: 12px 12px var(--shadow-color, #{$blue});
	border: 1px solid $gray-light;
	box-shadow: var(--shadow);
	border-radius: $cell-border-radius;
	&.cell {
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 22px;
	}
}

//
//	BUTTONS
//
%button {
	text-transform: uppercase;
	font-size: $fz-xsmall;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	&:hover {
		box-shadow: none;
	}
}
%cancel-button {
	--color: #{$gray};
	--background: white;
	--hover-color: black;
	--hover-background: white;
	font-weight: 500;
	border-color: transparent;
	&:hover {
		border-color: $gray-light;
	}
}
%gray-button {
	@extend %button;
	--background: #{$gray-light};
	--hover-color: white;
	--hover-background: black;
	font-weight: 500;
	border-color: $gray-light;
	&:hover {
		border-color: black;
	}
}

//
// HEADER
//
div#header,
div#nav {
	max-width: none;
	padding: 0;
}
div#header {
	@media ($min-desktop-viewport) {
		padding-top: 3rem;
	}
}
#top {
	display: flex;
	@media ($min-desktop-viewport) {
		justify-content: flex-end;
	}
}
#logo {
	line-height: 0;
	// logo mobile
	@media ($max-mobile-viewport) {
		padding-left: 0;
		flex: 0 0 50%;
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		clip-path: polygon(0 0, 100% 0, calc(100% - 25px) calc(100% - 15px), 0 100%);
		&.has-logo a::before {
			background-image: url(/assets/header:logo-mobile);
			margin-right: 0;
			height: 65px;
			width: 50px;
			transform: translate(-10px, -8px);
		}
	}
}
.site-nav, 
#toplinks {
	position: static;
	@media ($min-desktop-viewport) {
		display: flex;
		align-items: center;
		padding: 0 1rem;
	}
	@media ($min-desktop-viewport) {
		background-color: white;
	}
}
#toplinks {
	@media ($max-mobile-viewport) {
		flex: 0 0 50%;
		display: flex;
		justify-content: center;
		padding: 20px 10px 10px 10px;
	}
}
.toplinks {
	&--list {
		font-size: $fz-xsmall;
		text-transform: uppercase;
		font-weight: 600;
		color: white;
		// icon
		&::before {
			content: "";
			display: inline-block;
			background: url(img/user.svg) no-repeat;
			background-size: contain;
		}
		a {
			color: white;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
		.account-link {
			text-transform: none;
		}
	}
	@media ($max-mobile-viewport) {
		&--list {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-transform: none;
		}
		// icon
		&--list::before {
			background-image: url(img/user-mobile.svg);
			width: 4em;
			height: 4em;
			border-radius: 50%;
			background-color: white;
			border: .75em solid;
		}
		&--list-item {
			margin-top: .5em;
			text-align: center;
		}
	}
	@media ($min-desktop-viewport) {
		&--list {
			background-color: $blue;
			border-radius: $cell-border-radius;
			padding: 1em;
			white-space: nowrap;
			// icon
			&::before {
				width: 1.8em;
				height: 1.8em;
				vertical-align: -0.5em;
			}
		}
		// separator
		&--list-item:first-child::after {
			content: " | ";
		}
	}
}
div.gru-nav {
	// move button to right bottom
	.gru-nav-button {
		top: auto;
		left: auto;
		bottom: 36px;
		right: 0.7rem;
		border: 12px solid transparent;
		border-radius: 50%;
		&.toggled {
			background-color: $nav-button-background;
		}
		&:after {
			content: "Menu";
			@extend .pwa-label;
			position: absolute;
			color: $font-color;
			top: calc(100% + 19px);
			left: 0;
			width: 100%;
			text-align: center;
		}
	}
	:not(.toggled) {
		.icon-bar-2 {
			width: 53%;
		}
		.icon-bar-3 {
			width: 40%;
		}
	}
}
@media (max-width: $nav-mobile-limit) {
	div.gru-nav .gru-nav-button + ul {
		width: 100%;
		> li > a {
			font-size: $fz-2;
		}
		> li li a {
			color: $font-color;
			text-transform: none;
		}
	}
}

.theme-plateforme-title {
	text-align: left;
	color: white;
	margin: 1em calc(var(--add-main-padding) + var(--core-main-padding));
	margin-bottom: 1.5em;
	@media ($min-desktop-viewport) {
		text-align: center;
		margin-top: 1.5em;
	}
}


//
//	MAIN
//
div#main-content {
	position: relative;
	background-color: white;
	padding: var(--add-main-padding);
	padding-top: 0;
	border-radius: 10px;
	margin: 0 var(--main-margin);
	@media (max-width: $very-small-limit) {
		padding-left: 0;
		padding-right: 0;
	}
}
.theme-page-title--wrapper {
	position: relative;
	--square-size: 2.6em;
	--line-height: 1.1em;
	display: inline-block;
	padding-left: 0;
	border: 1px solid #000;
	background-color: white;
	margin-left: calc(var(--square-size) / 2);
	margin-right: calc(var(--square-size) / 2);
	transform: translateY(calc(var(--square-size) / -2));
 	&::before {
 		content: "";
		display: inline-block;
 		width: var(--square-size);
 		height: var(--square-size);
 		background-color: $blue;
 		position: absolute;
 		top: calc(-0.3 * var(--square-size));
 		left: calc(-0.5 * var(--square-size));
 	}
 	h1 {
 		line-height: var(--line-height);
 		font-size: 1rem;
 		margin: 0;
		padding: calc((var(--square-size) - var(--line-height)) / 2);
		padding-left: calc(.75em + var(--square-size) / 2);
		padding-right: 1.5em;
 		display: inline-block;
 		@media ($min-desktop-viewport) {
	 		font-size: $fz-3;
 		}
 	}
}

//
//	CELLS
//

// Links list
%cell-links-list {
	& > li {
		position: relative;
		&::before {
			content: "";
			background: url("img/links-list-item-arrow.svg") no-repeat;
			background-position: bottom;
			background-size: 100% auto;
			margin: 0 0.5em;
			width: 1.5em;
			height: 1.1em;
			display: inline-block;
			padding-top: 1em;
			box-sizing: content-box;
			position: absolute;
			left: 0;
			z-index: 1;
		}
	}
	& > li > a,
	li div.description {
		padding-left: 2.5rem;
		p {
			margin-left: 0;
			margin-right: 0;
		}
	}
}
// foldable icon to left
div.cell.foldable > div > h2:first-child {
	display: flex;
	&::after {
		position: static;
		order: -1;
		text-align: left;
		align-self: end;
	}
}
// cell with picture (to the right of title)
.gru-content .cell.has-asset-picture {
    $image-size: 3rem;
    > div {
	    display: flex;
	    flex-wrap: wrap;
	    align-items: center;
	    > * {
		    flex: 0 0 100%;
	    }
	    > h2:first-child {
		    flex: 1 0 50%;
		    margin-right: -1 * ($image-size + 1);
		    padding-right: $image-size + 2;
	    }
	    > picture {
		    display: block;
		    // order: -1;
		    flex: 0 0 $image-size;
		    align-self: center;
		    margin-right: 1rem;
		    position: relative;
		    z-index: 1;
		    img {
			    padding: 0;
			    height: $image-size;
			    width: $image-size;
			    object-fit: contain;
		    }
	    }
    }
}

// Custom classes
.shadow-blue {
	.gru-content &.cell {
		@extend .shadow;
	}
}
.shadow-green {
	.gru-content &.cell {
		@extend .shadow;
		--shadow-color: #{$green};
	}
}

.tracking-code-input-cell {
	@extend .shadow-green;
}
// Json cell montpellier_reporting_links
// wcs image list
.reporting-categories,
.reporting-links {
	.content {
		margin-top: 0.2rem;
		@extend .fx-grid;
		--grid-gutter: 3rem;
		@media ($min-grid-desktop-viewport) {
			--nb-cols: 2;
		}
	}
	.item-with-image {
		box-sizing: border-box;
		margin-right: 0;
		margin-bottom: var(--grid-gutter);
		padding: 1.5rem Max(1.5rem, 3.5%);
		display: grid;
		grid-template-columns: 30% 1fr;
		grid-gap: 0 2rem;
		grid-template-areas:
			"picture label";
		align-items: center;
		position: relative;
		z-index: 0;
		&--label {
			justify-self: start;
			&::after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: -1;
				@extend .shadow;
			}
		}
		&--picture {
			width: 100%;
			object-position: center;
		}
		&--input {
			display: none;
		}
		// hover
		&:hover {
			cursor: pointer;
			.item-with-image--label::after {
				border: 5px solid var(--shadow-color);
			}
		}
		// active
		&--input:checked ~ .item-with-image--label::after,
		&:active .item-with-image--label::after {
			box-shadow: var(--shadow);
			border-color: var(--shadow-color);
			background-color: var(--shadow-color);
		}
	}
}
.reporting-categories .item-with-image--label,
.reporting-link--title {
		@extend .h2;
		margin-bottom: 0.3em;
		hyphens: none;
		@media ($max-mobile-viewport) {
			font-size: $fz-3;
		}
}

.reporting-categories {
	--shadow-color: #{$yellow};
	.content {
		@media ($min-grid-tablet-viewport) {
			--nb-cols: 2;
		}
		@media ($min-grid-desktop-viewport) {
			--nb-cols: 3;
		}
	}
	.item-with-image--label {
		font-size: 1rem;
	}
}

.reporting-links {
	--shadow-color: #{$green};
}
.reporting-link--description {
	margin-top: 0;
}
.reporting-link.item-with-image {
	color: inherit;
	text-decoration: none;
	padding: 1.5rem Max(1.5rem, 8%);
}

//
//	WCS
//
.form-content--sidebox {
	margin-top: 0;
}
.form-content--sidebox #side {
	@media ($max-mobile-viewport) {
		align-items: center;
	}
	@media ($min-desktop-viewport) {
		text-align: right;		
	}
}
// Steps
.wcs-steps--list {
	justify-content: center;
}
@media ($mq-max--wcs-steps-small-layout) {
	.wcs-step {
		&--marker {
			align-items: baseline;
			padding: 0.5em;
			font-size: $fz-2;
			&-nb, &-total {
				transform: none;
				font-size: 1em;
			}
			&-nb {
				font-size: 1.8em;
			}
			&::before {
				transform-origin: bottom;
				height: 1em;
				margin-right: 0.5em;
			}
		}
		&--label {
			color: $font-color !important;
		}
	}
}
@media ($mq-min--wcs-steps-horizontal-layout) {
	.wcs-steps {
		font-size: 1rem;
		&--list {
			margin-bottom: 3.5em;
		}
	}
	.wcs-step {
		position: relative;
		flex-basis: 8rem;
		&.last {
			flex-basis: auto;
		}
	}
	.wcs-step--marker {
		font-size: $fz-2;
		border: 1px solid $blue;
	}
	.wcs-step--label {
		display: block !important;
		font-weight: bold;
		text-align: center;
		font-size: $fz-xsmall;
		left: -1.85rem;
		top: calc(100% + .5em);
		width: 6.5rem;
	}
}
// wcs tracking code
.form-content--sidebox #tracking-code {
	background-color: $green;
	color: black;
	padding: 0.5rem 0.625rem;
	font-size: 1em;
	min-width: 0;
	@media ($max-mobile-viewport) {
		padding: 1em 1.5em;
		order: 0;
	}
	.tracking-code-part {
		font-size: $fz-4;
		font-weight: 500;
		h3 {
			display: inline-block;
			padding: 0;
			background-color: transparent;
			font-size: inherit;
			font-weight: inherit;
			&::after {
				content: " : "
			}
		}
		a {
			padding: 0;
			font-size: inherit;
			font-weight: inherit;
		}
	}
	&.has-discard-button {
		background-color: transparent;
		padding: 0;
	}
	.form-discard-draft {
		margin: 0;
	}

}

//
//	FORM
//
div#rub_service form {
	padding: 0;
}
label {
	display: block;
	font-weight: 600;
	margin-bottom: .5em;
}
@if ($field-on-error-style == custom) {
	.widget-with-error {
		input, textarea, select {
			border-color: $error-color;
			color: $error-color;
		}
		div.error {
			color: $error-color;
			font-weight: 500;
		}
	}
}
// widgets
.form-content--body {
	h3 {
		@extend .h2;
	}
	h4 {
		@extend .h3;
	}
	// custom comment widget
	.comment-field.categories-breadcrumb {
		color: $blue;
		text-transform: uppercase;
		font-weight: 500;
		font-size: $fz-xsmall;
		> *:last-child {
			margin-bottom: 0;
		}
		+ * {
			margin-top: 0.3rem;
		}


	}
	// test to enlarge native radio & checkbox
	input[type="checkbox"],
	input[type="radio"] {
		transform: scale(1.4);
		transform-origin: left;
	}
}
.previous-button button {
	@extend %gray-button;
}

//
//	NOTiFiCATiONS
//
.errornotice,
.warningnotice,
.successnotice, 
.infonotice {
	font-weight: 500;
	border-radius: $cell-border-radius;
}
.warningnotice {
	color: $font-color;
	a:not(.pk-button) {
		color: inherit;
	}
}

//
//	PWA NAV
//
.pwa-navigation {
	box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15); 
	div > ul {
		padding-right: calc(#{$nav-menu-side} + var(--main-margin));
		li a {
			@extend .pwa-label;
			padding-top: 52px;
			background-size: auto 33px;
		}
	} 
}

//
// FOOTER
//
#footer {
	padding-left: var(--main-margin);
	padding-right: var(--main-margin);
	%cell-links-list {
		font-size: $fz-small;
		& > li:not(:last-child) {
			border-bottom: none;
		}
		& > li > a {
			padding: 0.33em 0;
			&:hover {
				color: $cell-entry-hover-color;
				background-color: transparent;
				text-decoration: underline;
			}
		}
	}
	h2, %title {
		text-transform: none;
	}
	.menu-cell .menu--item {
		padding: 0 0.5em;
	}
}
