$title-backgrounds: (
	"green1": $green1,
	"green2": $green2,
	"red": $red,
	"blue1": $blue1,
	"blue2": $blue2,
	"yellow": $yellow,
	"brown": $brown
);

%cell {
	@extend %cell;
	box-shadow: 0px 6px 56px -12px rgba(12, 29, 24, 0.25);
}

div#header-wrapper {
	height: 3.5rem;
	@media ($max-mobile-viewport) {
		height: 5rem;
	}
}

div#header {
	padding-left: 0;
	background: $primary-color;
	@media ($max-mobile-viewport) {
		height: 1.5rem;
	}
}

.form-content--title {
	font-size: 41px;
	text-transform: uppercase;
	background: transparent;
}

#toplinks {
	@media ($min-desktop-viewport) {
		top: 1rem;
	}
	@media ($max-mobile-viewport) {
		right: 10px;
	}
	a {
		color: white;
		@media ($max-mobile-viewport) {
			font-size: 80%;
		}
	}
}

div.gru-nav {
	position: relative;
	> ul {
		margin-bottom: 0.5rem;
		display: flex;
		justify-content: flex-end;
		> li a {
			@media ($min-desktop-viewport) {
				padding-bottom: 1.5rem;
			}
		}
	}
	.gru-nav-button {
		left: calc(100% - #{$nav-menu-side} - 10px);
		right: 0;
		top: $nav-menu-side / 2 + 2px;
		background: white;
		border-radius: 50%;
		@media ($max-mobile-viewport) {
			+ ul {
				right: 0;
				left: auto;
				width: auto;
				transform: translateX(100%);
				padding-left: 1.5rem;
				padding-right: 1.5rem;
			}
		}
		&.toggled {
			.icon-bar {
				background: $nav-button-color;
			}
		}
	}
}

.pwa-navigation div > ul {
	> li a {
		text-transform: uppercase;
	}
}

.pwa-navigation div > ul li {
	a {
		font-weight: bold;
	}
	&.selected a, &:hover a {
		  box-shadow: 1px 1px 10px 0px #ddd inset;
	}
}


#logo.has-logo {
	width: 140px;
	height: 60px;
	padding-left: 0;
	@media ($max-mobile-viewport) {
		padding-left: 1rem;
	}
	a {
		position: absolute;
		z-index: 1;
		top: 10px;
		@media ($min-desktop-viewport) {
			height: 122px;
		}
	}
	&::before {
		content: '';
		display: block;
		height: 0;
		border-bottom: 4rem solid white;
		border-right: 4rem solid transparent;
		width: 15rem;
		@media ($max-mobile-viewport) {
			margin-left: -1rem;
			width: 10rem;
		}
	}
}

div.cell.has-asset-picture {
	h2:first-child {
		background: transparent;
	}
}

body.has-picture {
	.combo-placeholder--columns-top {
		position: absolute;
		top: -$nav-after-image-height;
		left: 0;
		height: $nav-after-image-height;
		display: flex;
		justify-content: center;
		align-items: center;
		div.cell {
			padding: 0.5rem 6rem 0.5rem 1rem;
			background-image: url('img/top-cell-bg.svg');
			background-position: 95% 75%;
			background-repeat: no-repeat;
		}
	}
	@media ($max-mobile-viewport) {
		.site-nav::after {
			height: $nav-after-image-height / 2;
		}
		.combo-placeholder--columns-top {
			top: 5rem;
			left: auto;
			height: $nav-after-image-height / 2;
		}
	}
}

#footer {
	ul {
		padding-left: 1rem;
		li {
			list-style-type: none;
		padding: 0.25rem 0;
		}
	}
	h5 {
		border-bottom: 1px solid;
	}
}
@each $name, $color in $title-backgrounds {
	div.cell.#{$name}-title {
		h2:first-child {
			background: #{$color};
		}
	}
}

/* AUTHENTIC */

.anonymous-user {
	div.block, div.a2-block {
		box-shadow: none;
	}
}

/* WCS */

div.comment-field a {
	text-decoration: underline;
}

input[type="checkbox"], input[type="radio"] {
	transform: scale(1.35);
}