/*DESKTOP NAV*/

#brx-content, #brx-footer {
  margin-left: 22vw;
  width: calc(100% - 22vw);
}

.vertical-nav {
  position: fixed;
  width: 22vw;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 998;
}

/* =========================
   SIDEBAR NAVIGATION
========================= */

:root {
  --side-slide: 6rem;
  --mobile-menu-width: 300px; /* Adjust as needed */
}

.sidebar {
  position: relative;
  transform: translateZ(0);
  visibility: visible;
  backface-visibility: hidden;
  background-color: var(--primary-semi-light);
  height: 100dvh;
  overflow: hidden;
  
}

.sidebar-nav {
  position: relative;
  color: var(--base);
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1; 
}

/* Top-level UL */
.sidebar-nav > .container {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%
}

.nav-first-level__wrapper {
  padding-left: 2rem;
  transition: background-color 0.3s ease;
}

/* First-level items */
.nav-first-level {
 list-style: none;
}

/* Submenu container */
.nav-flyout {
  /*display: none;*/
  flex-direction: column;
  position: absolute;
  left: 100%;
  top: 0;
  padding: 0;
  width: calc(100% - var(--side-slide));
  height: 100%;
  transform: translateX(0);
  opacity: 0;
  transition: left 0.4s ease, opacity 0.4s ease, display 0.4s ease;
  background-color: var(--base-ultra-dark);
  z-index: -999;
  overflow-y: hidden;
  row-gap: 0;
}

.nav-first-level__title-icon g,
.nav-first-level__title-icon path {
  fill: var(--base);
  transition: fill 0.3s ease;
}

/* Submenu items */
.nav-sub-level {
  list-style: none;
}

/*Highlight active nav*/
.nav-sub-level a[aria-current="page"] {
  background-color: var(--accent);  
}

/*Manages hover state on desktop / mobile*/
/*@media (hover: hover) {*/

  /* Show flyout when parent is hovered */
  .nav-first-level:hover .nav-flyout {
    left: var(--side-slide);
    opacity: 1;
    display:flex;
    z-index: 10;
  } 

  /* Change background when parent is hovered */
  .nav-first-level:hover .nav-first-level__wrapper {
    /*background-color: var(--black);*/
      background-color: var(--base);
  }

  /* Primary link turns white when parent is hovered */
  .nav-first-level:hover .nav-first-level__title {
    color: var(--neutral);
  }

  /* SVG turns white when parent is hovered */
  .nav-first-level:hover .nav-first-level__title-icon g,
  .nav-first-level:hover .nav-first-level__title-icon path {
    fill: var(--neutral);
  }

  /* Ensure flyout stays open when hovering over it */
  .nav-flyout:hover {
    left: var(--side-slide);
    opacity: 1;
    visibility: visible;
  }

  /* Keep parent highlighted when flyout is hovered 
  .nav-flyout:hover ~ .nav-first-level__wrapper,
  .nav-first-level:hover .nav-first-level__wrapper {
    background-color: var(--black);
  }*/

  .nav-flyout:hover .nav-first-level__title-icon g,
  .nav-flyout:hover ~ .nav-first-level__wrapper .nav-first-level__title-icon path {
    fill: var(--neutral);
  	}
  .nav-first-level:hover .nav-first-level__title-icon {
    transform: rotate(-10deg);
    }

/*}*/


/*MOBILE NAV --HORIZONTAL*/
@media (max-width: 767px) { 
  #brx-content, #brx-footer {
      margin-left: 0;
      width: 100%;
    }

  .vertical-nav {
    display: none;
  }

  .vertical-nav.active {
    display: flex;
    width: 100%!important;
    transition: left 0.4s ease, opacity 0.4s ease, display 0.4s ease;
  }

  .sidebar {
    display: flex;
    flex-direction: column;  
  }
  
  .nav-first-level__wrapper {
    padding-left: 2rem;
  }

  /*Breadcrumbs*/
  .my-breadcrumbs {
    display: none; /* completely removed from flow */
  }

  .my-breadcrumbs.is-sticky {
    display: flex; /* or flex/inline-flex if you used flex layout */
    animation: fadeInBreadcrumb 0.3s ease forwards;
  }

  @keyframes fadeInBreadcrumb {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  
  
}