Psychotherapie en manierisme

  /* OVERLAY SIDEBAR */


  /*main and footer*/
  .dwc-overlay-sidebar.brx-header-left #brx-content,
  .dwc-overlay-sidebar.brx-header-left #brx-footer,
  .dwc-overlay-sidebar.brx-header-right #brx-content,
  .dwc-overlay-sidebar.brx-header-right #brx-footer,
  .dwc-offcanvas.brx-header-left #brx-content,
  .dwc-offcanvas.brx-header-left #brx-footer,
  .dwc-offcanvas.brx-header-right #brx-content,
  .dwc-offcanvas.brx-header-right #brx-footer {
      margin-inline-start: 0;
  }

  .dwc-overlay-sidebar:not(.dwc-mobile) {
      --header-bg: transparent;
      --nav-bg: transparent;
  }

  .dwc-overlay-topbar {
      --header-bg: transparent;
  }

  .dwc-overlay-topbar #dwc_header.dwc-sidebar {
      background: var(--header-bg);
      margin-block-end: calc(var(--dwc-header-height) * -1);
  }

  .brx-header-left.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
      padding-inline-start: var(--sidebar-width);
  }

  .brx-header-right.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
      padding-inline-end: var(--sidebar-width);
  }

 .dwc-mobile-menu-over.dwc-offcanvas .dwc-sidebar__nav, 
    .dwc-mobile-menu-over.dwc-topbar-enabled .dwc-sidebar__nav,
.dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav{
             z-index: 9999;
    }

    .dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav__panel {
        padding-block-start: 0 !important;
    }

    .dwc-offcanvas .dwc-sidebar__nav__panel:not(.dwc-mobile-menu-over *) {
        padding-block-start: var(--dwc-header-height);
        z-index: 0;
    }
    
    .dwc-offcanvas .dwc-header-inner-wrap:not(.dwc-mobile-menu-over *) {
        z-index:99999; 
    }



  /* OFFCANVAS */

  .dwc-offcanvas.brx-header-left #brx-header {
      bottom: auto;
      inline-size: 100%;
  }

  .dwc-offcanvas.brx-header-left #brx-header:not(.dwc-headroom *) {
      position: relative;
  }


  .dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
      transform: translateX(calc(var(--sidebar-width) * -1));
  }

  .dwc-rtl.dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
      transform: translateX(calc(var(--sidebar-width) * 1));
  }

  .dwc-nav-trigger {
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  .dwc-offcanvas .dwc-sidebar__nav {
      transform: translateX(-100%);
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  .dwc-offcanvas .dwc-sidebar__nav,
  .dwc-topbar-enabled .dwc-sidebar__nav {
      background: var(--nav-bg);
      inline-size: var(--sidebar-width);
      position: fixed !important;
      bottom: 0;
      inset-inline-start: 0;
      inset-block-start: 0;
      block-size: 100dvb;
      overflow: hidden;
      box-shadow: var(--sidebar-shadow);

  }

  .dwc-offcanvas.dwc-slide-nav-open .dwc-mobile-menu-overlay {
      pointer-events: auto;
      opacity: var(--overlay-opacity);
  }

  .dwc-offcanvas .dwc-mobile-menu-overlay {
      background: var(--overlay-bg);
      position: fixed !important;
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      pointer-events: none;
      opacity: 0;
      transition: 0.4s 0.2s;
      block-size: 100vh;
  }

  .dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
      transform: translateX(0) !important;
  }


  .dwc-push-content .dwc-sidebar__nav__panel {
      padding-block: var(--panel-block-pad) !important;
  }



  .dwc-offcanvas .dwc-sidebar__nav:not(.dwc-mobile *),
  .dwc-topbar-enabled .dwc-sidebar__nav:not(.dwc-mobile *) {
      z-index: 1000;
  }


  .dwc-topbar-enabled .dwc-sidebar__nav__panel:not(.dwc-mobile *) {
      padding-block-start: calc(20px + var(--dwc-header-height));
  }

  /* body */

  body.dwc-no-scroll {
      overflow: hidden;
      block-size: 100vh;
  }


  body.dwc-offcanvas {
      --sidebar-transition: 700ms;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }


  /* OFFCANVAS ENDS */

  /* push content */

  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>header,
  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>footer,
  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>main {
      transform: translateX(var(--sidebar-width));
  }




  .dwc-mobile.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper {
      overflow: hidden;
      block-size: 100dvb;
  }

  .dwc-site-wrapper {
      block-size: 100%;
      display: flex;
      flex-direction: column;
  }

  header,
  footer,
  main {
      --sidebar-transition: 700ms;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  /*RTL*/

  .dwc-rtl .dwc-sidebar__nav__panel {
      direction: rtl;
  }


  .dwc-rtl #brx-footer:not(.dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *),
  .dwc-rtl #brx-content:not(.dwc-offcanvas *, .dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *) {
      margin-inline-start: unset;
      margin-inline-end: var(--sidebar-width);

  }

  .dwc-rtl header.dwc-sidebar {
      inset-inline-end: 0;
  }

  .dwc-rtl.dwc-mobile .dwc-sidebar__nav,
  .dwc-rtl.dwc-offcanvas .dwc-sidebar__nav,
  .dwc-rtl.dwc-topbar-enabled .dwc-sidebar__nav,
  .dwc-rtl #brx-header {
      inset-inline-start: auto;
      inset-inline-end: 0;
  }


  .dwc-rtl.dwc-mobile .dwc-sidebar__nav,
  .dwc-rtl.dwc-offcanvas .dwc-sidebar__nav {
      transform: translateX(100%);
  }

  .dwc-rtl.dwc-push-content.dwc-slide-nav-open header,
  .dwc-rtl.dwc-push-content.dwc-slide-nav-open main,
  .dwc-rtl.dwc-push-content.dwc-slide-nav-open footer {
      --rtl-translate: calc(var(--sidebar-width) * -1);
      transform: translateX(var(--rtl-translate));
  }

  /* RTL + OVERLAY SIDEBAR */
  .dwc-rtl.dwc-overlay-sidebar .brxe-section:not(.dwc-mobile *),
  .dwc-rtl.dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-mobile *) {
      padding-inline-end: calc(var(--sidebar-width) + 20px);
  }

  .dwc-overlay-sidebar .brxe-section:not(.dwc-rtl *, .dwc-mobile *),
  .dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-rtl *, .dwc-mobile *) {
      padding-inline-start: calc(var(--sidebar-width) + 20px)
  }


  /* TOP BAR*/
  .dwc-topbar-enabled .dwc-header-inner-wrap,
  .dwc-offcanvas .dwc-header-inner-wrap {
      box-shadow: var(--sidebar-shadow);
  }

  .dwc-topbar-enabled .dwc-header-inner-wrap {
      z-index: 9999;
  }

  .dwc-topbar-enabled #brx-header {
      inline-size: 100%;
      block-size: var(--dwc-header-height);
      background: transparent !important;
      /* position: relative;*/
  }

  .dwc-topbar-enabled .dwc-sidebar:not(.dwc-mobile *) {
      position: fixed;
      inline-size: 100%;
      max-inline-size: 100%;
      background: var(--header-bg);
      box-shadow: none;
  }



  /* TOP BAR ENDS */


  .dwc-current-menu-item {
      background-color: var(--current-link-bg);
      border-bottom: var(--current-link-underline);
  }


  #brx-header {
      background-color: var(--header-bg);
  }

  .dwc-mobile.brx-header-left #brx-header:not(.dwc-headroom *),
  .dwc-mobile.brx-header-right #brx-header:not(.dwc-headroom *) {
      position: relative;
      inline-size: 100%;
      block-size: auto;
  }

  /* MEDIA QUERY - DESKTOP */
  @media (min-width: 1025px) {

      .dwc-nav-trigger:not(.dwc-offcanvas *, .bricks-draggable-item),
      .dwc-mobile-menu-overlay:not(.dwc-offcanvas *),
      .mobile.dwc-nav__panel__header:not(.dwc-offcanvas *),
    .dwc-hamburger-wrap:not(.dwc-offcanvas *, .bricks-draggable-item){
          display: none !important;
      }
  }

  /* MEDIA QUERY - DESKTOP ENDS */
  html,
  body {
      block-size: 100%
  }

  main,
  footer {
      inline-size: 100%;
  }

  main {
      flex-grow: 1
  }

  .dwc-sidebar {
      box-shadow: var(--sidebar-shadow)
  }


  .dwc-sidebar__nav {
      block-size: 100%;
      z-index: 1;
      inline-size: var(--sidebar-width);
      position: relative;
      background-color: var(--nav-bg);
  }




  .dwc-sidebar__nav:not([data-builder-mode] *) {
      overflow: hidden;
  }

  .dwc-sidebar__nav__panel {
      background: var(--nav-bg);
      position: absolute;
      inline-size: 100%;
      block-size: 100%;
      display: flex;
      flex-direction: column;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
      transform: translateX(0);
      box-shadow: -5px -5px 40px rgb(0 0 0/10%);
      z-index: 1000;
      padding-block: var(--panel-block-pad);
      padding-block-start: 0;
      flex-wrap: nowrap;
  }

  .dwc-mobile .dwc-sidebar__nav__panel {
      padding-block-start: var(--dwc-header-height);
  }

  .dwc-sidebar__nav__panel:not([data-builder-mode] *) {
      overflow: hidden;
  }

  .dwc-sidebar__nav__panel:not([data-builder-mode] *)::after {
      content: '';
      position: absolute;
      bottom: 5px;
      inline-size: 100%;
      block-size: var(--panel-block-pad);
      background: var(--nav-bg);
      filter: blur(5px)
  }

  .dwc-nav__panel__header {
      inline-size: 100%;
      padding: 0.32rem var(--pad-m);
      gap: var(--list-gap);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      flex-wrap: nowrap;
  }

  .dwc-header-inner-wrap {
      inline-size: 100%;
      padding-block: var(--header-pad-y);
      padding-inline: var(--header-pad-x);
      gap: var(--list-gap);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      flex-wrap: nowrap;
      background: var(--header-bg);
      position: relative;
  }


  .dwc-nav__panel__inner {
      inline-size: 100%;
      flex-grow: 1;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      flex-wrap: nowrap;
      padding-inline: var(--pad-m);
  }

  .dwc-nav__panel__title-wrap {
      padding: var(--pad-s) var(--pad-xs);
      inline-size: 100%;
      box-shadow: 0 -6px 10px 15px var(--nav-bg);
      position: -webkit-sticky;
      position: sticky;
      inset-block-start: -3px;
      background-color: var(--nav-bg);
      z-index: 1;
  }

  .dwc-nav__panel__title {
      color: var(--panel-title-color);
      font-size: var(--panel-title-size);
      font-weight: 500;
      letter-spacing: 1px;
  }

  .dwc-sidebar__nav__ul {
      display: flex;
      flex-direction: column;
      inline-size: 100%;
      margin: 0;
      padding-inline-start: 0;
      /* padding-block: var(--pad-m); */
      gap: var(--list-gap);
      flex-grow: 1;
  }

  .dwc-sidebar__nav__ul:not(.dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul) {    
    padding-block: var(--pad-m);
 
}

  .dwc-sidebar__nav__li {
      list-style: none;
      inline-size: 100%;
      position: relative;
      border-radius: var(--link-border-radius)
  }

  .dwc-sidebar__nav__btn,
  .dwc-sidebar__nav__link {
      inline-size: 100%;
      display: flex !important;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
      padding: var(--link-pad-y) var(--link-pad-x);
      gap: var(--link-gap);
      color: var(--panel-link-color);
      text-align: left;
      line-height: 1.3;
      transition: var(--sidebar-link-transition), outline 0s;
      border-radius: var(--link-border-radius);
  }

  .dwc-nav__back-btn {
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 2px;
      font-size: var(--panel-back-size);
  }

  .dwc-nav__home-btn {
      inline-size: auto;
      padding: var(--pad-s);
      margin: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      border-radius: var(--link-border-radius);
      position: relative;
  }

  .nav__home-btn__txt {
      position: absolute;
      clip: rect(0, 0, 0, 0);
      font-size: 12px;
  }

  .dwc-sidebar__nav__btn,
  .dwc-sidebar__dropdown-toggle button {
      outline-width: 0;
      outline: none;
      cursor: pointer;
      background: var(--link-bg);
      border: none;
  }

  /* mobile menu toggle button*/
  .dwc-nav-trigger {
      cursor: pointer;
      position: relative;
      min-inline-size: 26px !important;
      min-block-size: 0 !important;
  }

  .dwc-nav-trigger::before {
      inset-inline-start: 0;
      inset-inline-end: 0;
      transform: translateY(-5px);
  }

  .dwc-nav-trigger::after {
      inset-inline-start: 10px;
      inset-inline-end: 0;
      transform: translateY(5px);
  }

  .dwc-nav-trigger::before,
  .dwc-nav-trigger:after {
      content: '';
      position: absolute;
      transition: 0.4s 0.3s;
      block-size: 3px;
      background: var(--mobile-menu-trigger-color);
      inset-block-start: 50%;
      border-radius: 50vw
  }

  .dwc-slide-nav-open .dwc-nav-trigger::before {
      transform: translateY(0) rotate(45deg);
  }

  .dwc-slide-nav-open .dwc-nav-trigger::after {
      transform: translateY(0) rotate(-45deg);
      inset-inline-start: 0;
  }



  .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon--chevron-right {
      transform: rotate(90deg);
      transition: 0.4s
  }

  .dwc-sidebar__dropdown-toggle [aria-expanded="true"] .dwc-nav__link__icon {
      transform: rotate(270deg)
  }

  .dwc-sidebar__dropdown-content {
      overflow: hidden;
      transition: var(--sidebar-transition) cubic-bezier(0.22, 0.61, 0.36, 1);
      padding-inline: var(--link-pad-x);
      padding-block: 0;
      background-color: var(--dropdown-content-bg)
  }


/*
  .dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul {
      padding-block: calc(var(--link-pad-y) * 0.8);
  }
*/
  .dwc-sidebar__dropdown-content .dwc-sidebar__nav__li {
      border: var(--dropdown-links-underline);
  }


  .dwc-sidebar__dropdown-toggle {
      inline-size: 100%;
      display: flex !important;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--link-gap);
      text-align: left;
      line-height: 1.3;
      padding-inline-start: var(--link-pad-x);
      position: relative;
      transition: var(--sidebar-link-transition);
  }


  .dwc-sidebar__dropdown ul .dwc-nav__link__text,
  .dwc-sidebar__dropdown button {
      transition: var(--sidebar-link-transition), outline 0s;
      border-radius: var(--link-border-radius);
      inline-size: 100%;
  }

  .dwc-sidebar__dropdown button,
  .dwc-sidebar__dropdown-toggle .dwc-nav__link__text {
      padding: var(--link-pad-y) 0;
  }

  .dwc-sidebar__dropdown-content ul .dwc-nav__link__text {
      padding: var(--link-pad-y) var(--link-pad-x);
  }

  .dwc-sidebar__dropdown-content ul:not([class*="level-"]:not(.level-1)  ul){
    padding-inline-start: calc(var(--dropdown-links-indent) - var(--link-pad-x));
    padding-block: var(--link-pad-y);
}

  .dwc-sidebar__dropdown-toggle button {
      margin-inline-start: auto;
      flex-grow: 1;
      padding-inline-end: var(--link-pad-x);
      position: absolute;
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
  }


/* LEVEL 1 STYLES */

/* Normal icon color for Level 1 */
.dwc-sidebar__dropdown-toggle.level-1 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right),
.dwc-nav__link__icon:not(.dwc-nav__home-btn *, .dwc-nav__link__icon--chevron-right, .dwc-nav__link__icon--chevron-left) {
    color: var(--lvl-1-icon-color);
    font-size:var(--lvl-1-icon-size)
}


/* Expanded background color for Level 1 */
.dwc-sidebar__dropdown-toggle.level-1:has([aria-expanded='true']) {
    background-color: var(--lvl-1-toggle-bg-active);
}

/* Dropdown content background for Level 1 */
.dwc-sidebar__dropdown-content.level-1 {
    background-color: var(--lvl-1-content-bg);  
}

/* LEVEL 2 STYLES */

/* Expanded background color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) {
    background-color: var(--lvl-2-toggle-bg-active);
}

/* Expanded text color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) .dwc-nav__link__text {
    color: var(--lvl-2-toggle-color-active);
}

/* Dropdown content background for Level 2 */
.dwc-sidebar__dropdown-content.level-2 {
    background-color: var(--lvl-2-content-bg);
    padding-inline-start: var(--lvl-2-indent);
}

/* Normal icon color and size for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right) {
    font-size:var(--lvl-2-icon-size)
}

.dwc-sidebar__dropdown-toggle.level-2 .dwc-nav__link__icon {
    color: var(--lvl-2-icon-color);
}

/* Icon color for Level 2 when expanded */
.level-2:has([aria-expanded='true']) .dwc-nav__link__icon {
    color: var(--lvl-2-icon-color);
}

/* Hover icon color for Level 2 when expanded */
li>.level-2:has([aria-expanded='true']):hover .dwc-nav__link__icon {
    color: var(--lvl-2-icon-hover-color) !important;
}

/* LEVEL 3 STYLES */

/* Expanded background color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) {
    background-color: var(--lvl-3-toggle-bg-active);
}

/* Expanded text color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) .dwc-nav__link__text {
    color: var(--lvl-3-toggle-color-active);
}

/* Dropdown content background for Level 3 */
.dwc-sidebar__dropdown-content.level-3 {
    background-color: var(--lvl-3-content-bg);
    padding-inline-start: var(--lvl-3-indent);
}

/* Normal icon color and size for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3 .dwc-nav__link__icon {
    color: var(--lvl-3-icon-color);
}

.dwc-sidebar__dropdown-toggle.level-3 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right) {   
    font-size:var(--lvl-3-icon-size)
}

/* Icon color for Level 3 when expanded */
.level-3:has([aria-expanded='true']) .dwc-nav__link__icon {
    color: var(--lvl-3-icon-color);
}

/* Hover icon color for Level 3 when expanded */
li>.level-3:has([aria-expanded='true']):hover .dwc-nav__link__icon {
    color: var(--lvl-3-icon-hover-color) !important;
}

  .dwc-sidebar__nav__li {
      border-bottom: var(--link-underline);
  }


  .dwc-sidebar__nav__link:hover,
  .dwc-nav__home-btn:hover,
  button.dwc-sidebar__nav__btn:hover,
  .dwc-sidebar__dropdown-toggle:hover {
      background: var(--link-hover-bg);
  }


  .dwc-sidebar__dropdown-content a {
      background: var(--dropdown-links-bg);
      color: var(--dropdown-links-color)
  }

  .dwc-sidebar__dropdown-content a:hover {
      background: var(--dropdown-links-hover-bg);
      color: var(--dropdown-links-hover-color)
  }

  button:hover .dwc-nav__link__text,
  .dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text,
  button:hover .dwc-nav__back__text,
  .dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text {
      color: var(--link-hover-color);
  }



  .dwc-nav__link__text {
      color: var(--panel-link-color);
      font-size: var(--link-txt-size);
  }

  .dwc-sidebar__nav__link::before {
      content: '';
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      position: absolute;
  }

  /* button:hover .dwc-nav__link__icon,
  li:hover .dwc-nav__link__icon {
      color: var(--link-icon-hover-color) !important;
  } */

  button:hover .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3 *), 
  li:hover > .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3:has([aria-expanded='true']) *),
li:hover > a .dwc-nav__link__icon{
    color: var(--link-icon-hover-color) !important;
}

  .dwc-nav__link__icon {
      font-size: var(--nav-icon-size);
      color: var(--panel-icon-color)
  }

  .dwc-nav__link__icon--chevron-right {
      margin-inline-start: auto;
  }

  
  .dwc-nav__link__icon--chevron-right,
  .dwc-nav__link__icon--chevron-left  {
    font-size: var(--chevron-size);
    color: var(--chevron-icon-color);
}

svg.dwc-nav__link__icon{
    width: var(--nav-icon-size);
    height: auto;
}

svg.dwc-nav__link__icon path {
    stroke: var(--panel-icon-color);
}

.dwc-sidebar__nav__link:hover > svg.dwc-nav__link__icon path {
    stroke:var(--link-icon-hover-color) !important;
  }

button:hover svg.dwc-nav__link__icon path:not(.level-2:has([aria-expanded='true']) *, .level-3 *), 
li:hover > .dwc-sidebar__dropdown-toggle svg.dwc-nav__link__icon path:not(.level-2:has([aria-expanded='true']) *, .level-3:has([aria-expanded='true']) *), 
li:hover > a svg.dwc-nav__link__icon path {
    color: var(--link-icon-hover-color) !important;
}


  .dwc-sidebar__nav__list-img {
      inline-size: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      object-position: top center;
      border-radius: var(--link-border-radius);
  }

  .dwc-sidebar__nav__panel-footer {
      inline-size: 100%;
      padding-block: var(--pad-m);
      gap: var(--link-gap);
      z-index: 5;
      padding-inline: var(--pad-m);
      border-top: var(--horizontal-line);
  }

  .dwc-sidebar__nav__panel-footer:not([data-builder-mode] *) {
      box-shadow: 0 6px 24px 32px var(--nav-bg);
  }

  .dwc-social-wrapper a {
      color: var(--social-color);
  }

  .dwc-social-wrapper a:hover {
      color: var(--social-hover-color)
  }

  .dwc-social-wrapper li {
      background: var(--social-bg);
      border-radius: var(--link-border-radius);
  }

  .dwc-social-wrapper li:hover {
      background: var(--social-hover-bg);

  }

  .dwc-social-wrapper i {
      color: var(--social-icon-color);
      font-size: var(--social-icon-size);
  }

  .dwc-social-wrapper li:hover i {
      color: var(--social-icon-hover-color)
  }

  .dwc-cta {
      justify-content: center;
      background: var(--cta-bg);
      inline-size: 100%;
      color: var(--cta-color);
      border-radius: var(--link-border-radius);
  }

  .dwc-cta:hover {
      background: var(--cta-hover-bg);
  }


  /*FOCUS STYLES*/

  .dwc-sidebar *:not(.dwc-sidebar .dwc-sidebar__nav__panel):focus-visible {
      outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
      outline-offset: var(--focus-outline-offset);
      transition: 0s;
  }

  .dwc-sidebar li:not(.dwc-sidebar__dropdown):focus-within {
      outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
  }

  .dwc-sidebar li:focus-within:has(:focus:not(:focus-visible)),
  #brx-header .dwc-sidebar li a:not(.dwc-sidebar__dropdown-toggle *):focus-visible,
  #brx-header .dwc-sidebar__nav__btn:not(.dwc-nav__back-btn):focus-visible,
  .dwc-sidebar__nav__panel:focus,
  .dwc-sidebar__nav__panel:focus-visible,
  .dwc-sidebar *:focus:not(:focus-visible),
  header:focus-visible {
      outline: none !important;
  }

  /*FOCUS STYLES END*/


  .dwc-slide-left {
      transform: translateX(-100%);
      z-index: 0;
  }

  .dwc-slide-right {
      transform: translateX(75%);
      z-index: 0;
      opacity: 0;
  }

  /* mobile menu toggle */
  .dwc-nav-trigger {
      border: none;
      background: none;
      padding: var(--pad-m)
  }

  /*MEDIA QUERY - MOBILE*/
  @media (max-width:1024px) {

      /*header and menu on mobile*/
      .brx-header-left #brx-header:not([data-builder-mode] *, .dwc-headroom.dwc-mobile *),
      .brx-header-right #brx-header:not([data-builder-mode] *) {
          position: relative;
          inline-size: 100%;
          block-size: auto;
      }

      /*main and footer*/
      .brx-header-left #brx-content,
      .brx-header-left #brx-footer,
      .brx-header-right #brx-content,
      .brx-header-right #brx-footer {
          margin: 0 !important;
      }

      .dwc-sidebar__nav {
          background: var(--nav-bg);
          inline-size: var(--sidebar-width);
          position: fixed;
          bottom: 0;
          inset-inline-start: 0;
          inset-block-start: 0;
          transform: translateX(-100%);
          transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
          min-block-size: 100vh;
          min-block-size: 100dvb;
      }

      .dwc-sidebar__nav__panel:not([data-builder-mode] *) {
          background: transparent;
      }

      .dwc-sidebar__nav__panel>div {
          background: var(--nav-bg);
      }

      .dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
          transform: translateX(0);
      }

      .dwc-nav__link__text {
          font-weight: 500;
      }

      .dwc-sidebar__logo-wrapper {
          inline-size: auto;
      }

      body.dwc-slide-nav-open {
          overflow: hidden;
          block-size: 100vh
      }

      .dwc-mobile-menu-overlay {
          background: var(--overlay-bg);
          position: fixed;
          inset-block-start: 0;
          bottom: 0;
          inset-inline-start: 0;
          inset-inline-end: 0;
          pointer-events: none;
          opacity: 0;
          transition: 0.4s 0.2s;
      }

      .dwc-slide-nav-open .dwc-mobile-menu-overlay {
          pointer-events: auto;
          opacity: var(--overlay-opacity);
      }

      /* RIGHT MENU ON MOBILE*/

      .brx-header-right .dwc-sidebar__nav {
          transform: translateX(100%);
          inset-inline-start: auto;
          inset-inline-end: 0;
      }

      .dwc-slide-nav-open.brx-header-right .dwc-sidebar__nav {
          transform: translateX(0%);
      }

      /* inside Bricks start*/
      [data-builder-mode] .dwc-sidebar__nav {
          inset-block-start: 120px;
          transform: translateX(0);
          border-top: dashed 1px gray;
          position: static;
          overflow: visible;
      }

      [data-builder-mode].brx-header-left #brx-header,
      [data-builder-mode].brx-header-right #brx-header {
          background: transparent;
      }

      /* inside Bricks end */




  }

  /*MEDIA QUERY - MOBILE ENDS */

  /* headroom*/

  .dwc-headroom.dwc-offcanvas .dwc-sidebar,
  .dwc-headroom.dwc-topbar-enabled .dwc-sidebar,
  .dwc-headroom.dwc-offcanvas .dwc-header-inner-wrap,
  .dwc-headroom.dwc-topbar-enabled .dwc-header-inner-wrap {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      transition: transform 1s ease;
  }


  /*.dwc-headroom.scroll-down .dwc-sidebar:not(.dwc-topbar-enabled *),*/
  .dwc-headroom.dwc-offcanvas.scroll-down .dwc-header-inner-wrap,
  .dwc-headroom.dwc-topbar-enabled.scroll-down .dwc-header-inner-wrap {
      transform: translateY(-100%);
  }


  @media (max-height: 667px) {

      .dwc-sidebar__nav__panel:not(.ng-scope .dwc-sidebar__nav__panel) {
    overflow-y:scroll;
    overscroll-behavior: contain;
     /*  min-block-size: 100vh;
  min-block-size: 100dvb;*/
} 

      .dwc-nav__panel__inner {
          overflow: hidden;
          flex-shrink: 0;
      }


  }


  /* MEDIA QUERY - MOBILE ENDS */



  /*SCROLLBARS*/
  .dwc-nav__panel__inner::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: transparent;
  }

  .dwc-nav__panel__inner::-webkit-scrollbar {
      inline-size: 0;
      background-color: transparent;
  }

  .dwc-nav__panel__inner::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: var(--nav-bg);
  }

  /* SCROLLBARS END */

  /* FADE IN OFFCANVS */

  .dwc-offcanvas-header{
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
  }

 .dwc-offcanvas-header nav{
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
  }

  body:has(.dwc-offcanvas-header) {
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
  }

  @keyframes dwc-header-fade-in {
      0% {
          opacity: 0;
      }

      100% {

          opacity: 1;
      }
  }


  /* INSIDE BRICKS */
  [data-builder-mode] .dwc-sidebar__nav__panel,
  [data-builder-mode].brx-header-left #brx-header,
  [data-builder-mode].brx-header-right #brx-header {
      position: static !important;
      outline: gray dashed 3px;
      padding-block-end: 20px;
      min-block-size: min(100vh, 600px);
      block-size: unset;
  }

  #brx-header.bricks-area {
      inline-size: 100% !important;
      min-block-size: unset !important;
      padding-block-end: 0 !important;
  }

  .bricks-draggable-item.dwc-sidebar {
      position: relative
  }

  .bricks-draggable-item.dwc-sidebar__nav {
      position: absolute;
      inset-block-start: 100%;
      flex-wrap: nowrap;
  }


  [data-builder-mode] .dwc-slide-right {
      opacity: 1 !important;
      transform: translateX(0) !important;
  }

  [data-builder-mode] .dwc-sidebar__nav {
      overflow: visible !important;
  }

  [data-builder-mode] .dwc-sidebar__nav__panel:hover {
      outline: yellow solid 3px;
      z-index: 100000
  }

  [data-builder-mode] .dwc-slide-right {
      opacity: 1;
      transform: translateX(0);
  }

  [data-builder-mode] button.dwc-sidebar__nav__btn,
  [data-builder-mode] .dwc-sidebar__nav__link,
  [data-builder-mode] .dwc-sidebar__nav__panel {
      position: relative;
  }

  [data-builder-mode] button.dwc-sidebar__nav__btn::after {
      content: 'TO ' '"'attr(data-title)'"' ' PANEL';
      position: absolute;
      bottom: 1px;
      left: 40px;
      font-size: 8px;
      font-weight: bold;      
      color: var(--label-color);
      letter-spacing: 1px;
    font-family: poppins, roboto;
  }

  [data-builder-mode] button.dwc-nav__back-btn::after {
      content: 'To previous panel';
      inset-inline-start: 32px;
  }

  [data-builder-mode] button.dwc-nav__home-btn::after {
      content: 'HOME';
      position: absolute;
      top: 80%;
      left: 48%;
      right: auto;
      transform: translateX(-50%);
      white-space: nowrap;
      opacity: 0.8;
      font-size: 8px;
      font-weight: bold;
      color: var(--label-color);
      letter-spacing: 1px;
    font-family: poppins, roboto;
  }

  [data-builder-mode] .dwc-sidebar__nav__panel::after {
      content: '"'attr(data-title)'"' ' Panel';
      position: absolute;
      top: 0;
      left: 100%;
      font-size: 18px;
      font-weight: bold;
      color: black;
      background: white;
      padding-inline: 2rem;
      letter-spacing: 1px;
      white-space: nowrap;
      writing-mode: vertical-lr;
  }


[data-builder-mode] .dwc-sidebar__dropdown-toggle >  button::before
{
    position: absolute;
    right: 100%; 
    color: var(--label-color);
    background-color: #ebebeb;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    font-family: poppins, roboto;
    padding: 4px;
    border-radius: 5px;    
}

[data-builder-mode] .dwc-sidebar__dropdown-content{
  overflow: visible;
}

[data-builder-mode] .dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown >  .dwc-sidebar__dropdown-toggle   >  button::before{
    content: 'L1';
}

[data-builder-mode] .dwc-sidebar__dropdown-toggle:not(.dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown > *,.dwc-sidebar__dropdown .dwc-sidebar__dropdown .dwc-sidebar__dropdown > *)  >  button::before{
    content: 'L2';
}

[data-builder-mode] .dwc-sidebar__dropdown-toggle >  button::before{
    content: 'L3';
    } 

/*
[data-builder-mode] .dwc-sidebar__dropdown-content:not(.dwc-sidebar__nav__li.is-active-element *, .is-active-element, :has(.is-active-element), .is-active-element + .dwc-sidebar__dropdown-content, :has(.is-active-element) + .dwc-sidebar__dropdown-content) {
    height: 0;
    overflow: hidden;
}*/



/* COLLAPSE SIDEBAR*/

.dwc-collapse-enabled #brx-header,
.dwc-nav__link__icon,
.dwc-social-wrapper li .icon,
.dwc-nav__link__text,
.dwc-nav__link__icon--chevron-right,
.dwc-social__text,
.dwc-show,
.dwc-hide,
.dwc-toggle-collapse .brxe-icon,
footer:not(.dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-enabled .dwc-site-wrapper>:not(header, .dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *),
.dwc-collapse-enabled main:not(.dwc-mobile *) {
    --sidebar-transition: 700ms;
    transition:
        transform var(--sidebar-transition) var(--collapse-ttf),
        opacity var(--opacity-transition),
        inline-size var(--sidebar-transition) var(--collapse-ttf) !important;
}

.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-rtl *),
.dwc-collapse-sidebar .dwc-social-wrapper li .icon:not(.dwc-rtl *) {
    transform: translateX(calc(var(--sidebar-width) - var(--collapse-offset)));
}

.dwc-rtl.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right),
.dwc-rtl.dwc-collapse-sidebar .dwc-social-wrapper li .icon{
    transform: translateX(calc((var(--sidebar-width) * -1) + var(--collapse-offset)));
}

.dwc-collapse-sidebar .dwc-show:not(.dwc-rtl *) {
    transform: translateX(calc(var(--sidebar-width) - (var(--collapse-offset) + var(--collapse-pad))));  
}

.dwc-collapse-sidebar .dwc-show {   
    opacity: 1;
}




.dwc-collapse-sidebar .dwc-nav__link__text,
.dwc-collapse-sidebar .dwc-nav__link__icon--chevron-right,
.dwc-collapse-sidebar .dwc-social-wrapper li span,
.dwc-collapse-sidebar .dwc-hide {
    opacity: 0;
}

.dwc-collapse-sidebar #brx-header:not(.dwc-rtl *) {
    transform: translateX(calc(-100% + var(--collapse-offset)))
}

.dwc-rtl.dwc-collapse-sidebar #brx-header {
    transform: translateX(calc(100% - var(--collapse-offset)))
}

.dwc-collapse-sidebar footer:not(.dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar .dwc-site-wrapper>:not(header, .dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar>main:not(.dwc-mobile *) {
    --sidebar-transition: 350ms;  
    inline-size: calc(100% - var(--collapse-offset)) !important;
    margin-inline-start: auto !important;
}

.dwc-collapse-enabled.brx-header-left #brx-content:not(.dwc-collapse-sidebar *, .dwc-mobile *), 
.dwc-collapse-enabled.brx-header-left #brx-footer:not(.dwc-collapse-sidebar *, .dwc-mobile *) {
    margin-inline-start: auto;
    inline-size: calc((100% + 15px) - var(--sidebar-width));
}


.dwc-toggle-collapse:not([data-builder-mode] *, .dwc-collapse-enabled .dwc-toggle-collapse) {
    display: none;
}



.dwc-collapse-sidebar .dwc-toggle-collapse .brxe-icon:not(.dwc-rtl *) {
    transform: rotate(180deg);
}

.dwc-rtl.dwc-collapse-sidebar .dwc-toggle-collapse .brxe-icon {
    transform: rotate(0deg) !important;
}

.dwc-rtl .dwc-toggle-collapse .brxe-icon {
    transform: rotate(180deg) !important;
}


.dwc-show:not(.dwc-collapse-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar .dwc-hide:not(.dwc-fade) {    
    opacity: 0;
    position: absolute;
}



/* WITH TOBAR ENABLED */
.dwc-topbar-enabled .dwc-toggle-collapse {
    position: absolute;
    inset-inline-start: var(--sidebar-width);
    inset-block-start: 100%;
    block-size: 100%;
    transition: left var(--sidebar-transition) var(--collapse-ttf);
    display: flex;
}

.dwc-topbar-enabled.dwc-mobile .dwc-toggle-collapse{
    display: none;
}

.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-toggle-collapse {

    inset-inline-start: var(--collapse-offset);

}

.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-header-inner-wrap.dwc-show {
    transform: translateX(0);
}


.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-auto-width *), 
.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-social-wrapper li .icon:not(.dwc-auto-width *) {
    transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
}

.dwc-collapse-sidebar.dwc-topbar-enabled #brx-header {
    transform: unset !important;
}

.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-sidebar__nav {
    transform: translateX(calc(-100% + var(--collapse-offset)));
}

.dwc-topbar-enabled .dwc-sidebar__nav {
    transition:
        transform var(--sidebar-transition) var(--collapse-ttf),
        opacity var(--opacity-transition),
        width var(--sidebar-transition) var(--collapse-ttf) !important;
}


/*  MANUAL WIDTH*/

.dwc-collapse-sidebar #brx-header:not(.dwc-auto-width *, .dwc-rtl *) {
    transform: translateX(calc(-100% + var(--collapse-w)));
} 

.dwc-rtl.dwc-collapse-sidebar #brx-header:not(.dwc-auto-width *) {
    transform: translateX(calc(100% - var(--collapse-w)));
} 

.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-auto-width *),
.dwc-collapse-sidebar .dwc-social-wrapper li .icon:not(.dwc-auto-width *) {
    transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
} 

.dwc-collapse-sidebar .dwc-show:not(.dwc-auto-width *) {
    opacity: 1;
    transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
}

   
.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-sidebar__nav:not(.dwc-auto-width *)  {
    transform: translateX(calc(-100% + var(--collapse-w))) ;
}

.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-toggle-collapse:not(.dwc-auto-width *)  {
    inset-inline-start: var(--collapse-w);
}

if (enableTopBar && !enableOffCanvas) {
    document.body.classList.add('dwc-topbar-enabled')
}


if (enableRTL) {
    document.body.classList.add('dwc-rtl')
}

// we can remove !enableOffCanvas if on mobile only to have overlay on desktop + headroom on mobile.
if (overlaySidebar && !enableOffCanvas) {
    document.body.classList.add('dwc-overlay-sidebar')
}

if (overlayTopBar && enableOffCanvas) {
    document.body.classList.add('dwc-overlay-topbar')
}

if (mobileMenuAboveHeader == 1) {
    document.body.classList.add('dwc-mobile-menu-over')
}

document.body.classList.add('show-nav')
//console.log('show nav')


//document.addEventListener('DOMContentLoaded', () => {
// COLLAPSE SIDEBAR startes
if (enableCollapsibleSidebar && !enableOffCanvas && !mq.matches) {
    const collapseToggle = document.querySelector('.dwc-toggle-collapse');
    const sidebarNav = document.querySelector('.dwc-sidebar__nav');
    let removedByMouseEnter = false; // Track if class was removed by hover

    document.body.classList.add('dwc-collapse-enabled');
    if (collapseAutoWidth) {
        document.body.classList.add('dwc-auto-width');
    } else {
        document.body.style.setProperty('--collapse-w', `${collapseWidth}px`);
        document.body.style.setProperty('--center-scrub', `${collapsecenterScrub}`);
    }

    // Toggle collapse on button click
    collapseToggle.addEventListener('click', function () {
        document.body.classList.toggle('dwc-collapse-sidebar');
        initCollapseContent(); goHome();
        saveCollapseStatus();  // Save the updated state after toggling
    });

    // Hover functionality
    if (hoverToExpandSidebar) {
        sidebarNav.addEventListener('mouseenter', function () {
            if (document.body.classList.contains('dwc-collapse-sidebar')) {
                document.body.classList.remove('dwc-collapse-sidebar');
                removedByMouseEnter = true;  // Mark that we explicitly removed it
            }
        });

        sidebarNav.addEventListener('mouseleave', function () {
            if (removedByMouseEnter) {
                document.body.classList.add('dwc-collapse-sidebar');
                initCollapseContent(); goHome()
                removedByMouseEnter = false;  // Reset the flag after re-adding
            }
        });
    }

    // expand when links are focused   

    let removedByFocus = false;
    let keepOpenOnEnter = false;
    const focusableElements = sidebarNav.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
    
    // Listen for 'keydown' on buttons within sidebarNav to detect Enter key presses
    sidebarNav.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' && event.target.tagName === 'BUTTON') {
            keepOpenOnEnter = true;
        }
    });
    
    sidebarNav.addEventListener('focusin', function (event) {
        if (document.body.classList.contains('dwc-collapse-sidebar')) {
            document.body.classList.remove('dwc-collapse-sidebar');
            removedByFocus = true;  // Mark that we explicitly removed it
        }
    });
    
    sidebarNav.addEventListener('focusout', function () {
        setTimeout(function () {
            const isFocusOutsideSidebar = [...focusableElements].every(el => !el.contains(document.activeElement));
    
            if (isFocusOutsideSidebar && removedByFocus && !keepOpenOnEnter) {
                document.body.classList.add('dwc-collapse-sidebar');
                initCollapseContent();
                goHome();
                removedByFocus = false;  // Reset the flag after re-adding
            }
    
            // Reset the Enter key flag after the check
            keepOpenOnEnter = false;
        }, 50);
    });
    
    

    
    // Run once on page load to apply the saved state
    loadCollapseStatus();


    //----- COLLAPSE ON PAGE LOAD

    if (collapseOnPageLoad) {
        document.body.classList.add('dwc-collapse-sidebar');
        saveCollapseStatus();  // Save the updated state after toggling
    }

    // Call the function when needed
    setCollapseOffset();
}

// COLLAPSE SIDEBAR FUNCTIONS


// // set offset variable
// function setCollapseOffset() {
//     // Get the padding values of .dwc-nav__panel__inner
//     const panelInner = document.querySelector('.dwc-nav__panel__inner');
//     if (!panelInner) return;  // Check if element exists

//     const panelStyles = getComputedStyle(panelInner);
//     const paddingLeft = parseFloat(panelStyles.paddingLeft);

//     // Get the width of .dwc-nav__link__icon
//     const iconElement = document.querySelector('.dwc-nav__link__icon');
//     if (!iconElement) return;  // Check if element exists

//     const iconWidth = iconElement.offsetWidth;
//     const iconWidthOffset = iconWidth / 2;

//     // Sum the paddings and icon width
//     const collapseOffset = (paddingLeft * offsetMultiplier) + iconWidth;

//     // Set the CSS variables on the body
//     document.body.style.setProperty('--collapse-offset', `${collapseOffset}px`);
//     document.body.style.setProperty('--icon-width-offset', `${iconWidthOffset}px`);
//     document.body.style.setProperty('--collapse-pad', `${paddingLeft}px`)
// }

// set offset variable
function setCollapseOffset() {
    // Get the padding values of .dwc-nav__panel__inner
    const panelInner = document.querySelector('.dwc-nav__panel__inner');
    if (!panelInner) return;  // Check if element exists

    const panelStyles = getComputedStyle(panelInner);
    const paddingLeft = parseFloat(panelStyles.paddingLeft);

    // Get the width of .dwc-nav__link__icon
    const iconElement = document.querySelector('.dwc-nav__link__icon');
    if (!iconElement) return;  // Check if element exists

    // Use getBoundingClientRect() which works for both HTML and SVG elements
    const iconRect = iconElement.getBoundingClientRect();
    const iconWidth = iconRect.width;
    const iconWidthOffset = iconWidth / 2;

    // Sum the paddings and icon width
    const collapseOffset = (paddingLeft * offsetMultiplier) + iconWidth;

    // Set the CSS variables on the body
    document.body.style.setProperty('--collapse-offset', `${collapseOffset}px`);
    document.body.style.setProperty('--icon-width-offset', `${iconWidthOffset}px`);
    document.body.style.setProperty('--collapse-pad', `${paddingLeft}px`);
}



//------ SAVE COLLAPASE STATE

function saveCollapseStatus() {
    if (saveCollapseState === 1) {
        const isCollapsed = document.body.classList.contains('dwc-collapse-sidebar');
        // Save the current state to localStorage
        localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
    }
}

// RESTORE COLLAPSE STATE
function loadCollapseStatus() {
    if (saveCollapseState === 1) {
        const savedState = localStorage.getItem('sidebarCollapsed');

        // If the state exists, apply the correct class to the body
        if (savedState === 'true') {
            document.body.classList.add('dwc-collapse-sidebar');
            // initCollapseContent();
        } else if (savedState === 'false') {
            document.body.classList.remove('dwc-collapse-sidebar');
        }
    }
}

// FUNCTIONS END

// IF COLLAPSE SIDEBAR ENDS


// COLLAPSE SIDEBAR ENDS

// Select the element
const listItem = document.querySelector('.dwc-sidebar__nav__li');

if (listItem) {
    // Get the computed height of the element
    const listItemHeight = listItem.offsetHeight;

    // Set the height as a CSS variable on the body
    document.body.style.setProperty('--list-item-height', `${listItemHeight}px`);
}




    const header = document.querySelector("header");
    const sidebar = document.querySelector('.dwc-sidebar');
    const navTrigger = document.querySelector(".dwc-nav-trigger");
    const closeBtn = document.querySelector(".dwc-sidebar__nav-close-btn");
    const mobileMenuOverlay = document.querySelector(".dwc-mobile-menu-overlay");
    const body = document.body;
    const nav = document.querySelector('.dwc-sidebar__nav');
    const homePanel = document.querySelector('.dwc-sidebar__nav__panel--home');
    const sidebarNavPanels = document.querySelectorAll(".dwc-sidebar__nav__panel");
    const dropdownToggles = document.querySelectorAll('.dwc-sidebar__dropdown-toggle button');
    const dropdownContents = document.querySelectorAll('.dwc-sidebar__dropdown-content');
    const menuLinks = document.querySelectorAll('.dwc-sidebar__nav__li a');
    const offCanvasMobileOnly = offCanvasBreakpoint.matches;
		const savedState = localStorage.getItem('sidebarCollapsed');

    const select = selector => document.querySelectorAll(selector);

    const initInert = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {

        if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
            nPanel.inert = true;
        } else if (enableOffCanvas && offCanvasMobileOnly) {
            nPanel.inert = true;
        } else {
            nPanel.inert = false;
        }
    });






    //OPEN FIRST DROP DOWN
    if (openFirstDropDown) {
        setTimeout(function () {
            dropdownToggles[0].click();
        }, 600);
    }

    // Get DROPWDOWN LEVELS
    if(dropdownContents){
    dropdownContents.forEach(function (element) {
        let level = 1;
        let parent = element.parentElement.closest('.dwc-sidebar__dropdown-content');

        // Calculate the level by checking the number of ancestors
        while (parent) {
            level++;
            parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
        }

        // Assign the appropriate level class to the dropdown content
        element.classList.add(`level-${level}`);

        // Find the previous sibling with the class .dwc-sidebar__dropdown-toggle
        const previousToggle = element.previousElementSibling;

        // Check if the previous sibling is a dropdown toggle and assign the level class
        if (previousToggle && previousToggle.classList.contains('dwc-sidebar__dropdown-toggle')) {
            previousToggle.classList.add(`level-${level}`);
        }
    });
}



    // CURRENT MENU ITEM ****************


    // Get the current page address without trailing slash
    var currentPage = window.location.pathname.replace(/\/$/, '');

    for (var i = 0; i < menuLinks.length; i++) {
        var link = menuLinks[i];

        // Extract the pathname from the link's href attribute without trailing slash
        var linkPathname = link.href.replace(window.location.origin, '').replace(/\/$/, '');

        // Check if the pathname matches the current page
        if (linkPathname === currentPage) {
            // Add the class 'dwc-current-menu-item' to the matching link
            link.classList.add("dwc-current-menu-item");

            // Break out of the loop since we found the matching link
            break;
        } else {
            // Skip to the next iteration if the link doesn't match
            continue;
        }
    }

    setTimeout(function () {

        if (enableCollapsibleSidebar && (collapseOnPageLoad || savedState === 'true')) { return }

        const currentDropDownLink = document.querySelector('.dwc-current-menu-item.dwc-nav__link__text');
        if (currentDropDownLink) {
            const parent = currentDropDownLink.closest('.dwc-sidebar__dropdown-content');
            if (parent) {
                const toggle = parent.previousElementSibling.querySelector('button');
                if (toggle) {
                    toggle.click();
                }
            }
            setTimeout(function () {
                currentDropDownLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                //console.log(currentDropDownLink);
            }, 500);
        }
    }, 2000);


    // CURRENT MENU ENDS **********

    // CURRENT MENU CHECK - we'll be using this to determine if to reset panels on navTrigger click or not
    var hasCurrentMenu = Array.from(document.querySelectorAll(".dwc-sidebar__nav__link.dwc-current-menu-item")).some(function (link) {
        var parentPanel = link.closest(".dwc-sidebar__nav__panel");
        return !parentPanel || !parentPanel.classList.contains("dwc-sidebar__nav__panel--home");
    });

    // CURRENT CHECK ENDS *********************


    const goHome = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {
        nPanel.classList.remove('dwc-slide-left');

        if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
            nPanel.classList.add('dwc-slide-right');
            nPanel.inert = true;
        } else {
            nPanel.inert = false;
            if (header && !mq.matches) {
                header.setAttribute('tabindex', 0);
                header.focus()
            }
        }
        select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
            sbtn.setAttribute('aria-expanded', 'false');
        })
        mobileMenuIsClosed()
        window.addEventListener("resize", mobileMenuIsClosed);
    });
    select('.dwc-nav__home-btn').forEach(hbtn => hbtn.addEventListener('click', goHome));


    nav.addEventListener('keydown', event => {
        if (nav.contains(event.target)) {
            if (event.key === 'Escape') {
                if (body.classList.contains('dwc-slide-nav-open')) {

                    if (navTrigger) {
                        navTrigger.click()
                        navTrigger.focus()
                    }
                    goHome();

                } else {
                    goHome();
                }
            }
        }
    });

    // for Bricks

    const offCanvasBackdrop = document.querySelector('.brx-offcanvas-backdrop');
    isBricks = body.classList.contains('bricks-is-frontend')

    if (isBricks) {

        if (offCanvasBackdrop) {
            offCanvasBackdrop.addEventListener('click', event => {
                if (body.classList.contains('dwc-slide-nav-open')) {
                    navTrigger.click()
                    goHome();
                    if (navTrigger) {
                        navTrigger.focus()
                    }
                } else {
                    goHome();
                }
            });
        }
    }

    //   bricks end



    select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
        sbtn.setAttribute('aria-expanded', 'false');
        sbtn.addEventListener('click', function (e) {
            initCollapseContent();
            dropdownToggles.forEach((togglebtn) => {
                togglebtn.setAttribute('aria-expanded', 'false');
            });
            e.preventDefault();
            e.stopPropagation();
            const targetId = this.getAttribute('data-title');
            const targetElement = document.querySelector(`.dwc-sidebar__nav__panel[data-title="${targetId}"]`);
            const parentPanel = this.closest('.dwc-sidebar__nav__panel');
            targetElement.classList.remove('dwc-slide-right');
            targetElement.inert = false;
            targetElement.setAttribute('tabindex', 0);
            targetElement.focus();
            ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
            sbtn.setAttribute('aria-expanded', ariaExpanded);
            select('.dwc-nav__back-btn').forEach(bbtn => {
                bbtn.addEventListener('click', function (e) {
                    ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
                    sbtn.setAttribute('aria-expanded', ariaExpanded);
                })
            })
            if (!parentPanel.classList.contains('dwc-slide-right')) {
                parentPanel.classList.add('dwc-slide-left');
                parentPanel.inert = true;
            }

            //handle back button data-title and back to feature
            let bbtn = targetElement.querySelector('.dwc-nav__back-btn');
            bbtnTitle = parentPanel.getAttribute('data-title');
            bbtn.setAttribute('data-title', bbtnTitle);
            bbtn.setAttribute('aria-label', 'Go back to ' + bbtnTitle + ' menu');
            //console.log(bbtnTitle)

            if (updateBackText) {
                bbtn.querySelector('.dwc-nav__back__text').textContent = 'back to ' + bbtnTitle;
            }

        });
    })
    select('.dwc-nav__back-btn').forEach(bbtn => {
        const btnTitle = bbtn.getAttribute('data-title');
        bbtn.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const returnBtnAttr = this.getAttribute('data-title');
            select('[data-title].dwc-sidebar__nav__panel').forEach(returnTarget => {
                if (returnTarget.getAttribute('data-title') === returnBtnAttr) {
                    returnTarget.classList.remove('dwc-slide-left');
                    returnTarget.inert = false;
                    if (returnTarget.classList.contains('dwc-sidebar__nav__panel--home')) {

                        if (header) {
                            header.setAttribute('tabindex', 0);
                            header.focus()
                        }
                    } else {
                        returnTarget.setAttribute('tabindex', 0);
                        returnTarget.focus();
                    }
                    if (returnTarget.classList.contains('dwc-slide-right')) {
                        returnTarget.classList.remove('dwc-slide-right');
                    }
                }
            });
            const parentPanel = this.closest('.dwc-sidebar__nav__panel');
            parentPanel.classList.add('dwc-slide-right');
            parentPanel.inert = true;
        });

    });
    select('.dwc-sidebar__nav__panel').forEach(panel => {
        const panelTitle = panel.getAttribute('data-title');
        panel.setAttribute('aria-label', panelTitle + ' menu');
    });

    // mobile trigger
    function mobileMenuIsClosed() {
        const offCanvasMobileOnly = offCanvasBreakpoint.matches;

        if (mq.matches || enableOffCanvas) {
            const isNavOpen = body.classList.contains("dwc-slide-nav-open");
            navTrigger.setAttribute("aria-expanded", isNavOpen);

            //  console.log(isNavOpen);

            if (isNavOpen) {
                if (!homePanel.classList.contains('dwc-slide-left')) {
                    homePanel.inert = false;
                }
            } else if (offCanvasMobileOnly && mq.matches) {
                homePanel.inert = true;  // Direct assignment for closed state
            } else {
                homePanel.inert = false;
            }
        } else {
            homePanel.inert = false;
        }
    }



    function setNoScroll() {

        let noScrollTimeout;
        let clickCount = 1;
        let isNavOpen = body.classList.contains('dwc-slide-nav-open');

        // Check if 'dwc-slide-nav-open' class is applied
        if (isNavOpen) {
            body.classList.add('dwc-no-scroll');
            clickCount++;
        } else {
            clickCount = 0;
        }
        //console.log(clickCount)


        // Toggle 'dwc-no-scroll' class on the body if clickCount is odd
        if (clickCount == 0) {

            // Set a timer to remove 'dwc-no-scroll' class after 0.8 seconds

            noScrollTimeout = setTimeout(() => {
                isNavOpen = body.classList.contains('dwc-slide-nav-open');
                // console.log(isNavOpen)
                if (!isNavOpen) {
                    body.classList.remove('dwc-no-scroll');
                }
            }, 900);

        } else {
            // If 'dwc-no-scroll' class is removed by clicking again, clear the timeout
            clearTimeout(noScrollTimeout);
        }
    }


    if (navTrigger) {
        navTrigger.addEventListener("click", function () {
            body.classList.toggle("dwc-slide-nav-open");
            setNoScroll()
            mobileMenuIsClosed()
            if (!hasCurrentMenu && !autoCurrentPosition) {
                initCollapseContent()
                goHome();// watch out for this, could be problematic  
            }
            dropdownToggles.forEach((togglebtn) => {
                // togglebtn.setAttribute('aria-expanded', 'false');
            });
        });
    }
    if (mobileMenuOverlay) {
        mobileMenuOverlay.addEventListener("click", function () {
            body.classList.remove("dwc-slide-nav-open");
            mobileMenuIsClosed()
            setNoScroll()
            if (!hasCurrentMenu && !autoCurrentPosition) {
                initCollapseContent()
                goHome()
            }
        });
    }

    if (closeBtn) {
        closeBtn.addEventListener("click", function () {
            body.classList.remove("dwc-slide-nav-open");
            mobileMenuIsClosed()
            setNoScroll()
            navTrigger.focus();
            if (!hasCurrentMenu && !autoCurrentPosition) {
                initCollapseContent()
                goHome()
            }
        });
    }

    //focus on mobile trigger when menu loses focus
    mobileMenuOverlay.addEventListener('focusin', (event) => {
        if (event.relatedTarget !== navTrigger) {
            navTrigger.focus();
        }
    });



    function updateSidebarPadding() {
        if (!enableOffCanvas) {
            // const headerHeight = header.clientHeight + 20;
            setTimeout(() => {
                const headerHeight = document.querySelector('.dwc-header-inner-wrap').clientHeight + 20;
                // Your code to use headerHeight goes here


                sidebarNavPanels.forEach(function (sidebarNavPanel) {
                    sidebarNavPanel.style.paddingTop = headerHeight + "px";
                });
                mobileMenuOverlay.style.marginTop = headerHeight - 20 + "px";
            }, 50);
        }

    }

    function resetPadding() {
        setTimeout(() => {
            sidebarNavPanels.forEach(function (sidebarNavPanel) {
                sidebarNavPanel.style.paddingTop = null;
                mobileMenuOverlay.style.marginTop = null;
            });
        }, 50);
    }

    function checkScreenSize() {
        if (mq.matches) {
            body.classList.add('dwc-mobile');
            updateSidebarPadding();
            //updateTopPadding()          
        } else {
            body.classList.remove('dwc-mobile');
            resetPadding();
            // resetTopPadding()
        }
    }

    // updateTopPadding()

    if (calcHeaderHeight) {
        checkScreenSize();
        window.addEventListener("resize", function () {
            resetTopPadding(); // Reset the top padding on resize
            updateTopPadding()
            checkScreenSize();
            mobileMenuIsClosed();
        });
    }


    initInert()



    //  *********  DROPDOWN TOGGLE FUNCNTIONALITY *******************


    function eCollapseContent(el, btn) {

        // Find the closest common ancestor, such as the <li> element
        const btnParentLi = btn.closest('li');

        dropdownContents.forEach((content) => {
            // Find the closest <li> ancestor for the dropdown content
            const contentParentLi = content.closest('li');

            // Check if the content and the button are at the same level
            const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;

            // Check if the content is an ancestor of the dropdown toggle being clicked
            const isAncestor = btn && content.contains(btn);

            // Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
            if (!isAncestor && isSameLevel) {
                content.style.maxHeight = '0';
                content.setAttribute('inert', 'true');

                // Update the aria-expanded attribute of the corresponding toggle button
                const correspondingToggle = content.previousElementSibling.querySelector('button');

                if (correspondingToggle) {
                    correspondingToggle.setAttribute('aria-expanded', 'false');
                }

            }
        });

    }


    function initCollapseContent(el, btn) {
        dropdownContents.forEach((content) => {
            content.style.maxHeight = '0';
            content.setAttribute('inert', 'true');
        });
      
       dropdownToggles.forEach((toggle) => {
            toggle.setAttribute('aria-expanded', 'false');
        });

    }



    function collapseContent(el, btn) {

        // Find the closest common ancestor, such as the <li> element
        const btnParentLi = btn.closest('li');

        dropdownContents.forEach((content) => {
            // Find the closest <li> ancestor for the dropdown content
            const contentParentLi = content.closest('li');

            // Check if the content and the button are at the same level
            const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;

            // Check if the content is an ancestor of the dropdown toggle being clicked
            const isAncestor = btn && content.contains(btn);

            // Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
            if (!isAncestor && isSameLevel) {
                content.style.maxHeight = '0';
                content.setAttribute('inert', 'true');

            }
        });

    }


    // Toggle the ARIA attributes for dropdown buttons
    function toggleAriaExpanded(activeToggle) {

        // If activeToggle is null, reset all buttons to 'false'
        if (activeToggle === null) {
            dropdownToggles.forEach((toggle) => {
                toggle.setAttribute('aria-expanded', 'false');
            });
            return; // Exit the function early since there's nothing else to do
        }

        dropdownToggles.forEach((toggle) => {
            if (toggle === activeToggle) {
                // Toggle the aria-expanded attribute for the clicked button
                const isOpen = toggle.getAttribute('aria-expanded') === 'true';
                toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
            } else {
                // Check if the toggle's parent is a sibling to the activeToggle's parent
                const toggleParent = toggle.closest('li');
                const activeToggleParent = activeToggle.closest('li');
                //  console.log('toggle parent', toggleParent)
                // console.log('active toggle parent', activeToggleParent)

                if (toggleParent && activeToggleParent && toggleParent.parentElement === activeToggleParent.parentElement) {
                    // Set all other buttons' aria-expanded to false if their parent is a sibling to the activeToggle's parent
                    toggle.setAttribute('aria-expanded', 'false');
                }
            }
        });
    }


    // Function to adjust the max-height of parent dropdowns when a nested dropdown is opened
    function adjustDropdownHeight(dropdownContent) {
        // Start with the nearest ancestor that is a dropdown content
        let parent = dropdownContent.closest('.dwc-sidebar__dropdown-content');


        while (parent) {
            // Calculate the cumulative height of all open children
            let totalHeight = Array.from(parent.children).reduce((total, child) => {
                // Add the child scrollHeight to the total if it's open
                total += child.scrollHeight;
                return total;
            }, 0);

            // Move to the next ancestor that is a dropdown content
            parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
            if (parent) {
                parentHeight = parent.scrollHeight;
                // Set the parent's max-height to the total calculated height
                parent.style.maxHeight = `${totalHeight + parentHeight}px`;
                //   console.log('child: ', dropdownContent)
                //   	console.log('parent: ', parent)
                //   console.log(`${totalHeight}px`)
                parent.inert = false;

                // console.log('parent new: ', parent)

                const parentParent = parent.closest('li')
                const toggle = parentParent.querySelector('.dwc-sidebar__dropdown-toggle button')
                toggle.setAttribute('aria-expanded', 'true');
            }
        }
    }

    // Initialize dropdowns
    function initializeDropdowns() {
        if(dropdownToggles){
        initCollapseContent();

        dropdownToggles.forEach((toggle, index) => {
            toggle.setAttribute('aria-expanded', 'false');

            const dropdownContent = dropdownContents[index];
            const parentDropdown = toggle.closest('.dwc-sidebar__dropdown');
            const dropdownLink = parentDropdown.querySelector('.dwc-nav__link__text');
            
            if(dropdownLink){
            toggle.setAttribute('aria-label', `Toggle ${dropdownLink.textContent} dropdown`);
            }

            toggle.addEventListener('click', function () {
                const isOpen = dropdownContent.style.maxHeight !== '0px';

                collapseContent(dropdownContent, this);

                if (!isOpen) {
                    dropdownContent.inert = false;
                }

                toggleAriaExpanded(this);

                if (parentDropdown.contains(this)) {
                    dropdownContent.style.maxHeight = isOpen ? '0' : `${dropdownContent.scrollHeight}px`;

                    // Only adjust if opening the dropdown
                    if (!isOpen) {
                        adjustDropdownHeight(dropdownContent);
                        //console.log('other child', dropdownContent)
                    }
                }
            });

            toggle.addEventListener('keydown', (event) => {
                closeDropdownOnEscape(event, toggle);
            });
        });
    }
    }


    // Close dropdowns on Escape key press
    function closeDropdownOnEscape(event, el) {
        if (event.key === 'Escape' && el.contains(event.target)) {
            event.stopPropagation();

            if (el.style.maxHeight !== '0px') {
                const button = el.previousElementSibling.querySelector('button');

                if (button) {
                    el.style.maxHeight = '0';
                    el.inert = true;
                    button.focus();
                } else {
                    initCollapseContent();
                    el.focus();
                }

                toggleAriaExpanded(null); // Reset all buttons to 'false'
            }
        }
    }

    // Initialize dropdowns
    initializeDropdowns();


    dropdownContents.forEach((dropdownContent) => {
        // Add event listeners for closing dropdowns on Escape key press
        dropdownContent.addEventListener('keydown', (event) => {
            closeDropdownOnEscape(event, dropdownContent);
        });

        // close dropdown on focus lost

        if (autoCloseDropdown) {
            const links = dropdownContent.querySelectorAll('a.dwc-nav__link__text');

            links.forEach(link => {
                const linkParent = link.closest('.dwc-sidebar__dropdown-content');
                const dropDownButton = linkParent.previousElementSibling.querySelector('button')

                link.addEventListener('blur', () => {


                    setTimeout(function () {
                        if ([...links].every(link => !document.activeElement.isSameNode(link))) {

                            eCollapseContent(dropdownContent, dropDownButton)

                        }
                    }, 50);
                });
            });
        }
    });



    // AUTOMATIC MENU POSITION

    function autoMenuPosition() {
      
      if (enableCollapsibleSidebar && (collapseOnPageLoad || savedState === 'true')) { return }
      
        // Select the current menu item
        const currentMenuItem = document.querySelector('.dwc-current-menu-item');

        // Select the parent panel of the current menu item
        if (currentMenuItem) {
            const parentPanel = currentMenuItem.closest('.dwc-sidebar__nav__panel');
            const parentIsHome = parentPanel.classList.contains('dwc-sidebar__nav__panel--home')

            // Check if the parent panel has the 'dwc-sidebar__nav__panel--home' class
            if (!parentIsHome) {
                // Select the back button in the current menu's parent panel
                const backButton = parentPanel.querySelector('.dwc-nav__back-btn');

                // Remove the class 'dwc-slide-right' from the current menu's parent panel
                parentPanel.classList.remove('dwc-slide-right');

                // Get the data-title attribute of the current menu's parent panel

                // Loop through all panels with class .dwc-sidebar__nav__panel
                const allPanels = document.querySelectorAll('.dwc-sidebar__nav__panel');

                // Select all slide buttons .dwc-sidebar__nav__btn of each panel
                const slideButtons = document.querySelectorAll('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)');

                slideButtons.forEach((slideButton) => {

                    allPanels.forEach((panel) => {

                        // Get the data-title attribute of the panel
                        const eachPanelTitle = panel.getAttribute('data-title');
                        // Get the back button in each of the panels
                        const panelBackButton = panel.querySelector('.dwc-nav__back-btn');

                        const slideTitle = slideButton.getAttribute('data-title')


                        if (slideTitle === eachPanelTitle) {
                            //get slide button parent
                            const slideParentPanel = slideButton.closest('.dwc-sidebar__nav__panel');
                            //get slide parent titlte attribute
                            const slideParentTitle = slideParentPanel.getAttribute('data-title')
                            // Set the back button data-title attribute to be equal to the data-title attribute of the slide parent panel
                            panelBackButton.setAttribute('data-title', slideParentTitle);
                            if(updateBackText){
                                panelBackButton.querySelector('.dwc-nav__back__text').textContent = 'back to ' + slideParentTitle
                            }
                            
                        }
                    });

                });

                homePanel.classList.add('dwc-slide-left');
            }
            if (!parentIsHome) {
                parentPanel.inert = false;
                homePanel.inert = true;
            }

            repositionReturnTargets()

        }
    }

    if (autoCurrentPosition) {
        setTimeout(function () {
            autoMenuPosition()
        }, 1000);
    }


    //function to reposition the hidden slides after automatically moving to current menu item panel
    // to put them in the right position to slide back to
    function repositionReturnTargets() {

        const panels = document.querySelectorAll('.dwc-sidebar__nav__panel:not(.dwc-sidebar__nav__panel--home)');
        let activePanel;

        // Find the first panel without 'dwc-slide-right' and 'dwc-slide-left' classes
        for (const panel of panels) {
            if (!panel.classList.contains('dwc-slide-right') && !panel.classList.contains('dwc-slide-left')) {
                activePanel = panel;
                break;
            }
        }

        let returnTarget;

        while (activePanel) {
            //  Get the data-title attribute of each panel
            const panelTitles = Array.from(panels).map(panel => panel.getAttribute('data-title'));

            //  Select the active back button in the active panel
            const activeBackButton = activePanel.querySelector('.dwc-nav__back-btn');

            // Find the returnTarget panel
            returnTarget = Array.from(panels).find(panel => panel.getAttribute('data-title') === activeBackButton.getAttribute('data-title'));

            // Remove and add classes to the returnTarget
            if (returnTarget) {
                returnTarget.classList.remove('dwc-slide-right');
                returnTarget.classList.add('dwc-slide-left');
            }

            // Update activePanel for the next iteration
            activePanel = returnTarget;
        }
    }

    // *********AUTOMATIC ENDS************





    // **************OFFCANVAS *****************

    document.addEventListener('DOMContentLoaded', () => {
    if (offCanvasPushContent) {

        // Create a new div element with the class "site-wrapper"
        var siteWrapper = document.createElement('div');
        siteWrapper.className = 'dwc-site-wrapper';
        // Move everything within the body tag into the "site-wrapper" div
        while (document.body.firstChild) {
            siteWrapper.appendChild(document.body.firstChild);
        }
        // Add the "site-wrapper" div back to the body
        document.body.appendChild(siteWrapper);
    }
})

    function offCanvasInit() {

        if (enableOffCanvas && offCanvasBreakpoint.matches) {
            document.body.classList.add('dwc-offcanvas');
            // console.log('offcanvas - 2')

            if (offCanvasPushContent) {
                document.body.classList.add('dwc-push-content');
                if (fixedNavTrigger && !mq.matches) {
                    document.body.classList.add('dwc-nav-trigger-is-fixed');
                } else {
                    document.body.classList.remove('dwc-nav-trigger-is-fixed');
                }

            }

            // Function to check if header element is focusable
            function isFocusable(element) {
                const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'AREA'];
                return (
                    focusableTags.includes(element.tagName) ||
                    element.hasAttribute('tabindex') ||
                    element.hasAttribute('contenteditable')
                );
            }


            // Function to set inert attribute for focusable elements
            function setInertForFocusableElements(inertValue) {
                const allElements = document.querySelectorAll('.dwc-header-inner-wrap *');
                const focusableElements = Array.from(allElements).filter(element => {
                    return isFocusable(element) && !element.classList.contains('dwc-nav-trigger');
                });

                focusableElements.forEach(element => {
                    if (element) {
                        element.inert = inertValue;
                    }
                });
            }

            // Click event listener for the 'nav-trigger'

            header.addEventListener('click', function () {
                const isNavOpen = document.body.classList.contains('dwc-slide-nav-open');

                // Check if the body contains the class 'dwc-slide-nav-open'
                if (isNavOpen) {
                    // Condition is true, set inert=true
                    setInertForFocusableElements(isNavOpen);
                } else {
                    // Condition is false, set inert=false
                    setInertForFocusableElements(isNavOpen);
                }
            });

        } else {
            document.body.classList.remove('dwc-push-content');
            document.body.classList.remove('dwc-offcanvas');
        }

    }
    offCanvasInit()
    window.addEventListener("resize", offCanvasInit);


    //close offcanvas when haslink is clicked



    if (enableOffCanvas) {
        const sidebarLinks = document.querySelectorAll('a.dwc-sidebar__nav__link');

        // Filter links with hash in the href attribute
        const hashLinks = Array.from(sidebarLinks).filter(link => link.getAttribute('href').includes('#'));

        // Add click event listener to each hash link
        hashLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                //   event.preventDefault(); // Prevent the default behavior of the link (e.g., navigating to the hash)

                // Perform a click action on the navTrigger button

                if (navTrigger) {
                    navTrigger.click();
                }
            });
        });
    }




    // headroom:
    // headroom:
function initializeHeadroom() {
    if (enableHeadroom && (enableOffCanvas || enableTopBar)) {

        if (offCanvasPushContent) return; // Early exit if offCanvasPushContent is true

        document.body.classList.add('dwc-headroom');
        const scrollUp = "scroll-up";
        const scrollDown = "scroll-down";
        let lastScroll = 0;

        // Check for scroll action
        window.addEventListener('scroll', () => {
            // Hide and reveal header
            const currentScroll = window.pageYOffset;
            if (currentScroll <= 200) {
                document.body.classList.remove(scrollUp);
                return;
            }

            if (currentScroll > lastScroll && !document.body.classList.contains(scrollDown)) {
                // Down
                document.body.classList.remove(scrollUp);
                document.body.classList.add(scrollDown);
            } else if (currentScroll < lastScroll && document.body.classList.contains(scrollDown)) {
                // Up
                document.body.classList.remove(scrollDown);
                document.body.classList.add(scrollUp);
            }
            lastScroll = currentScroll;
        });
    }
}

// Call the function to initialize headroom functionality
initializeHeadroom();

    // End scroll action


    //top Padding on first containers

    function updateTopPadding() {

        // Run the function if offCanvas is enabled or both topBar and headroom are enabled
        if (!enableOffCanvas && !(enableTopBar && enableHeadroom)) {
            return; // Exit early if neither condition is met
        }

        // Check if the media query strings for mq and offCanvasBreakpoint are the same
        if (mq.media === offCanvasBreakpoint.media) {
            // If the breakpoints are the same, run the function only if we're within the breakpoint
            if (mq.matches) {
                // Ensure the feature should run based on the configuration flags
                if (calcTopPadding && (enableHeadroom || enableTopBar)) {
                    // Check if the sidebar exists
                    if (sidebar) {
                        const header = document.querySelector('.dwc-header-inner-wrap');
                        if (header) {
                            const offsetPadding = header.clientHeight;

                            // Update padding for each sidebar panel
                            sidebarNavPanels.forEach(function (sidebarNavPanel) {
                                sidebarNavPanel.style.paddingTop = offsetPadding + "px";
                            });

                            // Adjust the top padding for the first child of the main container
                            const mainFirstChild = document.querySelector('main')?.firstElementChild;
                            if (mainFirstChild) {
                                const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
                                if(!offCanvasPushContent){
                                    mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px'; 
                                 }
                            }
                        } else {
                            console.warn('.dwc-header-inner-wrap not found.');
                        }
                    } else {
                        console.warn('Sidebar not found.');
                    }
                }
            }
        } else {
            // If the breakpoints are different, run the function as originally intended
            if (calcTopPadding && (enableHeadroom || enableTopBar)) {
                // Check if the sidebar exists
                if (sidebar) {
                    const header = document.querySelector('.dwc-header-inner-wrap');
                    if (header) {
                        const offsetPadding = header.clientHeight;

                        // Update padding for each sidebar panel
                        sidebarNavPanels.forEach(function (sidebarNavPanel) {
                            sidebarNavPanel.style.paddingTop = offsetPadding + "px";
                        });

                        // Adjust the top padding for the first child of the main container
                        const mainFirstChild = document.querySelector('main')?.firstElementChild;
                        if (mainFirstChild) {
                            const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
                            if(!offCanvasPushContent){
                               mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px'; 
                            }
                            
                        }
                    } else {
                        console.warn('.dwc-header-inner-wrap not found.');
                    }
                } else {
                    console.warn('Sidebar not found.');
                }
            }
        }
    }




    function resetTopPadding() {
        if (calcTopPadding && enableHeadroom) {
            sidebarNavPanels.forEach(function (sidebarNavPanel) {
                sidebarNavPanel.style.paddingTop = null;
            });

            const mainFirstChild = document.querySelector('main').firstElementChild;
            if (mainFirstChild) {
                mainFirstChild.style.paddingTop = null;
                // Reset the paddingTop using the stored initialPadding
                const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom);

                mainFirstChild.style.paddingTop = null;
            }
        }
    }

    //---top padding end

// Disable / Enable collapse on screen size change
let removedByMQ = false;  // Track if the class was removed by the media query

function updateCollapseStatus() {
    const currentlyCollapsed = document.body.classList.contains('dwc-collapse-sidebar');  // Check the current state

    if (mq.matches) {
        // If media query matches (max-width: 1024px), remove the class
        if (currentlyCollapsed) {
            document.body.classList.remove('dwc-collapse-sidebar');
            removedByMQ = true;  // Remember that MQ logic removed the class
            saveCollapseStatus();  // Save the updated state after toggling
        }
    } else {
        // If media query doesn't match, only add back if it was removed by this MQ logic
        if (removedByMQ) {
            document.body.classList.add('dwc-collapse-sidebar');
            removedByMQ = false;  // Reset the flag after re-adding
            saveCollapseStatus();  // Save the updated state after toggling
        }
    }
}

    //Document loaded end


//});


// --- ADD HEADER HEIGHT VARIABLE TO BODY ----

function debounce(func, delay) {
    let timeoutId;

    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Your existing code for adding the 'hasHeaderHeight' class
function addHeaderHeightClass() {


    if (!document.body) {
        // Body doesn't exist, keep checking 
        setTimeout(addHeaderHeightClass, 0);
        return;
    }

    let hasHeaderHeight = document.body.classList.contains('hasHeaderHeight');
    let header = document.querySelector('header');

    if (!hasHeaderHeight && header) {
        // Header exists, add the 'hasHeaderHeight' class
        document.body.classList.add('hasHeaderHeight');

        // Get the initial header height
        updateHeaderHeight();
    } else if (!hasHeaderHeight && !header) {
        // Header doesn't exist, keep checking 
        setTimeout(addHeaderHeightClass, 0);
    }
}

// Function to update header height and set the CSS variable
function updateHeaderHeight() {
    let sidebar = document.querySelector('.dwc-header-inner-wrap');


    if (document.body) {
        let headerHeight = sidebar.offsetHeight;
        document.body.style.setProperty('--dwc-header-height', `${headerHeight}px`);
    }
}

// Add the 'hasHeaderHeight' class and set initial header height
addHeaderHeightClass();

// Attach the debounced update function to the window resize event

function onResize() {
    updateHeaderHeight();
    updateCollapseStatus();
    // Add more functions here
}

window.addEventListener('resize', debounce(onResize, 50));
document.addEventListener('DOMContentLoaded', () => {
    updateHeaderHeight();
    updateTopPadding()
})



// -------HEADER HEIGHT ENDS -------------

// Smooth scroll to hashlink with an offset
function smoothScroll(target, offset) {
    const targetElement = document.querySelector(target);
    if (targetElement) {

        const targetPosition = targetElement.getBoundingClientRect().top -
            document.body.getBoundingClientRect().top -
            offset;
        window.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
        });

    }
}

// Listen for hash link clicks
if (offsetHashLinkScroll) {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            var headerElement = document.querySelector('.dwc-header-inner-wrap');
            var offset = headerElement.offsetHeight;
            e.preventDefault();
            event.stopPropagation();
            const href = this.getAttribute('href');
            smoothScroll(href, offset);
        });
    });
}