@import "config/config.scss";
/* HEADER */
/* TESTATA --- TESTATA --- TESTATA --- TESTATA --- TESTATA --- TESTATA --- TESTATA --- TESTATA */
/* STILE DEL MENU DI APERTURA DEL MENU */

/*
header {
	z-index: 99999;
	top: 0;
	position: fixed;
	width: 100%;
	height: 50px;
	background-color: $color_1;
}*/

/* LOGO */
#logo_sito {
	display: block;
	position: absolute;
	right: -96px;
	margin-right: 2%;
	height: auto;
	padding-bottom: 33.5%;
	width: 200px;
	overflow: visible;
	vertical-align: middle; 
	z-index: 99;

	svg { 
		overflow: visible;
		display: inline-block;
		position: absolute;
	    height: 100%;
	    width: 100%;
	    top: 0;
	    left: 0;
	}
	svg:not(:root) { overflow: visible; overflow-x:visible; overflow-y:visible;  }


	@media screen and (min-width:470px) and (max-width:767px) {

		right:40px;

	}

	@include mq($from: tablet) {

		right: -260px;
		width: 358px;
		height: 120px;
		padding: 0;
		left: 86%;
		top: 2px;
	}

	@include mq($from: 1140px) {
		left: 78%;
		width: 418px;
		height: 140px;
	}

}


header.attivo #logo_sito {
	@include mq($from:tablet){
		width: 200px;
		height: 67px;
		top:5px;
	}
}


/* SELETTORI LINGUA */
.wk_language_switcher_container {
	position: relative;
	width: 40px;
	height: 40px;
	& > ul {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
		width: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.wk_language_switcher {
	list-style-type: none;
	display: flex;
	flex-direction: column;
    justify-content: flex-end;
	padding: 0;
	& > li > a {
		display: none;
		padding: 10px;
		font-family: "Raleway", 'Raleway', Sans-serif;
		font-size: 16px;
		font-weight: 800;
		text-transform: uppercase;
		text-align: center;
	}
	& > li > a.active {
		display: inline-block;
		position: relative;
		pointer-events: none;
	}
	&:hover > li > a {
		display: inline-block;
		@include mq($from:tablet){
			font-size: 14px;
		}
	}
}
.wk_language_switcher {
	a {
		color: #000;
	}
}
body.home .elementor-sticky--effects .wk_language_switcher {
	a {
		color: #000;
	}
}
body.home .wk_language_switcher {
	background-color: transparent;
	a {
		color: #fff;
	}
}
body.wk_nav_open .elementor-sticky--effects .wk_language_switcher {
	background-color: transparent;
	@include transition;
	a {
		color: #fff!important;
	}
}
body.wk_nav_open .wk_language_switcher {
	background-color: transparent!important;
	@include transition;
	a {
		color: #fff;
	}
}

body.wk_nav_open .elementor-sticky__spacer {
    display: none;
}

// #elementor-lightbox-slideshow-all-7789a31 {
// 	z-index: 10000!important;
// }

.elementor-sticky--active {
	z-index: 10000!important;
}

.dialog-widget.dialog-lightbox-widget.dialog-type-buttons.dialog-type-lightbox.elementor-lightbox {
	z-index: 10000 !important;
}

#logo_meroni * {
	fill: #000;
}

body.home #logo_meroni * {
	fill: #fff;
}

body.single-prodotto #logo_meroni * {
	fill: #000;
}

.elementor-element.elementor-element-6b86b541.elementor-sticky--effects #elefante {
	fill: #000;
}

/*
** Header a codice
*/
    /*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
    
 .hamburger {
	padding: 15px 0 15px 15px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible; 
  z-index:9999;}
	.hamburger:hover {
	  opacity: 0.7; }
	.hamburger.is-active:hover {
	  opacity: 0.7; }
	.hamburger.is-active .hamburger-inner,
	.hamburger.is-active .hamburger-inner::before,
	.hamburger.is-active .hamburger-inner::after {
	  background-color: #000; }
  
  .hamburger:hover, .hamburger:focus{
	  background: unset;
	  outline: unset;
	}
	  
  .hamburger-box {
	width: 30px;
	height: 24px;
	display: inline-block;
	position: relative;
	margin-top: 10px;
  }
  
  .hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; }
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	  width: 30px;
	  height: 2px;
	  background-color: #000;
	  border-radius: 4px;
	  position: absolute;
	  transition-property: transform;
	  transition-duration: 0.15s;
	  transition-timing-function: ease; }
	.hamburger-inner::before, .hamburger-inner::after {
	  content: "";
	  display: block; }
	.hamburger-inner::before {
	  top: -10px; }
	.hamburger-inner::after {
	  bottom: -10px; }
  /*
	 * Spring
	 */
  .hamburger--spring .hamburger-inner {
	top: 2px;
	transition: background-color 0s 0.13s linear; }
	.hamburger--spring .hamburger-inner::before {
	  top: 10px;
	  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	.hamburger--spring .hamburger-inner::after {
	  top: 20px;
	  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  
  .hamburger--spring.is-active .hamburger-inner {
	transition-delay: 0.22s;
	background-color: transparent !important; }
	.hamburger--spring.is-active .hamburger-inner::before {
	  top: 0;
	  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
	  transform: translate3d(0, 10px, 0) rotate(45deg); }
	.hamburger--spring.is-active .hamburger-inner::after {
	  top: 0;
	  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
	  transform: translate3d(0, 10px, 0) rotate(-45deg); }
  
  /*
	 * Spring Reverse
	 */
  .hamburger--spring-r .hamburger-inner {
	top: auto;
	bottom: 0;
	transition-duration: 0.13s;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	.hamburger--spring-r .hamburger-inner::after {
	  top: -20px;
	  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
	.hamburger--spring-r .hamburger-inner::before {
	  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  
  .hamburger--spring-r.is-active .hamburger-inner {
	transform: translate3d(0, -10px, 0) rotate(-45deg);
	transition-delay: 0.22s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	.hamburger--spring-r.is-active .hamburger-inner::after {
	  top: 0;
	  opacity: 0;
	  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
	.hamburger--spring-r.is-active .hamburger-inner::before {
	  top: 0;
	  transform: rotate(90deg);
	  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
	  
	  
@media only screen and (max-width: 768px) {
	.hamburger {
		padding: 5px 0 0px 5px;
	}
}






.header-sito {
	position: relative;
	z-index: 9999;

	.wk-logo {
		display: flex;
		align-items: center;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	.header-wrapper {
		display: flex;
		justify-content: space-between;
		padding: 15px 5% 5px;
		@include transition;

		@include mq($to: tablet) {
			padding: 5px 5%;
		}

		#logo_meroni {
			width: 150px;
			max-width: 100%;

			@include mq($to: tablet) {
				width: 100px;
			}
		}

		.wk-header-col {
			display: flex;
			align-items: center;
		}

		.menu-menu-header-container {
			a {
				font-family: "Raleway", 'Raleway', Sans-serif;
				font-size: 16px;
				font-weight: 800;
				text-transform: uppercase;
				color: $nero;
			}
		}

	}

	.burger-menu-wrapper {
		background-color: #2C363A;
		height: 100vh;
		max-height: 100dvh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;

		@include mq($to: tablet) {
			display: block;
		}

		a {
			color: $bianco;
		}
	}

	.burger-menu-wrapper > div {
		width: 100%;
		padding: 5%;

		@include mq($to: tablet) {
			padding: 60px 5%;
		}
	}

	.wk_language_switcher {
		@include transition;

		&:hover {
			background-color: $bianco;
		}
	}

	.burger-menu-wrapper {
		transform: translateY(-110vh);
		transition: all 600ms cubic-bezier(0.760, 0.135, 0.370, 0.830);
		transition-timing-function: cubic-bezier(0.760, 0.135, 0.370, 0.830);
		overflow: auto;
	}

	ul.menu {
		display: flex;
		width: 100%;
		justify-content: space-between;
		max-width: 1200px;
		padding: 0;
		margin: auto;

		& > li {
			width: 33.333%;
		}

		@include mq($to: tablet) {
			flex-direction: column;
		}

		a {
			font-size: 26px;

			@include mq($to: tablet) {
				font-size: 18px;
			}
		}

		.prodotti-per a {
			font-size: 14px;
			text-transform: uppercase;
			font-weight: 400;

			@include mq($to: tablet) {
				font-size: 10px;
			}
		}

		.wk-hide-menu-item {
			& > a {
				display: none;
			}
		}

		li {
			margin: 15px 0;
		}

		& > li:nth-child(2) {
			text-align: center;

			@include mq($to: tablet) {
				text-align: left;
				font-size: 26px;
				order: -1;
			}

			a {
				text-transform: uppercase;
				font-size: 35px;

				@include mq($to: tablet) {
					font-size: 26px;
				}
			}
		}

		& > li:nth-child(3) {
			text-align: right;

			@include mq($to: tablet) {
				text-align: left;
			}
		}
	}

	#logo,
	#payoff {
		opacity: 1;
	}

	#logo,
	#payoff,
	#elefante {
		@include transition;
	}

}

// Menù aperto
body.wk_nav_open {
	height: 100vh;
	max-height: 100dvh;
	overflow: hidden;

	.header-sito {
		.burger-menu-wrapper {
			transform: translateY(0);
		}
	
		.wk-logo {
			position: relative;
			z-index: 9999;
			filter: invert(1);
		}
	
		.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
			background-color: $bianco;
		}
	}

	#logo,
	#payoff {
		opacity: 0;
	}

	#elefante {
		opacity: 1;
		visibility: visible;
	}

}

/*
** Header trasparente homepage
*/
body.home:not(.wk-fixed-header) {

	.header-sito {
		.wk-logo {
			filter: none;
		}
	}

	.menu-menu-header-container {

		& > ul.menu {
			filter: invert(1);
		}
	}

	#logo_meroni * {
		fill: $bianco;
	}

	.wk_language_switcher {
		background-color: transparent;
	
		&:hover {
			background-color: transparent;
		}

		a {
			color: $bianco;
		}

		li {
			background-color: transparent;
		}
	}

	.hamburger-inner {
		background-color: $bianco;

		&::before,
		&::after {
			background-color: $bianco;
		}
	}

}

/*
** Header fixed
*/
body {

	padding-top: 70px;

	.header-sito {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
	}

	&.wk-fixed-header .header-sito {
		background-color: $bianco;

		.header-wrapper {
			padding: 0 5%;
		}

		.st1 {
			opacity: 1;
			visibility: visible;
		}

		#payoff,
		#logo {
			opacity: 0;
		}

		#logo_meroni * {
			fill: $nero;
		}
	}

	&.admin-bar {
		padding-top: 100px;

		.header-sito {
			padding-top: 32px;

			@include mq($to: 782px) {
				padding-top: 46px;
			}
		}
		
		&.wk-fixed-header {
			padding-top: 132px;

			@include mq($to: 782px) {
				padding-top: 146px;
			}
		}
	}

}

body.home {
	.wk_language_switcher {
		background-color: transparent;
	
		&:hover {
			background-color: $bianco;
		}

		a {
			color: $nero;
		}

		li {
			background-color: transparent;
		}
	}

	&.wk_nav_open {

		background-color: transparent;

		a {
			color: $bianco;
		}
	}
}