/* Navigation
--------------------------------------------- */

.editor-styles-wrapper .wp-block-navigation__container > .wp-element-button {
	padding: 0;
}

.wp-block-navigation.main-navigation li {
   /* white-space: nowrap; */
}

/* Change the WordPress default css to a 1060px media query - ADJUST to match the breakpoint */
@media (min-width: 982px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
} /* end of media query min-width: 982px */


/* Remove the WordPress default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

/*  OR */

@media screen and (max-width: 981px) {
  /* hamburger button */
 /* .wp-block-navigation__responsive-container-open  {
    display: block !important;*/
 /* }

  /* full menu */
 /* .wp-block-navigation__responsive-container:not(.is-menu-open):not(.has-modal-open) {
   /* display: none !important;*/
  /*} */
}

@media screen and (max-width: 727px) {
    .wp-block-group.phone-nav {
        gap: 0 !important;
    } 
}

/* Mobile Navigation
--------------------------------------------- */
@media screen and (max-width: 981px) {
	
.is-menu-open.has-modal-open {
  background: var(--wp--preset--color--primary) !important; 
  padding-bottom: var(--wp--preset--spacing--x-large);
}

/* move the close button and navigation lower */
.wp-block-navigation__responsive-close {
        padding-top: var(--wp--preset--spacing--medium);
}

/* Mobile menu open, close button */
button.wp-block-navigation__responsive-container-close,
button.wp-block-navigation__responsive-container-open {
	padding: 4px;
	border-radius: 3px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/* Mobile menu close button */
button.wp-block-navigation__responsive-container-close {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
        margin-right: var(--wp--preset--spacing--medium); 
        margin-top: var(--wp--preset--spacing--large);
}

.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--medium) !important; 
}

.is-menu-open.has-modal-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}

.is-menu-open.has-modal-open .wp-block-navigation__container ul {
	 padding: 0 !important;
         margin: 0 !important;
}

.is-menu-open.has-modal-open ul.wp-block-navigation__submenu-container {
	border-radius: 0;
	margin: 5px 0; 
}

.is-menu-open.has-modal-open .wp-block-navigation__container > li  {
	width: 100%; 
	padding: 0 0; 
	position: relative;
}

.is-menu-open.has-modal-open .wp-block-navigation__container li li {
    background: var(--wp--preset--color--primary) !important;
}

.is-menu-open.has-modal-open .wp-block-navigation__container li a {
    color: var(--wp--preset--color--base); 
    padding-left: var(--wp--preset--spacing--medium) !important;
    padding-right: var(--wp--preset--spacing--medium) !important;
}

/* delete padding from the second level submenu - arrow on the right */
.is-menu-open.has-modal-open .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	padding-right: 0;
}

.is-menu-open.has-modal-open .wp-block-navigation__container ul li a::before {
	content: "\2014";
	margin-right: var(--wp--preset--spacing--medium);
	opacity: .5;
}

/* secondary submenu */
.is-menu-open.has-modal-open .wp-block-navigation__container ul ul li {
      padding-left: var(--wp--preset--spacing--large);
}

.is-menu-open.has-modal-open .wp-block-navigation__container ul > li a:hover:before {
  /*  background: var(--wp--preset--color--secondary) !important; */
}
	
/* change color of submenu links on hover - mobile */	
.is-menu-open.has-modal-open .wp-block-navigation__container li:hover a:hover,
.is-menu-open.has-modal-open .wp-block-navigation__container li:hover a:focus,
.is-menu-open.has-modal-open .wp-block-navigation__container li:hover a:active {
	color: var(--wp--preset--color--base) !important;
      /*  background: var(--wp--preset--color--secondary) !important;*/
}

.is-menu-open.has-modal-open .wp-block-navigation__container li:hover,
.is-menu-open.has-modal-open .wp-block-navigation__container li:focus,
.is-menu-open.has-modal-open .wp-block-navigation__container li:active  {
	color: var(--wp--preset--color--base) !important;
        background: var(--wp--preset--color--secondary) !important;
}

.is-menu-open.has-modal-open .wp-block-navigation__container ul li:hover a:hover:before {
	text-decoration: none;
}

/* Adjust the first mobile menu item to prevent conflict with menu close button */
.is-menu-open.has-modal-open .wp-block-navigation__container > li:first-child  {
	/*padding-top: 32px !important;*/
	margin-top: calc( var(--wp--preset--font-size--large) + 32px ) !important; /* 32px is the size of the close button */
	line-height: 1;
}

/* hide submenus */
.is-menu-open.has-modal-open .wp-block-navigation-item.has-child ul  {
    display: none; 
}

/* add arrow to has-child */
.is-menu-open.has-modal-open .wp-block-navigation-item.has-child > a {
	/*position: relative !important;*/
	display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
	-webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; 
	-webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; 
}
		
/* Using SVG for icon */
.is-menu-open.has-modal-open .wp-block-navigation-item.has-child a span.icon-open-close {		
	display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
	-webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
	height: var(--wp--preset--font-size--medium);
	/*width: var(--wp--preset--font-size--medium);*/ 
        width: calc(2 * var(--wp--preset--font-size--medium) ); /* we make the width wider for the icon */
      /*  margin-left: 20px;*/ 
        margin-left: auto; /* move the icon to the right */
	/*background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.63 3.86'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M6.63.55c0,.05-.03.11-.07.15l-3.09,3.09s-.1.07-.15.07-.11-.03-.15-.07L.07.7s-.07-.1-.07-.15.03-.11.07-.15L.4.07s.09-.07.15-.07c.05,0,.11.03.15.07l2.61,2.61L5.92.07s.1-.07.15-.07.11.03.15.07l.33.33s.07.1.07.15Z'/%3E%3C/svg%3E");*/
	z-index: 10000;	
	/*background-repeat: no-repeat;
	background-position: center;*/
        
	/* OR */		
/* SVG Mask for DOWN ARROW */	
        cursor: pointer;
        /* The fill animation */ 
	color: inherit;
	background: currentcolor !important;
        -webkit-transition: background-color 0.2s;
        -o-transition: background-color 0.2s;
        transition: background-color 0.2s; /* in case we change color on hover */  
        
        /* Store the SVG in a variable so it's easy to use */
        --svg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.63 3.86'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M6.63.55c0,.05-.03.11-.07.15l-3.09,3.09s-.1.07-.15.07-.11-.03-.15-.07L.07.7s-.07-.1-.07-.15.03-.11.07-.15L.4.07s.09-.07.15-.07c.05,0,.11.03.15.07l2.61,2.61L5.92.07s.1-.07.15-.07.11.03.15.07l.33.33s.07.1.07.15Z'/%3E%3C/svg%3E%0A");
	
        /* Chrome, still requires prefix in 2022 */
       -webkit-mask: var(--svg); 
        /* Firefox and Safari */
         mask: var(--svg); 
	/* Do not repeat svg image */
	-webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;	
	-webkit-mask-position: calc(100% - 4px) 50%;
          mask-position:  calc(100% - 4px) 50%;
          mask-size: var(--wp--preset--font-size--small) var(--wp--preset--font-size--small) !important;
}

.is-menu-open.has-modal-open .wp-block-navigation-item.has-child a span.sub-menu-wrap.icon-open-close  {
/*.is-menu-open.has-modal-open .wp-block-navigation-item.has-child a.sub-menu-wrap ul .wp-block-navigation-item.has-child.sub-menu-wrap span.icon-open-close { */
/* SVG for UP ARROW */	
	
 /*--svg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.63 3.86'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M0,3.31c0-.05.03-.11.07-.15L3.16.07S3.26,0,3.31,0s.11.03.15.07l3.09,3.09s.07.1.07.15c0,.05-.03.11-.07.15l-.33.33s-.09.07-.15.07c-.05,0-.11-.03-.15-.07L3.31,1.19.7,3.8s-.1.07-.15.07-.11-.03-.15-.07l-.33-.33S0,3.37,0,3.31Z'/%3E%3C/svg%3E%0A");*/
	 
/*background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.63 3.86'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M0,3.31c0-.05.03-.11.07-.15L3.16.07S3.26,0,3.31,0s.11.03.15.07l3.09,3.09s.07.1.07.15c0,.05-.03.11-.07.15l-.33.33s-.09.07-.15.07c-.05,0-.11-.03-.15-.07L3.31,1.19.7,3.8s-.1.07-.15.07-.11-.03-.15-.07l-.33-.33S0,3.37,0,3.31Z'/%3E%3C/svg%3E%0A");*/	
       -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
       /* the width of the span is wider than svg, rotating moves the icon - mirror */
        -webkit-mask-position: 4px 50%; /* padding of the close button */
          mask-position: 4px 50%;
}
		
/* Mobile menu sub menu */
.is-menu-open.has-modal-open .wp-block-navigation-item .wp-block-navigation__submenu-container {
	/*padding: 0 0 0 var(--wp--preset--spacing--large); */
        padding: 0; 
	width: 100% !important;
}

/* Mobile menu links a */
.is-menu-open.has-modal-open a.wp-block-navigation-item__content {
	width: 100%;
	padding: var(--wp--preset--spacing--small) 0 !important;
	font-size: var(--wp--preset--font-size--medium); 
	line-height: var(--wp--custom--line-height--body);
}

} /* end media query for max-width 981px */

/* Add padding to top of drop menu */
@media only screen and (min-width: 982px) {
    
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
            -webkit-transition: opacity 0.3s linear;
            -o-transition: opacity 0.3s linear;
                transition: opacity 0.3s linear;
        }
    
/* https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline/ */	
        /* Adding underline on hover for main navigation, first we need to add a transparent color to it */
        header .wp-block-navigation__container > li:not(.has-child) > a {
            text-decoration: none; 
            padding-left: 2px; 
            padding-right: 2px;
            background-image: 
                linear-gradient(rgba(176, 251, 188, 0), rgba(176, 251, 188, 0) ),
                linear-gradient(#0f5f43, #0f5f43);
            background-size:
                100% 2px,
                0 2px;
            background-position:
                100% 100%,
                0 100%;
            background-repeat: no-repeat; 
            -webkit-transition: background-size 500ms;
            -o-transition: background-size 500ms;
            transition: background-size 500ms;
        }
        
        
        /* change the main navigation link on hover */
        header .wp-block-navigation__container > li:not(.has-child):hover > a,
	    header .wp-block-navigation__container > li:not(.has-child):focus > a,
	    header .wp-block-navigation__container > li:not(.has-child):active > a {
                /*   color: red !important; */
                background-size: 0 2px, 100% 2px; 
        } 
	
	  @media (hover: hover) and (pointer: fine) {
		   background-size: 0 2px, 100% 2px; 
	  }
        
    /* Drop nav */
	header .wp-block-navigation .wp-block-navigation__submenu-container {
		/*border: none !important;*/
               /* border: 1px solid var(--wp--preset--color--primary) !important; */
              /* -webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
                box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);*/
               /* box-shadow: inset 0 0 10px #f8a100; */
               -webkit-box-shadow: 0 8px 6px -6px #000;
                box-shadow: 0 8px 6px -6px #000;
		font-size: var(--wp--preset--font-size--small);
		/*line-height: var(--wp--custom--line-height--snug);*/
                  line-height: var(--wp--custom--line-height--medium);
		/*border-radius: 5px;*/
		min-width: 250px !important;
		/*margin-left: calc(var(--wp--preset--spacing--small) * -1); /* same as a padding below */
               /* margin-left: -20px; /* same as a padding below */ 
		/*padding: 0;*/
	}
        
        header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
             /* margin-top: 1px; /* if we have a border 1px - see above */
        } 
        
        header .wp-block-navigation :where(.wp-block-navigation__submenu-container) li a {
                /*line-height: var(--wp--custom--line-height--body);*/
        }
	
	/* Drop nav link padding */
	header .wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
		padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small) !important;
               /* padding: 12px 20px !important; */ 
	}
	
	header .wp-block-navigation :where(.wp-block-navigation__submenu-container) li:first-child {
		/*padding-top: 0;*/
	}

	/* Add padding to bottom of drop menu */
	header .wp-block-navigation :where(.wp-block-navigation__submenu-container) li:last-child {
		/*padding-bottom: 0;*/
		/*border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;*/
	}
	
	/* Drop nav submenu */
	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		margin-left: -5px;
		/*margin-top: calc(var(--wp--preset--spacing--small) * -1);*/
	}
	
	/* use this only if mobile submenu is hidden - jquery show-hide-submenu */
	header .wp-block-navigation .has-child:not(.open-on-click):hover >.wp-block-navigation__submenu-container {
                display: block !important;
        }
        
        /* change the main navigation link on hover */
        header .wp-block-navigation__container > li:hover > a {
                color: var(--wp--preset--color--primary) !important; 
             /*   color: red !important; */
        }
        
        /* change the cursor from pointer to auto - for links with a submenu */
        header .wp-block-navigation__container > li.has-child:hover > a {
             cursor: auto !important;
        }
	
	/* change color of svg icon on the main navigation on hover - match the color of main navigation links */
        header .wp-block-navigation__container > li:hover > .wp-block-navigation__submenu-icon svg  {
                stroke: var(--wp--preset--color--primary) !important; 
              /*  stroke: red !important; */
	}
        
        /* second submenu */
        header .wp-block-navigation__container .wp-block-navigation__submenu-container > li {
           color: var(--wp--preset--color--main) !important;
        }
        
	/* change color of submenu links on hover - includes li, a and svg */
        header .wp-block-navigation__container .wp-block-navigation__submenu-container > li:hover {
		color: var(--wp--preset--color--base) !important;
                background: var(--wp--preset--color--secondary) !important;
	}
        
        /* change color of submenu links on hover - includes only a */
	header .wp-block-navigation__container .wp-block-navigation__submenu-container > li:hover > a {
		color: var(--wp--preset--color--base) !important;
	} 
        
        /* change color of svg icon on the submenu on hover of the submenu links */
        header .wp-block-navigation__container .wp-block-navigation__submenu-container > li:hover > .wp-block-navigation__submenu-icon svg  {
                stroke: var(--wp--preset--color--base) !important; 
	} 
        
        /* change color of secondary submenu links on hover */
	header .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container li:hover > a {
		color: var(--wp--preset--color--base) !important;
                background: var(--wp--preset--color--tertiary) !important;
	}
        
} /* end media query min-width: 982px */