/* --------------------------
 *
 * Fixed menu
 *
** ----------------------- */
	
	.fixed-menu {												
		position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 100; display: none; padding: 4px 20px; line-height: 42px; height: 50px; overflow: hidden;
		
		.fixed-logo img 											{ max-width: 170px; max-height: 100%; display: inline; }
		.open-mobile-nav 											{ float:right; margin: 0; }
		.open-mobile-nav:after 										{ background: transparent; color: $primary-color; }
	}

	@include media-from(l){ 
		 .fixed-menu 												{ display: none !important; }
	}

/* --------------------------
 *
 * Mobilenav OVERRIDE tyylit
 *
** ----------------------- */

	.mobilenav-search-form											{ float: left;
		.search-form 												{ border: 0px;
			.search-field 											{ color: #444444 !important;}
			button[type="submit"] 									{background-color: #e5e5e5 !important; color: #444444 !important;}
		}
	}
	#mobilenav-top-container .clear									{ float: right; }



	.open-mobile-nav 												{ display: block; /*position: fixed;*/ top:0; right:0;z-index: 2; margin-left: auto; float:right; background-color: $primary-color; padding: 1em; margin-top: 22px;}
	.open-mobile-nav:focus 											{ opacity: .8; }
	.open-mobile-nav span.button-text								{font-size: 16px; text-transform: uppercase; font-weight: 500; line-height: 0.9; margin-top: 2px; color: #fff; }

	@include media-from(m){
		.open-mobile-nav 											{display: inline-block; margin-left: 1em; margin-top: 40px; height: 48px;}
	}

	.logged-in.admin-bar .open-mobile-nav 							{ top:46px; }

	span.mobile-nav-button-html 									{ position: relative; width: 1.2em; height: 1em; display: block; float:right; font-size: 16px; }
	span.mobile-nav-button-html span.mobilenav-button-lines 		{ width: 100%; height: 3px; background-color: #fff; position: absolute; display: block; overflow: hidden; @include border-radius(1px); }
	span.mobile-nav-button-html span.mobilenav-button-lines.top 	{ top:0; }
	span.mobile-nav-button-html span.mobilenav-button-lines.middle 	{ top: 50%; margin-top: -2px; }
	span.mobile-nav-button-html span.mobilenav-button-lines.bottom 	{ bottom:1px; }

	.open-mobile-nav span.button-text								{ display: block; float:left; margin-right: 10px; }

	#mobilenav .symbol 												{ font-size: 1em; }

	#mobilenav .symbol span.line-vertical							{ background-color: #000; }
	#mobilenav .symbol span.line-horizontal							{ background-color: #000; }

	#mobilenav .open > .open-submenu .symbol span.line-horizontal	{ background-color: #000; }

	$override_bg_color: #e7e7e7;
	$override_top_bg_color: #ffffff;
	$override_menu_bg_color: #ffffff;

	$override_link_color: #000000;
	$override_link_active_color: $primary-color;

	$override_submenu_bg_color: #dbdbdb;
	$override_submenu_link_color: #000;

	$override_sub_submenu_bg_color: #e7e7e7;
	$override_sub_submenu_link_color: #000;


	#mobilenav-top-container .site-logo								{ float:left; display: block; max-width: 230px; height: 49px; }
	#mobilenav-top-container .site-logo a							{ width: 100%; height: 100%; line-height: 49px; display: inline-block; }
	#mobilenav-top-container .site-logo img							{ max-width: 100%; max-height: 49px; display: inline-block; }

	#mobilenav-mid-container 										{ padding: 0; background-color: $primary-color; color: #fff; font-size: 16px; }
	#mobilenav-mid-container .contact p								{ margin-bottom: 0; }
	#mobilenav-mid-container  a										{ color: $primary-color; }

	#mobilenav .mobilenav-bg 										{ background-color: $override_bg_color; }

	#mobilenav #mobilenav-top-container 							{ padding: 10px 15px; background-color: $primary-color; }
	#mobilenav #mobilenav-top-container .mobilenav-close 			{ font-size: 24px; background-color: #ffffff; margin-top: 5px; }
	#mobilenav #mobilenav-top-container .mobilenav-close .symbol-cancel * { background-color: #333333; } 

	#mobilenav .symbol-cancel span.line-vertical 					{width: 3px; left: 45%;}
	#mobilenav .symbol-cancel span.line-horizontal 					{height: 3px; top: 45%;}



	#mobilenav .mobilenav-inner {
		& 															{ padding:0; background-color: $override_menu_bg_color; }

		li  														{ border-color: darken($override_submenu_bg_color, 5%); border-bottom: 1px solid transparentize(#000, .90); }
		li:last-child  												{ border-bottom: 0; }
		li a:focus 													{ background-color: transparentize(#000,.9) !important; }
		li a 														{ color: $override_link_color; background-color: transparent; }
		li[class*="current"] > a 									{ color: $override_link_active_color !important; }

		li.menu-item-has-children > span.open-submenu 				{ background-color: $override_submenu_bg_color; }
		li.menu-item-has-children > ul.sub-menu 					{ background-color: $override_submenu_bg_color; }

		li.menu-item-has-children > ul.sub-menu li > a				{ color: $override_submenu_link_color; }

		li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > span.open-submenu 	{ background-color: $override_sub_submenu_bg_color; }
		li.menu-item-has-children > ul.sub-menu ul.sub-menu										{ background-color: $override_sub_submenu_bg_color; }
		li.menu-item-has-children > ul.sub-menu ul.sub-menu	li > a								{ color: $override_sub_submenu_link_color; }

			li.menu-item-has-children > ul.sub-menu ul.sub-menu ul.sub-menu 					{ background-color: lighten($override_sub_submenu_bg_color, 3%); }
			li.menu-item-has-children > ul.sub-menu ul.sub-menu span.open-submenu 				{ background-color: lighten($override_sub_submenu_bg_color, 3%); }
			li.menu-item-has-children > ul.sub-menu ul.sub-menu ul.sub-menu	li > a:before		{ display: inline-block; content:'-'; margin-right: 8px; }

				li.menu-item-has-children > ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu 					{ background-color: lighten($override_sub_submenu_bg_color, 6%); }
				li.menu-item-has-children > ul.sub-menu ul.sub-menu ul.sub-menu span.open-submenu 				{ background-color: lighten($override_sub_submenu_bg_color, 6%); }
				li.menu-item-has-children > ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu	li > a:before		{ display: inline-block; content:'-'; margin-right: 8px; }
	}

	#mobilenav-additional 											{ padding: 30px 20px 20px 20px;

		 .site-search .search-form									{ 
		 	.search-field											{ padding-top: 12px; }
		 	button[type="submit"] 									{ background-color: #fff !important; color: #444444 !important; padding-top: 12px!important; }
		 }
	}

/* --------------------------
 *
 * Main navigation
 *
** ----------------------- */

	.mainnav-somelinks {
		display: inline-block;
		float: right;
		height: 93px;
		line-height: 93px;
		margin: 0 0 0 20px;

		a {
			font-size: 1.2em;
		}
	}

	/* Main nav */
	nav#main 														{ float: right;
		& 															{  }
		ul.sub-menu 												{ display: none; }
		&.dropdown 													{ 
			& 														{ position: relative; z-index: 5; }
			li.menu-item-has-children 								{ 
				& 													{ position: relative; }
				& > a:after 										{ content: '\f078'; font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; height:1em; margin-left: .5em; font-size: .8em; }
				ul.sub-menu 										{ position: absolute; top:100%; min-width: 300px; left:0; background-color: #fff; z-index: 10; border-bottom: 5px solid $primary-color; }
				&:hover>ul.sub-menu 								{ z-index: 11; opacity: 1; }
				&:hover ul.sub-menu li:hover ul.sub-menu			{ z-index: 12; }
				ul.sub-menu li.menu-item-has-children > a 			{ padding-right: 2em; }
				ul.sub-menu li.menu-item-has-children > a:after 	{ content: '\f054'; font-family: "Font Awesome 6 Pro"; position: absolute; right:.5em; top:calc(50% - .5em); color: inherit; }
				ul.sub-menu li 										{ display: block; margin: 0 0 0 0; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; }
				ul.sub-menu li a									{ display: block; padding: .6em 1.3em; color: inherit; }
				ul.sub-menu li[class*="current"] > a				{ color: $primary-color; }
				ul.sub-menu li:hover								{ background-color: rgba(0,0,0,.05); opacity: 1; }
				ul.sub-menu li a:hover								{ background-color: rgba(0,0,0,.05); opacity: 1; }
				ul.sub-menu ul.sub-menu 							{ top:0; left:100%; margin-top: -1px; border-top: 1px solid #d9d9d9; }
			}
		 }
		ul.menu  													{ 
			& > li 													{ display: inline-block; margin: 16px 14px 0 0; }
			& > li:last-child 										{ margin: 16px 0 0 0;}
			& > li > a												{ font-weight: 300; color: $default-text-color; padding: 1.5em 0 32px 0; border-bottom:5px solid #ffffff; display: inline-block; font-size: em(16,$desktop_fsz); line-height: 1; }
			& > li > a:hover {
				border-bottom: 5px solid $primary-color;
			}
			& > li[class*="current"] > a							{ font-weight: 700; color: #272727; }
		}
	}

/* --------------------------
 *
 * Subpage navigation
 *
** ----------------------- */

	#sidebar 													{
		.sub-navigation {
			#subnav 												{ padding: 0;  }
			ul 														{ list-style: none; padding: 0; margin: 0; }

			li 														{ padding: 0; margin: 0; }

			li a 													{ font-family: $secondary-font; font-weight: 500; color: $default-text-color; display: block; padding: 0; font-size: 1em; margin-left: 1.2em; }


			/* menu toggle */
			ul.menu li.level-0.menu-item-has-children						{ position: relative; }
			ul.menu li.level-0.menu-item-has-children>a						{ padding-right: 2.5em; }
			ul.menu li.level-0.menu-item-has-children>span.open-submenu		{ position: absolute; cursor:pointer; right:0; top:1px; z-index: 1; width: 2.5em; padding:8px 0 7px 0; line-height:1.3em; }
			ul.menu li.level-0.menu-item-has-children>span.open-submenu:before	{ text-align: center; vertical-align: middle; content: "\e808"; font-family: "skeletor-fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 100%; height:100%; font-size: 1.2em; margin-left: 0; color: #fff; }
			/*ul.menu li.level-0.menu-item-has-children[class*="current"]>span.open-submenu:before { content:'\e809'; }*/
			ul.menu li.level-0.menu-item-has-children.open>span.open-submenu:before	{ content:'\e809'; }
			/* no-js korjaus */
			.no-js ul.menu li.level-0[class*="current"] > ul.sub-menu			{ display: block; }
			.no-js ul.menu li.level-0.menu-item-has-children > span.open-submenu { display: none; }

			/* Alatasojen aktiiviset värit */
			ul li[class*="current"]>a								{ color: $primary-color; }
			ul.sub-menu li[class*="current"]>a						{ color: #000; font-weight: 700; }
			ul.sub-menu ul.sub-menu li[class*="current"]>a			{ color: $primary-color; }

			/* Piilota ei-aktiiviset alatasot */
			ul.sub-menu												{ display: none; padding: 25px 0 25px 20px; background-color: #fff; }
			ul.sub-menu ul.sub-menu									{ padding: 10px 0 10px 10px; }
			ul li[class*="current"]>.sub-menu						{ display: block; }
			ul.menu li.level-0[class*="current"] > ul.sub-menu ul.sub-menu { display: block; }

			/* eka taso */
			li.level-0									 			{ margin-bottom: 6px; }
			li.level-0 > a									 		{ margin-left: 0; background-color: $primary-color; padding: 7px 15px; color: #fff; font-weight: 600; font-size: 1.1em; }
			li.level-0[class*="open"] > a							{ background-color: $secondary-color; color: #fff; }
			li.level-0[class*="current"] > a						{ background-color: $secondary-color; color: #fff; }

			/* Alatasojen sisennykset */
			ul.menu-level-1, ul.menu-level-2, ul.menu-level-3,
			ul.menu-level-4, ul.menu-level-5 						{ margin: 0; }

			/* alatasojen fonttikoot */
			ul.sub-menu li>a										{ padding: 0; margin-bottom: 0; font-size: .85em; }
			ul.sub-menu.menu-level-1>li>a							{ font-size: .9em; }

			/* Alatasojen ikonit */
			li a:before 											{ text-align: center; vertical-align: middle; content: "\f006"; font-family: "skeletor-fontello"; font-style: normal; font-weight: normal; speak: none; display:inline-block; width: 1em; height:1em; margin-left: -1.1em; line-height: 1; font-size: .8em; color: inherit; }
			li.level-0>a:before 									{ display: none; }
			li.level-1>a:before 									{ content: "\f006"; }
			li.level-2>a:before 									{ content: "-"; }
			li.level-3>a:before 									{ content: "-"; }
			li.level-4>a:before 									{ display: none; }
			li.level-5>a:before 									{ display: none; }

		}

		.widget_product_categories {

			ul 														{ list-style: none; padding: 0; margin: 0; }
			ul.product-categories 									{ padding: 0; }

			/* menu toggle */
			ul.product-categories li.cat-parent						{ position: relative; }
			ul.product-categories li.cat-parent>a					{ padding-right: 2em; }
			ul.product-categories li.cat-parent>span.open-submenu	{ position: absolute; cursor:pointer; right:0; top:1px; z-index: 1; width: 2em; padding:2px 0; line-height:1em; }
			ul.product-categories li.cat-parent>span.open-submenu:before { text-align: center; vertical-align: middle; content: "\e808"; font-family: "skeletor-fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 100%; height:100%; font-size: 1em; margin-left: 0; color: $primary-color; }
			/*ul.product-categories li.cat-parent[class*="current"]>span.open-submenu:before { content:'\e809'; }*/
			ul.product-categories li.cat-parent.open>span.open-submenu:before	{ content:'\e809'; }

			ul.product-categories > li.cat-parent>a					{ padding-right: 2.5em; }
			ul.product-categories > li.cat-parent>span.open-submenu	{ width: 2.5em; padding:8px 0 7px 0; line-height:1.3em; }
			ul.product-categories > li.cat-parent>span.open-submenu:before { font-size: 1.2em; margin-left: 0; color: #fff; }
			
			/* no-js korjaus */
			.no-js ul.product-categories li[class*="current"] > ul.children	{ display: block; }
			.no-js ul.product-categories li.cat-parent > span.open-submenu { display: none; }

			li 														{ padding: 0; margin: 0; }

			li a 													{ font-family: $secondary-font; font-weight: 400; color: $default-text-color; display: block; padding: 0; font-size: 1em; margin-left: 1.2em; }

			/* eka taso */
			ul.product-categories > li 								{ margin-bottom: 6px; }
			ul.product-categories > li > a 							{ margin-left: 0; background-color: $primary-color; padding: 7px 15px; color: #fff; font-weight: 600; font-size: 1.1em; }
			ul.product-categories > li[class*="open"] > a 			{ background-color: $secondary-color; color: #fff; }
			ul.product-categories > li[class*="current"] > a 		{ background-color: $secondary-color; color: #fff; }
			ul.product-categories > li > a:before 					{ display: none; }

			/* Alatasojen aktiiviset värit */
			ul li[class*="current"]>a								{ color: $primary-color; }
			ul.children li[class*="current"]>a						{ color: $primary-color; }

			ul.children												{ display: none; padding: 25px 0 25px 20px; margin: 0; background-color: #fff; }
			ul.children ul.children									{ padding: 10px 0 10px 10px; }
			/*ul li[class*="current"]>.children						{ display: block; }*/

			/* Alatasojen ikonit */
			ul li a:before 											{ display: none; }
			ul ul li>a:before 										{ text-align: center; vertical-align: middle; content: "\f006"; font-family: "skeletor-fontello"; font-style: normal; font-weight: normal; speak: none; display:inline-block; width: 1em; height:1em; margin-left: -1.1em; line-height: 1; font-size: .8em; color: inherit; }
			ul ul ul li>a:before 									{ content: "-"; }

		}
	}

#sub-menu-container 												{text-align: center; margin-top: 1em;
	.vertical li, .vertical li 										{display: inline-block;}
	.vertical li a.menu-link 										{background-color: $primary-color; display: inline-block; text-transform: uppercase; font-weight: 700; font-size: 15px; position:relative; color: #ffffff; padding: 10px; text-align: center; margin: 0.1em;}
	.vertical li[class*="current"] a.menu-link 						{background-color: $secondary-color; color: #ffffff; text-align: center;}

}