.site-header {
	grid-area: 1 / 2 / 2 / 3;
	@media($min-desktop-viewport) {
		padding-right: 60px;
	}
}

#top {
	display: flex;
	align-items: center;

	@media($max-mobile-viewport) {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		margin-top: $space-large;
	}
}

#logo.has-logo {
	flex-basis: 640px * $scale;
	flex-shrink: 1;
	padding-left: 0;

	@media($max-mobile-viewport) {
		order: 3;
		grid-area: 2 / 1 / 2 / 3;
	}

	a {
		width: 100%;
		height: 160px * $scale;
		background-position: center;
	}
}

.theme-collectivity-logo {
	width: 100%;
	height: auto;
	max-width: 300px * $scale;
	flex-shrink: 1;
	object-position: left;

	@media($max-mobile-viewport) {
		object-fit: contain;
		height: 55px * $scale;
	}

	&--wrapper {
		flex: 1 1 auto;

		@media($min-desktop-viewport) {
			margin: $space-large;
		}
	}
}

#toplinks {
	position: static;
	word-spacing: 1.5rem * $scale;

	@media($min-desktop-viewport) {
		flex-shrink: 0;
	}

	@media($max-mobile-viewport) {
		max-width: unset;
	}
}

.toplinks {
	&--list {
		text-align: right;
		@media($max-mobile-viewport) {
			word-spacing: 0;
		}
	}

	&--list-item {
		a {
			@extend %button;
			margin: $space-small 0;

			@media($max-mobile-viewport) {
				width: 120px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-size: 12rem / $base-font;
			}
		}
	}
}

nav.site-nav {
	grid-area: 1 / 2 / 2 / 3;
	justify-self: end;
	align-self: center;

	position: relative;
	display: flex;
	align-items: center;

	@media($max-mobile-viewport) {
		display: none;
	}
}

.gru-nav-wrapper {
	margin-top: 0;
}

div.gru-nav .gru-nav-button .icon-bar {
	border-radius: 2px;
}

.menu {
	margin-bottom: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 101;
	min-width: 20em;

	&--link {
		padding: $space-small $space-medium !important;
	}
}

div.gru-nav .gru-nav-button.toggled {
	.icon-bar {
		background: $green;
	}

	+ ul {
		border: 1px solid $gray-light;
		background: white;
	}
}

.submenu {
	&--link {
		padding: $space-small $space-medium $space-small $space-large !important;
	}
}

.menu, .submenu {
	&--link {
		display: flex;
		flex-direction: column;
		font-size: $fz-5;

		&::after {
			content: "";
			background: $green;
			height: 1px;
			width: 30%;
			display: block;
			transition: width 0.2s ease-out;
		}

		&:hover::after {
			width: 60%;
		}
	}

	&--item.selected > &--link::after {
		height: 2px;
		width: 60%;
	}

}

.pwa-navigation div > ul {
	li {
		height: 64px;
		display: grid;

		a {
			height: auto;
			padding-top: 0;
			display: grid;
			margin-bottom: 25px;
			background-size: contain;
			background-position: 50% 0;
			margin-top: $space-small;
			-webkit-tap-highlight-color: transparent;

			span {
				height: auto;
				align-self: end;
				margin-bottom: -17px;
				font-weight: bold;
				font-size: $fz-xsmall;
				white-space: nowrap;
			}
		}

		&.selected {
			background: $nav-mobile-bottom-bar-item-selected-background;
			a {
				background-color: transparent;
			}
		}

		&:hover {
			background: $nav-mobile-bottom-bar-item-hover-background;
			a {
				background-color: transparent;
			}
		}
	}
}

.theme-page-header {
	display: grid;
	height: 580px * $scale;
	grid-area: 2 / 1 / 3 / 4;

	@media($max-mobile-viewport) {
		display: none;
	}

	body.has-picture & {
		background-image: var(--page-picture);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.cell {
		grid-area: 1 / 1 / 2 / 2;
		display: grid;

		> div {
			display: grid;
		}
	}

	.carrousel-content {
		height: auto;
	}
}

.theme-conurbation-watermark {
	grid-area: 2 / 2 / 3 / 3;
	justify-self: start;
	align-self: end;
	width: 340px * $scale;
	margin-bottom: $space-large;
	z-index: 1;

	@media($max-mobile-viewport) {
		display: none;
	}
}

.theme-member-watermark {
	grid-area: 2 / 2 / 3 / 3;
	justify-self: end;
	align-self: end;
	display: flex;
	flex-direction: row;
	z-index: 1;
	background: rgba(223, 8, 53, 0.7);
	padding: $space-large;
	gap: $space-large;
	align-items: center;

	@media($max-mobile-viewport) {
		display: none;
	}

	&--label {
		color: white;
		font-size: $fz-2;
		font-weight: bold;

	}

	&--logo {
		width: 200px * $scale;
	}
}

body:not(.has-picture) .theme-page-header:empty {
	&, & ~ .theme-conurbation-watermark, & ~ .theme-member-watermark {
		display: none;
	}
}
