/************************************
 * DESKTOP NAV BASE STRUCTURE
 ************************************/
.nbf-header-nav {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  height: 100%;
  margin: auto !important;
  width: 100%;
  max-width: var(--wp--style--global--wide-size) !important;
}

/************************************
 * DESKTOP TOP LEVEL LINKS
 ************************************/
.nbf-nav--desktop {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  list-style: none;
  position: relative;
}
.nbf-nav--desktop > li {
  display: flex;
  justify-content: center;
  z-index: 0;
  > a {
  	color: white !important;
  }
  & * {
  	color: var(--wp--preset--color--dark) !important;
  }
  &:not(.search) > a {
	position: relative;  	
	&:after, &:before {
		width: 100%;
		content: "";
		display: block;
		position: absolute;
		background: transparent;
		height: var(--wp--preset--spacing--60);
		bottom: calc(var(--wp--preset--spacing--40) * -1);
		z-index: -1;
	}
	&:after {
		background: var(--wp--preset--color--pink);
		height: 5px;
		bottom: calc(var(--wp--preset--spacing--40) * -1);
		z-index: -1;
		opacity: 0;
	}
  }
}
.nbf-nav--desktop > li + li {
  margin-left: var(--wp--preset--spacing--60);
}
.nbf-nav--desktop > li > a {
  display: flex;
  align-items: center;
  text-align: center;  
  font-size: 1rem;
  padding: var(--wp--preset--spacing--20) 0;
  line-height: 1.1;
}
@media (min-width: 900px) {
  .nbf-nav--desktop > li > a {
    font-size: 1rem;
  }
}

/* Active/Parent highlight */
.nbf-nav--desktop > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a {
  /*color: var(--wp--preset--color--cyan) !important;*/
  &:after {
  	opacity: 1;
  }
}

.nbf-nav--desktop .contact {
	margin-left: auto;
}
.nbf-nav--desktop .search {
	height: 1em !important;
	width: 1em !important;	
}
.nbf-nav--desktop .search a {
	color: transparent !important;
	font-size: 1px;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	position: relative;
}
.nbf-nav--desktop .search a:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: no-repeat center/contain url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.66667 0C2.99266 0 0 2.99266 0 6.66667C0 10.3407 2.99266 13.3333 6.66667 13.3333C8.26434 13.3333 9.73159 12.766 10.8815 11.8242L14.862 15.8047C14.9234 15.8687 14.997 15.9198 15.0784 15.9549C15.1598 15.9901 15.2474 16.0087 15.3361 16.0096C15.4248 16.0105 15.5128 15.9937 15.5949 15.9602C15.6771 15.9267 15.7517 15.8771 15.8144 15.8144C15.8771 15.7517 15.9267 15.6771 15.9602 15.5949C15.9937 15.5128 16.0105 15.4248 16.0096 15.3361C16.0087 15.2474 15.9901 15.1598 15.9549 15.0784C15.9198 14.997 15.8687 14.9234 15.8047 14.862L11.8242 10.8815C12.766 9.73159 13.3333 8.26434 13.3333 6.66667C13.3333 2.99266 10.3407 0 6.66667 0ZM6.66667 1.33333C9.62008 1.33333 12 3.71325 12 6.66667C12 9.62008 9.62008 12 6.66667 12C3.71325 12 1.33333 9.62008 1.33333 6.66667C1.33333 3.71325 3.71325 1.33333 6.66667 1.33333Z" fill="white"/></svg>');
}

/************************************
 * DESKTOP DROPDOWNS (NON-SERVICES)
 ************************************/
.nbf-nav--desktop li:not(.menu-item-object-services):hover > .sub-menu,
.nbf-nav--desktop li:not(.menu-item-object-services):focus-within > .sub-menu {
  display: block !important;
}

.nbf-nav--desktop > li > .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--40));
	background: var(--wp--preset--color--cyan);  
	padding: var(--wp--preset--spacing--20);
	z-index: 30;
	width: 200px;
	& li {
		display: block;
	}
}

.nbf-nav--desktop .sub-menu li a {
  padding: var(--wp--preset--spacing--20);
  font-size: 14px;
  font-weight: 400;
  display: block;
}

/************************************
 * DESKTOP MEGA MENU — SERVICES (4 COLUMNS)
 ************************************/
@media (min-width: 900px) {
	.menu-item-type-post_type_archive.menu-item-object-services {
		&:is(:hover, :focus-within) > .sub-menu {
			display: grid !important;
		}
	}
  .menu-item-type-post_type_archive.menu-item-object-services > .sub-menu {    
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--wp--preset--spacing--20);
    left: 0;
    right: 0;

    /* Reveal animation */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.35s ease, max-height 0.35s ease;
  }

  .menu-item-type-post_type_archive.menu-item-object-services:hover > .sub-menu {
    max-height: calc(100vh - var(--navHeight));
    opacity: 1;
  }

  .menu-item-type-post_type_archive.menu-item-object-services > .sub-menu > li {
    border-right: 1px solid var(--wp--preset--color--dark);
    padding-inline: var(--wp--preset--spacing--50);
    > a {
    	padding: 0 !important;
    	padding-top: var(--wp--preset--spacing--40) !important;
      margin-bottom: var(--wp--preset--spacing--40) !important;
      font-weight: bold;
    }
    > .sub-menu {
    	padding-bottom: var(--wp--preset--spacing--40);
    }
  }
  .menu-item-type-post_type_archive.menu-item-object-services > .sub-menu > li:last-child {
    border-right: none;
    padding-right: 0;
  }

  /* Column headings */
  .menu-item-type-post_type_archive.menu-item-object-services > .sub-menu > li > a {
    font-size: 1rem;
    margin-bottom: var(--wp--preset--spacing--20);
    display: block;
  }

  /* Nested services links */
  .menu-item-type-post_type_archive.menu-item-object-services .sub-menu .sub-menu {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    position: static;
    padding: 0;
  }
  .menu-item-type-post_type_archive.menu-item-object-services .sub-menu .sub-menu a {
    padding: 0;
    font-size: 14px;
  }
}

/************************************
 * MOBILE TOGGLE
 ************************************/
.nbf-mobile-toggle {
  background: transparent;
  border: 0;
  padding: 20px;
  position: relative;
  cursor: pointer;
  z-index: 2001;
  margin-left: auto;
}
.nbf-mobile-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform .25s;
}
.nbf-mobile-toggle span:first-child { top: 15px; }
.nbf-mobile-toggle span:last-child { bottom: 15px; }

.nbf-menu-open .nbf-mobile-toggle span:first-child { transform: translateY(4px) rotate(-45deg); }
.nbf-menu-open .nbf-mobile-toggle span:last-child { transform: translateY(-4px) rotate(45deg); }
.nbf-menu-open header.wp-block-template-part {top: 0;}
.nbf-menu-open header.wp-block-template-part .wp-block-group:has(nav) {
  translate: 0 calc(var(--headerHeight) * -1);  
}

header.wp-block-template-part .wp-block-group:has(nav) {
  position: relative;
  z-index: 999999;
  transition: translate .35s ease;
}

/************************************
 * MOBILE OFFCANVAS
 ************************************/
#nbf-mobile-panel {
  position: fixed;
  left: 0;
  top: var(--navHeight);
  width: 100vw;
  height: calc(100vh - var(--navHeight));
  background: #fff;
  border-top: 1px solid #EEE;
  overflow-y: auto;
  z-index: 2000;

  /* Hidden state */
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  visibility: hidden;

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility 0s .35s allow-discrete;
  will-change: transform, opacity;
}

@starting-style {
  #nbf-mobile-panel.is-visible {
    opacity: 0;
    transform: translateX(-100%);
  }
}

#nbf-mobile-panel.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility 0s allow-discrete;
}

.nbf-nav--mobile {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nbf-nav--mobile li { position: relative; }
.nbf-nav--mobile a {
  display: block;
  padding: 24px 32px;
  font-weight: 700;
  border-bottom: 1px solid #EFEFEF;
  color: var(--wp--preset--color--dark) !important;
}

/************************************
 * MOBILE SUBMENU PANELS
 ************************************/
.nbf-nav--mobile .sub-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--navHeight));
  background: #fff;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 2001;
  padding: 0;
}
.nbf-nav--mobile .sub-menu.is-active {
  transform: translateX(0);
}

/************************************
 * MOBILE SUBMENU OPEN & BACK
 ************************************/
.nbf-submenu-open {
  position: absolute;
  right: 0;
  top: 0;
  width: 55px;
  height: 100%;
  appearance: none;
  border: 0;  
  border-left: 1px solid #EFEFEF;
  background: transparent;
  cursor: pointer;
}
.nbf-submenu-open::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 26px;
  width: 10px;
  height: 10px;
  border: solid #ED145A;
  border-width: 0 1px 1px 0;
  transform: translateY(-50%) rotate(-45deg);
}

.nbf-submenu-back {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EFEFEF;
  color: var(--wp--preset--color--pink);
  cursor: pointer;
}
.nbf-submenu-back span {
  width: 55px;
  height: 70px;
  position: relative;
}
.nbf-submenu-back span::after {
  content: "";
  position: absolute;
  top: 49%;
  left: 34px;
  width: 10px;
  height: 10px;
  border: solid #ED145A;
  border-width: 0 1px 1px 0;
  transform: translateY(-50%) rotate(140deg);
}

.nbf-menu-open { overflow: hidden; }