:root {     /* WIDTH AND SPACINGS */     --sidebar-width: min(90vw, 400px);     --pad-m: 1.25rem;     --pad-s: 0.75rem;     --pad-xs: 0.5rem;     --dropdown-links-indent: 10px;      /* vertical & horizontal header padding */     --header-pad-y: clamp(1rem, 0.716rem + 1.211vw, 1.75rem);     --header-pad-x: var(--pad-m);      /* links vertical & horizontal padding */     --link-pad-y: 0.7rem;     --link-pad-x: 0.5rem;      /* panel top & bottom padding */     --panel-block-pad: clamp(0.5rem, -1.375rem + 5vh, 2rem);      /* GAPS */     --link-gap: 1.125rem;     --list-gap: 0;      /* BACKGROUND COLORS */     --nav-bg: white;     --cta-bg: dimgray;     --link-bg: transparent;     --header-bg: gray;     --dropdown-content-bg: rgb(0 0 0 / 5%);     --dropdown-links-bg: transparent;     --skip-link-background: black;   	--hamburger-bg: transparent;     --collapse-icon-bg:#3b3b3b;      /* HOVER BACKGROUND */     --cta-hover-bg: black;     --link-hover-bg: rgb(0 0 0 / 5%);     --dropdown-links-hover-bg: rgb(0 0 0 / 8%);      /* TEXT COLORS */     --panel-title-color: black;     --panel-link-color: dimgray;     --cta-color: white;     --dropdown-links-color: dimgray;     --label-color: orangered;     --skip-link-color: white;     --social-color: dimgray;      /* HOVER TEXT COLORS */     --cta-hover-color: white;     --link-hover-color: black;     --dropdown-links-hover-color: black;     --social-hover-color: black;      /* ICON COLORS */     --panel-icon-color: dimgray;     --social-icon-color: var(--social-color);     --chevron-icon-color: var(--panel-icon-color);     --mobile-menu-trigger-color: white;      /* HOVER ICON COLORS */     --social-icon-hover-color: var(--social-hover-color);     --link-icon-hover-color: black;      /* FONT SIZES */     --panel-title-size: 1.125rem;     --panel-back-size: 0.6rem;     --link-txt-size: 0.875rem;     --nav-icon-size: 1.2rem;     --social-icon-size: var(--nav-icon-size);     --chevron-size: 1rem;     --collapse-icon-size: 30px;      /* CSS TRANSITIONS */     --sidebar-transition: 500ms;     --sidebar-ttf: cubic-bezier(1, 0, 0.25, 1);   	--collapse-ttf: cubic-bezier(0.1, 0.55, 0.35, 1);     --opacity-transition: 500ms 200ms;     --sidebar-link-transition: 500ms;      /* BORDER */     --link-border-radius: 0;     --horizontal-line: 1px solid rgb(0 0 0 / 10%);     --link-underline: var(--horizontal-line);     --dropdown-links-underline: none;     --sidebar-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75), 0px 5px 15px rgba(0, 0, 0, 0.3);      /* OVERLAY */     --overlay-bg: black;     --overlay-opacity: 0.5;      /* FOCUS STYLES */     --focus-outline-color: black;     --focus-outline-offset: 4px;     --focus-outline-width: 2px;      /* EXTRAS */     --current-link-bg: none;     --current-link-underline: solid 3px #9f6aff;      /* DROPDOWN LEVELS */      /* Indents */     --lvl-2-indent: var(--dropdown-links-indent);     --lvl-3-indent: var(--dropdown-links-indent);      /* Dropdown toggle background colors for expanded state */     --lvl-1-toggle-bg-active: var(--link-hover-bg);     --lvl-2-toggle-bg-active: var(--link-hover-bg);     --lvl-3-toggle-bg-active: var(--link-hover-bg);      /* Dropdown content background */     --lvl-1-content-bg: var(--dropdown-content-bg);     --lvl-2-content-bg: var(--dropdown-content-bg);     --lvl-3-content-bg: var(--dropdown-content-bg);      /* Text colors for expanded state */     --lvl-1-toggle-color-active: var(--panel-link-color);     --lvl-2-toggle-color-active: var(--panel-link-color);     --lvl-3-toggle-color-active: var(--panel-link-color);      /* Icon colors (normal) */     --lvl-1-icon-color: var(--chevron-icon-color);     --lvl-2-icon-color: var(--chevron-icon-color);     --lvl-3-icon-color: var(--chevron-icon-color);      /* Icon colors (hover) */     --lvl-1-icon-hover-color: var(--link-icon-hover-color);     --lvl-2-icon-hover-color: var(--link-icon-hover-color);     --lvl-3-icon-hover-color: var(--link-icon-hover-color);      /* Icon size */   	--lvl-1-icon-size: 1.8rem;     --lvl-2-icon-size: var(--nav-icon-size);   	--lvl-3-icon-size: var(--nav-icon-size); }    /* INSIDE BRICKS */ /* hide header/nav when not in main template */ [data-builder-mode].brx-header-left #brx-header:not(.postid-521 *), [data-builder-mode].brx-header-right #brx-header:not(.postid-521 *) {     display: none; }  /* site normal width when not in main template */ [data-builder-mode].brx-header-left #brx-content:not(.postid-521 *), [data-builder-mode].brx-header-right #brx-content:not(.postid-521 *), [data-builder-mode].brx-header-left #brx-footer:not(.postid-521 *), [data-builder-mode].brx-header-right #brx-footer:not(.postid-521 *) {     margin: 0 !important; }  .dwc-sidebar__nav:not(.show-nav .dwc-sidebar__nav, [data-builder-mode] .dwc-sidebar__nav){   display: none;   }
// Feature Toggles (1 = enabled, 0 = disabled)  // Automatically rename the text on the back button to show the panel name // e.g., 'Back to Reviews' instead of the default 'Back' const updateBackText = 1;  // Calculate header height for mobile menu top offset const calcHeaderHeight = 1;  // Automatically open the current menu item's panel const autoCurrentPosition = 1;  // Enable/disable the top bar and off-canvas menu const enableTopBar = 0; const enableOffCanvas = 0;  // Mobile and off-canvas breakpoints const mq = window.matchMedia("(max-width: 1024px)"); const offCanvasBreakpoint = window.matchMedia("(max-width:10024px)");  // Off-canvas options const offCanvasPushContent = 0; // Enable off-canvas content push (requires off-canvas to be enabled) const fixedNavTrigger = 1; // Fix the toggle button when pushing content  // Dropdown behavior options const openFirstDropDown = 0; // Open the first dropdown content on page load const autoCloseDropdown = 1; // Automatically close the dropdown when it loses focus  // Sidebar and layout options const overlaySidebar = 0; // Overlay the sidebar on a fullwidth page (requires off-canvas to be disabled) const overlayTopBar = 0; // Overlay the top bar when using off-canvas  // RTL (Right-to-Left) layout support const enableRTL = 0;  // Scrolling header reveal/hide effect const enableHeadroom = 1;  /*   NOTES:   - Off-canvas or top bar must be enabled for headroom to work   - If you don't want off-canvas on desktop but want the headroom effect on mobile,     enable off-canvas and set the off-canvas breakpoint to match `mq` (e.g., 1024px) */  // Padding and offset options const calcTopPadding = 1; // Adjust top padding of the first container when headroom is enabled const offsetHashLinkScroll = 0; // Add offset when scrolling to hash links (useful for sticky headers)  // Offcanvas/Mobile menu behavior const mobileMenuAboveHeader = 0; // Offcanvas/Mobile menu will overlap the top bar instead of displaying underneath  // COLLAPSE SIDEBAR OPTIONS const enableCollapsibleSidebar = 0; const collapseOnPageLoad = 0; const saveCollapseState = 1;  // Toggle whether to save the collapse state const hoverToExpandSidebar = 1; const collapseAutoWidth = 1; const collapseWidth = 80; // manual width, when autowidth is off const collapsecenterScrub = 0.85; // controls icons position on manual width const offsetMultiplier = 3; //controls sidebar width on auto width    if (enableOffCanvas && offCanvasBreakpoint.matches) {  document.body.classList.add('dwc-offcanvas');   //console.log('offcanvas - 1') }   
  /* 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);         });     }); }

Boeken

Aangedreven door
►
Noodzakelijke cookies maken essentiële functies van de site mogelijk, zoals veilig login en het aanpassen van voorkeuren. Ze slaan geen persoonsgegevens op.
Geen
►
Functionele cookies ondersteunen functies zoals het delen van inhoud op sociale media, het verzamelen van feedback en het inschakelen van gereedschappen van derden.
Geen
►
Analytische cookies volgen interacties van bezoekers en geven inzicht in statistieken zoals het aantal bezoekers, bouncepercentage en verkeersbronnen.
Geen
►
Advertentiecookies leveren gepersonaliseerde advertenties op basis van je eerdere bezoeken en analyseren de effectiviteit van advertentiecampagnes.
Geen
Aangedreven door