: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);         });     }); }     

Een tweegesprek over een vierkant

Een tweegesprek over een vierkant

(Gepubliceerd op LinkedIn, december 2022)

Door Jan Olthof en Robert van Hennik

Jan Olthof is psychotherapeut, systeemtherapeut en opleider bij de School voor Systemische
Opleidingen.

Robert van Hennik is dr. systeemtherapeut, onderzoeker en opleider. Hij werkt in zijn
praktijk Ordiver en bij het Lorentzhuis.

You’ll find your path, by walking it.
(Afrikaans gezegde)

Evil takes place within the generalization.
Good can only be delivered through the particular deed.
(William Blake)

Samenvatting

In 2021 verscheen in Systeemtherapie een artikel over het systemisch kompas. Dit artikel
baseerde zich op de hoofdstukken “Het maken van een behandelkader” en “Het creëren van
een therapeutische context” uit het Handboek Narratieve Psychotherapie dat in 2012
verscheen. In een samenspraak reflecteren Jan Olthof en Robert van Hennik over dit
concept, over hoe Jan Olthof het behandelkader in samenwerking met Walter Oppenoorth
ontwikkelde en hoe Robert van Hennik geïnspireerd raakte en het concept samen met
Veronique Limpens en Marieke Römer uitbreidde.

Inleiding

Op een zonnige zondagmiddag spraken wij, Jan Olthof en Robert van Hennik, met elkaar
over het behandelkader of systemisch kompas, weergegeven als eenvoudig vierkant. Het
ogenschijnlijk eenvoudige kader of kompas helpt therapeuten in samenspraak met
betrokkenen te navigeren in complexiteit. Complexiteit ontstaat wanneer interactie tussen
deelnemers emergeert onder invloed van meerdere, elkaar versterkende invloeden. Het
ontbreken van een duidelijk verband tussen oorzaak en gevolg verwart en het maakt dat
eenduidige, voor de hand liggende, gegeneraliseerde oplossingen te kort schieten.
Complexiteit is iets anders dan wat gecompliceerd of ingewikkeld is. Omgaan met
complexiteit vraagt vereenvoudiging. Vereenvoudigen (bij complexe vraagstukken), anders
dan simplificeren of reduceren (bij gecompliceerde vraagstukken), is bovenal een creatief
proces. Met een eenvoudig kader, betrokkenheid en durf navigeren we, vinden we onze
weg, terwijl wij deze bewandelen.

Jan Olthof (2012) schreef in zijn boek ‘Handboek Narratieve Psychotherapie’ een hoofdstuk
over de behandelcontext en het behandelkader. Het behandelkader werd er weergegeven
als een vierkant met op iedere hoek de aanduiding ‘ja-respons’. Het therapieproces is
opgedeeld in in 4 fasen. Deelnemers (sociaal en professioneel betrokkenen) kunnen aan de
hand van dit kader met elkaar afstemming zoeken over de vertelde feiten, verschillende
betekenissen hierbij, een plan, en de acties in overeenstemming met dat plan. Robert van

Hennik was geraakt door de eenvoud en bruikbaarheid van het model. Hij gebruikte het
sindsdien consequent in therapie, bij supervisie en lesgeven. Hij merkte dat cursisten het
gretig overnamen en erover schreven in hun eindwerkstukken. Het vierkant bracht ordening
in het onoverzichtelijke, moerassige systemisch werk dat wij doen. In dialoog met collega’s
Veronique Limpens en Marieke Römer werden er werkwijzen toegevoegd aan het model;
zoals het vragen naar ‘bezorgdheden’ (Rober, 2014), ‘waarden onder druk’ (White, 2007),
het ‘samen op weg plan’ (Madsen, 2012). In 2021 schreven van Hennik, Limpens en Romer
een artikel over het kader dat zij ‘Systemisch kompas’ zijn gaan noemen.

Wij, Jan en Robert, bogen ons over de ontstaansgeschiedenis van het vierkant, de uitwerking
en de bruikbaarheid van dit eenvoudige kader en kompas in ons complexe moerassige werk.
Wij kwamen te spreken over onze inspirator Gregory Bateson, over het geven van
consultatie en systeemtherapie. In dialoog kwamen er verhalen, metaforen boven en
herinneringen aan kantelpunten in de therapie. Deze reflectie is een verslag van ons
gesprek.

‘Rigor and imagination’

Systeemtherapie verloopt onvoorspelbaar en als we cliënten na afloop van een succesvolle
therapie vragen wat het verschil heeft gemaakt, dan worden vaak verrast door de
antwoorden hierover. ‘Ik heb nog nooit twee keer dezelfde therapie gegeven’, zegt Jan. Ons
werk is moeilijk te protocolleren, we moeten anticiperen op wat er onverwacht komt zegt
Robert. Het gaat over ontmoeten en improviseren, maar je hebt ook iets nodig wat houvast
geeft, waar je op terug kunt vallen als het moeilijk wordt, als je de weg kwijt dreigt te raken.
Het kader helpt daarbij, het kan fungeren als kaart of kompas, iets waarmee we ons
oriënteren kunnen in het moeras, iets waarmee we navigeren kunnen in de complexiteit van
samenleven.

Het gaat over ‘Rigor and Imagination’. Jan verwijst naar de titel van het boek (Weakland,
Wilder, 1981) dat over Gregory Bateson geschreven is. We raken in gesprek over Bateson, de
antropoloog en cyberneticus die de systeemtheorie koppelde aan sociale wetenschappen.
De wereld is niet opgebouwd uit geïsoleerde, te objectiveren elementen. Alles is met alles,
in wederkerig afhankelijke relaties, verbonden, als in een web. De onderzoeksgroep rond
Bateson (met o.a. Jackson, Haley, Watzlawick, Weakland) ontwikkelde hun theorie over
communicatie door goed te observeren. Zij waanden zich geen objectieve buitenstaander,
maar participerend observant in het systeem dat zij onderzochten. Er is immers geen
objectief referentie punt en wij kunnen de waarneming niet los zien van de waarnemer. Ze
bezochten frequent de dierentuin van San Francisco en bestudeerden daar interacties
tussen rivierotters. Ook dieren meta-communiceren. Zij geven een boodschap over de
boodschap en communiceren zo over of interactie spel of strijd is. Een kat kan je een klap
geven en daarbij de nagels intrekken. De boodschap over de boodschap is: ‘Deze klap is
spel’. ‘Weet je trouwens hoe Bateson betrokken raakte bij de rivierotters in de dierentuin’,
vraagt Jan.

Gregory Bateson (1972) werd gevraagd door de dierentuin in San Francisco. De rivierotters
in de dierentuinen gedroegen zich op onnatuurlijke wijze passief. Ze leken wel depressief.
Bateson observeerde de otters en constateerde dat ze niet meer met elkaar speelden.
Bateson observeerde en filmde de otters. Na verloop van tijd besloot hij een stuk papier aan

een ongebruikt filmlint, dat hij bij zich had, vast te binden. Hij wierp dit vervolgens in het
verblijf van de otters en trok het weer naar boven. Bateson herhaalde deze handeling enkele
malen en creëerde zo een verwachting. Na verloop van tijd merkte een van otters het
ongewone object op, bewoog ernaartoe en gaf het een klapje. Het papier bungelde aan het
lint. Een andere nieuwsgierige otter kwam naderbij en wilde het ook doen bewegen. De
eerste probeerde de tweede hierin tegen te houden en de derde lukte het om het papier
alsnog met een klap te doen bewegen. Er ontstond spel tussen de otters en het spel werd
voortgezet ook nadat Bateson het papier voorzichtig terugtrok. De medewerkers dachten
dat er een wonder was gebeurd. Bateson zei: ‘zolang er niets nieuws geïntroduceerd wordt
in de omgeving, zal er niets nieuws in interactie ontstaan’. Is de depressie behandeld? Met
het introduceren van verschil dat ertoe doet, veranderde de dynamiek tussen de otters en is
depressie er niet langer de uitkomst van. Was deze uitkomst op voorhand voorspelbaar?
Nee, depressie is geen doosje dat met de juiste handleiding altijd, voor iedereen op dezelfde
manier uitvouwbaar is. ‘Het nieuwe kan alleen maar voortkomen uit het willekeurige’, zei
Bateson hierover.

Hoe komen we hier nu op, vraagt Jan. We praten over improvisatie en oriëntatie, over
‘imagination and rigor’. We praten over het kader dat als kaart of kompas helpt te navigeren
in het moerassig landschap waarin we een weg zoeken. Therapie werkt als we verschil
kunnen maken m.b.t. posities, interactiepatronen en betekenisgeving. Robert: ‘ik denk
hierbij wel eens aan het schilderij ‘Duelo a Garrotazes’ van de Spaanse schilder Goya. Twee
mannen vechten met elkaar en ze zien niet dat ze in hun gevecht steeds verder wegzakken
in het moeras, waarin ze staan. Hun oplossing voor andere problemen is nu zelf het grootste
probleem geworden. Hoe meer ze van hetzelfde doen, hoe verder ze wegzakken in het
moeras. Kunnen ze variëren, van focus veranderen, samenwerken, op tijd een verschil
maken, om dreigend gevaar af te wenden?

(afbeelding: ‘Duelo a Garrotazes’ van de Spaanse schilder Goya)

Het kader, een systemisch kompas

Jan, je hebt mij eerder gezegd dat je het kader ziet als het belangrijkste van wat je
ontwikkeld hebt en ook dat je er 25 jaar met collega’s over nagedacht hebt totdat het deze
vorm kreeg. Wat is het verhaal hierachter? Het kader is ontwikkeld gedurende mijn werk en

betrokkenheid bij het RMPI in Barendrecht (inmiddels Yulius), vertelt Jan. Het RMPI was al in
de jaren 80 gestart met gezinsopnames. De voorziening bleek waardevol. Het gaf gezinnen
structuur en een thuis. Het bood gezinnen een nieuw status quo. Nadeel was dat de
gezinnen, vanwege diezelfde status quo, niet meer weg wilden gaan, inwonend werden. Er
werd een nieuwe jonge psychiater aangetrokken om de voorziening voor gezinsopname te
gaan leiden. Deze jonge psychiater was Walter Oppenoorth. Hij wilde de voorziening
hervormen, om verschil te kunnen maken. Hij vroeg Jan om met hem mee te doen: ‘Wil je bij
mij komen werken, zonder binnen te komen? Ik heb iemand nodig die met mij steeds de
context onderzoekt, zonder zelf onderdeel te zijn van het team.

We wilden de gezinsopnames laten slagen en trokken daarvoor alles uit de kast. We zetten
psychiatrie, psychofarmaca, systeemtherapie, ouderbegeleiding, psychodrama en
psychomotore therapie in. We kozen er uitdrukkelijk voor om samen te werken met ‘grotere
systeem’ van sociaal en professioneel betrokkenen. We werkten met capabele mensen met
een tomeloze inzet. Het resultaat na maanden was echter teleurstellend. Ondanks dat
iedereen zijn best deed lukte het niet om bij de gezinnen een wezenlijke verandering in gang
te zetten, een echt verschil dat een verschil uitmaakt. Het hulpaanbod bij de gezinsopnames
bleek en optelsom van modules, bouwstenen, zonder dat er een samenhang en afstemming
bleek te zijn. We dachten dat 1+1+1+1+1 een goede behandeling zou zijn. Ieder creëerde wel
met gezin veranderingen, maar die werd op een andere kant van het veld weer ongedaan
gemaakt. We ontwikkelden ons nomadisch team, het team als therapeutisch medium. Johan
Cruijff zei eens: ‘Je hebt niks aan 11 ééntallen, als er niet ook één elftal is’. Wij vroegen ons
af hoe we niet alleen de gezinnen, maar het systeem van alle betrokkenen, als een geheel
van interacterende deelnemers, in beweging zouden kunnen krijgen? In de praktijk hierover
is in 25 jaar het vierkant ontwikkeld.

Jan tekent een vierkant in een cirkel op de flipover. De cirkel staat voor de therapeutische
context. Voordat we konden behandelen stelden we de vraag of de context therapeutisch is.
De context is pas therapeutisch als er een “ja” van alle betrokkenen over samenwerking in
therapie is. Eerder gingen we daar te snel aan voorbij, dan gingen we van start met
gezinstherapie, terwijl de vader zich onder druk gezet voelde door de jeugdbescherming,
grootouders vader afgeraden hadden in therapie te gaan, moeder met hun zoon tegenover
vader stonden, de dochter in stilte twijfelde, de individueel therapeut van moeder zich
afvroeg of andere hulpverleners zich bewust waren van de emotionele mishandeling die
maar door bleef gaan. Als we geen ‘ja’ hebben van betrokkenen, dan stapt iedereen in elke
afzonderlijke sessie in een ander patroon. Dan raken partijen verdeeld, dan lukt het niet om
in afstemming tot één beweging te komen. Er ontstaat tegenwerking van deelnemers, die
zich niet voldoende gehoord hebben gevoeld. Wezenlijke verandering van het systeem als
geheel blijft uit. In voetbaltermen (Olthof, 2022) loopt ieder het veld op en begint naar eigen
inzichten en volle overtuiging het spel te verplaatsen. Het veld bij complexe systemen raakt
overvol en nergens ligt meer ruimte.

Robert gebruikt vaak de metafoor van ‘het vlot op een wilde rivier’ om ‘systemische
verandering’ uit te leggen. Als er 8 personen op een vlot op een wilde rivier zitten en één
persoon verandert van plek, dan zijn er op voorhand drie responsen denkbaar. (1) Het vlot
raakt uit evenwicht en slaat om. (2) De persoon in kwestie moet, om omslaan te voorkomen,
terug naar zijn/haar oude plek. (3) Iedereen zoekt in afstemming een nieuwe plek om het

vlot terug in evenwicht te krijgen. Voor dat laatste is er dat gezamenlijke ‘ja’ over afgestemd
bewegen nodig. Dat is in de praktijk niet zo gemakkelijk. Er zijn verschillende, vaak
conflicterende ideeën over de interpuncties. Het is nodig, zegt Jan, om de verschillende
perspectieven op een meta-niveau met elkaar te verbinden. Robert: Ik zoek dan vaak naar
een gemeenschappelijk belang. ‘Klopt het dat er iets gebeurt waar iedereen zorg over
heeft?’ Michael White interpreteerde psychisch lijden als daad van verzet. Men komt ermee
op voor ‘waarden onder druk’. Geïnspireerd door White zoekt Robert het gezamenlijke ‘ja-
respons’ op een uitspraak als: ‘er gebeurt iets, waar iedereen zorg over heeft, dat ingaat
tegen dat wat we in ons leven belangrijk vinden’. ‘Hoe kunnen we beter leren samenwerken
in overeenstemming met onze waarden’? Ja, dat is verbindende taal, zegt Jan. Het is een
verbindend patroon, een meta-patroon dat boven de conflicterende meningen over oorzaak
en oplossing uitgaat. Pas met het “ja” op samenwerking en een overstijgend verbindend
verhaal kunnen we naar binnengaan, therapie opstarten. Walter Oppenoorth zei vaak: ‘Ik ga
eerst zelf naar buiten om vervolgens met z’n allen terug naar binnen te gaan’.

Jan tekent het vierkantje in de cirkel en verdeelt het therapeutisch proces in vier stappen (1)
de vertelde feiten (2) een gemeenschappelijke, nieuwe betekenis (3) het voorstel tot
samenwerking en behandeling (4) samenwerking in overeenstemming met de gedeelde,
nieuwe betekenisgeving aan de klacht of het symptoom. (5) een verdwijnpunt als attractor.
Het verdwijnpunt als attractor betekent dat alle handelen in samenwerking gericht is op dit
punt in de verte. Deelnemers stellen elkaar hierover steeds de vragen: Hoe verhoudt wat we
nu samendoen zich tot het punt aan de horizon? Wat maakt het doen afnemen/ verdwijnen
van de klacht voor ons mogelijk?

Jan illustreert het behandelkader. Bij stap 1 luisterden wij naar wat ons verteld werd. Wij
schreven de gezinnen een brief waarin we ze hun eigen verhaal in hun woorden terug
vertelden. Maar wanneer je de wereld blijft ordenen met dezelfde vertelde feiten dan blijft
de uitkomst ook hetzelfde. Einstein zei al dat je met hetzelfde denken waarin het probleem
is ontstaan het probleem niet kunt oplossen. Connie palmen, vult Robert aan, zei ooit;
‘denken is op andere gedachten komen’. ‘Ja, dat is ook mooi’, zegt Jan. Hoe komen we met
elkaar op andere gedachten. Bij stap 2 zoeken we een gedeelde betekenis waarin het
symptoom niet geïsoleerd en gestoord is, maar verbonden en betekenisvol. Robert: ‘Hoe
zien we gedrag niet als pathologisch, maar als logisch in de context’. Jan: Een child slaapt nog
in bed bij haar ouders, en weigert naar school te gaan. Haar angst staat niet op zichzelf. Een
therapie gericht op het weer naar school gaan zonder de context- familie, school, buurt-
erbij te betrekken heeft niet zoveel kans van slagen. Kinderen gaan vanzelf wel weer naar
school als hun gedrag in een betekenisvol verhaal en als een welwillende bijdrage aan het
geheel wordt gerespecteerd. De moeder van het meisje voelt zich afgewezen door haar
ouders, is bang voor geweld in de partnerrelatie. Vader staat onder hoge druk op zijn werk,
is bang zijn werk en ook zijn partnerrelatie te verliezen. Hij zorgt voor zijn eigen vader die
alcoholist is. In dialoog verandert het verhaal. De dochter beschermt haar moeder door dicht
bij haar te blijven. Ouders durven hun relatie niet te bespreken, uit angst voor escalatie.
Vader lijdt onder werkomstandigheden. Het symptoom staat niet op zichzelf, woont in een
heel landschap van angst. Wij zoeken bij stap 2 een “ja” van deelnemers op een wezenlijk
verschillende, nieuwe en gemeenschappelijke betekenisgeving, waarbij het individuele, uit
de context geïsoleerde en afgesplitste symptoom opnieuw ingeschreven wordt in het
landschap van de familiegeschiedenis.

(afbeelding: Olthof, 2012, p256)

Stap 3 betreft het maken van een behandelplan. Robert en Jan kijken kritisch naar het nut
van het op voorhand plannen van interventies die aansluiten bij concrete doelen. Er bestaat
geen instructieve interactie, zei de bioloog Humberto Maturana. Verandering komt van
binnenuit en verloopt doorgaans onvoorspelbaar. Denken in doelen is net zo lineair als
denken in oorzaken. Daarom spreek ik liever van ‘ontwikkelingsgericht’ dan van
‘doelgericht’, zegt Robert. Als het nieuwe enkel voortkomt uit het willekeurige, dan moeten
we vooral helpen om variaties in handelingsvermogen te doen toenemen en de
handelingsruimten te vergroten. Jan zegt dat met het ‘ja’ op de betekenis en het plan de
nodige actie vaak als vanzelf duidelijk wordt. Er moet in het proces van afgestemd
samenwerken een hand van binnen zijn die een hand van buiten kan aannemen. Dat is de
kunst en dat vraagt om ambachtelijkheid in elke therapie.

Als verandering niet vanzelf gaat (terug naar school en naar het eigen bed) dan heeft het
symptoom (de angst) een verhaal te vertellen. De dochter, haar ouders, gesteund door
grootouders en betrokken hulpverleners delen de betekenis dat de angst hen allen
gevangenhoudt. De waarde ‘leven vanuit vrijheid’ staat, volgens de gezinsleden onder druk.
Alle deelnemers (sociaal en professioneel betrokkenen) willen samen werken om een leven
in overeenstemming met de waarde ‘vrijuit leven’ meer mogelijk te maken. Alle hulpaanbod
wordt afgestemd en georganiseerd in het kader van ‘vrijuit leven’. Een hand van binnenuit
pakt de helpende hand die van buiten komt aan. Wat het is wat gaat werken weten we nooit
zeker. Het is vaak niet het bedoelde effect van de bewust ingezette interventies. Het is vaak
het kleine verschil dat het verschil maakt, dat ertoe doet. Het kan zomaar het schilderij van
de stagiaire creatieve therapie zijn.

‘Het kleine verschil dat het verschil maakt, dat ertoe doet’. Ik had een intake met ouders,
hun dochters van 12 en 7, vertelt Robert. Het meisje van 7 schreeuwde uit volle borst
gedurende het gehele gesprek. Haar moeder zei: We moeten stoppen. Het gesprek is traumatiserend voor haar. Vader zei tegen mij: Zie je, dit gebeurt er nu altijd. Mijn dochter
gilt en krijgt zo altijd haar zin. Ouders kijken mij verwachtingsvol aan. Terwijl het meisje van
7 blijft gillen, vraag ik haar zus een opstelling te maken met poppetjes. Ik vraag haar er een
groen en rood blokje bij te zetten. Het groene blokje staat symbool voor de veerkracht en
het rode blokje staat symbool voor zorgen in het gezin. Het meisje van 12 zet haar zus boven
op het rode blokje, haar ouders er strak tegen aan en zichzelf op grote afstand van de
anderen. Ouders zijn geraakt, waren zich niet zo bewust van de eenzaamheid van hun
oudste dochter. De jongste blijft gillen. Ik bedacht mij dat met het beëindigen van de sessie
vooral het gevoel van onmacht bevestigd zou worden. In gedachten stelde ik mijzelf de
vraag: “Hoe maak ik verschil zonder het contact te verliezen”? Ik pakte het rode blokje en
gaf het aan het meisje, die het verbaasd aannam. ‘Ik heb jouw hulp nodig. Ik denk dat je iets
te vertellen hebt, wat we nog niet goed van je begrijpen. Ik denk dat het heel belangrijk is en
over het ‘rode blokje’ gaat. Kun je het blokje mee naar huis nemen, er goed op passen en er
een tekening over maken voor de volgende keer.’ Ze stopte het blokje in haar jaszak, zette
het thuis op haar nachtkasje en nam het de keer daarop, samen met de tekening, mee terug.
We konden samenwerken.

Je kunt de inzet van het blokje nooit met hetzelfde beoogde effect herhalen, zegt Jan. Hij
pakt een boek met foto’s over hekken. Ik kreeg het cadeau van een man die bij mij in
therapie was. Hij leed onder ernstige posttraumatische stress. Terloops spraken we,
gedurende een van de sessies, aan de hand van de metafoor van een hek. De man was loyaal
naar zijn familie, naar zijn werk, maar ook uitgeput vanwege geringe wederkerigheid. Hij
mocht niet opgeven, vond hij. Ik sprak met hem over een hek dat open staat, dat dicht kan,
dat helpt af te grenzen tussen leefwerelden. Na afloop vertelde hij mij dat het deze
metafoor was die hem verder had geholpen. Ik was mij daar niet van bewust geweest. Ook
dit kun je niet zomaar herhalen. Het werkt in deze relatie en deze situatie, op dit gegeven
moment.

Het verschil tussen een vliegtuig en een regenworm

Hoe kan het toch dat er zo sterk de behoefte is om de inhoud van therapie vast te leggen, er
one-size-fits-all interventies van te maken? Kan de inzet van het rode blokje consequent
toegepast worden bij angstige kinderen? Is het ook succesvol toegepast worden bij jongeren
van 13 jaar en ouder? Waarom is het zo moeilijk te accepteren dat het nieuwe emergeert in
spontane interacties, voortkomt uit het willekeurige; dat het een papier aan een filmlint, een
schilderij van de stagiaire, een rood houten blokje in een opstelling of de metafoor van een
hek kan zijn. Jan maakt in zijn boek Cruijffiaans Denken in de Narratieve Therapie (2022)
onderscheid tussen complex en ingewikkeld. Robert refereert aan het werk van de bioloog
en systeemdenker Jeremy Lent. Lent legt in zijn boek de Web of Meaning (2021) het verschil
uit tussen complex en gecompliceerd uit door een vergelijking te maken tussen een vliegtuig
en een regenworm. Een vliegtuig is gecompliceerd. Het vereist zeer veel kennis te weten hoe
het werkt, laat staan er een te bouwen. Alle componenten zijn planmatig geordend, de
onderlinge verhoudingen kunnen geanalyseerd worden. Het handelingsvermogen is
voorspelbaar. Gelukkig maar, anders stapte je er vast niet in. Een regenworm is een levend
systeem. Alle elementen zijn in talloze relaties betrokken op elkaar, verbonden door middel
van non-lineaire patronen met feedbackloops, die nooit precies beschreven of voorspeld
kunnen worden. We verwarren mechanische systemen, waarin reductionisme controle

geeft, met levende systemen, waarin we op basis van improvisatie en feedback steeds
opnieuw kunnen leren wat er nu werkt, maar een volgende keer wellicht niet meer.

Robert gebruikt het kader bij complexe consultatie vraagstukken in de GGZ. Het helpt de
focus te verplaatsen van de vraag; ‘wat is er aan de hand’ naar de vraag; ‘wie zijn betrokken
en van invloed’, van de vraag; ‘wat is er niet’ naar de vraag; ‘wat is er wel en wat is er
mogelijk’. Wij tekenen bij consultvragen allereerst een netwerkkaart. Daarbij brengen wij
niet enkel de kwantiteit van het netwerk in beeld (wie zijn er allemaal), maar ook de
kwaliteit van de relaties (hoe verhouden we ons tot elkaar). We proberen met alle
betrokkenen in contact te komen en we stellen in overleg met hen een leergemeenschap
samen die bestaat uit sociaal en professioneel betrokkenen. De leergemeenschap leert op
basis van feedback over de samenwerking, de aanpak en ontwikkelingen. Hierbij maken we
gebruik van het kader, dat we systemisch kompas zijn gaan noemen.

(afbeelding: Van Hennik, Limpens, Römer, 2021 p. 208)

Ik denk aan Myrna, een 24-jarige vrouw die i.v.m. dwang, depressie en anorexia opgenomen
was in een therapeutische gemeenschap. Er werd om consultatie gevraagd vanwege een
impasse. De sociotherapeuten wilde dat de vrouw (die ernstig ondergewicht had) terug zou
gaan naar de eetkliniek. De eetkliniek wilde de reeds afgeronde therapie niet herhalen en
adviseerde opname op een PAAZ. Ouders dreigden met een klacht als dat zou gebeuren. De
gedragswetenschapper/ therapeut ontdekte onbehandeld trauma en wil therapie bieden.
De sociotherapeuten voelen zich niet gesteund door de gedragswetenschapper. Myrna wilde
bij haar ouders wonen, maar verbood de therapeut haar ouders in te lichten over haar
suïcidaliteit. Met het samenstellen van de leergemeenschap evalueerden we in eerste
instantie de samenwerking tussen alle deelnemers. Het lukte om een gezamenlijk verhaal en
plan te maken. Myrna ging met intensieve ambulante therapie en een crisisplan terug bij
haar ouders wonen. Tegen verwachting stabiliseerde zij thuis. Zoals zo vaak waren we
verrast over het antwoord dat Myrna gaf toen we haar vroegen wat voor haar het verschil
gemaakt had. Myrna wees op een herinnering waarover haar vader vertelde. Vader
herinnerde zich de zwemlessen van vroeger. Alle kinderen sprongen in het water. Myrna
bleef bibberend aan de kant staan. Dit gebeurde elke les, keer op keer. Aanmoedigingen van
vader en de zwemleraar hielpen niet, integendeel. Toen vader en de zwemleraar niets meer
verwachtten, dwaalde vader zijn blik steeds vaker af. Plotseling zag hij in een ooghoek zijn
dochter in het zwembad, zwemmen als een vis. Myrna had het uitgelegd: Pas toen niemand
keek en niemand druk uitoefende, durfde ik het water in te springen. De herinnering aan dit
verhaal had Myrna moed gegeven. ‘Ik durfde het leven in te springen en erop te vertrouwen
dat het leven mij zou kunnen dragen, zoals het zwembadwater mij vroeger droeg’.

Jan en Robert kijken naar de flipover met daarop de cirkel en het vierkant getekend. Nog een
keer Bateson dan. Niet het papier of de inkt maar het verschil tussen beiden geeft ons de
informatie waar wij verhaal van maakten. We beëindigen ons gesprek

Jan Olthof en Robert van Hennik

Literatuur

  • Bateson, G. (1972). Steps to an ecology of mind. Northvale, NJ: Jason Aronson, Inc.
  • Lent, J. (2021). The Web of meaning. Integrating Science and Traditional Wisdom to Find our Place in the
    Universe.
    London: New Society Publishers.
  • Madsen, W.C. (2009). Collaborative helping: A practice framework for family-centered services. Family Process,
    48: 103-116.
  • Rober, P. (2014). Gezinstherapie in de praktijk. Acco: Leuven.
  • Olthof, J. (2012). Handboek narratieve psychotherapie. Enschede: De Tijdstroom.
  • Olthof, J. (2022). Cruijffiaans denken in de narratieve systeemtherapie. Bunde: Narrare.
  • Van Hennik, R., Limpens, V., Römer, M. (2021). Systemisch kompas, samenwerken, afstemmen en koers uitzetten
    in het veranderproces van systeemtherapie, supervisie en opleiding.
    Systeemtherapie 33: p.101-117.
  • White, M. (2004). Narrative practice and exotic lives: Resurrecting diversity in everyday life. Adelaide, South
    Australia: Dulwich Centre Publications.
  • Wilder-Mott, C., Weakland, J. (1981). Rigor and imagination. Essays from the legacy of Gregory Bateson. New
    York: Praegher.