/*
Theme Name: War Camp
Author: Łukasz Szozda
Author URI: https://www.luknij-design.pl/
Description: Style głownego menu  
Version: 2.1.0
*/

/* Spis treści
 * -----------
Nawigacja
- Logo
- Menu
 -- Sub-menu
- Menu mobilne
 -- Sub-menu
 -- Bez JS
- Menu desktopowe
 -- Sub-menu
- BBQ
--------------------------------------------------------------*/

/* Nawigacja
 * -----------------------------------------------------------*/
#masthead{background: linear-gradient(to right,  #2b313c 0%,#495160 50%,#2b313c 100%);}
.site-header-wrapper{position: relative;}
.site-header-wrapper{display: flex; flex-direction: column; max-width: 1920px; min-height: 97px; margin: 0 auto;}
@media screen and (min-width: 1024px){
	.site-header-wrapper{flex-direction: row; justify-content: flex-end; max-width: 1920px;}
}

/* Logo - lewa strona glownego paska
 * -----------------------------------------------------------*/
.site-branding{padding: 0.3rem 2rem; justify-content: center;}
.site-branding.logo{display: flex; position: absolute; left: 0; right: 0; align-items: center; height: 100%; }
.site-branding a{display: inline-block; /*flex;*/ justify-content: center; font-size: 2rem; text-decoration: none;}
.site-branding a:hover{color: var(--war_camp_link_hover_color); text-decoration: underline;}
.site-branding img{display: block; max-width: 200px; height: auto;}
.site-branding p{margin: 4px 0;}
.site-branding a, .site-branding p{color: var(--war_camp_link_color);}

/* ZMIANA W TYTULE LOGO */
.site-branding .site-title, .site-branding .site-description{position: relative;}
@media screen and (min-width: 1024px){
	.site-branding{justify-content: left;}
}

/* Menu - prawa strona glownego paska
 * -----------------------------------------------------------*/
.main-navigation{position: relative; background: var(--color-3);}
@media (min-width: 1024px){
  .main-navigation{background: transparent;}
}
/* general menu styles */
ul.menu-1{list-style-type: none;}
.menu-top .menu-1 > li {box-sizing: border-box;}
.menu-top .menu-1 > li a{position: relative; z-index: 1; display: flex; box-sizing: border-box; height: 100%; /*border-radius: 0.4rem;*/ align-items: center; justify-content: space-between; font-size: 1rem; color: var(--text-color-light); transition: 0.5s; transition-delay: 0.2s; overflow: hidden;}
.menu-top .menu-1 li.menu-item-has-children{position: relative;}
.menu-top .menu-1 > li a:hover{color: var(--text-color-light);}

/* tło przycisku, stan hover */
.menu-top .menu-1 > li a::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s ease; z-index: -1; background-color: var(--link-color-hover); text-align: left;}
.menu-top .menu-1 > li a:hover::after{transform: scaleX(1); transform-origin: bottom;}
.menu-top .menu-1 li.menu-item-has-children li a:hover{ color: var(--menu-color);}
.menu-top .menu-1 > li.current_page_item:first-child > a{color: var(--text-color-light); background: var(--link-color);}
.menu-top .menu-1 > li.current_page_item > a:hover{color: var(--text-color-light);}
.menu-top .menu-1 li.current-page-parent > a:hover{color: orange /*var(--menu-color)*/;}

/* Sub-menu
 * -----------------------------------------------------------*/
.sub-menu{background-color: var(--menu-color);}

/* sub-menu hover */
.menu-top .menu-1 ul.sub-menu li.current-menu-item a:hover{color: var(--menu-color);}

/* Menu mobilne
 * -----------------------------------------------------------*/
.main-navigation{position: fixed; top: 0; right: 0; bottom: 0; left: 0; visibility: hidden; opacity: 0; z-index: 999;}
.main-navigation.mobile{overflow-y: auto; visibility: visible; opacity: 1; transition: 1s;}
.main-navigation ul.menu-1{padding: 0; margin-top: 5rem;}
.main-navigation ul > li{width: 100%; max-width: 280px; margin: auto;}
.main-navigation ul > li > a{display: inline-block; padding: 0.4rem 0.8rem; text-decoration: none;}

/* Arrow config */
.arrow {border: solid var(--text-color-light); border-width: 0 3px 3px 0; display: inline-block; padding: 3px; margin-left: 1rem; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: transform 0.5s, border 0.9s; -webkit-transition: transform 0.5s, border 0.9s;}

#site-navigation .menui-top ul.menu-1 ul.sub-menu > li.current-menu-item > a .arrow{border: solid var(--link-color); border-width: 0 3px 3px 0; display: inline-block; padding: 3px; margin-left: 1rem;}

li[aria-expanded="true"] > a i.arrow {transform-origin: 50%; transform: rotate(225deg); -webkit-transform: rotate(225deg);}

/* Menu 1 poz. */
.menu-top .menu-1 li.current-menu-item > a .arrow{border: solid var(--link-color); border-width: 0 3px 3px 0;}
.menu-top .menu-1 > li a:hover i.arrow{border: solid var(--menu-color);	border-width: 0 3px 3px 0;}

/* hover */
.menu-top .menu-1 > li.current_page_parent > a:hover .arrow{border: solid var(--menu-color); border-width: 0 3px 3px 0;}
.menu-top .menu-1 li.current-menu-ancestor > a{color: var(--link-color);}
.menu-top .menu-1 li.current-menu-ancestor > a:hover{color: var(--menu-color);}
.menu-top .menu-1 li.current-menu-ancestor > a .arrow{border: solid var(--link-color); border-width: 0 3px 3px 0;}

/* Menu 2 poz. */
.menu-top .menu-1 ul.sub-menu > li.current-menu-item > a{color: var(--link-color);}

/* Sub-menu
 * -----------------------------------------------------------*/
li[aria-expanded="false"] > .sub-menu{display: none;}
li[aria-expanded="true"] > .sub-menu{display: block;}
.main-navigation .sub-menu{padding: 0; list-style-type: none;}

/* Sub-menu lvl 1 */
@media screen and (max-width: 1023px){
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu > li > a{ box-sizing: border-box; margin-left: 12px; background-color: var(--submenu-1-color);}
}

/* Sub-menu lvl 2 */
.menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > a{box-sizing: border-box;}
@media screen and (max-width: 1023px){
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > .sub-menu > li > a{margin-left: 24px; background-color: var(--submenu-2-color);}
}
.main-navigation .sub-menu > li > a{padding: 0.6rem; font-size: 0.9rem;}

/* Bez JS
 * -----------------------------------------------------------*/
body.no-js .main-navigation {display: block; position: relative; visibility: visible; opacity: 1; z-index: 99;}
body.no-js .site-header-wrapper{max-height: none;}
body.no-js .main-slider{display: block;}
@media screen and (max-width: 1023px){ 
  body.no-js .main-navigation ul.menu-1 {margin: 2rem 0;}
  body.no-js .main-navigation .sub-menu{display: block;}
}

/* Menu desktopowe
 * -----------------------------------------------------------*/
@media screen and (min-width: 1024px){
  .site-branding.logo{ right: inherit;}
  .site-branding img{max-width: 140px;}
  .main-navigation{position: relative; visibility: inherit; opacity: inherit; margin-right: 2rem;}
  #primary-menu, .menu-top-nav-container, .main-navigation .menu-top, .main-navigation ul.menu-1, .main-navigation ul.menu-1 > li{height: 100%;}
  .main-navigation ul > li{width: inherit; max-width: inherit; margin: auto;}
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu > li > a{ font-size: 0.9rem;}
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > a{box-sizing: border-box;}
  .main-navigation ul.menu-1{display: flex; margin: auto; padding: 0;}
  .main-navigation ul.menu-1 > li{justify-content: center; align-items: center; display: flex;}
  .main-navigation ul > li > a{padding: 0 0.8rem; /*border-radius: 0.2rem;*/ overflow: hidden; margin: 0 1px;}
  .menu-top .menu-1 > li.current_page_item > a{margin-left: 0rem;}
  .menu-top .menu-1 > li a{width: inherit; max-width: inherit; margin-left: 0;}

  /* desktop hover menu */
  .menu-1 > li:hover > a i.arrow {transform-origin: 50% 50%; transform: rotate(225deg); -webkit-transform: rotate(225deg);}
  .sub-menu > li:hover a i.arrow{transform-origin: 50% 50%; transform: rotate(225deg); -webkit-transform: rotate(225deg);}

 /* Sub-menu desktopowe
  * -----------------------------------------------------------*/
  .menu-top .menu-1 > ul.sub-menu > li.current-menu-item > a{box-sizing: border-box; padding: 10px 9px;}
  .main-navigation .sub-menu > li > a{padding: 0.6rem; margin: 0;}
  .main-navigation ul.menu-1 > li:hover > .sub-menu{display: block;}
  .main-navigation ul.menu-1 > li .sub-menu{position: absolute; left: 0; top: 68px; width: 220px; padding: 0;}
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > .sub-menu > li > a{background-color: #36365D;}

  /* sub-menu lvl 1 */
  .menu-top .menu-1 > li.menu-item-has-children > a{border-bottom: 0;}
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu > li > a{box-sizing: border-box; border-right: 0; background-color: var(--submenu-1-color);}
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a{box-sizing: border-box;} 
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu > li:last-child > a{border-bottom: 0;}
  .menu-top ul.menu-1 ul.sub-menu > li.current-menu-item > a{border-left: 1px solid var(--menu-color); border-right: 1px solid var(--menu-color);}
  .menu-top ul.menu-1 ul.sub-menu > li.current-menu-item:last-child > a{border-bottom: 1px solid var(--menu-color);}
  .menu-top ul.menu-1 ul.sub-menu > li.current-menu-ancestor > a{border-left: 1px solid var(--menu-color); border-right: 1px solid var(--menu-color);}

  /* sub-menu lvl 2 */
  .main-navigation ul.menu-1 ul.sub-menu li:hover > ul.sub-menu{display: block;}
  .main-navigation ul.menu-1 ul.sub-menu li > ul.sub-menu{box-sizing: content-box; left: -220px; top: 0;}

  /* sub-menu lvl 2 */
  .menu-top .menu-1 > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > .sub-menu > li > a{background-color: var(--submenu-2-color);}
}

/* BBQ
 * -----------------------------------------------------------*/
#bbq{position: absolute; z-index: 9999; top: 44%; left: 0.5rem; width: 40px; height: 40px; cursor: pointer; transform: translateY(-50%);}
@media screen and (min-width: 540px){
  #bbq{right: 1rem;}
}
.bbq-bar{position: absolute; top: 50%; right: 0; width: 40px; height: 4px; transform: translateY(-50%); transition: 0.4s; background-color: var(--text-color-light);}
.bbq-bar:before{top: -12px;}
.bbq-bar:after{top: 12px;}
.bbq-bar:before, .bbq-bar:after{content: ''; position: absolute; width: 40px; height: 4px; background-color: var(--text-color-light); transition: 0.4s;}

/* Animacja */
.bbq-bar.active-btn{background-color:rgba(0,0,0,0);}
.bbq-bar.active-btn:before{top: 0; transform: rotate(45deg);}
.bbq-bar.active-btn:after{top: 0; transform: rotate(135deg);}

/* Kiedy brak JS */
#bbq{display: none;}