//
//	TYPO
//
h1 {
	font-size: $fz-h1;
	text-transform: uppercase;
	color: $orange;
}
h2 {
	font-size: $fz-h2;
	text-transform: uppercase;
}
h3 {
	font-size: $fz-h3;
	text-transform: uppercase;
}
p {
	line-height: 1.35;
}

//
//	COMPONENTS
//

%title {
	text-align: center;
	line-height: 1.2;
}

%button {
	text-transform: uppercase;
	font-size: $fz-small;
	font-weight: bold;
	background-size: 100%;
	transition: 400ms background-size;
	&, &:hover {
		background-image: gradient-ro(90deg);
	}
	&:hover {
		background-size: 200%;
	}
}

%cancel-button {
	&, &:hover {
		background-image: none;
		background-color: $beige;
		color: $orange;
		border-color: currentColor;
	}
}

//
// HEADER
//
#top {
	display: flex;
	flex-direction: column;
	padding: 1rem 0;
	@media (max-width: $very-small-limit) {
		font-size: $fz-small;
	}

	@media ($min-desktop-viewport) {
		flex-direction: row;
		align-items: center;
	}

}
// Logo
#logo.has-logo {
	line-height: 1.5;
	flex-grow: 1;
	font-size: 1em;
	@media ($min-desktop-viewport) {
		font-size: $fz-h3;
	}
	a {
		padding: 1em 0;
		padding-left: 6.5em;
		text-indent: 0;
		background-size: 5em 100%;
		display: block;
		text-transform: uppercase;
		color: $font-color;
		.site-header--community {
			display: block;
			font-size: $fz-small;
			font-weight: 400;
		}
	}
}
// user links
#toplinks {
	position: static;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	border: none;
	max-width: none;
	word-spacing: 0.5rem;
	@media ($max-mobile-viewport) {
		order: -1;
		margin-bottom: 1rem;
	}
	.login {
		a {
			@extend .pk-button;
		}
	}
	.logged-in {
		@extend %button;
		a {
			color: inherit;
		}
		.connected-user {
			padding-right: .66em;
			border-right: 2px solid;
			@media ($min-desktop-viewport) {
				&::before {
					content: "bienvenue ";
					font-weight: normal;
				}
			}

		}
	}
}

//
//	NAV
//
body.hide-navigation .site-nav {
	display: none;
}
.nav-btn {
	display: inline-block;
	line-height: 1;
	font-size: 1rem;
	padding: 0.75em 2em;
	margin: 0;
	margin-bottom: .33em;
	border-radius: $border-radius !important;
}
#nav {
	@media ($min-desktop-viewport) {
		text-align: right;
		> ul {
			display: inline;
		}
	}
}
.nav--title {
	@extend .nav-btn;
	text-transform: uppercase;
	background-color: hsla(0, 0%, 100%, 0.9);
	color: $font-color;
	vertical-align: top;
}
div.gru-nav ul {
	margin: 0;
	li {
		@media ($max-mobile-viewport) {
			display: block;
		}
		@media ($min-desktop-viewport) {
			text-align: center;
			margin-left: .33em;
			width: 16em;
		}
		a {
			@extend .nav-btn;
			display: block;
			font-weight: 400;
			background-color: adjust-color($nav-item-selected-background, $alpha:-0.3);
		}
		&.selected a, a:hover {
			font-weight: bold;
			text-decoration: underline;
		}
	}
	//subnav
	ul {
		display: none !important;
	}
}
// nav over page image
@media ($min-desktop-viewport) {
	body.has-picture {
		#nav-wrapper {
			position: relative;
			height: 0;
			z-index: 1000;
		}
		#nav {
			padding-top: 1rem;
			padding-right: 1rem;
		}
	}
}

//	
//	MAIN
//
#content {
	margin-top: 2.5rem;
}

.community-header--default {
	background-image: var(--page-picture);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 32em;
	display: flex;
	overflow: hidden;

	body:not(.has-picture) & {
		display: none;
	}
}
.community-header--logo {
	filter: contrast(0%) brightness(2);
	display: block;
	margin: auto;
	margin-left: 1rem;
	max-width: 40%;
	max-height: 12em;
	height: auto;
}
// hide community-header--default if cell in hero placeholder
* + .community-header--default {
	display: none;
}


.top-column {
	div.cell {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: $columns-gutter;
	}
}

//
//	CELLS
//

// Custom styles
.centered-cell {
	.gru-content &.cell {
		text-align: center;
		h2:first-child {
			background-color: transparent;
			border-bottom: none;
		}
		form {
			text-align: left;
		}
	}
}
.centered-orange-cell {
	@extend .centered-cell;
	.gru-content &.cell {
		color: white;
		background: gradient-ro(150deg);
		background-size: 200%;
		border: none;
		h2:first-child {
			color: inherit;
		}
		form {
			input, select {
				color: black;
				background-color: transparent;
				border-color: currentColor;
				filter: invert(100%);
			}
		} 
	}
}
.list-of-forms-cell {
	$image-width: 2.5rem;
	.gru-content &.cell {
		h2:first-child {
			font-weight: 600;
			font-size: 1rem;
			text-align: left;
			padding-left: $image-width + 2;
			color: $font-color;
		}

		&.foldable {
			& > div > h2:first-child {
				padding-right: 3rem;
				&::after {
					color: $red;
					font-size: $fz-h2;
					line-height: 0.75;
				}
			}
			&.folded {
				h2:first-child {
					background-color: white;
					border-bottom: none;
				}
			}
		}

		// 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: -1 * ($image-width + 1);

				}

				> picture {
					display: block;
					order: -1;
					flex: 0 0 $image-width;
					align-self: center;
					margin-left: 1rem;
					position: relative;
					z-index: 1;

					img {
						padding: 0;
					}
				}
			}
		}
		//links-list
		div.links-list ul {
			& > li {
				> a {
					padding-left: $image-width + 2;
				}
				&.required-authentication a::after {
					content: "\f023"; // lock icon
					top: 0;
					bottom: 0;
					left: 1rem;
					right: auto;
					margin: auto;
					width: $image-width;
					height: 1.5rem;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				// Gray logo keyword options
				$logo-width: 5rem;
				@each $name, $file in $logos-demarche {
					&[class*="keyword-"][class*="-#{$name}"] a {
						padding-right: $logo-width + 1;
						&::before {
							content: "";
							display: block;
							background: url(/assets/logo:#{$file}) no-repeat right center;
							background-size: contain;
							height: 2.5rem;
							width: $logo-width;
							position: absolute;
							top: 0;
							bottom: 0;
							right: 1rem;
							left: auto;
							margin: auto;
							filter: grayscale(100%);
						}
					}
				}	
			}
		}
	}
}
//	Slug 'btn-with-icon'
// 	optionnal class 'orange' or 'beige'
.btn-with-icon {
	.gru-content &.cell {
		border: none;

		&, &.orange {
			background-color: $orange;
			color: white;
		}
		&.beige {
			background-color: $beige;
			color: $orange;
		}
	}
	&--link {
		display: flex;
		justify-content: center;
		align-items: center;
		text-transform: uppercase;
		font-weight: 700;
		color: inherit;
		padding: 0 1.5em;
		&, &:hover {
			background-color: inherit;
		}
	}
	&--icon {
		display: block;
		flex: 0 0 2em;
		height: 3em;
		margin-right: .66em;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		transform: translateY(-0.2em);
	}
	&--label {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
}

.gru-content {
	// all cells
	div.cell {
		overflow: hidden;
		.cell--body,
		& h2 + div {
			p:first-child {
				margin-top: 0;
			}
		}
	}

	.tracking-code-input-cell {
		form {
			display: flex;
			button {
				margin-right: 0;
				margin-left: 1.5em;
				flex: 0 1 auto;
			}
		}
	}

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

	.text-cell p {
		line-height: 1.35;
	}


	.text-cell:not(.centered-orange-cell) {
		@extend .pk-transparent;
	}

	div.wcs-current-forms-cell,
	div.wcs-current-drafts-cell {
		@extend .pk-transparent;
		h2:first-child {
			font-size: $fz-h3 !important;
			border-bottom: none;
			border-radius: $border-radius !important;
			background-color: $green-light;
		}
	}
	div.wcs-current-drafts-cell {
		h2:first-child {
			background-color: $gray;
		}
	}

	#sidebar div.searchcell form {
		text-align: right;
	}
}

div.carrousel-content input + div div.carrousel-item {
	padding-left: calc(6rem + 0.7rem);
}

//
//	WCS
//

.wcs-page #columns-wrapper {
	border: $cell-border;
	border-radius: $cell-border-radius;
	padding: 1rem;
	margin: auto;
	max-width: 62.5rem;
	width: 100%;
}

div#tracking-code {
	h3 {
		background: none;
		border-bottom: none;
		padding-bottom: 0;
		color: $font-color;
	}
	a {
		font-size: 1rem;
	}
}

.form-content {
	display: flex;
	flex-direction: column;
	.form-content--title {
		background-color: transparent;
		border-bottom: none;
		text-align: left;
		font-size: $fz-h2;
		padding-left: 0.5rem;
		color: $font-color;
	}
	.form-content--sidebox {
		order: -1;
	}
}

div#rub_service {
	h2 {
		background-color: transparent;
		border-bottom: none;
		text-align: left;
		font-size: $fz-h2;
		padding-left: 0.5rem;
	}
}

div.buttons .cancel-button button {
	@extend %cancel-button;
}

// Steps
@media ($mq-min--wcs-steps-horizontal-layout) {
	.wcs-steps {
		font-size: 1rem;
	}
	.wcs-step {
		position: relative;
		flex-basis: 6rem;
		&.last {
			flex-basis: auto;
		}
	}
	.wcs-step--marker {
		font-size: $fz-h3;
	}
	.wcs-step--label {
		display: block !important;
		font-size: $fz-xsmall;
		left: -1.6rem;
		top: calc(100% + .5em);
		width: 6rem;
	}
}

// buttons order on mobile
@if $buttons-order or $buttons-alignment {
	.quixote:not(#wf-actions) div.buttons {
		@media (max-width: $very-small-limit) {
			.submit-button {
				order: 1;
				flex-basis: 100%;
			}
			.previous-button {
				order: 2;
			}
			.cancel-button {
				order: 3;
			}
		}
	}
}

//
//	AUTHENTIC
//

.authentic-page {
	// submit button in right
	form .buttons {
		display: flex;
		.submit-button {
			order: 1;
		}
	}
}


//
//	FOOTER
//

#footer-wrapper {
	border-bottom: 1.5em solid red;
	border-image-slice: 1;
	border-image-source: gradient-ro(-90deg);
}
#footer {
	font-size: $fz-small;
	font-weight: 500;

	@media (max-width: $very-small-limit) {
		text-align: center;
	}

	a {
		text-align: inherit;
		font-weight: inherit;

		color: $font-color;
		padding-top: 0;
		padding-bottom: 0;
		display: block;
		&:hover {
			text-decoration: underline;
		}
	}

	.links-list ul {
		& > li {
			border-bottom: none;
		}
	}	
}

.back-top {
	clear: both;
}
.back-top--link {
	&:before {
		color: $red
	}
}


// 
//	Neutral templates
//

.page-template-sidebar-neutral,
.page-template-neutral {
	.site-header--community {
		display: none !important;
	}
}

//
//	PWA navigation
//

.pwa-navigation div > ul li {
	a {
		background-size: auto 33%;
		background-position: center 25%;
		font-weight: 600;

		span {
			display: flex;
			align-items: center;
			justify-content: center;
			text-transform: uppercase;
		}
	}
	&.selected a, a:hover {
		filter: brightness(0.3);
	}
}