@import '../includes/fonts/firasans';

// Header
#header {
	#logo.has-logo {
		left: 0.4375rem;
		a {
			// logo
			min-height: 3.55rem;
			background-size: 10rem;

			// texte
			@media ($min-desktop-viewport) {
				text-indent: 11.625rem;
			}
			padding-top: 2.2rem;
			padding-bottom: 2rem;
			color: white;
		}
	}
}

// Nav
body.has-picture .site-nav::after {
	top: 0;
}
div.gru-nav-wrapper {
	ul {
		margin-top: 0;
		margin-bottom: 0;
		li {
			a {
				line-height: 3.45rem;
				text-transform: uppercase;
				font-size: $fz-menu;
				font-weight: 500;
			}
		}
	}
}

// Content
.gru-content {
	margin-top: 3.125em;
}
html {
	font-weight: 300;
	font-size: $fz-text;
	line-height: 1.384em;
}
h1, .form-content--title {
	text-transform: uppercase;
	letter-spacing: 0.045em;
	font-size: $fz-h1;
	font-weight: 500;
}
h2, .gru-content div.textcell h2:first-child {
	font-size: $fz-h2;
	font-weight: 300;
}
h3, .gru-content div.wcs-forms-of-category-cell h2:first-child {
	text-transform: uppercase;
	letter-spacing: 0.045em;
	font-size: $fz-h3;
	font-weight: 400;;
}
h4 {
	text-transform: uppercase;
	font-size: $fz-h4;
	font-weight: 300;
}
div.links-list ul > li {
	&:not(:last-child) {
		border-bottom: 1px solid $blue;
	}
	& > a:hover {
		background-color: $cloud;
	}
}

// Footer
#footer-wrapper {
	padding-top: none;
	background: url(/assets/footer:background) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	a {
		color: white;
		font-weight: 400;
		&:hover {
			color: $font-color;
			background: white;
		}
	}
	.text-cell a {
		padding: 4px 10px 4px 10px;
		text-decoration: none;
	}
}

// Extra CSS for frontoffice style
// - infos-pratiques
.gru-content .infos-pratiques {
	&.text-cell,
	&.comment-field {
		background: $grey;
		margin-bottom: 1.25em;
		border-left: 1px solid $blue;
		padding: 5px 10px;
		strong {
			font-weight: 500;
		}
		a {
			color: $cyan;
			&.lien-pdf:before {
				display: inline-block;
				font-family: fontawesome, sans-serif;
				content: "\f1c1";
				margin-right: 5px;
			}
			&.lien-web:before {
				display: inline-block;
				font-family: fontawesome, sans-serif;
				content: "\f08e";
				margin-right: 5px;
			}
		}
	}
}
div.gru-content #columns div.infos-pratiques,
div.gru-content div#rub_service div.infos-pratiques {
	margin-left: 1.25em;
	h1, h2, h3, h4 {
		background: $grey;
		border-bottom: none;
	}
	h2 {
		font-size: $fz-h2;
		font-weight: 300;
		padding-left: 0;
	}
}

// - shadow-button
.gru-content .cell.shadow-button{
	a {
		padding: 1rem;
		margin: 1rem;
		font-size: $fz-nominal;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		color: $blue;
		border: 4px solid $blue;
		box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
		transition-property: all;
		transition-duration: 0.3s;
		transition-timing-function: linear;
		transition-delay: 0s;
	}
	a:hover {
		color: $azur;
		border-color: $azur;
		box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
		transform: scale(1.05);
	}
	&.wcs-form-cell {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	&.link-list, &.link-list-cell, &.wcs-forms-of-category-cell {
		ul > li {
			border-bottom: 0;
			> a:hover {
				background-color: white;
			}
		}
		ul {
			list-style: none;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			@media ($max-mobile-viewport) {
				li {
					flex-grow: 1;
				}
			}
		}
	}
}
