@mixin menu-link{
	color: color-contrast($header-background);
	font-weight: $font-weight-normal;
	font-size: 1rem;
	padding-left: 0;
	padding-right: 0;
	opacity: .8;
	transition: .3s ease;
	&:hover{
		text-decoration: underline;
		opacity: 1;
	}
}

header{
	transition: 1s cubic-bezier(0.19, 0.89, 0.25, 1.03);
	nav.navbar{
		background: $header-background;
	}
	@include media-breakpoint-up(xl){
		nav.navbar{
			transition: 1s cubic-bezier(0.19, 0.89, 0.25, 1.03);
			top: 0;
		}
		&.down{
			nav.navbar{
				top: -140px;
			}
		}
		position: sticky;
		top: 0;
		z-index: 999;
	}
	&.header-centered{
		.header-inner{
			& > .container{
				display: grid;
				grid-template-columns: 1fr 3fr 1fr;
				@include media-breakpoint-down(xl){
					grid-template-columns: 1fr 3fr;
				}
				@include media-breakpoint-down(lg){
					grid-template-columns: 3fr 1fr;
				}
			}
			.page-menu-bar{
				order: 2 !important;
				justify-content: flex-start !important;
			}
			.navbar-brand{
				order: 1;
				justify-content: flex-start;
				@include media-breakpoint-up(xl){
					order: 2;
				}
				@include media-breakpoint-down(lg){
					z-index: 999;
				}
			}
		}
	}
	&:not(.header-centered){
		.page-menu-bar{
			order: 2 !important;
			justify-content: flex-end !important;
		}
	}
	.dropdown.pages-dropdown{
		&:hover{
			& > a{
				text-decoration: underline;
				opacity: 1 !important;
			}
		}
		.toggle{
			cursor: pointer;
		}
		&:hover{
			.dropdown-menu{
				display: block;
			}
		}
		.dropdown-menu{
			background: $header-background;
			padding: .75rem 1.5rem;
			min-width: 200px;
			left: -1.5rem;
		}
	}
	.header-inner{
		.menu-circle{
			width: 40px;
			height: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: $primary !important;
			color: color-contrast($primary) !important;
			border-radius: 100%;
			opacity: 1 !important;
			i{
				font-size: 1rem !important;
			}
			svg{
				width: 23px !important;
				*{
					fill: color-contrast($primary) !important;
				}
			}
			.icon-label{
				top: 5px;
				right: 5px;
				background: $primary !important;
				color: color-contrast($primary) !important;
				font-size: .8rem;
			}
		}
		.header-cta{
			order: 4;
			margin-left: auto;
			@if $header-background == $primary{
				background: $secondary;
				color: color-contrast($secondary);
			}@else{
				background: $primary;
				color: color-contrast($primary);
			}
			@include media-breakpoint-down(xl){
				display: none;
			}
		}
		$header-color: color-contrast($header-background);
		.icon-label{
			width: 20px;
			height: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: $header-color;
			color: color-contrast($header-color) ;
			border-radius: 100%;
			top: 0;
			right: 0;
			transform: translateY(-50%) translateX(60%);
			position: absolute;
		}
		.basket-dropdown{
			position: relative;
			color: $header-color;
			z-index: 9999999999;
			svg{
				width: 30px;
				path{
					fill: $header-color;
				}
			}
			.dropdown-toggle.nav-link{
				padding: 0;
				background: transparent;
				border: 0;
				color: $header-color;
				&:after{
					display: none;
				}
				.nav-icon{
					color: white !important;
				}
			}
			.dropdown-menu{
				position: fixed;
				top: 0;
				right: 0;
				width: 100%;
				height: 100%;
				max-width: 475px;
				border-radius: 0;
				transition: .3s ease;
				display: flex;
				flex-direction: column;
				border: 0;
				padding: 1.5rem;
				background: white;
				z-index: 999;
				@include media-breakpoint-down(lg){
					padding: 1rem;
				}
				.basket-header{
					padding-bottom: 1.5rem;
					border-bottom: 1px solid $gray-300;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.h4{
						margin-bottom: 0;
					}
					.close{
						cursor: pointer;
						i{
							font-weight: 900;
							font-size: 1.5rem;
						}
					}
				}
				.basket-mini-items-wrapper{
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					-webkit-overflow-scrolling: touch;
					overflow-x: hidden;
					overflow-y: auto;
					scrollbar-width: none;
					.basket-mini-items{
						padding-left: 0;
						margin: 0;
						list-style: none;
						flex-grow: 1;
						.product-line{
							&:not(:last-child){
								padding-bottom: 1.5rem;
								margin-bottom: 1.5rem;
								border-bottom: 1px solid $gray-300;
							}
							&:first-child{
								padding-top: 1.5rem;
							}
							&:last-child{
								padding-bottom: 1.5rem;
							}
							.product-link{
								text-decoration: unset;
								font-size: 1.25rem;
							}
							.col-9{
								display: flex;
								flex-direction: column;
								justify-content: center;
							}
							.product-description{
								strong{
									font-weight: 600;
									.product-link{
										color: black !important;
										font-size: 1rem;
									}
								}
							}
							.product-price{
								.price_incl_tax{
									font-size: .9rem;
									font-weight: 400;
								}
								.second-session-price{
									font-size: .75rem;
									color: rgba(0,0,0,.8);
									display: none;
								}
							}
						}
					}
				}
				.basket-bottom{
					border-top: 1px solid $gray-300;
					padding-top: 1.5rem;
					.basket-totals{
						margin-bottom: 1.5rem;
						p{
							margin-bottom: .25rem;
							margin-top: 0;
							font-size: 1rem;
						}
						.totals-line.total{
							p{
								&:last-child{
									font-size: 1.25rem;
								}
							}
						}
					}
					.basket-buttons{
						display: flex;
						gap: 1rem;
						@include media-breakpoint-down(lg){
							flex-direction: column;
						}
						a{
							width: 100%;
						}
					}
				}
				&.show{
				    box-shadow: 0 0 0 200vw rgba(0, 0, 0, .5);
				}
				&:not(.show){
				    box-shadow: 0 0 0 200vw rgba(0, 0, 0, 0);
					transform: translateX(100%);
				}
			}
		}
		.search-wrapper{
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			height: unset;
			z-index: 333333333;
			transition: .35s ease;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			background: $header-background;
			padding: 1rem;
			&:not(.open){
				transform: translateY(-15px);
				opacity: 0;
				pointer-events: none;
			}
			#search_form{
				width: 100%;
			}
			.search-input-wrapper{
				display: flex;
				position: relative;
				margin: 0 auto;
				max-width: 800px;
				.typeahead{
					left: 0;
					top: 100%;
					width: 100%;
					border: 0;
					li{
						&.keyboard-selected{
							a{
								background: lighten($primary, 45%)
							}
						}
					}
				}
				input{
					border: 0;
				}
				button{
					padding: .75rem 1.25rem;
					background: $primary;
					color: color-contrast($primary);
					border: 0;
					i{
						font-weight: 900;
					}
				}
			}
		}
		.search-toggler{
			text-decoration: unset !important;
			cursor: pointer;
			i{
				font-weight: 900;
			}
		}
		.header-right{
			order: 4;
			margin-left: auto;
			display: flex;
			align-items: center;
			padding-left: 3rem;
			.user-button{
				color: $header-color;
				text-decoration: unset;
				margin-right: .5rem;
				@include menu-link;
				svg{
					width: 25px;
					path{
						fill: $header-color;
					}
				}
			}
		}
		.navbar-toggler{
			border: 0;
			order: 2;
			width: 50px;
			height: 50px;
			border-radius: 100%;
			background: white;
			color: $body-bg;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 1rem;
			right: 1rem;
			margin: 0;
			z-index: 99999;
			box-shadow: 0 0 45px -15px color-contrast($body-bg);
			@include media-breakpoint-up(lg){
				display: none;
			}
			i{
				font-size: 1rem;
				color: color-contrast($body-bg);
				&:nth-child(2){
					display: none;
				}
			}
			&:not(.collapsed){
				transform: rotate(180deg);
				i:nth-child(1){
					display: none;
				}
				i:nth-child(2){
					display: block;
				}
			}
		}
		.navbar-brand{
			order: 1;
			@include media-breakpoint-up(xl){
				margin: 0;
				display: flex;
				justify-content: center;
			}
			@include media-breakpoint-down(lg){
				z-index: 999;
			}
		}
		.page-menu-bar{
			order: 3;
			margin-left: 0;
			margin-right: 0;
			justify-content: flex-end;
			.brand-wrapper{
				@include media-breakpoint-up(lg){
					display: none;
				}
				@include media-breakpoint-down(lg){
					display: flex;
					width: 100%;
					justify-content: center;
					align-items: center;
					.navbar-brand{
						margin-right: 0;
					}
				}
			}
			@include media-breakpoint-up(xl){
				justify-content: flex-start;
				order: 1;
			}
			@include media-breakpoint-down(lg){
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 9999;
				background: $body-bg;
			}
			& > ul{
				column-gap: 1.5rem;
				row-gap: .75rem;
				@include media-breakpoint-down(lg){
					min-height: 100vh;
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 0rem;
					padding-bottom: 6rem;
					padding-left: 1rem;
				}
				li.nav-item{
					a.nav-link{
						@include menu-link;
						@include media-breakpoint-down(lg){
							color: color-contrast($body-bg);
							font-size: 1.5rem;
						}
					}
				}
			}
		}
	}
}

.copyright_wrapper{
	background: $footer-bg;
	color: color-contrast($footer-bg);
}

footer{
	background: $footer-bg;
	color: color-contrast($footer-bg);
	padding-top: 5rem;
	padding-bottom: 5rem;
	hr{
		opacity: .25;
		background: linear-gradient(to right, transparent, currentColor, transparent);
	}
	.footer_column.subscriptionblock{
		min-width: 50% !important;
	}
	.social{
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		a{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 35px;
			height: 35px;
			border-radius: 100%;
			text-decoration: unset;
			border: 1px solid color-contrast($footer-bg);
			color: color-contrast($footer-bg);
			i{
				font-weight: 100;
			}
		}
	}
	.newsletter_wrapper{
		ul.errorlist li{
			color: red;
		}
		h3{
			@if $footer-bg == $primary{
				color: $secondary;
			}@else{
				color: $primary;
			}
		}
		.newsletter_inner{
			.row .row{
				margin: 0;
				& > div{
					padding: 0;
					@include media-breakpoint-down(xl){
						margin-bottom: 1rem;
					}
					@include media-breakpoint-up(xl){
						input{
							border: 0;
							padding-top: .75rem;
							padding-bottom: .75rem;
						}
						&:nth-child(1){
							input{
								border-top-right-radius: 0;
								border-bottom-right-radius: 0;
							}
						}
						&:nth-child(2){
							input{
								border-top-left-radius: 0;
								border-bottom-left-radius: 0;
							}
						}
					}
				}
			}
		}
		.btn-submit{
			@if $footer-bg == $primary{
				background: $secondary;
			}@else{
				background: $primary;
			}
		}
	}
}

.footer-corners{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: -49px;
	margin-top: 2rem;
	svg{
		width: 50px;
		*{
			fill: white;
		}
		&.right{
			transform: rotate(90deg);
		}
	}
}
