/*
*	Services Menu Properties
*	Please change the variable value below to update 
*	icon and description on the Services menu	
*/
// Icons
$fractional-cto:			'/wp-content/uploads/2022/10/submenu-fractional.svg';
$app-web: 					'/wp-content/uploads/2022/10/submenu-web.svg';
$software-qa: 				'/wp-content/uploads/2022/10/submenu-software.svg';
$fractional-product: 		'/wp-content/uploads/2022/10/submenu-product.svg';
$outsourced-developer: 		'/wp-content/uploads/2022/10/submenu-developer.svg';  
$talent-recruiting: 		'/wp-content/uploads/2022/10/submenu-staffing.svg';
// Description
$fractional-cto-desc: 			"Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations.";
$app-web-desc:  				"Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes."; 
$software-qa-desc: 				"Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services."; 
$fractional-product-desc: 		"Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules."; 
$outsourced-developer-desc: 	"Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks.";  
$talent-recruiting-desc: 		"Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team.";
/* Header */
header{
	&.fl-theme-builder-header-scrolled{
		background-color: #FFF;
		box-shadow: 0 1px 25px rgb(57 63 72 / 10%);
	}
	&.fl-theme-builder-header-shrink{
		ul.menu >{
			li{
				padding: 25px 0;   
			}
		} 
	} 
	ul.menu >{
		li{
			padding-top: 30px;
    		padding-bottom: 30px;
			&.menu-item-has-children{
				.menu-item-text{
					.pp-menu-toggle{
						right: -7px !important;
						transition: all .3s ease-in-out;
					}
				}
				&:hover{
					.menu-item-text{
						.pp-menu-toggle{
							transform: rotate(180deg);
						}
					}
				}
			} 
			& >{
				
				a{
					
				}
				.pp-has-submenu-container >{
					a{
						
					}
				}
				ul.sub-menu{
					padding: 30px !important;
					transform: translateX(-40%);
					display: grid !important;
					grid-template-columns: 1fr 1fr;
					row-gap: 30px;
					column-gap: 40px;
					& >{
						li{
							& > {
								a{
									 display: grid;
									 grid-template-columns: 26px auto;
									 grid-template-rows: auto;
									 column-gap: 20px;
									 grid-template-areas: 
										"icon menu"
										"icon description";  
									 transition: all .3s ease-in-out;
									.menu-item-text{
										grid-area: menu;
    									line-height: 1.25;
									}
									.menu-desc{
										font-size: 14px;
										font-weight: 300;
										grid-area: description;
										margin-bottom: 0;
										margin-top: 5px;
										color: #7E7E7E !important;
									}
									.menu-image{
										background-repeat: no-repeat;
										background-size: contain;
										width: 27px;
										height: auto;
										grid-area: icon;
									}
								}
							}
							&:hover{
								
							}
// 							&:not(:first-child){
// 								margin-top: 25px;
// 							}
							@each $name, $glyph in $menu-image {
								&.submenu-#{$name}{
									.menu-image{
										background-image: url($glyph);
									}
								}
							}
							@each $name, $glyph in $menu-description {
								&.submenu-#{$name}{
									.menu-desc{
										&::before{
										   content: $glyph;
										}
									}
								}
							}
						}
					}
					@media(min-width: $min-mobile){
						&::before{
							position: absolute;
							width: 0;
							height: 0;
							content: "";
							border-style: solid;
							border-width: 15px 0 15px 15px;
							border-color: transparent transparent transparent #FFF;
							right: unset!important;
							top: -20px !important;
							left: 45% !important;
							transform: rotate(270deg)!important;
						}
					}
					@media(max-width: $tablet){
						transform: translateX(-30%);
						&::before{
							left: 33% !important;
						}
					}
				}
			}
			&.current-page-ancestor >{
				a{
					color: $jt-blue !important;
				}
				ul.sub-menu >{
					li.current-menu-item >{
						a{
							
						}
					} 
				}
				.pp-has-submenu-container >{
					a{
						color: $jt-blue !important;
						.pp-menu-toggle::before{
							border-color: $jt-blue;
						}
					}
				} 
			}
			&.jt-active >{
				a{
					color: #1A8CFF !important;
				}
			}
			&.pp-has-submenu.pp-menu-submenu-right{
				.sub-menu {
					right: unset !important;
				}
			} 
			&.menu-company, &.menu-resources{
				ul.sub-menu{
					width: 386px;
				}
			}
		}
	}	
}
nav.pp-menu-nav{
	.pp-social-icons{
		span.pp-social-icon{
			margin-right: 20px;
			a{
				font-size: 20px;
				@each $name, $glyph in $social-icons {
				  i.fa-#{$name}{
					color: $glyph;
				  }
				}
			}
		}
	}
}