/*prevent FOUC on mobile when using sidebar */
.dwc-mobile :is(.bricks-is-frontend.brx-header-left, .bricks-is-frontend.brx-header-right) #brx-header {
  position: relative;
  inline-size: 100%;
  flex-direction: column;
}

.dwc-mobile .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is(#brx-content, #brx-footer) {
  margin-inline-start: 0;
}

/*prevent FOUC on desktop when using sidebar */
.bricks-is-frontend:is(.brx-header-left, .brx-header-right):not(.show-nav) #dwc_nav_wrapper {
  display: none;
}

/*=== sidebar css ===*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]).no-scroll {
  overflow: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc_nav_wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #dwc-nest-menu .brxe-toggle {
  display: none !important;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header :is(.brxe-code, .dwc-nest-menu-overlay) {
  display: none;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #mobile_menu_top {
  min-block-size: var(--top-offset);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu:not( [data-hide-close-bar = 'true']) .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) + 1px) !important;

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu:not( [data-submenu-reveal = 'slide']) .brx-dropdown-content:not([data-submenu-reveal = 'slide'] *) {  
  inset-inline-start: 0;
  inset-block-start: unset !important;
  overflow: hidden;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
  visibility: hidden;  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;
  min-inline-size: var(--mobile-menu-width);

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button:not([data-submenu-reveal = 'expand'] button)  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal = 'slide'] > .brx-submenu-toggle button  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

/* sidebar css ends*/



/*sidebar in builder*/
/*=== sidebar css ===*/
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  --top-offset: 40px;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc_nav_wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #dwc-nest-menu .brxe-toggle {
  display: none !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #mobile_menu_top {
  min-block-size: var(--top-offset);
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) - 1px) !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;  
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu {
  margin: 0 !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .brx-nav-nested-items {  
  flex-direction: column !important;  
}
   
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-toggle--open.brxe-toggle {
  display: flex !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brx-nav-nested-items {
  position: relative !Important;
  background: var(--mobile-menu-bg) !important;
  align-items: stretch;
  flex: 1;
}
 
/* MENU CTA (LAST BUTTON) */
:is(.brx-header-left, .brx-header-right)[data-builder-window] [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu-top {
  min-block-size: 80px !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-nav-items {
  overflow-y: scroll;
}

:is(.brx-header-left, .brx-header-right)[data-builder-mode] .brx-dropdown-content {
  min-inline-size: var(--mobile-menu-width);
  position: static;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  flex-wrap: nowrap;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brx-dropdown-content {   
  visibility: visible !important;
  opacity: 1;
}

/*OVERLAY SIDEBAR*/


html:not(.dwc-mobile):has([data-overlay-sidebar=true])  {
 --mobile-menu-bg: rgb(255 255 255 / 0%);
  --menu-item-border: solid 1px rgb(255 255 255 / 50%);
 
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer){
  margin: 0 !important
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer) :where(section):not(section>section) {
  padding-inline-start: calc(var(--mobile-menu-width) + clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem));
  max-inline-size: 100%
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) #brx-header {
  border-radius: var(--overlay-sidebar-radius);
  overflow: hidden;
  background: var(--overlay-sidebar-bg);
  box-shadow: var(--overlay-sidebar-shadow) !important;
  inset: var(--overlay-sidebar-inset);
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) .dwc-nest-header{
  backdrop-filter: blur(13px);
  background: transparent !important;
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]):not([data-builder-modee])  .brx-dropdown-content {
   background-color: rgb(255 255 255 / 100%);
}

/*NO BRX-OPEN STYLES*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column !important;
}


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu.brxe-nav-nested .brxe-dropdown .brx-dropdown-content {
      visibility: visible;
      min-inline-size: var(--mobile-menu-width) !important;
  }


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-dropdown-content {
   position: static;
}
class SidebarNavigation {
  constructor(options = {}) {
    // Basic configuration properties
    this.config = {
      minWidth: options.minWidth || MegaMenuCONFIG.minWidth, // Using external minWidth variable
      menuSelector: options.menuSelector || '.dwc-nest-menu',
      openClass: options.openClass || 'brx-open',
      activeClasses: options.activeClasses || ['open', 'active'],
      leftHeaderClass: options.leftHeaderClass || 'brx-header-left',
      rightHeaderClass: options.rightHeaderClass || 'brx-header-right',
      debounceDelay: options.debounceDelay || 100,
      menuItemClickDelay: options.menuItemClickDelay || 300
    };
    
    // Set dependent selectors
    const menuSelector = this.config.menuSelector;
    this.config.submenuToggleSelector = options.submenuToggleSelector || `${menuSelector} .brx-submenu-toggle`;
    this.config.dropdownSelector = options.dropdownSelector || `${menuSelector} .brxe-dropdown`;
    this.config.dropdownContentSelector = options.dropdownContentSelector || `${menuSelector} .brx-dropdown-content`;
    
    // State
    this.previousHeaderClass = null;
    this.dropdownClickHandlers = new Map();
    this.menuHoverHandlers = null;
    this.menuItemClickTimeout = null;
    this.keyboardNavHandler = null;
    this.cachedFocusableElements = null;
    this.cachedElements = {
      menuElement: null,
      navElement: null,
      dropdowns: null,
      dropdownToggles: null,
      menuItems: null
    };
    
    // Bind methods to this instance
    this.handleResize = this.debounce(this.handleMenu.bind(this), this.config.debounceDelay);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }
  
  // Initialize everything - called once
  init() {
    // Wait for DOM to be fully loaded before attaching events
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => {
        this.initAfterDOMLoaded();
      }, { once: true });
    } else {
      this.initAfterDOMLoaded();
    }
    
    return this;
  }
  
  // Separate initialization method to run after DOM is loaded
  initAfterDOMLoaded() {
    // Cache DOM elements once
    this.cacheElements();
    
    // Setup resize event with passive flag
    window.addEventListener('resize', this.handleResize, { passive: true });
    
    // Setup mutation observer for critical class changes only
    this.setupMutationObserver();
    
    // Initial setup based on current screen size
    this.handleMenu();
    
    // Cache focusable elements once if header class is present
    if (this.hasHeaderClass()) {
      this.cacheFocusableElements();
      this.setupMenuFocusNavigation();
    }
  }
  
  // Cache all required DOM elements upfront
  cacheElements() {
    this.cachedElements.menuElement = document.querySelector(this.config.menuSelector);
    
    if (this.cachedElements.menuElement) {
      this.cachedElements.navElement = this.cachedElements.menuElement.querySelector('.dwc-nest-nav-items');
      this.cachedElements.dropdowns = Array.from(document.querySelectorAll(this.config.dropdownSelector));
      this.cachedElements.dropdownToggles = Array.from(document.querySelectorAll(this.config.submenuToggleSelector));
      this.cachedElements.menuItems = Array.from(document.querySelectorAll(`${this.config.menuSelector} .menu-item`));
    }
  }
  
  // Set up a focused mutation observer only for dropdown state changes
  setupMutationObserver() {
    if (!this.cachedElements.dropdowns || this.cachedElements.dropdowns.length === 0) return;
    
    const callback = (mutations) => {
      for (let mutation of mutations) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          const target = mutation.target;
          const prevClassList = mutation.oldValue ? mutation.oldValue.split(' ') : [];
          const hadBothBefore = prevClassList.includes('open') && prevClassList.includes('active');
          const hasBothNow = target.classList.contains('open') && target.classList.contains('active');
    
          if (hadBothBefore !== hasBothNow) {
            this.updateDropdownAccessibility();
            break; // Only need to update once per batch
          }
        }
      }
    };
    
    // Create observer with optimized options
    this.classObserver = new MutationObserver(callback);
    
    // Observe only the dropdown elements
    this.cachedElements.dropdowns.forEach(dropdown => {
      this.classObserver.observe(dropdown, { 
        attributes: true, 
        attributeFilter: ['class'], 
        attributeOldValue: true 
      });
    });
  }
  
  // Cache focusable elements for keyboard navigation
  cacheFocusableElements() {
    if (!this.cachedElements.navElement) return;
    
    // Get direct children of nav
    const directChildren = Array.from(this.cachedElements.navElement.children);
    
    // Find the first focusable element within each direct child
    this.cachedFocusableElements = directChildren.map(child => {
      // Check if the child itself is focusable
      if (child.matches('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) {
        return child;
      }
      // Otherwise, find the first focusable element within this child
      return child.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
    }).filter(Boolean); // Remove null/undefined values
  }
  
  // Clean up all event listeners and observers
  destroy() {
    // Clean up the mutation observer
    if (this.classObserver) {
      this.classObserver.disconnect();
      this.classObserver = null;
    }
    
    // Clean up resize listener
    window.removeEventListener('resize', this.handleResize);
    
    // Clean up click handlers
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
    
    // Clean up hover handlers
    this.cleanupMenuHover();
    
    // Clean up menu item click handlers
    this.cleanupMenuItemClicks();
    
    // Clean up outside click handler
    document.removeEventListener('click', this.handleOutsideClick);
    
    // Clean up keyboard navigation
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler);
      this.keyboardNavHandler = null;
    }
    
    // Clear any pending timeouts
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  // Utility methods
  hasHeaderClass() {
    return document.body.classList.contains(this.config.leftHeaderClass) || 
           document.body.classList.contains(this.config.rightHeaderClass);
  }
  
  debounce(func, delay) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  }

  // Check if an element has all the required active classes
  hasAllActiveClasses(element) {
    return this.config.activeClasses.every(className => element.classList.contains(className));
  }
  
  // Toggle all active classes on an element
  toggleActiveClasses(element) {
    this.config.activeClasses.forEach(className => {
      element.classList.toggle(className);
    });
  }
  
  // Core functionality methods
  handleMenu() {
    if (!this.cachedElements.menuElement) return;
    if (!this.hasHeaderClass() && !this.previousHeaderClass) return;

    const screenWidth = window.innerWidth;
    const isLargeScreen = screenWidth >= this.config.minWidth;
    const menuElement = this.cachedElements.menuElement;

    if (!isLargeScreen) {
      // Save which class was present before removal
      if (this.hasHeaderClass()) {
        this.previousHeaderClass = document.body.classList.contains(this.config.leftHeaderClass) 
          ? this.config.leftHeaderClass 
          : this.config.rightHeaderClass;
        
        // Remove header classes
        document.body.classList.remove(this.config.leftHeaderClass, this.config.rightHeaderClass);
        menuElement.classList.remove(this.config.openClass);
        
        // Reset accessibility attributes
        this.resetAccessibilityAttributes();
      }
      
      // Clean up event handlers for mobile view
      this.cleanupMenuHover();
      this.cleanupMenuItemClicks();
      this.cleanupDropdownHandlers();
      document.removeEventListener('click', this.handleOutsideClick);
      
      return;
    }

    // Large screen behavior
    if (!this.hasHeaderClass() && this.previousHeaderClass) {
      document.body.classList.add(this.previousHeaderClass);
    }

    if (this.hasHeaderClass()) {
      if (!menuElement.classList.contains(this.config.openClass)) {
        menuElement.classList.add(this.config.openClass);
      }
      
      // Setup elements for large screen view
      this.setupMenuHover();
      this.setupMenuItemClicks();
      this.setupDropdownHandlers();
      this.setupMenuFocusNavigation();
      this.updateDropdownAccessibility();
      
      // Ensure outside click handler is set up
      document.removeEventListener('click', this.handleOutsideClick);
      document.addEventListener('click', this.handleOutsideClick, { passive: false });
    }
  }
  
  // Reset accessibility attributes when switching to mobile
  resetAccessibilityAttributes() {
    if (!this.cachedElements.dropdowns) return;
    
    // Remove all inert attributes from dropdown contents
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      if (content) {
        content.removeAttribute('inert');
      }
      
      const button = dropdown.querySelector('button');
      if (button) {
        button.setAttribute('aria-expanded', 'false');
      }
    });
  }
  
  setupMenuFocusNavigation() {
    // Only run if hasHeaderClass() is true and we have focusable elements
    if (!this.hasHeaderClass() || !this.cachedFocusableElements || this.cachedFocusableElements.length === 0) {
      return;
    }
    
    // Clean up previous handler if it exists
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler, true);
      this.keyboardNavHandler = null;
    }
    
    const navMenu = this.cachedElements.menuElement;
    const focusableElements = this.cachedFocusableElements;
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    
    // Find adjacent focusable elements outside the menu (only once during setup)
    const headerElement = navMenu.closest('header') || document.querySelector('header');
    
    // Prepare variables to hold adjacent elements
    let prevFocusableElement = null;
    let nextFocusableElement = null;
    let firstElementAfterHeader = null;
    
    if (headerElement) {
      // Get all focusable elements within the header - do this once and cache the result
      const headerFocusables = Array.from(
        headerElement.querySelectorAll('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
      ).filter(el => window.getComputedStyle(el).display !== 'none');
      
      // Find the index of our first and last menu elements in one pass
      const menuStartIndex = headerFocusables.indexOf(firstFocusableElement);
      const menuEndIndex = headerFocusables.indexOf(lastFocusableElement);
      
      // Cache the adjacent elements
      if (menuStartIndex > 0) {
        prevFocusableElement = headerFocusables[menuStartIndex - 1];
      }
      
      if (menuEndIndex !== -1 && menuEndIndex < headerFocusables.length - 1) {
        nextFocusableElement = headerFocusables[menuEndIndex + 1];
      }
      
      // Pre-calculate the first element after header - but only if needed
      if (!nextFocusableElement) {
        // Use a more efficient selector that targets immediate children of body that aren't the header
        const selector = 'body > *:not(header)';
        const nonHeaderElements = document.querySelectorAll(selector);
        
        // Only process if we have elements
        if (nonHeaderElements.length > 0) {
          // Create a function to find the first focusable element (used later if needed)
          this.findFirstFocusableAfterHeader = () => {
            for (const element of nonHeaderElements) {
              const focusable = element.querySelector('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
              if (focusable && window.getComputedStyle(focusable).display !== 'none') {
                return focusable;
              }
            }
            return null;
          };
        }
      }
    }
    
    // Create keyboard navigation handler with closure over the cached elements
    this.keyboardNavHandler = (e) => {
      // Quick check for Tab key first
      if (e.key !== 'Tab') return;
      
      // Then check if focus is inside the menu
      if (!navMenu.contains(document.activeElement)) return;
      
      let targetElement = null;
      
      // Handle tab navigation at boundaries only
      if (!e.shiftKey && document.activeElement === lastFocusableElement) {
        // Forward tab from last element
        e.preventDefault();
        e.stopPropagation();
        
        if (nextFocusableElement) {
          targetElement = nextFocusableElement;
        } else if (this.findFirstFocusableAfterHeader) {
          // Only search for elements after header if needed and not already found
          firstElementAfterHeader = this.findFirstFocusableAfterHeader();
          targetElement = firstElementAfterHeader;
        }
        
        // Focus on the target or body as fallback
        setTimeout(() => {
          if (targetElement) {
            targetElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      } 
      else if (e.shiftKey && document.activeElement === firstFocusableElement) {
        // Backward tab from first element
        e.preventDefault();
        e.stopPropagation();
        
        setTimeout(() => {
          if (prevFocusableElement) {
            prevFocusableElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      }
    };
    
    // Use capture phase for the event
    document.addEventListener('keydown', this.keyboardNavHandler, true);
  }
  
  setupMenuHover() {
    const menuElement = this.cachedElements.menuElement;
    if (!menuElement) return;
    
    // Clean up existing hover handlers first
    this.cleanupMenuHover();
    
    // Create event handlers
    const mouseenterHandler = () => {
      menuElement.classList.add(this.config.openClass);
    };
    
    const mouseleaveHandler = () => {
      menuElement.classList.remove(this.config.openClass);
    };
    
    // Add event listeners with passive flag for better performance
    menuElement.addEventListener('mouseenter', mouseenterHandler, { passive: true });
    menuElement.addEventListener('mouseleave', mouseleaveHandler, { passive: true });
    
    // Store the handlers for cleanup
    this.menuHoverHandlers = {
      element: menuElement,
      mouseenter: mouseenterHandler,
      mouseleave: mouseleaveHandler
    };
  }
  
  cleanupMenuHover() {
    if (this.menuHoverHandlers) {
      const { element, mouseenter, mouseleave } = this.menuHoverHandlers;
      element.removeEventListener('mouseenter', mouseenter);
      element.removeEventListener('mouseleave', mouseleave);
      this.menuHoverHandlers = null;
    }
  }
  
  setupMenuItemClicks() {
    if (!this.cachedElements.menuItems || this.cachedElements.menuItems.length === 0) return;
    
    // Clean up existing handlers first
    this.cleanupMenuItemClicks();
    
    const menuElement = this.cachedElements.menuElement;
    const menuItemHandlers = new Map();
    
    this.cachedElements.menuItems.forEach(item => {
      const clickHandler = () => {
        if (this.hasHeaderClass()) {
          // Clear any existing timeout
          if (this.menuItemClickTimeout) {
            clearTimeout(this.menuItemClickTimeout);
          }
          
          // Set timeout before adding the class
          this.menuItemClickTimeout = setTimeout(() => {
            if (!menuElement.classList.contains(this.config.openClass)) {
              menuElement.classList.add(this.config.openClass);
            }
          }, this.config.menuItemClickDelay);
        }
      };
      
      menuItemHandlers.set(item, clickHandler);
      item.addEventListener('click', clickHandler);
    });
    
    this.menuItemClickHandlers = menuItemHandlers;
  }
  
  cleanupMenuItemClicks() {
    if (this.menuItemClickHandlers && this.menuItemClickHandlers instanceof Map) {
      this.menuItemClickHandlers.forEach((handler, item) => {
        item.removeEventListener('click', handler);
      });
      this.menuItemClickHandlers.clear();
    }
    
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  setupDropdownHandlers() {
    if (!this.hasHeaderClass() || !this.cachedElements.dropdownToggles) return;
    
    // Clean up existing handlers first
    this.cleanupDropdownHandlers();
    
    this.cachedElements.dropdownToggles.forEach(toggle => {
      const clickHandler = (event) => {
        event.stopPropagation();
        event.preventDefault();
        
        const dropdown = toggle.closest(this.config.dropdownSelector);
        if (dropdown) {
          this.toggleActiveClasses(dropdown);
          this.updateDropdownAccessibility();
        }
      };
      
      this.dropdownClickHandlers.set(toggle, clickHandler);
      toggle.addEventListener('click', clickHandler);
    });
  }
  
  cleanupDropdownHandlers() {
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
  }
  
  handleOutsideClick(event) {
    if (event.target.tagName === 'A') return;
    if (!event.target.closest(this.config.dropdownSelector)) return;
    if (!event.target.closest(this.config.submenuToggleSelector)) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  updateDropdownAccessibility() {
    // Only run if hasHeaderClass() is true
    if (!this.hasHeaderClass() || !this.cachedElements.dropdowns) return;
    
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      const button = dropdown.querySelector('button');
      
      // Check if dropdown has all active classes
      const isOpen = this.hasAllActiveClasses(dropdown);
      
      if (content) {
        if (isOpen) {
          content.removeAttribute('inert');
        } else {
          content.setAttribute('inert', '');
        }
      }
      
      if (button) {
        button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      }
    });
  }
}


const sidebarNav = new SidebarNavigation().init();
@media (min-width: 1201px){
  .dwc-mobile header{
      display: none;
  }
  
  /* CENTERED LOGO*/

  /*force center align for centered logo menu */

.dwc-nest-header__container.dwc-logo-is-centered {
    justify-content: center;
}
  
  .dwc-logo-is-centered .dwc-nest-menu .brx-nav-nested-items{
  justify-content: center;
}


/*remvoe bricks default margin left*/
#brx-header .dwc-logo-is-centered .dwc-nest-menu li:not(.brx-dropdown-content *){
  
    margin-inline: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* prevent logo from shrinking on sceen resize*/
#brx-header .dwc-logo-is-centered .dwc-header-logo-item{
   flex-shrink: 0;
} 

.dwc-center-guide {
  background-color: rgba(132, 255, 0, 0.32);
  position: fixed;
  top: 0;
  bottom: 0;  
  align-self: center;
  height: 100dvb;
  z-index: 9999;
  pointer-events: none;
}
  
  body:not(:has([data-fix-centered-logo-fouc="true"])) .dwc-center-guide::before {
    content: 'To fix FOUC on the header, Go to Header Pro div > Attribute > data-fix-centered-logo-fouc, set the value to "true"';
    position: absolute;
    top: 30vh;
    padding: 1rem;
   background-color: white;
 
}

.dwc-logo-is-centered .dwc-menu-wrap{
  inline-size:100%
}


  
  .dwc-nest-header .brx-nav-nested-items {    
    transition-property: opacity,transform;   
}
  
  body.adaptive-height-active:has([data-fix-centered-logo-fouc="true"]):not(:has(.dwc-logo-is-centered))::before {
    content: 'Go to the Header Pro section > Attribute > data-fix-centered-logo-fouc, remove the value "true" OR enable Centered Logo';
}
  

}

/* end min-width */

/*fix centered logo fouc*/
  html:not(.dwc-mobile)  .bricks-is-frontend header:has([data-fix-centered-logo-fouc="true"]):not(.desktop-centered header) {
    opacity: 0;
}



/*end fix fouc*/

.dwc-adaptive-height:not(.dwc-stripe-style){
    --dropdown-content-gap: 0 
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content){
  inset-inline-start: 0 !important;
}



html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content .brx-dropdown-content:not(.brx-sub-submenu-overflow-right, .brx-submenu-overflow-right){
inset-inline-start: 100% !important;
}


html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
    min-inline-size: var(--dropdown-width) !important;    
}

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{ 
  box-shadow: var(--dropdown-content-shadow);
}


.dwc-nest-menu[data-submenu-reveal="expand"] .brx-nav-nested-items > .brxe-dropdown:not([data-submenu-reveal="slide"], .brx-has-megamenu)  > .brx-submenu-toggle {
transform: translateY(0);
z-index: 9999;
}


:is([data-submenu-reveal="expand"][data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
:is(.brx-header-right, .brx-header-left) [data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
inset-block-start: 0;
transition: 0s;
min-inline-size: var(--mobile-menu-width);
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner:before {   
block-size: var(--open-icon-line-height);
inset-inline-end: var(--open-icon-align);       
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:before {   
inline-size: var(--open-icon-size);      
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):before {   
inset-block-start: calc(var(--icon-line-gap) * -1); 
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):after {   
inset-block-end: calc(var(--icon-line-gap) * -1); 
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner{
block-size: var(--open-icon-line-height);
inset-inline-end:  var(--open-icon-horizontal-offset);      
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner{
inline-size:var(--iw);    
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner:after {   
block-size: var(--open-icon-line-height);
inset-inline-end:  var(--open-icon-align);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:after {   
inline-size: var(--aw);
}


.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:after,
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner{
inline-size: calc(var(--iw) * 1.2);
}


.dwc-nest-toggle--open.brxa--vortex .brxa-wrap{
inline-size: var(--open-icon-size)
}

.dwc-nest-menu .brxa-inner, 
.dwc-nest-menu .brxa-inner:after, 
.dwc-nest-menu .brxa-inner:before{
background-color: var(--menu-toggle-clr)
}

.dwc-nest-menu.brxe-nav-nested .brxe-toggle i{
color: var(--menu-toggle-clr)
}

.dwc-nest-menu .brxa-wrap:hover .brxa-inner,
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:after, 
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:before {
background-color: var(--menu-toggle-hover-clr) !important
}

/* icon animation */

.dwc-nest-toggle--open.brxa--vortex .brxa-inner {
transition-duration: .3s;
transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
transform: rotate(225deg);
transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before {
opacity: 0;
inset-block-start: calc(var(--icon-line-gap) * -1);
inline-size: 0px !important;   
}

.dwc-nest-toggle--open .brxa-inner:before {
transition-duration: 0.25s;
transition-property: inline-size, tansform !important;

}



/* MENU ITEMS SPACING AND COLOR*/
/* Shared styles for both menu types */
.dwc-nest-menu .brx-nav-nested-items > li > a:not(.dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
font-weight: var(--menu-item-font-weight);
font-size: var(--menu-item-font-size);
color: var(--menu-item-clr);
background-color: var(--menu-item-bg);
inline-size: 100%;
}

.dwc-nest-menu .brx-dropdown-content > .brxe-dropdown > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
  --menu-item-font-size: var(--dropdown-item-font-size)
}

/* Specific padding for nested menu items */
.dwc-nest-menu .brx-nav-nested-items > li > a,
.dwc-nest-menu .brx-nav-nested-items > li.brx-has-megamenu .brx-submenu-toggle {
padding-block: var(--menu-item-block-padding);
padding-inline: var(--menu-item-inline-padding) !important;
}

/* Specific padding for dropdown items */
.dwc-nest-menu .brx-dropdown-content > .menu-item > a,
.dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle {
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-item-inline-padding) !important;
}

.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not([aria-current="page"], li:hover > *),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *, .open.active *) {
color: var(--dropdown-item-clr) !important;
}


/* DROPDOWN MENU ITEMS BG COLOR */
.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not(.brx-has-megamenu a),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *) {
background-color: var(--dropdown-item-bg)
}

/* DROPDOWN BG COLOR */
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
background-color: var(--dropdown-content-bg);
}

/* HOVER STYLES */
.dwc-nest-menu .brx-nav-nested-items > li:hover > a,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item:hover > a {
color: var(--menu-item-hover-clr);
background-color: var(--menu-item-hover-bg)
}

.dwc-nest-nav-dropdown-link:hover {
color: var(--menu-item-hover-clr);
}

.dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):hover::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):focus-visible::before,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li:focus-within > .brx-submenu-toggle::before{
    content: '';
    background-color: var(--menu-item-hover-border-bg);
    inline-size: 100%;
    block-size: var(--menu-item-hover-border-height);
    position: absolute;
    inset-block-start: calc(100% - var(--menu-item-hover-border-height));
    inset-inline-start: 0;
}

.dwc-nest-menu .brx-nav-nested-items > li.menu-item {
   position: relative; 
}

/* ACTIVE STYLES */
/* links and dropdwon active styles */
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(li:hover > a, a:hover, .dwc-nest-menu__logo, 
[data-last-item-is-button="true"] .menu-item:last-of-type a, 
[data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, 
[data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a),
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]):not(li:hover) > .brx-submenu-toggle {
color: var(--menu-item-active-clr);
background-color: var(--menu-item-active-bg);
}

.dwc-nest-menu .brx-nav-nested-items .brx-submenu-toggle > a[aria-current="page"]{   
  background-color: initial !important;  
}

.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle{
  position: relative;
}

.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not([data-last-item-is-button="true"] .menu-item:last-of-type a, 
[data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, 
[data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .brx-submenu-toggle > a)::before,
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .brx-submenu-toggle::before{
  content: '';
  background-color: var(--menu-item-active-border-bg);
  inline-size: 100%;
  block-size: var(--menu-item-active-border-height);
  position: absolute; 
  inset-block-start: calc(100% - var(--menu-item-active-border-height));
  inset-inline-start: 0;  
}

.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .brx-submenu-toggle > :is(a:not(.dwc-nest-menu__logo), svg, button, span){
color: var(--menu-item-active-clr);
}


/* DROPDOWN HOVER BG */
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle:not(.brx-has-megamenu *), 
.dwc-nest-menu .brx-dropdown-content > li:hover > a:not(.brx-has-megamenu a){
background-color: var(--dropdown-item-hover-bg) ;
color: var(--dropdown-item-hover-clr);
}


.dwc-nest-menu.brxe-nav-nested .brx-submenu-toggle {
justify-content: space-between;
}

/* DROPDOWN INDENT */

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"])
.brxe-dropdown:not(.brx-has-megamenu) > 
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) {
padding-inline-start: var(--dropdown-indent) !important;
padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
border-left: var(--dropdown-indent-line);  
background-color: var(--dropdown-indent-bg)
}

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.brxe-dropdown:not(.brx-has-megamenu) > 
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle){
padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
}

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.open.active.brxe-dropdown > .brx-submenu-toggle{
background-color: var(--dropdown-active-bg);
color: var(--dropdown-active-clr);
}

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.open.active.brxe-dropdown > .brx-submenu-toggle svg:not(.open.active.brxe-dropdown:hover > .brx-submenu-toggle svg){
color: var(--dropdown-active-clr);
}


/* MENU ITEMS COLOR */
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle :where(span, a, svg) {
color: inherit;
font-weight: inherit;
} 

/* CHEVRON */
.dwc-nest-menu .brx-nav-nested-items > li:not(li:has([aria-current="page"]), li:hover) .brx-submenu-toggle svg{
color: var(--chevron-clr);
}

.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle svg{
  font-size: var(--chevron-size);
  color: var(--chevron-clr);
  }
  .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .brx-submenu-toggle svg,
.dwc-nest-menu .brx-nav-nested-items  li:hover > .brx-submenu-toggle svg{  
  color: var(--chevron-hover-clr);
  }

.brx-dropdown-content .brxe-dropdown { 
position: static;   
}

.brx-dropdown-content:not(.brx-has-megamenu .brx-dropdown-content) {
padding-inline-end: 0 !important;
}


/*OVERLAY*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) :is(.brxe-code, .dwc-nest-menu-overlay),
body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay,
[data-builder-mode] .dwc-nest-menu-overlay {
display: none;
}

.bricks-is-frontend #brx-header .dwc-nest-menu[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
visibility: hidden;
}

/* builder */

[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top {
min-block-size: 80px !important;
}



/* ===========DESKTOP ONLY ============== */

:is( html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)), 
.dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) {
  background-color: transparent !important;
}


html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu){
inline-size: 100%;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type){
margin-inline-start: auto;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type) {
margin-inline-start: auto;
}

html:not(.dwc-mobile) .dwc-nest-tooltip {
display: none;
}


html:not(.dwc-mobile)  .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *, [data-offcanvas="true"] *)  {
box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right) .brxe-nav-nested .brxe-dropdown.open>.brx-dropdown-content {
  display: flex;
  min-width: auto;
  opacity: 1;
  overflow-y: auto;
  position: static;
  visibility: visible;
  
}

/* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:has(.brx-sub-submenu-overflow-right):hover::after {
  inset-inline-end: 100%;  
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:not(.brxe-dropdown:has(.brx-sub-submenu-overflow-right)):hover::after {   
   inset-inline-start: 100%;
}


html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:hover::after {
   content: "";
   position: absolute;
   inset-block-end: 0;
   block-size: 100%;
   inline-size: 100%;   
   z-index: -1;   
}

/* html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:hover::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  block-size: calc((var(--menu-item-inline-padding) * 2) + (var(--menu-item-font-size) * 2));
  inline-size: 150%;
  inset-inline-end: 50%;
  transform: translateX(50%);
  z-index: -1;
  } */

/*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING  */
html:not(.dwc-mobile) .open:has(.open) >  .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--dropdown-inactive-overlay);
pointer-events: none;
border-radius: var(--dropdown-content-border-radius);
}

/* LAST BUTTON LEFT PADDDING ON DESKTOP */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
padding-inline-start: var(--menu-item-inline-padding);
}

/* hide toggle with back button appears */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Open Menu"] {
z-index: 1;
}

/* fades in close button when the main toggle is covered by the back button */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Close Menu"]:not([data-submenu-reveal="expand"] *){
opacity: 1;
}

html:not(.dwc-mobile) [data-mobile-top-transparent="true"][data-offcanvas="true"]:not([data-show-mobile-logo="true"]) .brxe-toggle[aria-label="Close Menu"] {
opacity: 0;
}

html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper{
  z-index: 9999
  }

html:not(.dwc-mobile) [data-offcanvas="true"].dwc-nest-menu .brxe-toggle {
display: flex;
}

/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-nav-list:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) {
background: transparent !important;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle),
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > a,
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > button {
cursor: default;
}

/* handles translate and opacity animation for stripe style on desktop */
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(0);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s 0.15s;
opacity: 1;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(5%);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(-5%);
}

/* mobile logo */
html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo:not([data-offcanvas="true"]:not(.brx-header-left *, .brx-header-right *) .dwc-nest-menu__mobile-logo) {
display: none;
}


/* prevent fouc when offcanvas is enabled and anime height */
body.bricks-is-frontend:has([data-offcanvas="true"])
.dwc-nav-wrapper:not(.show-nav .dwc-nav-wrapper){
display: none;
}

.dwc-mobile [data-hide-close-bar = 'true'] .dwc-nav-wrapper{
inset-block-start: var(--dwc-nest-header-height) 
}

:is(.brx-header-left, .brx-header-right) .dwc-nest-header::before{
display: none;
}

/* mobile menu from top behind header */
.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) {
  z-index: unset !important;
}

.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper {
z-index: -1;
}

.dwc-mobile .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) {
  background-color: var(--header-bg)
}

/************************************
MENU HEIGHT/ STRIPE STYLE
************************************/

:is([data-builder-mode], .brx-header-right, .brx-header-left) .dwc-nest-header::after,
body:has([data-offcanvas="true"]) .dwc-nest-header::after {
display: none;
}

.dwc-nest-header:not(:is(.dwc-adaptive-height, .dwc-stripe-style) .dwc-nest-header)::after{
display: none;
}


html:not(.dwc-mobile) .dwc-nest-header::after {
  display: none;
  content: '';
  min-block-size: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  transition-delay: 0.1s !important;
  pointer-events: none;
  transition: inline-size 0.2s,
    block-size 0.2s,
    opacity 0.2s,
    inset-inline-start 0.2s,
    transform 0.2s !important;
  will-change: block-size, inline-size, inset-inline-start, transform, opacity;
  contain: layout paint;
  z-index: -1;
}

html:not(.dwc-mobile) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
  position: fixed;
}

html:not(.dwc-mobile) .dwc-adaptive-height:not(.dwc-stripe-style) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
  inset-block-start: 0;
}

html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"])::after {
  position: absolute;
  inset-block-end: calc(100% - var(--dwc-nest-header-height));
  block-size: 1000px;
  transform: translateY(calc(var(--dropdown-menu-height) * 1.01)) translateZ(0);
}


html:not(.dwc-mobile) .adaptive-height-active:is(.dwc-stripe-style, .dwc-adaptive-height) .dwc-nest-header::after {
  display: block;
}

.dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.adaptive-height-active .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content){
  display:none
}

html:not(.dwc-mobile) body:has(.brx-has-megamenu.open) .dwc-nest-header::after {
transition-delay: 0s !important;
}

/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0s;
box-shadow: none !important;
transition-duration: 0s;
overflow-x: hidden;
}

html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0.1s;
transition-duration: .2s;
}


html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before {
content: '';
position: absolute;
inset-block-start: 100%;
block-size: calc(var(--dwc-nest-header-height)* 0.5);
inline-size: 50vw;
transform: translateX(-50%);

}

html:not(.dwc-mobile) .dwc-stripe-style .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
overflow-x: hidden;
border-radius: var(--stripe-border-radius);
}


html:not(.dwc-mobile) .dwc-nest-header {
position: relative;
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::before {
content: '';
inline-size: 15px;
block-size: 15px;
background-color: var(--adaptive-height-bg);
position: absolute;
inset-block-start: 100%;
transition: 0s;
transition-property: inset-inline-start, transform, opacity;
inset-inline-start: var(--navlink-midpoint);
transform: translateX(-50%) rotate(45deg) translateY(calc(50% + 2px));
pointer-events: none;
border-top: var(--adaptive-height-border);
border-left: var(--adaptive-height-border);
z-index: 999;
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header:has(.brxe-dropdown.brx-has-megamenu.open:hover)::before {
  transition: 
    opacity 0.2s 0.1s, 
    transform 0.2s 0s,
  inset-inline-start 0.2s 0s;
}

html:not(.dwc-mobile) .dwc-nest-header::before{
opacity: 0 ;
}

html:not(.dwc-mobile) .dwc-nest-header.hide-menu-animation::after {
  opacity: 0 !important;
  }

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header.show-menu-animation:has(.brx-has-megamenu:hover)::before,
html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after {
opacity: 1;
}


html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
border: var(--adaptive-height-border);
}


html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
/* transform: translateY(calc(var(--dwc-nest-header-height) * 0.5)); */
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 2.5rem);
inline-size: calc(var(--dropdown-menu-width) + 5rem);
transform: unset;
inset-block-start: calc(var(--dwc-nest-header-height) + 14px);
block-size: var(--dropdown-menu-height);
z-index: 1;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style:has(.brx-has-megamenu.open):not(:has([data-optimize-stripe=true])) .dwc-nest-header::after {
block-size: calc(var(--dropdown-menu-height) + 0rem) !important;
opacity: 1;
}

/* hide nav content until js is ready*/
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu>.brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-offcanvas="true"] .brx-dropdown-content) {
opacity: 0;
}



body:has(.brx-has-megamenu.open) .sticky .dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
}

.dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 1.5px);
inline-size: calc(var(--dropdown-menu-width) + 2.5px);
/*transform: unset;*/
block-size: calc(var(--dropdown-menu-height) + 3px) !important;
z-index: 1;
border-radius: var(--stripe-border-radius);
transform: translateZ(0);
opacity: 1
}


html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
border: var(--adaptive-height-border);
}


html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transform: translateY(16px) !important; 
inset-block-start: 100%;
}


.dwc-nest-header:not(.show-nav .dwc-nest-header)::after {
display: none;
}

/****************
MENU OVERLAY
***************/

.dwc-nest-menu-overlay {
position: fixed;
inline-size: 100%;
block-size: 100%;
background: var(--dwc-overlay-clr) !important;
z-index: 1;   
opacity: 0;
transition: 0.4s;
backdrop-filter: blur(var(--backdrop-blur));
}

body:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay  {
  inset-block-start: var(--dwc-nest-header-height);
}

body:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"]) .dwc-nest-menu-overlay  {
  inset-block-start: 0;
}

.logged-in:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay:not(:has(+ .x-header)) {
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height));
}


@media (min-width:1025px){
.bricks-is-frontend:not(:has([data-offcanvas="true"])) header:has(.open) .dwc-nest-menu-overlay {
  opacity: 1;
}
}


.dwc-nest-menu-overlay {
pointer-events: none;
}

.no-scroll .dwc-nest-menu-overlay {
opacity: 1;  
}

:is(.brx-header-right, .brx-header-left) .dwc-nest-header__container {
padding-inline: 0
}



/*fade in back button*/
@-webkit-keyframes dwc-nest-fade-in {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
@keyframes slide-in-right {
0% {
  opacity: 0;
}
100% {   
  opacity: 1;
}
}

/* configurable menu and submenu slide out speed */
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
.bricks-is-frontend :is([data-submenu-reveal="slide"][data-offcanvas="true"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
:is(.bricks-is-frontend.brx-header-right, .bricks-is-frontend.brx-header-left) :is([data-submenu-reveal="slide"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper){
transition-duration: calc(0.5s / var(--slide-out-speed)) !important;    
}

#brx-header{
--content-gap: 0;
}


/* overlay header */
html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]) {
padding: var(--overlay-header-inset);  
}

html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]):not(.sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0; 
}

html:not(.dwc-mobile) .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header = "true"]:not(:has([data-offcanvas="true"])){
backdrop-filter: blur(var(--overlay-header-blur));
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open) > 
.dwc-nest-header[data-overlay-header = "true"]{
background-color: var(--overlay-header-bg-active) !important;
}

/* overlay on mobile */
.dwc-mobile .bricks-is-frontend 
#brx-header:has([data-overlay-header-mobile = "true"]) {
padding: var(--overlay-header-inset);  
}

.dwc-mobile .bricks-is-frontend 
#brx-header:has([data-overlay-header-mobile = "true"]):not(.sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0; 
}

.dwc-mobile .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header-mobile = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}

/*offset hero top padding when overlay header is active */
#brx-header:has([data-offset-section-padding="true"]) + main > :is(section, div) {
  padding-block-start: var(--overlay-offset-padding);
}

/* menu height anime on overlay header  */

html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]) 
.dwc-nest-header::after {
border-radius: var(--overlay-header-radius);
inset-block-end: calc(100% + var(--overlay-header-inset));
opacity: 1;    
}

html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style)
#brx-header:has([data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"])) 
.dwc-nest-header.show-menu-animation::after {
    transform: translateY( calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)))) translateZ(0)
}

html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header:has([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header.show-menu-animation::after {
  block-size: calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)));
}

/* we need to reposition the overlay outside the header */
html:not(.dwc-mobile) .bricks-is-frontend:has(.open):not(:has([data-offcanvas="true"])) .dwc-nest-menu-overlay{
  opacity: 1;
 }

/*menu items border radius desktop only*/
html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items > li > 
:is(a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo ), .brx-submenu-toggle){
border-radius: var(--menu-item-radius);
}

html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items {
  gap: var(--menu-items-gap);
}

/* dynamic dropdown conten width and position */

html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
  min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
  inset-inline-start: var(--left-position)!important;
}

html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content {
  border-radius: var(--dropdown-content-border-radius);
}

.dwc-nest-header{
  position: relative;
  z-index: 9999;
  
}

/* optimize multi row header*/
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{
  --dwc-nest-header-height:var(--fullscreen-mobile-menu-top-height) !important
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
    background-color: var(--mobile-menu-top-bg) !important;
   align-items: center !important;
  animation: none !important;
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper{
  z-index: 99999
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .brxe-toggle {
    display: block;
}


.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]:not([data-hide-mobile-logo="true"]) .dwc-nest-menu__mobile-logo {
    display: flex;
}

/* overlay header on multirow*/
html:not(.dwc-mobile) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"] > div:first-child{
    border-top-left-radius: var(--overlay-header-radius);
   border-top-right-radius: var(--overlay-header-radius);
}

/* BricksExtras support*/

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:has(.dwc-nest-header){
    position: relative;
    z-index:1;
}

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:first-child{
    position: relative;
    z-index: 99991;
}




[data-x-overlay]:not([data-x-overlay="none"]) .dwc-nest-header{
background: var(--x-overlay-header-background)!important;
 }

html:not(.dwc-mobile) .brxe-xheaderrow .dwc-nest-header::after {
  block-size: 1000px;
}



/* in builder */
[data-builder-mode] [data-offcanvas="true"] .dwc-nest-toggle--open{
display: none !important;
}

[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top{
  display: none;
}


:is(.brx-header-left, .brx-header-right) [data-builder-mode] .brx-nav-nested-items,
[data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items {
  overflow-y: auto;
  scrollbar-width: thin !important;
  justify-content: flex-start !important;
box-shadow: var(--sidebar-shadow);
}


:is(.brx-header-left, .brx-header-right) [data-builder-mode] .dwc-nav-wrapper,
[data-builder-mode] [data-offcanvas="true"] .dwc-nav-wrapper {
  inset-inline-end: auto ;
  inset-inline-start: 0;
}

/* preview dropdown content width in builder*/

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content){
  min-inline-size:var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;  
  transform: translatex(50px);
  border: dotted #00b0f4 2px
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content):not([data-hide-instruction="true"])::after{
    content: 'Set dropdown Content width in dropdown Content ATTRIBUTES > style, value:--dropdown-content-width: e.g. 1080px. Leave empty to use default width (set in Menu Styles CSS code block) | Set alignment in ATTRIBUTES > data-content-align, values: left, right, center. This aligns the dropdown content to the dropdown button, leave empty to align center to the header. aligments are applied on frontend only. | TIP: click here to select dropdown Content';
    position: absolute;
    inset-block-start: 102%;
    color: #e1e1e1;
    font-size: 12px;    
    letter-spacing: 0.5px;
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
}

/*set alignment for sidebar edit on desktop*/
:is(.brx-header-left, .brx-header-right)[data-builder-mode] .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items,
[data-builder-mode] .dwc-nest-menu.brxe-nav-nested[data-offcanvas="true"] .brx-nav-nested-items {
    justify-content: flex-start !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
    content: 'To edit Sidebar, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
    position: absolute;    
    padding-inline-start: 20px;
    color: #e1e1e1;
    font-size: 12px;    
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
    inline-size: 250px;
}

.brx-header-left[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
  inset-inline-start: 100%;
}

.brx-header-right[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
  inset-inline-end: 100%;
}

[data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
     content: 'To edit Offcanvas, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
    position: absolute;
    inset-block-start: 100%;
    padding-block-start: 20px;
    color: #e1e1e1;
    font-size: 12px;    
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
    inline-size: 250px;
}

@media (max-width: 1200px){
  [data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
     content: 'To edit Offcanvas, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" ';
    position: absolute;
    inset-inline-start: var(--mobile-menu-width);
    padding-inline-start: 20px;
  }
}

[data-builder-mode] [data-offcanvas="true"]:not(.brx-open) #dwc_nav_wrapper {
    transform: translateX(0);
    visibility: visible;
}

[data-builder-window] [data-last-item-is-button="true"][data-offcanvas="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}


/* === */

:is(.brx-header-left, .brx-header-right)[data-builder-window]  .brxe-nav-nested .brxe-dropdown .brx-dropdown-content:not(.brx-open .brx-dropdown-content) {
    display: none;
}


:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {   
    scrollbar-width: none;
}


/* stripe style fix*/
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:not(:has([data-offcanvas="true"])) {
    align-items: stretch !important;
  }
  
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .dwc-nav-wrapper,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li > 
  a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
  /* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a) */ { 
    height: 100%;
  }
  
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
    height: 100%;
    display: flex;
    align-items: center;
  }



/*fix overlay in boxed mode*/
.brx-boxed .dwc-nest-menu-overlay {
    inline-size: var(--boxed-width, 100%);
}

/*wait for stripe style to load before active */
body:is(.dwc-stripe-style, .dwc-adaptive-height):not(.adaptive-height-active, .brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu{
  pointer-events: none;
}


/* LAST CTA BUTTONS */
/* Button styling for FRIST BUTTON*/
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type a {
    color: var(--menu-cta-clr);
    background-color: var(--menu-cta-bg);
    border-radius: var(--menu-cta-radius) !important;
    padding-inline: var(--menu-cta-inline-padding) !important;
    padding-block: var(--menu-cta-block-padding) !important;
    border: var(--menu-cta-border);
}

:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(1) a:hover {
    color: var(--menu-cta-hover-clr);
    background-color: var(--menu-cta-hover-bg);
}

/* Button styling for second button*/
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a {
    color: var(--menu-cta-2-clr);
    background-color: var(--menu-cta-2-bg);
    border-radius: var(--menu-cta-2-radius) !important;
    padding-inline: var(--menu-cta-2-inline-padding) !important;
    padding-block: var(--menu-cta-2-block-padding) !important;
    border: var(--menu-cta-2-border);
}

:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a:hover {
    color: var(--menu-cta-2-hover-clr);
    background-color: var(--menu-cta-2-hover-bg);
}

/* Button styling for third button */
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a {
    color: var(--menu-cta-clr);
    background-color: var(--menu-cta-3-bg);
    border-radius: var(--menu-cta-3-radius) !important;
    padding-inline: var(--menu-cta-3-inline-padding) !important;
    padding-block: var(--menu-cta-3-block-padding) !important;
    border: var(--menu-cta-3-border);
}

[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a:hover {
    color: var(--menu-cta-hover-clr);
    background-color: var(--menu-cta-3-hover-bg);
}

/* Adjust padding for all variants in desktop mode */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type,
html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2),
html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) {
    padding-inline-start: var(--menu-item-inline-padding);
}

/* Center alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type) {
    margin-inline-start: auto;
}

/* Center alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(2), :first-of-type) {
    margin-inline-start: auto;
}

/* Center alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(3), :first-of-type) {
    margin-inline-start: auto;
}

/* Left alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:last-of-type {
    margin-inline-start: auto;
}

/* Left alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(2) {
    margin-inline-start: auto;
}

/* Left alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(3) {
    margin-inline-start: auto;
}

/* General width rule for all button cases and alignments */
html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwc-nest-menu) {
    inline-size: 100%;
}



/* align dropdown content to bottom */
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:has([data-align-content-bottom="true"]):not(:has([data-offcanvas="true"])) {
  align-items: stretch !important;
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .dwc-nav-wrapper,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li > 
a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
/* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a, .dwc-nest-menu__logo)*/ { 
  height: 100%;
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
  height: 100%;
  display: flex;
  align-items: center;
}

/* dropdown content gap */
html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content) {
  transform: translateY(var(--dropdown-content-gap)) scaleX(1) scaleY(1);
}

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content .brx-dropdown-content{
  transform: translateY(0) scaleX(1) scaleY(1);
}

/* caret on dropdown (non stripe) */


/* html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after {
  content: '';
  position: absolute;
  background-color: var(--dropdown-content-bg);
  transform: rotate(45deg);
  inset-block-end: calc(var(--dropdown-content-gap) * -2.1);
  inset-inline-start: calc(50% - var(--dropdown-content-gap));
  opacity: 0;
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
  inline-size: calc(var(--dropdown-content-gap) * 1.5);
  block-size: calc(var(--dropdown-content-gap) * 1.5);
  opacity: 1;
  transition: opacity 0.2s 0.1s;
} */

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
  inline-size: calc(var(--dropdown-content-gap) * 1.2);
  block-size: calc(var(--dropdown-content-gap) * 1.2);
  opacity: 1;
  transition: opacity 0.2s 0.1s;
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after {
  content: '';
  position: absolute;
  background-color: var(--dropdown-content-bg);
  transform: rotate(45deg);
  inset-block-end: calc(var(--dropdown-content-gap) * -1.6);
  inset-inline-start: calc(50% - var(--dropdown-content-gap));
  opacity: 0; 
}


html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after { 
  border-top: var(--dropdown-content-border);
  border-left: var(--dropdown-content-border);
  z-index: 9999;
  inset-block-end: calc(var(--dropdown-content-gap) * -1.55);

}

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)  .brx-dropdown-content/*:not(.brx-dropdown-content .brx-dropdown-content)*/ {
 outline: var(--dropdown-content-border);
}

html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items .open:has(.open) >  .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {  
  background-color: initial;

}

/* === ends == */

body:not(.adaptive-height-active) .brxe-dropdown::after{
display: none;
}

/* multi-level dropdwon arrow > */

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) 
.dwc-nest-menu:not([data-offcanvas="true"])
.brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button 
svg {
  transform: rotate(270deg);
}


/* align dropwdown in builder */

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="left"][preview-alignment="true"]{
left: 0 !important;
right: auto !important;
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="right"][preview-alignment="true"]{
left: auto !important;
right: 0 !important; 
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content[data-content-align="center"][preview-alignment="true"]{
left: 50% !important;
transform: translatex(-50%) !important;
}


/* breakdout link*/
.dwc-nest-menu > [data-breakout-link]:not(.dwc-nest-menu__logo){
      color: var(--menu-cta-clr);
    background-color: var(--menu-cta-bg);
    border-radius: var(--menu-cta-radius) !important;
    padding-inline: var(--menu-cta-inline-padding) !important;
    padding-block: var(--menu-cta-block-padding) !important;
    border: var(--menu-cta-border);   
}

.dwc-nest-menu > [data-breakout-link="before"],
.dwc-nest-menu > [data-breakout-link]:not([data-breakout-link="after"], .dwc-nest-menu__logo){   
  margin-inline-end: var(--cta-breakout-gap);
  margin-inline-start: auto;
}

.dwc-nest-menu > [data-breakout-link="after"]{   
  margin-inline-start: var(--cta-breakout-gap);
  order: 1;
}

.dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]),
.brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]){
inline-size: 100% !important;
}

.dwc-stripe-style .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]), 
.dwc-stripe-style .brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]) {   
    min-height: var(--header-min-height);
}

.dwc-nest-header__container:has(.brx-nav-nested-items .dwc-nest-menu__logo[data-breakout-link]) { 
  flex-direction: column !important;
  justify-content: center !important;
}


.dwc-nest-menu > [data-breakout-link="after"] + .brxe-toggle[aria-label="Open Menu"]{
    margin-inline-start: auto;
}


/*
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content) > li, 
.dwc-mobile  .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.brx-has-megamenu .brx-dropdown-content > li {
    padding-block-end: 8rem;
}*/

body:has(.brx-has-megamenu.open) .brx-sticky .dwc-nest-header::after {
  background-color: var(--adaptive-height-bg) !important;
}

html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header="true"]):not(.brx-sticky) {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]):not(.brx-sticky) {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

/* DESKTOP OVERRIDES — force horizontaal op ≥1201px */
@media only screen and (min-width: 1201px) {

  /* Zorg dat niets denkt dat we 'mobile' zijn */
  .dwc-mobile .dwc-nav-wrapper,
  .dwc-mobile .dwc-nest-menu,
  .dwc-mobile #dwc-nest-menu {
    /* dit neutraliseert per ongeluk geplakte .dwc-mobile styles op desktop */
    all: unset;
  }

  /* Basis desktop lay-out */
  .dwc-nest-menu .dwc-nav-wrapper {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    inline-size: auto !important;
    block-size: auto !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .dwc-nest-menu .brx-nav-nested-items {
    display: flex !important;
    flex-direction: row !important;      /* ← horizontaal */
    align-items: center !important;
    gap: var(--menu-item-gap, 18px);
    background: transparent !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Verberg de mobiele topbar op desktop */
  .dwc-nest-menu-top {
    display: none !important;
  }

  /* Dropdowns als normale desktop dropdowns onder het item */
  .dwc-nest-menu .brxe-dropdown > .brx-dropdown-content {
    position: absolute !important;
    inset-block-start: 100% !important;  /* onder het hoofditem */
    inset-inline-start: 0 !important;
    transform: none !important;
    min-block-size: auto !important;
    max-block-size: none !important;
    padding-block: var(--dropdown-padding-block, 10px) !important;
    background: var(--dropdown-bg, #fff) !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease;
  }

  /* Toon dropdown bij hover/focus */
  .dwc-nest-menu .brxe-dropdown:hover > .brx-dropdown-content,
  .dwc-nest-menu .brxe-dropdown:focus-within > .brx-dropdown-content {
    visibility: visible;
    opacity: 1;
  }

  /* Megamenu’s mogen breder, maar óók onder het item blijven */
  .dwc-nest-menu .brx-has-megamenu > .brx-dropdown-content {
    position: absolute !important;
    inset-inline-start: 0 !important;
    inset-block-start: 100% !important;
    width: min(90vw, 1200px) !important; /* pas aan naar wens */
  }

  /* Haal mobiele ‘slide/expand’ gedrag uit op desktop */
  [data-submenu-reveal="slide"] .brx-dropdown-content,
  [data-submenu-reveal="expand"] .brx-dropdown-content {
    position: absolute !important;
    inset-block-start: 100% !important;
    inset-inline-start: 0 !important;
    transform: none !important;
    min-block-size: auto !important;
    max-block-size: none !important;
    display: block !important;
  }

  /* Zorg dat de toggle (hamburger) niet zichtbaar is op desktop */
  .dwc-nest-menu .brxe-toggle {
    display: none !important;
  }
}

function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) {
  
    const classList = document.documentElement.classList;
    const isMobile = window.innerWidth < minWidth;
    
    if (isMobile) {
        classList.add('dwc-mobile');
    } else {
        classList.remove('dwc-mobile');
    }
  }
  updateMobileClass();

  // Centered Logo functionality
class CenteredLogoController {
    constructor(config = {}) {
        this.config = {
            enable: config.enable ?? CenteredLogoCONFIG.enable,
            allowOddItems: config.allowOddItems ?? CenteredLogoCONFIG.allowOddItems,           
            forceCenteredLogo: config.forceCenteredLogo ?? CenteredLogoCONFIG.forceCenteredLogo,            
            centerNudge: config.centerNudge ?? CenteredLogoCONFIG.centerNudge,
            roundOffFactor: config.roundOffFactor || CenteredLogoCONFIG.roundOffFactor,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector
        };
        
        this.logoListItem = null;
        this.listItems = [];
        this.resizedFinished = null;
        this.isInitialized = false;
    }
    
    // Method to check if DOM elements are ready
    checkDOMReady() {       
        const headerLogo = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`);
        const headerInner = document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`);
        const menu = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
        const listParent = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);
        
        return headerLogo && headerInner && menu && listParent;
    }
    
    // Early initialization attempt
    initializeEarly() { 
        if (!this.config.enable || this.isInitialized) return;
        
        // Try immediate initialization if elements are ready
        if (this.checkDOMReady()) {           
          document.body.classList.add('dom-ready')
            this.setupElements();
            this.initialize(); 
            return;
        }
        
        // If not ready, use polling with shorter intervals for faster response
        const pollForElements = () => {
            if (this.checkDOMReady()) {
                this.setupElements();
                this.initialize(); 
                return;
            }
            // Poll every 10ms for very fast response
            setTimeout(pollForElements, 10);
        };
        
        pollForElements();
    }
    
    setupElements() {
        this.elements = {
            headerLogo: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`),
            headerInner: document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`),
            menu: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`),
            listParent: document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`)
        };
    }
    
    initialize() {
        
        if (!this.config.enable || this.isInitialized) {
            return;
        }
        
        // Ensure elements are set up before proceeding
        if (!this.elements) {
            this.setupElements();
        }
        
        // Check if all required elements exist
        if (!this.elements.headerLogo || !this.elements.headerInner || 
            !this.elements.menu || !this.elements.listParent) {
            return;
        }
        
        this.isInitialized = true;
        
        // Create logo list item
        this.logoListItem = document.createElement('li');
        this.logoListItem.classList.add('dwc-header-logo-item');
        
        // Get list items excluding those with toggle divs
        this.listItems = Array.from(this.elements.listParent.children).filter(item => 
            !item.querySelector('.brx-toggle-div')
        );
        
        // Calculate position
        const halfIndex = this.listItems.length / 2;
        const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor);
        this.logoListItem.style.order = logoOrder;
      
    //  this.elements.headerInner.classList.add('dwc-logo-is-centered');
        
        // Apply centering immediately
        this.centerLogo(logoOrder);
        
    
        
        // Add resize listener
        window.addEventListener('resize', this.centerLogo.bind(this, logoOrder));
    }
    
    roundHalfIndex(halfIndex, roundOffFactor) {
        if (roundOffFactor === 'before') {
            return Math.floor(halfIndex + 1);
        } else {
            return Math.ceil(halfIndex + 1);
        }
    }
    
    centerLogo(logoOrder) {
        if (!this.config.allowOddItems && this.listItems.length % 2 !== 0) {
            return;
        }
        
        clearTimeout(this.resizedFinished);
        
        this.resizedFinished = setTimeout(() => {
            const isDesktop = window.innerWidth >= MegaMenuCONFIG.minWidth;
            
            if (isDesktop) {
              document.body.classList.add('desktop-centered')
                let listID = 1;
                
                // Set order for list items
                this.listItems.forEach(listItem => {
                    if (!listItem.dataset.id) {
                        listItem.dataset.id = listID++;
                    }
                    this.logoListItem.style.order = logoOrder;
                    listItem.style.order = listItem.getAttribute('data-id');
                });
                
                if (!this.elements.listParent.contains(this.logoListItem) || 
                    !this.elements.listParent.contains(this.elements.headerLogo)) {
                    
                    this.elements.listParent.prepend(this.logoListItem);
                    this.logoListItem.append(this.elements.headerLogo);
                    this.elements.headerInner.classList.add('dwc-logo-is-centered');
                    
                    const logoBounds = this.elements.headerLogo.getBoundingClientRect();
                    const viewportWidth = document.documentElement.clientWidth;
                    const logoWidth = this.elements.headerLogo.offsetWidth;
                    const distanceRight = logoBounds.x;
                    
                    // Force center if needed
                    if (this.config.forceCenteredLogo) {
                        const rightOffset = ((distanceRight + (logoWidth / 2)) + this.config.centerNudge) - (viewportWidth / 2);
                        const offsetMargin = rightOffset * 2;
                        this.elements.menu.style.marginRight = offsetMargin + 'px';
                    }
                  
                                if (CenteredLogoCONFIG.centerGuide) {
                            if (document.body.classList.contains('logged-in')) {
                                // Check if the indicator already exists
                                if (!document.querySelector('.dwc-center-guide')) {
                                    const indicatorEl = document.createElement('div')
                                    indicatorEl.classList.add('dwc-center-guide')
                                    indicatorEl.style.width = this.elements.headerLogo.offsetWidth + 'px';
                                    document.body.appendChild(indicatorEl)
                                }
                            }
                        }     
                  
                }
                
            } else {
               document.body.classList.remove('desktop-centered');
                this.elements.headerInner.classList.add('dwc-logo-is-centered');
                this.elements.menu.style.marginRight = null;
                this.elements.headerInner.prepend(this.elements.headerLogo);
                this.logoListItem.style.order = null;
                this.listItems.forEach(listItem => {
                    listItem.style.order = null;
                });
            }
        }, 500);
    }
}
  
  class MenuAnimationController {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
            adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
            toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
            menuAutoExpansion: config.menuAutoExpansion ?? MegaMenuCONFIG.menuAutoExpansion,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.brx-has-megamenu`,
            offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,  // Added shiftFactor
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow   // Added minOverflow
        };
        
        this.navTopLinks = document.querySelectorAll(this.config.navTopLinksSelector);
        this.header = document.querySelector(this.config.headerSelector);
        
        this.maxMenuWidth = 0;
        this.maxMenuHeight = 0;
        this.headerTimeoutId = null;
        this.mobileMenuTimeoutId = null;
        
        this.applyConfigClasses();
    }
    
    applyConfigClasses() {
      if (MegaMenuCONFIG.stripeStyle) {
          document.body.classList.add('dwc-stripe-style');
      }
      if (MegaMenuCONFIG.adaptiveHeight) {
          document.body.classList.add('dwc-adaptive-height');
      }
  
      if (this.header) {
          this.header.style.setProperty('--stripe-style-enabled', this.config.stripeStyle ? '1' : '0');
          this.header.style.setProperty('--height-animation-enabled', this.config.adaptiveHeight ? '1' : '0');
      }
    }
    
    isAboveMinWidth() {
        return window.innerWidth >= this.config.minWidthThreshold;
    }
    
    isOffCanvas() {
        return !!document.querySelector(this.config.offCanvasSelector);
    }
    
    hasHeaderClass() {
        return document.body.classList.contains('brx-header-left') || 
               document.body.classList.contains('brx-header-right');
    }
    
    updateMenuVariables() {
      if (!this.isAboveMinWidth() || !this.header) return;
      
      let menuOpened = false;
      let menuWidth = 0;
      let menuHeight = 0;
      let menuLeftOffset = 0;
      
      this.navTopLinks.forEach(link => {
          if (link.classList.contains('open')) {
              requestAnimationFrame(() => {
                  let dropdownMenu = link.querySelector('.dwc-nest-nav-list');
                  let nestHeader = link.closest(this.config.headerSelector);
                  
                  if (dropdownMenu) {
                      menuWidth = dropdownMenu.offsetWidth;
                      menuHeight = dropdownMenu.offsetHeight;
                      menuLeftOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX;
                      
                      this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth);
                      this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight);
                      
                      let scaleX = menuWidth / this.maxMenuWidth;
                      let scaleY = menuHeight / this.maxMenuHeight;
                      
                      if (this.config.adaptiveHeight || this.config.stripeStyle) {
                          this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`);
                      }
                      
                      if (this.config.stripeStyle) {
                          this.header.style.setProperty('--dropdown-menu-x', `${menuLeftOffset}px`);
                          this.header.style.setProperty('--dropdown-menu-width', `${menuWidth}px`);
                          this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
                          this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
                          this.header.style.setProperty('--dropdown-menu-scale-x', scaleX.toString());
                          this.header.style.setProperty('--dropdown-menu-scale-y', scaleY.toString());
                      }
                  }
              });
              menuOpened = true;
              this.header.classList.add('show-menu-animation');
              this.header.classList.remove('hide-menu-animation');
          }
      });
      
      if (!menuOpened) {
          this.header.style.setProperty('--dropdown-menu-height', '0px');
          this.header.style.setProperty('--dropdown-menu-scale-y', '0');
          
          if (this.header) {
              this.header.classList.add('hide-menu-animation');
              this.header.classList.remove('show-menu-animation');
          }
      }
    }
  
    updateDropdownPositions() {
        const viewportWidth = document.documentElement.clientWidth;
        if (viewportWidth < this.config.minWidthThreshold) return; // Run only on desktop
    
        const dropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content`);
        const defaultElement = document.querySelector('#brx-header');
        const defaultRect = defaultElement ? defaultElement.getBoundingClientRect() : null;
    
        requestAnimationFrame(() => {
            dropdowns.forEach((dropdown) => {
                const computedStyle = getComputedStyle(dropdown);
                const contentWidth = parseInt(computedStyle.getPropertyValue('--dropdown-content-width'), 10);
                
                // Extract scale factor from transform
                const transform = computedStyle.transform || computedStyle.webkitTransform;
                let scaleX = 1;
                
                if (transform && transform !== 'none') {
                    const matrix = transform.match(/^matrix\((.+)\)$/);
                    if (matrix) {
                        const values = matrix[1].split(', ');
                        scaleX = parseFloat(values[0]);
                    }
                }
    
                const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown');
                if (!parentLi) return;
    
                const contentAlign = dropdown.getAttribute('data-content-align');
                const validAlignments = ['left', 'center', 'right'];
                const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign);
    
                let leftPosition;
                const liRect = parentLi.getBoundingClientRect();
                const dropdownRect = dropdown.getBoundingClientRect();
                
                // Calculate actual width by dividing by the scale factor
                const actualDropdownWidth = dropdownRect.width / scaleX;
    
                if (!hasValidAlignment) {
                    if (defaultRect) {
                        // Account for window scroll and parent container position
                        const headerElement = defaultElement;
                        const headerRect = headerElement ? headerElement.getBoundingClientRect() : null;
                        
                        if (headerRect) {
                            const headerLeftOffset = headerRect.left + window.scrollX;
                            leftPosition = (defaultRect.width - actualDropdownWidth) / 2 - (liRect.left - headerLeftOffset);
                        } else {
                            leftPosition = 0;
                        }
                    } else {
                        leftPosition = 0;
                    }
                } else {
                    switch (contentAlign) {
                        case 'left':
                            leftPosition = 0;
                            const rightEdge = liRect.left + actualDropdownWidth;
    
                            if (rightEdge >= viewportWidth) {
                                let overflow = rightEdge - viewportWidth;                                
    
                                if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
                                leftPosition -= overflow * this.config.shiftFactor;
                            }                            
                            break;
                        case 'right':
                            leftPosition = liRect.width - actualDropdownWidth;
                            const leftEdge = liRect.left + leftPosition;
                            if (leftEdge <= 0) {
                                let overflow = -leftEdge;
                                if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
                                leftPosition += overflow * this.config.shiftFactor;
                            }
                            break;
                        case 'center':
                            leftPosition = (liRect.width - actualDropdownWidth) / 2;
                            break;
                    }
                }
    
                dropdown.style.setProperty('--left-position', `${leftPosition}px`);
                if (!dropdown.style.getPropertyValue('--left-position')) {
                    dropdown.style.setProperty('--left-position', '0px');
                }
            });
        });
    }
    
    setCurrentPageDropdownActive() {
        if (!this.config.menuAutoExpansion) return;
        
        const isDesktop = window.innerWidth >= this.config.minWidthThreshold;
        const hasSpecialHeader = document.body.classList.contains('brx-header-left') || 
                                 document.body.classList.contains('brx-header-right');
        const isOffCanvas = !!document.querySelector(this.config.offCanvasSelector);
        
        if (isDesktop && !hasSpecialHeader && !isOffCanvas) return;       
      
      
        const currentPageLink = document.querySelector('[aria-current="page"]');       
      
        if (currentPageLink) {
            const parentDropdown = currentPageLink.closest('.brxe-dropdown');          
            
            if (parentDropdown) {
                setTimeout(() => {
                    parentDropdown.classList.add('open', 'active');                
                    
                    const submenuToggle = parentDropdown.querySelector('.brx-submenu-toggle');
                    let button = submenuToggle ? submenuToggle.querySelector('button') : null;
                    const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');

                    if (button) {                        
                        menuToggle.addEventListener('click', () => {
                            setTimeout(() => {
                                const submenuIsOpen = parentDropdown.classList.contains('open', 'active');
                                if(submenuIsOpen){
                                     button.setAttribute('aria-expanded', 'true');
                                }                           
                            }, 100)
                          });                        
                      }

                   
                    
                    setTimeout(() => {
                        currentPageLink.scrollIntoView({
                            behavior: 'smooth',
                            block: 'nearest'
                        });
                    }, 600);
                }, 700);
            }
        }
    }
    
    updateChevronPosition(targetLink) {
      if (!this.config.stripeStyle) return;
      
      requestAnimationFrame(() => {
          let headerElement = document.querySelector(this.config.headerSelector);
          if (!headerElement) {
              console.error('Chevron parent element not found.');
              return;
          }
          
          let linkRect = targetLink.getBoundingClientRect();
          let linkMidpoint = linkRect.left + linkRect.width / 2;
          let headerRect = headerElement.getBoundingClientRect();
          let headerLeftOffset = headerRect.left + window.scrollX;
          
          headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`);
          headerElement.style.setProperty('--chevron-parent-left', `${headerLeftOffset}px`);
          headerElement.style.setProperty('--navlink-midpoint', `${linkMidpoint - headerLeftOffset}px`);
          headerElement.style.setProperty('--navlink-left', `${linkRect.left - headerLeftOffset}px`);
          headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`);
      });
    }
    
    updateHeaderHeight() {
        if (this.headerTimeoutId) {
            clearTimeout(this.headerTimeoutId);
        }
        
        requestAnimationFrame(() => {
            if (this.header) {
                this.headerTimeoutId = setTimeout(() => {
                    let headerHeight = this.header.offsetHeight;
                    document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`);
                }, 300);
            }
        });
    }
    
    setMobileMenuTopHeight() {
        if (this.mobileMenuTimeoutId) {
            clearTimeout(this.mobileMenuTimeoutId);
        }
        
        let mobileMenuTop = document.getElementById('mobile_menu_top');
        if (!mobileMenuTop) {
            console.error('Mobile menu top element not found');
            return;
        }
        
        this.mobileMenuTimeoutId = setTimeout(() => {
            let menuTopHeight = mobileMenuTop.offsetHeight;
            document.body.style.setProperty('--mobile-menu-top-height', `${menuTopHeight}px`);
        }, 1000);
    }


    updateMobileLogo() {
        let mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
        let desktopLogo = document.querySelector('.dwc-nest-menu__logo');
        
        if (!mobileLogo) {
            console.error('Mobile logo container not found');
            return;
        }
        
        if (!desktopLogo) {
            console.error('Desktop logo container not found');
            return;
        }
        
        // Updated to check for either img or svg in desktop logo
        let desktopLogoElement = desktopLogo.querySelector('img, svg');
        if (!desktopLogoElement) return;
        
        // Check if mobile logo has an image or SVG
        const currentMobileLogo = mobileLogo.querySelector('img, svg');
        
        // Store original logo data if not already stored
        if (!mobileLogo.hasAttribute('data-original-logo-type') && currentMobileLogo) {
            // Get logo type (img or svg)
            const logoType = currentMobileLogo.tagName.toLowerCase();
            mobileLogo.setAttribute('data-original-logo-type', logoType);
            
            if (logoType === 'img') {
                mobileLogo.setAttribute('data-original-logo-src', currentMobileLogo.src);
                mobileLogo.setAttribute('data-original-logo-alt', currentMobileLogo.alt || '');
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.className || '');
            } else if (logoType === 'svg') {
                // Store SVG content as a string
                mobileLogo.setAttribute('data-original-logo-content', currentMobileLogo.outerHTML);
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.getAttribute('class') || '');
            }
        }
        
        if (this.isAboveMinWidth()) {
            if (currentMobileLogo) {
                mobileLogo.removeChild(currentMobileLogo);
            }
            
            // Clone desktop logo (either img or svg)
            let newLogo = desktopLogoElement.cloneNode(true);
            newLogo.removeAttribute('id');
          //  mobileLogo.appendChild(newLogo);
        } else {
            // For mobile view
            const originalLogoType = mobileLogo.getAttribute('data-original-logo-type');
            
            if (!currentMobileLogo) {
                // If no current logo, clone desktop logo
                let mobileLogoElement = desktopLogoElement.cloneNode(true);
                mobileLogoElement.removeAttribute('id');
                mobileLogo.appendChild(mobileLogoElement);
            } else if (originalLogoType) {
                mobileLogo.removeChild(currentMobileLogo);
                
                if (originalLogoType === 'img') {
                    // Restore original img
                    let mobileLogoImage = document.createElement('img');
                    mobileLogoImage.src = mobileLogo.getAttribute('data-original-logo-src');
                    mobileLogoImage.alt = mobileLogo.getAttribute('data-original-logo-alt') || '';
                    mobileLogoImage.className = mobileLogo.getAttribute('data-original-logo-class') || '';
                    mobileLogo.appendChild(mobileLogoImage);
                } else if (originalLogoType === 'svg') {
                    // Restore original SVG
                    const svgContent = mobileLogo.getAttribute('data-original-logo-content');
                    if (svgContent) {
                        const tempContainer = document.createElement('div');
                        tempContainer.innerHTML = svgContent;
                        const svgElement = tempContainer.querySelector('svg');
                        if (svgElement) {
                            mobileLogo.appendChild(svgElement.cloneNode(true));
                        }
                    }
                }
            }
        }
    }
    
    
    initDesktopNav() {
        if (this.isOffCanvas() || !this.header || this.hasHeaderClass()) return;
        
        let menuElement = this.header.querySelector('.dwc-nest-menu');
        if (menuElement) {
            menuElement.classList.remove('brx-open');
            menuElement.querySelectorAll('.brxe-dropdown').forEach(dropdown => {
                dropdown.classList.remove('active', 'open');
            });
        }
    }
    
    initializeMaxDimensions() {
      if (!this.isAboveMinWidth()) return;
      
      this.navTopLinks.forEach(link => {
          let dropdown = link.querySelector('.dwc-nest-nav-list');
          if (dropdown) {
              this.maxMenuWidth = Math.max(this.maxMenuWidth, dropdown.offsetWidth);
              this.maxMenuHeight = Math.max(this.maxMenuHeight, dropdown.offsetHeight + 10);
          }
      });
      
      this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
      this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
      this.header.style.setProperty('--dropdown-menu-scale-x', '0');
      this.header.style.setProperty('--dropdown-menu-scale-y', '0');
    }
    
    resetForMobile() {
      this.header.style.setProperty('--dropdown-menu-scale-x', '0');
      this.header.style.setProperty('--dropdown-menu-scale-y', '0');
      this.header.style.setProperty('--dropdown-menu-width', '0');
      
      if (this.header) {
          this.header.classList.remove('show-menu-animation', 'hide-menu-animation');
      }
    }

    setBoxedWidthVariable() {
        // Check if body has the brx-boxed class
        if (document.body.classList.contains('brx-boxed')) {
          // Get computed style for the body
          const computedStyle = window.getComputedStyle(document.body);
          
          // Get the max-width value
          const maxWidth = computedStyle.getPropertyValue('max-width');
          
          // Set the max-width as a CSS variable on the body
          document.body.style.setProperty('--boxed-width', maxWidth);
          
          return maxWidth;
        } else {
          return null;
        }
      }

      closeNavOnClick() {
        const menuItemLinks = document.querySelectorAll('.dwc-nest-menu a');
        const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');
        
        // Always remove existing event listeners first
        menuItemLinks.forEach(link => {
            const storedHandler = link._clickHandler;
            if (storedHandler) {
                link.removeEventListener('click', storedHandler);
                delete link._clickHandler;
            }
        });
        
        // Check condition - if true, exit without adding new listeners
        if(this.isAboveMinWidth() && !this.isOffCanvas()) return;
        
        // Only add new event listeners if the condition is false
        menuItemLinks.forEach(link => {
            const clickHandler = () => {
                if (menuToggle) {
                    menuToggle.click();
                }
            };
            
            link._clickHandler = clickHandler;
            link.addEventListener('click', clickHandler);
        });
    }
  }
  
  class TooltipManager {
    constructor(config) {
        this.config = {
            toolTip: config.toolTip || false
        };
        this.targetButton = null;
        this.tooltipProcessed = false;
    }
    
    setBackText() {
        let menuElement = document.querySelector('.dwc-nest-menu');
        let forcedBackText = menuElement.getAttribute('data-back-text')
        document.querySelectorAll('.brx-submenu-toggle').forEach(submenu => {
            const textContent = submenu.textContent.trim();
            const button = submenu.querySelector('.brx-submenu-toggle > button');
            if (button) {
                button.setAttribute('data-text', textContent);
                button.setAttribute('data-back-text', forcedBackText);
            }
        });
    }
    
    updateTooltipDataText(button) {
        if (!this.config.toolTip) return;

        let menuElement = document.querySelector('.dwc-nest-menu');
        let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')
        
        const closestUl = button.closest('.brx-nav-nested-items');
        if (closestUl) {
            const tooltip = closestUl.querySelector('.dwc-nest-tooltip');
            if (tooltip) {
                const buttonText = button.getAttribute('data-text');
                tooltip.setAttribute('data-text', buttonText);
                tooltip.innerText = toolTipBackText + ' ' + buttonText;
            }
        }
    }
    
    addTooltip(button) {
        if (!this.config.toolTip) return;

        let menuElement = document.querySelector('.dwc-nest-menu');
        let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')
        
        const closestUl = button.closest('ul');
        if (!closestUl) return;
        
        this.removeTooltipFrom(closestUl);
        
        const tooltip = document.createElement('div');
        tooltip.className = 'dwc-nest-tooltip';
        tooltip.innerText = toolTipBackText;
        tooltip.style.position = 'fixed';
        tooltip.style.bottom = '12px';
        tooltip.style.left = '12px';
        tooltip.style.background = 'rgb(0 0 0 / 30%)';
        tooltip.style.color = 'white';
        tooltip.style.padding = '5px 10px';
        tooltip.style.borderRadius = '5px';
        tooltip.style.fontSize = '12px';
        tooltip.style.zIndex = '9999';
        tooltip.style.opacity = '0';
        tooltip.style.transition = 'opacity 1.5s';
        tooltip.style.pointerEvents = 'none';
        closestUl.appendChild(tooltip);
        
        requestAnimationFrame(() => {
            tooltip.style.opacity = '1';
        });
    }
    
    removeAllTooltips() {
        document.querySelectorAll('.dwc-nest-tooltip').forEach(tooltip => tooltip.remove());
    }
    
    removeTooltipFrom(ulElement) {
        const existingTooltip = ulElement.querySelector('.dwc-nest-tooltip');
        if (existingTooltip) existingTooltip.remove();
    }
    
    setupTooltipObserver() {
        const tooltipObserver = new MutationObserver((mutationsList) => {
            if (this.tooltipProcessed) return;
            
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    for (const node of mutation.addedNodes) {
                        if (node.nodeType === Node.ELEMENT_NODE &&
                            node.classList.contains('dwc-nest-tooltip') &&
                            !this.tooltipProcessed) {
                            const button = document.querySelector('.open.active > .brx-submenu-toggle > button:not(.open .open button)');
                            if (button) {
                                this.updateTooltipDataText(button);
                                this.tooltipProcessed = true;
                                return;
                            }
                        }
                    }
                }
            }
        });
        
        tooltipObserver.observe(document.body, { childList: true, subtree: true });
    }
  }
  
  class SwipeGestureHandler {
    constructor(config) {
        this.config = {
            swipeToClose: config.swipeToClose || false
        };
        this.targetButton = null;
        this.startX = 0;
        this.startY = 0;
        this.endX = 0;
        this.endY = 0;
    }
    
    initialize() {
        if (!this.config.swipeToClose) return;
        
        document.addEventListener('touchstart', this.handleTouchStart.bind(this));
        document.addEventListener('touchend', this.handleTouchEnd.bind(this));
    }
    
    handleTouchStart(event) {
        if (!this.isMobileMenuOpen()) return;
        
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
    }
    
    handleTouchEnd(event) {
        if (!this.isMobileMenuOpen()) return;
        
        this.endX = event.changedTouches[0].clientX;
        this.endY = event.changedTouches[0].clientY;
        
        let diffX = this.endX - this.startX;
        let diffY = Math.abs(this.endY - this.startY);
        
        if (diffX > 50 && diffY < 30 && this.targetButton) {
            this.targetButton.click();
            this.targetButton = null;
        }
    }
    
    isMobileMenuOpen() {
        return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open');
    }
    
    setTargetButton(button) {
        this.targetButton = button;
    }
  }
  
  class OffcanvasMenuHandler {
    constructor(config) {
        this.config = config || {};
    }
    
    applyMobileStyles() {
        let offcanvasMenu = document.querySelector(this.config.offCanvasSelector);
        let hasHeaderPosition = ['brx-header-left', 'brx-header-right'].some(cls => 
            document.body.classList.contains(cls)
        );
        
        if (!offcanvasMenu && !hasHeaderPosition) return;
        
        let styleSheet = document.querySelector('[data-stylesheet]');
        if (!styleSheet) return;
        
        let styleElement = styleSheet.querySelector('style');
        if (!styleElement) return;
        
        let originalStyles = styleElement.textContent || styleElement.innerText;
        let modifiedStyles = originalStyles.replace(/\(max-width:\s*\d+px\)/g, '(max-width: 5000px)');
        
        let newStyleElement = document.createElement('style');
        newStyleElement.id = 'dwc-offcanvas-styles';
        newStyleElement.textContent = modifiedStyles;
        
        document.head.appendChild(newStyleElement);
        
        setTimeout(() => {
            document.body.classList.add('show-nav');
        }, 100);
        
        styleSheet.remove();
    }
  }
  
  class MenuSystem {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
            adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
            toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
            swipeToClose: config.swipeToClose ?? MegaMenuCONFIG.swipeToClose,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.brx-has-megamenu`,
            offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,  // Added shiftFactor
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow  // Added minOverflow
        };
        
        this.animationController = new MenuAnimationController(this.config);
        this.tooltipManager = new TooltipManager(this.config);
        this.swipeHandler = new SwipeGestureHandler(this.config);
        this.offcanvasHandler = new OffcanvasMenuHandler(this.config);
        this.centeredLogoController = new CenteredLogoController(this.config); // Add the CenteredLogoController

         // Start early initialization for centered logo
         this.centeredLogoController.initializeEarly();
    }
    
    initialize() {
        updateMobileClass(this.config.minWidthThreshold);
        
        document.addEventListener('DOMContentLoaded', () => {
           let overlay = document.querySelector('.dwc-nest-menu-overlay');
           if (!overlay) {
               overlay = document.createElement('nav-overlay');
               overlay.className = 'dwc-nest-menu-overlay';
               
               const header = document.querySelector('#brx-header');
               let mainContent = document.querySelector('main');
               
               if (header) {
                   header.parentNode.insertBefore(overlay, header);
               } else if (mainContent) {
                   mainContent.parentNode.insertBefore(overlay, mainContent);
               }
           }
            
            this.offcanvasHandler.applyMobileStyles();
            this.animationController.updateHeaderHeight();
            this.animationController.initializeMaxDimensions();
            this.animationController.setMobileMenuTopHeight();
            this.animationController.updateMobileLogo();
            this.animationController.setCurrentPageDropdownActive();
            this.tooltipManager.setBackText();
            this.tooltipManager.setupTooltipObserver();
            this.animationController.closeNavOnClick();
            this.centeredLogoController.initialize()
            
            if (this.animationController.isAboveMinWidth()) {
                this.setupDesktopBehavior();
            } else {
                this.swipeHandler.initialize();
            }
            
            this.setupEventListeners();
            
            if (!this.animationController.isAboveMinWidth()) {
                this.animationController.resetForMobile();                
            }

           
            
            setTimeout(() => {
                document.body.classList.add('show-nav');
                this.animationController.updateHeaderHeight();
            }, 200);
            
            setTimeout(() => {
                document.body.classList.add('adaptive-height-active');
                if (this.animationController.isAboveMinWidth()) {                 
                    this.animationController.updateDropdownPositions(); // Initial desktop positioning
                    this.animationController.setBoxedWidthVariable()
                } 
            }, 1200);
        });
        
        return this;
    }
    
    setupDesktopBehavior() {
        this.animationController.navTopLinks.forEach(link => {
            link.removeEventListener('mouseenter', this.handleMouseEnter);
            link.addEventListener('mouseenter', this.handleMouseEnter);
        });
    }
    
    handleMouseEnter = (event) => {
        this.animationController.updateChevronPosition(event.target);
    };
    
    setupEventListeners() {
        let observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    this.animationController.updateMenuVariables();
                }
            });
        });
        
        this.animationController.navTopLinks.forEach(link => 
            observer.observe(link, { attributes: true })
        );
        
        document.addEventListener('click', event => {
            let submenuToggle = event.target.closest('.brx-submenu-toggle');
            if (submenuToggle) {
                setTimeout(() => {
                    let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button');
                    let targetButton = Array.from(openButtons).find(button => {
                        let parentDropdown = button.closest('.brxe-dropdown.open.active');
                        return parentDropdown && 
                               parentDropdown.tagName.toLowerCase() === 'li' && 
                               !parentDropdown.querySelector('.brxe-dropdown.open.active:not(:scope)');
                    });
                    
                    if (targetButton) {
                        this.swipeHandler.setTargetButton(targetButton);
                        
                        if (this.config.toolTip) {
                            this.tooltipManager.removeAllTooltips();
                            this.tooltipManager.addTooltip(targetButton);
                            this.tooltipManager.updateTooltipDataText(targetButton);
                        }
                    }
                }, 50);
            }
        });
        
        window.addEventListener('resize', this.debounce(() => {
            updateMobileClass(this.config.minWidthThreshold);
            this.animationController.updateHeaderHeight();
            this.animationController.initializeMaxDimensions();
            this.animationController.setMobileMenuTopHeight();
            this.animationController.updateMobileLogo();
            this.animationController.closeNavOnClick();
            
            if (this.animationController.isAboveMinWidth()) {
                this.animationController.updateMenuVariables();
                this.animationController.initDesktopNav();
                this.setupDesktopBehavior();
                this.animationController.updateDropdownPositions(); // Update on resize                
            } else {
                this.animationController.resetForMobile();
                this.swipeHandler.initialize();                
            }
        }, 300));
    }
    
    debounce(func, delay) {
        let timeoutId;
        return function(...args) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }
  }
  

  const mainMenu = new MenuSystem().initialize(); 
  

  //==== HEADER INSTANCE EXPERIMENTAL ====
  /*
  const secondaryMenu = new MenuSystem({   
    headerSelector: '.second.dwc-nest-header',
    adaptiveHeight: 1,
    stripeStyle: 0,
    shiftFactor: 1.5,  // Example override
    minOverflow: 300   // Example override
  }).initialize();
  */

// Use WeakMap for better garbage collection
const originalParents = new WeakMap();
let isMobileView = null;
let resizeTimer;

function handleResponsiveMenu() {
  const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth; // Adjust breakpoint as needed
  
  // Only run the logic if the view state changed
  if (isMobileView === currentIsMobile) return;
  
  isMobileView = currentIsMobile;
  const nestMenu = document.querySelector('.dwc-nest-menu');
  
  if (!nestMenu) return;
  
  if (isMobileView) {
    // Mobile behavior
    const targetItems = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]');
    const fragment = document.createDocumentFragment();
    
    targetItems.forEach(item => {
      const parent = item.parentElement;
      parent.classList.add('has-breakout-link')
      
      // Store original parent if not already stored
      if (!originalParents.has(item)) {        
        originalParents.set(item, parent);
      }
      
      // Add to document fragment instead of direct DOM manipulation
      fragment.appendChild(item);
      
      // Hide the original parent
      parent.style.display = 'none';
    });
    
    // Single DOM operation to insert all items
    nestMenu.insertBefore(fragment, nestMenu.firstChild);
  } else {
    // Desktop behavior - restore items to original parents
    const movedItems = nestMenu.querySelectorAll('[data-breakout-link]');
    
    movedItems.forEach(item => {
      const originalParent = originalParents.get(item);
      if (originalParent) {
        originalParent.appendChild(item);
        originalParent.style.display = '';
      }
    });
  }
}

// Run on page load
handleResponsiveMenu();

// Debounce resize events
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(handleResponsiveMenu, 150);
});

// Optional: Add for better initial load behavior
document.addEventListener('DOMContentLoaded', handleResponsiveMenu);
/* DO NOT ADD ANY CODE IN THIS CODE BLOCK */

/*MOBILE MENU/OFFCANVAS/SIDEBAR STYLES*/




@media only screen and (max-width: 1200px) {  
    .desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
    opacity: 0;
}
  
  .dwc-nest-menu__logo[data-breakout-link]{
margin-inline-end: auto
}
  
    /*special mobile menu styles for overlay header UPDATED */

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  transform: translateY(-100%);
}


.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .brx-nav-nested-items {
  transform: translateY(0%);
}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  transition: 0.45s;
  transition-timing-function: var(--mobile-menu-ttf);
  inset-block-start: calc(var(--overlay-header-radius) * -1);
}


.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  inset-block-start: calc(var(--dwc-nest-header-height) / -2);
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  --mobile-menu-width: 100% !important;
  inline-size: var(--mobile-menu-width);
  border-bottom-left-radius: var(--mobile-menu-radius);
  border-bottom-right-radius: var(--mobile-menu-radius);
  padding-block-start: calc(var(--dwc-nest-header-height) / 2);
  overflow-x: hidden;
}

.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .brx-nav-nested-items {
  max-block-size: fit-content;
}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
  transform: translateY(0%);
  border-radius: var(--overlay-header-radius);
  overflow: hidden !important;
  inset-block-start: var(--overlay-header-inset);

}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .dwc-nav-wrapper {
  transform: translateY(0%);
}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) {
  --mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important;
  inline-size: var(--mobile-menu-width) !important;
  inset-inline-end: var(--overlay-header-inset) !important;
  block-size: calc(100dvb - var(--overlay-header-inset))
}

.dwc-mobile .dwc-nest-menu.brxe-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
  height: 0;
}


.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
  padding-inline: initial
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
  border-block-end: initial;
}


.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"])) .dwc-nest-nav-items:has(.open.active) .brx-submenu-toggle>button:not(.brxe-dropdown.open.active .brx-submenu-toggle > button) {
  opacity: 0;
}

.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
  inset-block-start: var(--overlay-header-radius) !important;
  padding-block-start: 50px;
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
  inset-block-start: var(--overlay-header-radius) !important;
  padding-block-start: 50px;
}


.dwc-mobile .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle > button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
    z-index: 9999;
    min-inline-size: 100%;
    min-block-size: 50px;
    inset-block-start: var(--overlay-header-radius);
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
  min-block-size: 100%;
}

  /*
.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-nav-nested-items:has(.open.active) {
  overflow-y: hidden;
}
*/
  
.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content)>li {
  padding-block-end: 40px;
}

.dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div {
  padding-inline: var(--menu-item-inline-padding);
  border-radius: var(--overlay-header-radius);
}

/* special style UPDATED ends*/
  
  
    
    #dwc-nest-menu .brx-nav-nested-items {
      width: var(--mobile-menu-width);
  }
  
      /*  unset default values */
    
      [data-offcanvas="true"] .open:has(.open) .brx-dropdown-content::before {
          display: none !important;
      }
    
      [data-offcanvas="true"] .brx-nav-nested-items {
          flex-wrap: nowrap;
      }
    
    .dwc-nest-menu .brx-nav-nested-items {
        gap: 0;
    }
    
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content)  {
          display: flex;
          visibility: hidden;  
      }
    
      [data-overlay-header="true"] .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content),
    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
        min-inline-size: 0 !important;
    }
    
      .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown>.brx-dropdown-content {
          overflow-y: auto;
      }
    
      .dwc-nest-menu .brx-nav-nested-items {
          flex-direction: column !important;
          flex-wrap: nowrap;
    
      }
    
      .dwc-nest-toggle--open.brxe-toggle {
          display: flex !important;
      }
    
      .dwc-nest-menu .brx-nav-nested-items {
          position: relative !Important;
          background: var(--mobile-menu-bg) !important;
          align-items: stretch;
          flex: 1;
      }
    
    
    
    
    
      .dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) {
          transform: unset
      }
    
      .dwc-nest-nav-top-link:not(.brx-has-megamenu)>.brx-dropdown-content {
          transform: translateZ(0);
          transform: unset;
      }
    
      .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
          opacity: unset !important;
          visibility: unset !important;
      }
    
      .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
          overflow-y: auto;
          scrollbar-width: none;
          justify-content: flex-start !important;
      }
    
    
      /* set new values  */
    
      .dwc-nav-wrapper {
          position: fixed;
          inset-block: 0;
          inset-inline-end: 0;
          transform: translateX(100%);
          background-color: var(--mobile-menu-bg);
          transition: 0.45s;
          transition-timing-function: var(--mobile-menu-ttf);
          z-index: 1;
          flex-wrap: nowrap;
          inline-size: var(--mobile-menu-width);
          visibility: hidden;
      }
    
      /* RTL */
      [dir="rtl"] .dwc-nav-wrapper{
        inset-inline-end: initial;
        inset-inline-start: 0;
    }
    
      .brx-open .dwc-nav-wrapper {
          transform: translateX(0%);
          visibility: visible;
      }
    
    
    
      .dwc-nest-menu-top {
          background-color: var(--mobile-menu-top-bg);
          border-block-end: var(--menu-item-border);
          min-block-size: var(--dwc-nest-header-height);
          display: flex;
          flex-direction: row;
          align-items: center;
      }
    
    
    
      .dwc-nest-nav-top-link.brx-has-megamenu,
      .dwc-nest-dropdown-content>.menu-item>a {
          border-block-end: var(--menu-item-border);
      }
    
      .dwc-nest-nav-top-link:not(.brx-has-megamenu):not(.open, :has(.open)),
      .dwc-nest-dropdown-content>.brxe-dropdown:not(.open, :has(.open)) {
          border-block-end: var(--menu-item-border);
      }
    
    
    
      /* MENU CTA (LAST BUTTON) */
    
      :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type,
    :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+2), 
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+3) {
        padding-inline: var(--menu-item-inline-padding) !important;
        padding-block: var(--menu-item-block-padding) !important;
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: var(--cta-width);
    }
      
     [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+2) + li{
        padding-block-start: var(--cta-gap-offset) !important
    }
    
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+3) + li{
      padding-block-start: var(--cta-gap-offset) !important
    }
    
    
      :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a,
      :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+2) a, 
      [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+3) a {
        justify-content: center;
      }
    
    
    
      /* MOBILE MENU SLIDE IN DIRECTION */
      .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
          transform: translateX(-100%);
          inset-inline-start: 0;
          overflow: hidden;
      }
    
      /* RTL */
      [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { 
        inset-inline-start: initial;
        inset-inline-end: 0;
    }
    
    [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { 
      inset-inline-start: initial;
      inset-inline-end: 0;
    }
    
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button), 
      
    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button) {
      inset-inline-start: initial;
      inset-inline-end: 0;
      justify-content: flex-end;
    }
    
    
    
    
      .bricks-is-frontend [data-slide-in-direction="left"].brx-open .dwc-nav-wrapper {
          transform: translateX(0);
      }
    
      /* SLIDE IN TOP */
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"].brx-open .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"].brx-open .dwc-nav-wrapper {
          transform: translateY(0%);
      }
    
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"] .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"] .dwc-nav-wrapper {
          transform: translateY(-100%);
      }
    
      /* SLIDE IN BOTTOM */
    
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"].brx-open .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"].brx-open .dwc-nav-wrapper {
          transform: translateY(0%);
      }
    
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"] .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"] .dwc-nav-wrapper {
          transform: translateY(100%);
      }
    
      .bricks-is-frontend [data-slide-in-direction="left bottom"] .dwc-nav-wrapper,
      .bricks-is-frontend [data-slide-in-direction="left top"] .dwc-nav-wrapper {
          inset-inline-start: 0;
          overflow: hidden;
      }
    
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-track,
      .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-track {
          border-radius: 50vw;
          background-color: transparent;
      }
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar,
      .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar {
          inline-size: 0px;
          background-color: transparent;
      }
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-thumb,
      .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-thumb {
          border-radius: 50vw;
          background-color: #55565d;
      }
    
      /* SCROLLBARS END */
    
    
    
      /*  SLIDE IN DIRECTION - DROPDOWN ITEMS*/
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
      .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content {
          max-block-size: unset;
          position: absolute !important;
          opacity: 1;
          transition-duration: 0.45s !important;
          transition-timing-function: var(--mobile-menu-ttf);
          padding-block-end: 80px;
      }
    
      .bricks-is-frontend .dwc-nest-menu [data-submenu-reveal="expand"].brx-has-megamenu > ul {
          position: static !important;
          padding-block-end: 0 !important;
          transition: 0.3s ease-in-out !important;
      }
    
    
    
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          inset: 0 !important;
          transform: translateX(100%);
          transition-property: opacity, transform, visibility;
          min-block-size: calc(100dvb - var(--dwc-nest-header-height));
          position: fixed !important;
      }
    
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
          inset-block-start: var(--dwc-nest-header-height) !important;
      }
    
      .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul),
      .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          transform: translateX(-100%);
      }
    
      .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu.brx-open .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          transform: translateX(0) !important;
      }
    
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          transform: translateX(0) !important;
          visibility: visible;
      }
    
      /*  SLIDE IN  - mult-level DROPDOWN ITEMS*/
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
            inset-block: 0 !important;
            inline-size: 100%;
            transition-property: inset-inline-start, visibility, opacity;
            inset-inline-start: 100% !important;
            min-block-size: 100dvb;
            position: fixed !important;
        }
    
        .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
        .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
      .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content) {       
          inset-inline-start: -100% !important;
           }
    
      /* RTL */
      [dir="rtl"]  .brx-header-right.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content, 
    [dir="rtl"]  .brx-header-right.bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content, 
    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
        inset-inline-start: -100% !important;
    }
    
    [dir="rtl"]  .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content, 
    [dir="rtl"]  .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content, 
    [dir="rtl"]  .brx-header-left.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content {
        inset-inline-start: 100% !important;
    }
    
    
     
    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
        inset-block-start: var(--dwc-nest-header-height) !important;
    }
    
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
        inset-inline-start: 0 !important;
    }
    
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
          inset-inline-start: 0 !important;
          visibility: visible;
      }
    
      .bricks-is-frontend .dwc-nest-menu .brxe-dropdown {
          position: static;
      }
    
    
      .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
          transform: rotate(270deg)
      }
    
      /*  EXPAND  - mult-level DROPDOWN ITEMS*/
      .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > .brxe-dropdown .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content>.menu-item:not([data-submenu-reveal="slide"] li) {
            transform: translateY(-100px);
            opacity: 0;
            transition: transform 0s, opacity 0s
        }
    
        .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > .brxe-dropdown.open .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu).open>.brx-dropdown-content>.menu-item {
            transform: translateY(0);
            opacity: 1 !important;
            transition: transform 0.4s, opacity 0.4s
        }
    
      /* MOBILE LOGO */
      .dwc-nest-menu:not([data-submenu-reveal="expand"]):has(.brxe-dropdown.open) .dwc-nest-menu__mobile-logo {
        opacity: 0;
        transition: 0s;
      }
    
      .dwc-nest-menu__mobile-logo {
          opacity: 1;
          transition: opacity 0.45s 0.15s var(--mobile-menu-ttf);
      }
    
      .dwc-nest-menu__mobile-logo:not(.brx-header-left *, .brx-header-right *) {
          min-block-size: var(--dwc-nest-header-height);
      }
    
      .brx-header-left .dwc-nest-menu__mobile-logo,
      .brx-header-right .dwc-nest-menu__mobile-logo {
          min-block-size: var(--top-offset);
      }
    
      :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__logo {
          display: none;
      }
    
      :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__mobile-logo {
          display: flex;
      }
    
              /* DROPDOWN INDENT */
    
  
  .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content),
  .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content {
  padding-inline-start: var(--dropdown-indent) !important;
  padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
  border-left: var(--dropdown-indent-line);  
  background-color: var(--dropdown-indent-bg)
  }
  
  
  .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) >   .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle),
  .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > * > :is(a, .brx-submenu-toggle){
  padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
  }
  
  
  .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open > .brx-submenu-toggle,
  .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open > .brx-submenu-toggle{
  background-color: var(--dropdown-active-bg);
  color: var(--dropdown-active-clr);
  }
    
    
     /* BACK BUTTON POSITIONING */
     .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button),
     .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button) {
         min-inline-size: 70%;
         position: fixed;
         inset-block-start: 0;
         transform: translateY(0%) !important;
         inset-inline-start: var(--menu-item-inline-padding);
         color: var(--back-text-clr);
         text-transform: var(--back-text-transform);
         letter-spacing: 1px;
         /* padding-inline: 1rem !important; */
         z-index: 1000;
         font-size: var(--back-text-font-size);
         font-weight: var(--back-text-font-weight);
         background-color: var(--back-text-bg);
         min-block-size: calc(var(--dwc-nest-header-height) - 2px);
         -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
         animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
     }
    
     
    
    
   /* BACK BUTTON TEXT, (ATTR SET BY JS) */
   .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-submenu-reveal="expand"]  button, [data-hide-close-bar="true"] button):after,
      
   .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button):after {
       content: attr(data-text);
   }
  
   /* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */
   .bricks-is-frontend [data-force-backtext="true"]:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"]) > .brx-submenu-toggle button::after{
       content: attr(data-back-text) !important;
   }
  
   .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown:not([data-submenu-reveal="expand"]) .brx-submenu-toggle button[aria-expanded] {
       transition: unset !important;
   }
  
   /* BACK BUTTON CHEVRON ARROW direction */
   .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open > .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg),
   .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-submenu-toggle button svg {
       transform: rotate(90deg);
       margin-inline-end: 0.5em;
       inline-size: 10px;
   }
    
      /* RTL */
      [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"]) > .brx-submenu-toggle button svg, 
      [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-submenu-toggle button svg {
          order: 2;
          margin-inline-end: initial;
          margin-inline-start: 0.5em;
      }
    
    
    
    
     /* overlay back button on logo*/
     body:has(.brx-open .open.active:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"]:not([data-submenu-reveal="expand"]) .dwc-nest-menu-top {
      background-color: var(--mobile-menu-top-bg) !important;
      -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
      animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
  }
  
  body:has([data-submenu-reveal="slide"].brxe-dropdown.open, [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
      background-color: var(--mobile-menu-top-bg) !important;
  }
  
  .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nav-wrapper:not([data-below-header="true"] .dwc-nav-wrapper, [data-show-mobile-logo="true"] .dwc-nav-wrapper, [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper) {
    background-color: transparent !important;
}
  
  
  .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *, [data-show-mobile-logo="true"] *) {
      background-color: transparent !important;
  }
    
    
    
    
      /* MENU BELOW HEADER */
      .bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper {
          inset-block-start: var(--dwc-nest-header-height);
      }
    
      [data-below-header="true"] .dwc-nest-menu-top {
          min-block-size: var(--top-offset);
      }
    
      .bricks-is-frontend [data-below-header="true"] .brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button){
          min-block-size: calc(var(--top-offset) - 1px);
          padding-block: 0 !important;
      }
    
    
      .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
      .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
          inset-block-start: calc(var(--top-offset) + 1px) !important;
      }
    
      .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
          inset-block-start: calc(var(--top-offset) + 1px) !important;
      }
    
      .dwc-nest-menu[data-below-header="true"] .dwc-nest-menu__mobile-logo {
          display: none;
      }
    
    
    
      /* tooltip */
    
      .dwc-nest-tooltip:not(.open.active ~ .dwc-nest-tooltip) {
          opacity: 0 !important;
      }
    
    
      @keyframes slideIn {
          0% {
              transform: translateX(-100%);
              opacity: 0;
          }
    
          100% {
              transform: translateX(0);
              opacity: 1;
          }
      }
    
      @keyframes fadeOut {
          0% {
              transform: translateX(0);
              opacity: 1;
          }
    
          100% {
              transform: translateX(150%);
              opacity: 0;
          }
      }
    
      .dwc-nest-tooltip {
          animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
      }
    
    
      /* EXPAND DROP DOWN */
      /* EXPAND MEGA MENU DROP DOWN */
    
      [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content {
          display: grid !important;
          grid-template-rows: 0fr;
          grid-template-columns: 1fr;
          transition: 0.3s ease-in-out;
          overflow: hidden;
          position: static;
          visibility: visible;
          opacity: 1;
      }
    
      [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
          grid-template-rows: 1fr;
          grid-template-columns: 1fr;
    
      }
    
      [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content> :is(div, li) {
          padding-block: 0 !important;
          opacity: 0;
          transition: opacity 0.3s ease;
      }
    
      [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content :is(div, li):not([data-submenu-reveal="slide"] *) {
          flex-wrap: nowrap !important;
          min-block-size: 0 !important;
      }
    
       [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
          opacity: 1;
          transition: opacity 0.25s 0.25s ease;
      }
    
      /* EXPAND MEGA MENU DROP DOWN -- MODULAR*/
    
      [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content {
          display: grid !important;
          grid-template-rows: 0fr;
          grid-template-columns: 1fr;
          transition: 0.3s ease-in-out;
          overflow: hidden;
          position: static;
          visibility: visible;
          opacity: 1;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
          grid-template-rows: 1fr;
          grid-template-columns: 1fr;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content> :is(div, li) {
          padding-block: 0 !important;
          opacity: 0;
          transition: opacity 0.3s ease;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content :is(div, li) {
          flex-wrap: nowrap !important;
          min-block-size: 0 !important;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
          opacity: 1;
          transition: opacity 0.8s 0.25s ease;
      }
    
      /* HIDE TOP CLOSE BAR */
      [data-hide-close-bar='true'] .dwc-nest-menu-top {
          display: none;
      }
    
    
    
        /* hide close button, bring main hamburger to front */
  
  .dwc-nest-menu .brxe-toggle{
            position: relative;
        }
  
        [data-mobile-top-transparent="true"]:not(:has(.brxe-dropdown.open)) .brxe-toggle[aria-label="Open Menu"]{
            z-index: 9999;
        }
  
  [data-show-toggle-always = "true"]
.brxe-toggle[aria-label="Open Menu"] {
    z-index: 9999;
}
    
        .dwc-nest-menu:not([data-mobile-top-transparent="true"], [data-below-header="true"]) .brxe-toggle[aria-label="Close Menu"] {
          display: grid;
          place-items: center;
          height: 100%;
      }
      
      .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown>.brx-dropdown-content {
          transform: unset;
      }
    
      .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.open>.brx-dropdown-content {
          transform: unset;
      }
      
      .dwc-stripe-style .dwc-nest-header::after,
        .dwc-stripe-style .dwc-nest-header::before{
    display: none !important;
    }
      
    
      /* builder */
      [data-builder-mode] .dwc-nest-menu-top {
          min-block-size: 80px !important;
      }
    
      [data-builder-mode] .dwc-nest-nav-items {
          overflow-y: scroll;
      }
      
      /* in builder ends*/
    
      
    
    }
/* ============= NAV STYLES =========== */

:root{
  
	--primary-clr: orangered;
  --header-bg: white;  
  --header-min-height:60px;
  
  /*when using fullscreen mobile menu*/
  --fullscreen-mobile-menu-top-height: 60px;
  
  --sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  
  /* default width for mega menu dropdown content */
  --dropdown-content-default-width: 1080px; 
  
  /* mega menu dropdown content border radius*/
  --dropdown-content-border-radius: 0;
  
  /* space between dropdwon content and header */
  --dropdown-content-gap:0; 

  /*	mobile/offcanvas menu width */
  --mobile-menu-width: min(300px, 100%); 
  
  /* radius for special mobile style on overlay header*/
  --mobile-menu-radius: var(--overlay-header-radius);

  /* 	mobile/offcanvas/sidebar
  higher value = faster
  use any value, even decimals */  
  --slide-out-speed: 1.3;
  
  /* Back text bar height for sidebar nav & menu below header */
  --top-offset: 40px;
  
  /* overlay backdrop blur */
  --backdrop-blur: 0px;
  

  /* ========================
  MENU ITEMS
  ======================== */

  /* Colors */
  --menu-item-clr: #000;
  --menu-item-hover-clr: var(--primary-clr);  
  --menu-toggle-clr: var(--menu-item-clr);
  --menu-icon-clr: var(--primary-clr);
  
  /* hover colors */
    --menu-toggle-hover-clr: var(--menu-item-hover-clr);
  --menu-item-hover-border-bg: var(--menu-item-active-border-bg);
  --menu-item-hover-border-height:var(--menu-item-active-border-height);
  
  /* active colors */
  --menu-item-active-clr: var(--menu-item-hover-clr);
   --menu-item-active-border-height: 2px;
  --menu-item-active-border-bg: var(--primary-clr);

  /* Backgrounds */
  --menu-item-bg: initial;
  --menu-item-hover-bg: white;
  --menu-item-active-bg: #ededed;

  /* Spacing */
  --menu-item-inline-padding: 1.1rem; /*horizontal padding*/
  --menu-item-block-padding: 1rem; /* vertical padding*/
  --menu-items-gap: 0;

  /* Typography */
  --menu-item-font-weight: 500;
  --menu-item-font-size: 14px;

  /* Bottom Border | Radius */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1); /*mobile only*/
  --menu-item-radius: 0;

  

  
   /* ========================
  MENU CTA BUTTON (ALL BUTTONS)
  ======================== */
  
    /* all cta buttons max width on mobile */
  --cta-width: 100%;
  
  /* gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/
  --cta-gap-offset: 0; 
  
  /* gap between breakout cta and menu toggle on mobile */
  --cta-breakout-gap:20px;
  

  /* ========================
  MENU CTA BUTTON (LAST BUTTON)
  ======================== */

  /* Colors */
  --menu-cta-clr: white;
  --menu-cta-hover-clr: white;

  /* Backgrounds */
  --menu-cta-bg: black;   
  --menu-cta-hover-bg: var(--primary-clr);

  /* Spacing */
  --menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
  --menu-cta-block-padding: var(--menu-item-block-padding);

  /* Borders & Radius */
  --menu-cta-border: none; 
  --menu-cta-radius: 0em;
  
  
  
  /* ========================
  MENU CTA BUTTON (SECOND BUTTON)
  ======================== */

  /* Colors */
  --menu-cta-2-clr: white;
  --menu-cta-2-hover-clr: white;

  /* Backgrounds */
  --menu-cta-2-bg: black;   
  --menu-cta-2-hover-bg: var(--primary-clr);

  /* Spacing */
  --menu-cta-2-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-2-block-padding: var(--menu-cta-block-padding);

  /* Borders & Radius */
  --menu-cta-2-border: var(--menu-cta-border); 
  --menu-cta-2-radius: var(--menu-cta-radius);
  
  
  
  /* ========================
  MENU CTA BUTTON (THIRD BUTTON)
  ======================== */

  /* Colors */
  --menu-cta-3-clr: white;
  --menu-cta-3-hover-clr: white;

  /* Backgrounds */
  --menu-cta-3-bg: black;   
  --menu-cta-3-hover-bg: var(--primary-clr);

  /* Spacing */
  --menu-cta-3-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-3-block-padding: var(--menu-cta-block-padding);

  /* Borders & Radius */
  --menu-cta-3-border: var(--menu-cta-border); 
  --menu-cta-3-radius: var(--menu-cta-radius);


  /* ========================
  DROPDOWN LINKS
  ======================== */
  
  --dropdown-width: 200px;

  /* Colors */
  --dropdown-item-clr: var(--menu-item-clr);
  --dropdown-item-hover-clr: var(--menu-item-hover-clr);
  --dropdown-heading-clr: var(--primary-clr);
  --dropdown-active-clr: white;

  /* Backgrounds */
  --dropdown-content-bg: var(--mobile-menu-bg);
  --dropdown-content-inner-bg: var(--mobile-menu-bg);
  --dropdown-item-hover-bg: white;
  --dropdown-item-bg: white;
  --dropdown-indent-bg: rgb(0 0 0 / 5%);
  --dropdown-active-bg: black;
  --dropdown-inactive-overlay: rgb(0 0 0 / 10%);

  /* Spacing */
  --dropdown-item-inline-padding: var(--menu-item-inline-padding); 
  --dropdown-item-block-padding: var(--menu-item-block-padding); 
  --dropdown-indent: 0.6rem;
  --dropdown-indent-item-pad-offset: 0.5;
  
  /* Typography */
  --dropdown-item-font-size: var(--menu-item-font-size);

  /* Border & Shadow */
  --dropdown-indent-line: solid 1px rgb(0 0 0 / 25%);
  --dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%);
  --dropdown-content-border: solid 1px var(--primary-clr);;

  /* ========================
  CHEVRON (Dropdown Arrow)
  ======================== */

  --chevron-size: 14px;
  --chevron-clr: var(--menu-item-clr);
  --chevron-hover-clr:var(--menu-item-hover-clr);


  /* ========================
  MENU TOGGLE - Hamburger
  ======================== */

  --open-icon-size: 30px; 
  --open-icon-line-height: 3px;
  --icon-line-gap: 0.5em; /* gap between the lines*/
  --open-icon-line-variance: 9px; /* by how much the lines vary in width, e.g. 0 = same width*/
  --open-icon-align: 0;   /* when the lines' width varies, 0 = align right, auto = align left*/
  --open-icon-horizontal-offset: 0px; /* nudge the icon left or right from edge of screen*/



  /* ======================================
  ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER
  ========================================= */

  --adaptive-height-bg: #fff;
  --adaptive-height-border: 1px solid #fff;

  
  
  /* ========================
  STRIPE - when [data-optimize-stripe="true"]
  ======================== */

  --stripe-border-radius: 10px;


  /* ========================
  MOBILE/OFFCANVAS MENU
  ======================== */

  --mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95); /* Transition timing function */
  --mobile-menu-bg: white; /* mobile menu background color */
  --mobile-menu-top-bg: white; /* mobile menu close bar background color */


  /* =================
  OVERLAY HEADER
  ================== */
  --overlay-header-width:1400px;
  --overlay-header-inset:1rem ;
  --overlay-header-bg: rgb(255 255 255 / 100%);
  --overlay-header-bg-active: rgb(255 255 255 / 100%);
  --overlay-header-blur: 10px;
  --overlay-header-radius: 1rem;
  --overlay-header-shadow: 0px 2px 20px rgb(0 0 0 / 20%);
  --overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem);


  /* ========================
  BACK TEXT
  ======================== */

  --back-text-clr: var(--menu-item-clr); /* back to previous menu color */
  --back-text-font-size: 12px;
  --back-text-font-weight: 600;
  --back-text-transform: uppercase;
  --back-text-bg: var(--mobile-menu-top-bg);



  /* ========================
  SIDEBAR NAV - OVERLAY MODE
  ======================== */

  --overlay-sidebar-radius: 1rem ;
  --overlay-sidebar-bg: rgb(255 255 255 / 80%);
  --overlay-sidebar-shadow: 0 0 30px rgb(39 50 59 / 10%);
  --overlay-sidebar-inset: 12px;
  
    

  /* ========================
  PAGE OVERLAY - color/opacity
  ======================== */

  --dwc-overlay-clr: rgba(0, 0, 0, 0.3);




  /* ======== DON'T YOU DARE! ======== */

  --iw: calc(var(--open-icon-size) - var(--open-icon-line-variance));
  --aw: calc(var(--iw) - var(--open-icon-line-variance));
}


  /* SIDEBAR BACK TEXT BAR HEIGHT WHEN BACK TEXT OVERLAYS LOGO */
	#brx-header:has([data-sidebar-back-text-on-logo="true"]) {
    --top-offset: var(--mobile-menu-top-height);
  }


/* ========================================
MOBILE STYLES
copy above variables to modify
for mobile breakpoint
========================================= */

.dwc-mobile{
  --mobile-menu-width: min(450px, 100%); 

  --menu-item-font-size: 18px;
  --dropdown-item-font-size:var(--menu-item-font-size);
  --back-text-font-size: 16px;
  --menu-item-hover-border-bg: initial;

}

 /* ========================
  STICKY HEADER STYLES
copy variables to modify
for sticky header
  ======================== */

.sticky.scrolling{

/* add your sticky styles variable here */
  

}





/* ========== NAV STYLES END ============== */


/* ======== CHANGE postid-xxxx TO THIS TEMPLATE'S ID ========= */    

/*hide sidebar in builder */
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header:not(.postid-21924 *) {
  display: none !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-21924 *) {
  margin: unset !important;
}



const MegaMenuCONFIG = {
    // Minimum width threshold for desktop behavior,
    // should be 1px larger than mobile (max-width) breakpoint in the "MENU Styles/Options" CSS code block
  //IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block
    minWidth: 1201, 
  
    // automatically open the current menu panel/dropdown (mobile, offcanvas & sidebar)
    menuAutoExpansion: true,  
    
    swipeToClose: true,  
  
    // show or hide swipe to close hint
    toolTip: true, 
  
    // adaptive height animation
    adaptiveHeight: false,
  
    // Stripe menu animation
    stripeStyle: false,
  
    headerSelector: '.dwc-nest-header',

    // New properties for dropdown positioning
    shiftFactor: 1,  // Factor to shift overflow
    minOverflow: 10   // Minimum overflow threshold
};

// Centered Logo Configuration
const CenteredLogoCONFIG = {
    enable: 0,    
  	centerGuide: 1,
    forceCenteredLogo: 1,   
// move the navigation left 
// or right using negative or positive value
    centerNudge: 0,  
// allow centered logo when no. of 
// menu items are odd e.g. 5 or 7
  	allowOddItems: 1,   
// place logo 'before' or 'after' the odd menu item
    roundOffFactor: 'before' 
};
NXT level Padel logo
/*prevent FOUC on mobile when using sidebar */
.dwc-mobile :is(.bricks-is-frontend.brx-header-left, .bricks-is-frontend.brx-header-right) #brx-header {
  position: relative;
  inline-size: 100%;
  flex-direction: column;
}

.dwc-mobile .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is(#brx-content, #brx-footer) {
  margin-inline-start: 0;
}

/*prevent FOUC on desktop when using sidebar */
.bricks-is-frontend:is(.brx-header-left, .brx-header-right):not(.show-nav) #dwc_nav_wrapper {
  display: none;
}

/*=== sidebar css ===*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]).no-scroll {
  overflow: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc_nav_wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #dwc-nest-menu .brxe-toggle {
  display: none !important;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header :is(.brxe-code, .dwc-nest-menu-overlay) {
  display: none;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #mobile_menu_top {
  min-block-size: var(--top-offset);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu:not( [data-hide-close-bar = 'true']) .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) + 1px) !important;

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu:not( [data-submenu-reveal = 'slide']) .brx-dropdown-content:not([data-submenu-reveal = 'slide'] *) {  
  inset-inline-start: 0;
  inset-block-start: unset !important;
  overflow: hidden;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
  visibility: hidden;  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;
  min-inline-size: var(--mobile-menu-width);

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button:not([data-submenu-reveal = 'expand'] button)  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal = 'slide'] > .brx-submenu-toggle button  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header #dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

/* sidebar css ends*/



/*sidebar in builder*/
/*=== sidebar css ===*/
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  --top-offset: 40px;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc_nav_wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #dwc-nest-menu .brxe-toggle {
  display: none !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #mobile_menu_top {
  min-block-size: var(--top-offset);
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) - 1px) !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;  
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu {
  margin: 0 !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .brx-nav-nested-items {  
  flex-direction: column !important;  
}
   
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-toggle--open.brxe-toggle {
  display: flex !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brx-nav-nested-items {
  position: relative !Important;
  background: var(--mobile-menu-bg) !important;
  align-items: stretch;
  flex: 1;
}
 
/* MENU CTA (LAST BUTTON) */
:is(.brx-header-left, .brx-header-right)[data-builder-window] [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu-top {
  min-block-size: 80px !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-nav-items {
  overflow-y: scroll;
}

:is(.brx-header-left, .brx-header-right)[data-builder-mode] .brx-dropdown-content {
  min-inline-size: var(--mobile-menu-width);
  position: static;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  flex-wrap: nowrap;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header #dwc-nest-menu .brx-dropdown-content {   
  visibility: visible !important;
  opacity: 1;
}

/*OVERLAY SIDEBAR*/


html:not(.dwc-mobile):has([data-overlay-sidebar=true])  {
 --mobile-menu-bg: rgb(255 255 255 / 0%);
  --menu-item-border: solid 1px rgb(255 255 255 / 50%);
 
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer){
  margin: 0 !important
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer) :where(section):not(section>section) {
  padding-inline-start: calc(var(--mobile-menu-width) + clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem));
  max-inline-size: 100%
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) #brx-header {
  border-radius: var(--overlay-sidebar-radius);
  overflow: hidden;
  background: var(--overlay-sidebar-bg);
  box-shadow: var(--overlay-sidebar-shadow) !important;
  inset: var(--overlay-sidebar-inset);
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) .dwc-nest-header{
  backdrop-filter: blur(13px);
  background: transparent !important;
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]):not([data-builder-modee])  .brx-dropdown-content {
   background-color: rgb(255 255 255 / 100%);
}

/*NO BRX-OPEN STYLES*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column !important;
}


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu.brxe-nav-nested .brxe-dropdown .brx-dropdown-content {
      visibility: visible;
      min-inline-size: var(--mobile-menu-width) !important;
  }


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-dropdown-content {
   position: static;
}
class SidebarNavigation {
  constructor(options = {}) {
    // Basic configuration properties
    this.config = {
      minWidth: options.minWidth || MegaMenuCONFIG.minWidth, // Using external minWidth variable
      menuSelector: options.menuSelector || '.dwc-nest-menu',
      openClass: options.openClass || 'brx-open',
      activeClasses: options.activeClasses || ['open', 'active'],
      leftHeaderClass: options.leftHeaderClass || 'brx-header-left',
      rightHeaderClass: options.rightHeaderClass || 'brx-header-right',
      debounceDelay: options.debounceDelay || 100,
      menuItemClickDelay: options.menuItemClickDelay || 300
    };
    
    // Set dependent selectors
    const menuSelector = this.config.menuSelector;
    this.config.submenuToggleSelector = options.submenuToggleSelector || `${menuSelector} .brx-submenu-toggle`;
    this.config.dropdownSelector = options.dropdownSelector || `${menuSelector} .brxe-dropdown`;
    this.config.dropdownContentSelector = options.dropdownContentSelector || `${menuSelector} .brx-dropdown-content`;
    
    // State
    this.previousHeaderClass = null;
    this.dropdownClickHandlers = new Map();
    this.menuHoverHandlers = null;
    this.menuItemClickTimeout = null;
    this.keyboardNavHandler = null;
    this.cachedFocusableElements = null;
    this.cachedElements = {
      menuElement: null,
      navElement: null,
      dropdowns: null,
      dropdownToggles: null,
      menuItems: null
    };
    
    // Bind methods to this instance
    this.handleResize = this.debounce(this.handleMenu.bind(this), this.config.debounceDelay);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }
  
  // Initialize everything - called once
  init() {
    // Wait for DOM to be fully loaded before attaching events
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => {
        this.initAfterDOMLoaded();
      }, { once: true });
    } else {
      this.initAfterDOMLoaded();
    }
    
    return this;
  }
  
  // Separate initialization method to run after DOM is loaded
  initAfterDOMLoaded() {
    // Cache DOM elements once
    this.cacheElements();
    
    // Setup resize event with passive flag
    window.addEventListener('resize', this.handleResize, { passive: true });
    
    // Setup mutation observer for critical class changes only
    this.setupMutationObserver();
    
    // Initial setup based on current screen size
    this.handleMenu();
    
    // Cache focusable elements once if header class is present
    if (this.hasHeaderClass()) {
      this.cacheFocusableElements();
      this.setupMenuFocusNavigation();
    }
  }
  
  // Cache all required DOM elements upfront
  cacheElements() {
    this.cachedElements.menuElement = document.querySelector(this.config.menuSelector);
    
    if (this.cachedElements.menuElement) {
      this.cachedElements.navElement = this.cachedElements.menuElement.querySelector('.dwc-nest-nav-items');
      this.cachedElements.dropdowns = Array.from(document.querySelectorAll(this.config.dropdownSelector));
      this.cachedElements.dropdownToggles = Array.from(document.querySelectorAll(this.config.submenuToggleSelector));
      this.cachedElements.menuItems = Array.from(document.querySelectorAll(`${this.config.menuSelector} .menu-item`));
    }
  }
  
  // Set up a focused mutation observer only for dropdown state changes
  setupMutationObserver() {
    if (!this.cachedElements.dropdowns || this.cachedElements.dropdowns.length === 0) return;
    
    const callback = (mutations) => {
      for (let mutation of mutations) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          const target = mutation.target;
          const prevClassList = mutation.oldValue ? mutation.oldValue.split(' ') : [];
          const hadBothBefore = prevClassList.includes('open') && prevClassList.includes('active');
          const hasBothNow = target.classList.contains('open') && target.classList.contains('active');
    
          if (hadBothBefore !== hasBothNow) {
            this.updateDropdownAccessibility();
            break; // Only need to update once per batch
          }
        }
      }
    };
    
    // Create observer with optimized options
    this.classObserver = new MutationObserver(callback);
    
    // Observe only the dropdown elements
    this.cachedElements.dropdowns.forEach(dropdown => {
      this.classObserver.observe(dropdown, { 
        attributes: true, 
        attributeFilter: ['class'], 
        attributeOldValue: true 
      });
    });
  }
  
  // Cache focusable elements for keyboard navigation
  cacheFocusableElements() {
    if (!this.cachedElements.navElement) return;
    
    // Get direct children of nav
    const directChildren = Array.from(this.cachedElements.navElement.children);
    
    // Find the first focusable element within each direct child
    this.cachedFocusableElements = directChildren.map(child => {
      // Check if the child itself is focusable
      if (child.matches('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) {
        return child;
      }
      // Otherwise, find the first focusable element within this child
      return child.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
    }).filter(Boolean); // Remove null/undefined values
  }
  
  // Clean up all event listeners and observers
  destroy() {
    // Clean up the mutation observer
    if (this.classObserver) {
      this.classObserver.disconnect();
      this.classObserver = null;
    }
    
    // Clean up resize listener
    window.removeEventListener('resize', this.handleResize);
    
    // Clean up click handlers
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
    
    // Clean up hover handlers
    this.cleanupMenuHover();
    
    // Clean up menu item click handlers
    this.cleanupMenuItemClicks();
    
    // Clean up outside click handler
    document.removeEventListener('click', this.handleOutsideClick);
    
    // Clean up keyboard navigation
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler);
      this.keyboardNavHandler = null;
    }
    
    // Clear any pending timeouts
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  // Utility methods
  hasHeaderClass() {
    return document.body.classList.contains(this.config.leftHeaderClass) || 
           document.body.classList.contains(this.config.rightHeaderClass);
  }
  
  debounce(func, delay) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  }

  // Check if an element has all the required active classes
  hasAllActiveClasses(element) {
    return this.config.activeClasses.every(className => element.classList.contains(className));
  }
  
  // Toggle all active classes on an element
  toggleActiveClasses(element) {
    this.config.activeClasses.forEach(className => {
      element.classList.toggle(className);
    });
  }
  
  // Core functionality methods
  handleMenu() {
    if (!this.cachedElements.menuElement) return;
    if (!this.hasHeaderClass() && !this.previousHeaderClass) return;

    const screenWidth = window.innerWidth;
    const isLargeScreen = screenWidth >= this.config.minWidth;
    const menuElement = this.cachedElements.menuElement;

    if (!isLargeScreen) {
      // Save which class was present before removal
      if (this.hasHeaderClass()) {
        this.previousHeaderClass = document.body.classList.contains(this.config.leftHeaderClass) 
          ? this.config.leftHeaderClass 
          : this.config.rightHeaderClass;
        
        // Remove header classes
        document.body.classList.remove(this.config.leftHeaderClass, this.config.rightHeaderClass);
        menuElement.classList.remove(this.config.openClass);
        
        // Reset accessibility attributes
        this.resetAccessibilityAttributes();
      }
      
      // Clean up event handlers for mobile view
      this.cleanupMenuHover();
      this.cleanupMenuItemClicks();
      this.cleanupDropdownHandlers();
      document.removeEventListener('click', this.handleOutsideClick);
      
      return;
    }

    // Large screen behavior
    if (!this.hasHeaderClass() && this.previousHeaderClass) {
      document.body.classList.add(this.previousHeaderClass);
    }

    if (this.hasHeaderClass()) {
      if (!menuElement.classList.contains(this.config.openClass)) {
        menuElement.classList.add(this.config.openClass);
      }
      
      // Setup elements for large screen view
      this.setupMenuHover();
      this.setupMenuItemClicks();
      this.setupDropdownHandlers();
      this.setupMenuFocusNavigation();
      this.updateDropdownAccessibility();
      
      // Ensure outside click handler is set up
      document.removeEventListener('click', this.handleOutsideClick);
      document.addEventListener('click', this.handleOutsideClick, { passive: false });
    }
  }
  
  // Reset accessibility attributes when switching to mobile
  resetAccessibilityAttributes() {
    if (!this.cachedElements.dropdowns) return;
    
    // Remove all inert attributes from dropdown contents
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      if (content) {
        content.removeAttribute('inert');
      }
      
      const button = dropdown.querySelector('button');
      if (button) {
        button.setAttribute('aria-expanded', 'false');
      }
    });
  }
  
  setupMenuFocusNavigation() {
    // Only run if hasHeaderClass() is true and we have focusable elements
    if (!this.hasHeaderClass() || !this.cachedFocusableElements || this.cachedFocusableElements.length === 0) {
      return;
    }
    
    // Clean up previous handler if it exists
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler, true);
      this.keyboardNavHandler = null;
    }
    
    const navMenu = this.cachedElements.menuElement;
    const focusableElements = this.cachedFocusableElements;
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    
    // Find adjacent focusable elements outside the menu (only once during setup)
    const headerElement = navMenu.closest('header') || document.querySelector('header');
    
    // Prepare variables to hold adjacent elements
    let prevFocusableElement = null;
    let nextFocusableElement = null;
    let firstElementAfterHeader = null;
    
    if (headerElement) {
      // Get all focusable elements within the header - do this once and cache the result
      const headerFocusables = Array.from(
        headerElement.querySelectorAll('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
      ).filter(el => window.getComputedStyle(el).display !== 'none');
      
      // Find the index of our first and last menu elements in one pass
      const menuStartIndex = headerFocusables.indexOf(firstFocusableElement);
      const menuEndIndex = headerFocusables.indexOf(lastFocusableElement);
      
      // Cache the adjacent elements
      if (menuStartIndex > 0) {
        prevFocusableElement = headerFocusables[menuStartIndex - 1];
      }
      
      if (menuEndIndex !== -1 && menuEndIndex < headerFocusables.length - 1) {
        nextFocusableElement = headerFocusables[menuEndIndex + 1];
      }
      
      // Pre-calculate the first element after header - but only if needed
      if (!nextFocusableElement) {
        // Use a more efficient selector that targets immediate children of body that aren't the header
        const selector = 'body > *:not(header)';
        const nonHeaderElements = document.querySelectorAll(selector);
        
        // Only process if we have elements
        if (nonHeaderElements.length > 0) {
          // Create a function to find the first focusable element (used later if needed)
          this.findFirstFocusableAfterHeader = () => {
            for (const element of nonHeaderElements) {
              const focusable = element.querySelector('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
              if (focusable && window.getComputedStyle(focusable).display !== 'none') {
                return focusable;
              }
            }
            return null;
          };
        }
      }
    }
    
    // Create keyboard navigation handler with closure over the cached elements
    this.keyboardNavHandler = (e) => {
      // Quick check for Tab key first
      if (e.key !== 'Tab') return;
      
      // Then check if focus is inside the menu
      if (!navMenu.contains(document.activeElement)) return;
      
      let targetElement = null;
      
      // Handle tab navigation at boundaries only
      if (!e.shiftKey && document.activeElement === lastFocusableElement) {
        // Forward tab from last element
        e.preventDefault();
        e.stopPropagation();
        
        if (nextFocusableElement) {
          targetElement = nextFocusableElement;
        } else if (this.findFirstFocusableAfterHeader) {
          // Only search for elements after header if needed and not already found
          firstElementAfterHeader = this.findFirstFocusableAfterHeader();
          targetElement = firstElementAfterHeader;
        }
        
        // Focus on the target or body as fallback
        setTimeout(() => {
          if (targetElement) {
            targetElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      } 
      else if (e.shiftKey && document.activeElement === firstFocusableElement) {
        // Backward tab from first element
        e.preventDefault();
        e.stopPropagation();
        
        setTimeout(() => {
          if (prevFocusableElement) {
            prevFocusableElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      }
    };
    
    // Use capture phase for the event
    document.addEventListener('keydown', this.keyboardNavHandler, true);
  }
  
  setupMenuHover() {
    const menuElement = this.cachedElements.menuElement;
    if (!menuElement) return;
    
    // Clean up existing hover handlers first
    this.cleanupMenuHover();
    
    // Create event handlers
    const mouseenterHandler = () => {
      menuElement.classList.add(this.config.openClass);
    };
    
    const mouseleaveHandler = () => {
      menuElement.classList.remove(this.config.openClass);
    };
    
    // Add event listeners with passive flag for better performance
    menuElement.addEventListener('mouseenter', mouseenterHandler, { passive: true });
    menuElement.addEventListener('mouseleave', mouseleaveHandler, { passive: true });
    
    // Store the handlers for cleanup
    this.menuHoverHandlers = {
      element: menuElement,
      mouseenter: mouseenterHandler,
      mouseleave: mouseleaveHandler
    };
  }
  
  cleanupMenuHover() {
    if (this.menuHoverHandlers) {
      const { element, mouseenter, mouseleave } = this.menuHoverHandlers;
      element.removeEventListener('mouseenter', mouseenter);
      element.removeEventListener('mouseleave', mouseleave);
      this.menuHoverHandlers = null;
    }
  }
  
  setupMenuItemClicks() {
    if (!this.cachedElements.menuItems || this.cachedElements.menuItems.length === 0) return;
    
    // Clean up existing handlers first
    this.cleanupMenuItemClicks();
    
    const menuElement = this.cachedElements.menuElement;
    const menuItemHandlers = new Map();
    
    this.cachedElements.menuItems.forEach(item => {
      const clickHandler = () => {
        if (this.hasHeaderClass()) {
          // Clear any existing timeout
          if (this.menuItemClickTimeout) {
            clearTimeout(this.menuItemClickTimeout);
          }
          
          // Set timeout before adding the class
          this.menuItemClickTimeout = setTimeout(() => {
            if (!menuElement.classList.contains(this.config.openClass)) {
              menuElement.classList.add(this.config.openClass);
            }
          }, this.config.menuItemClickDelay);
        }
      };
      
      menuItemHandlers.set(item, clickHandler);
      item.addEventListener('click', clickHandler);
    });
    
    this.menuItemClickHandlers = menuItemHandlers;
  }
  
  cleanupMenuItemClicks() {
    if (this.menuItemClickHandlers && this.menuItemClickHandlers instanceof Map) {
      this.menuItemClickHandlers.forEach((handler, item) => {
        item.removeEventListener('click', handler);
      });
      this.menuItemClickHandlers.clear();
    }
    
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  setupDropdownHandlers() {
    if (!this.hasHeaderClass() || !this.cachedElements.dropdownToggles) return;
    
    // Clean up existing handlers first
    this.cleanupDropdownHandlers();
    
    this.cachedElements.dropdownToggles.forEach(toggle => {
      const clickHandler = (event) => {
        event.stopPropagation();
        event.preventDefault();
        
        const dropdown = toggle.closest(this.config.dropdownSelector);
        if (dropdown) {
          this.toggleActiveClasses(dropdown);
          this.updateDropdownAccessibility();
        }
      };
      
      this.dropdownClickHandlers.set(toggle, clickHandler);
      toggle.addEventListener('click', clickHandler);
    });
  }
  
  cleanupDropdownHandlers() {
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
  }
  
  handleOutsideClick(event) {
    if (event.target.tagName === 'A') return;
    if (!event.target.closest(this.config.dropdownSelector)) return;
    if (!event.target.closest(this.config.submenuToggleSelector)) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  updateDropdownAccessibility() {
    // Only run if hasHeaderClass() is true
    if (!this.hasHeaderClass() || !this.cachedElements.dropdowns) return;
    
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      const button = dropdown.querySelector('button');
      
      // Check if dropdown has all active classes
      const isOpen = this.hasAllActiveClasses(dropdown);
      
      if (content) {
        if (isOpen) {
          content.removeAttribute('inert');
        } else {
          content.setAttribute('inert', '');
        }
      }
      
      if (button) {
        button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      }
    });
  }
}


const sidebarNav = new SidebarNavigation().init();
@media (min-width: 1201px){
  .dwc-mobile header{
      display: none;
  }
  
  /* CENTERED LOGO*/

  /*force center align for centered logo menu */

.dwc-nest-header__container.dwc-logo-is-centered {
    justify-content: center;
}
  
  .dwc-logo-is-centered .dwc-nest-menu .brx-nav-nested-items{
  justify-content: center;
}


/*remvoe bricks default margin left*/
#brx-header .dwc-logo-is-centered .dwc-nest-menu li:not(.brx-dropdown-content *){
  
    margin-inline: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* prevent logo from shrinking on sceen resize*/
#brx-header .dwc-logo-is-centered .dwc-header-logo-item{
   flex-shrink: 0;
} 

.dwc-center-guide {
  background-color: rgba(132, 255, 0, 0.32);
  position: fixed;
  top: 0;
  bottom: 0;  
  align-self: center;
  height: 100dvb;
  z-index: 9999;
  pointer-events: none;
}
  
  body:not(:has([data-fix-centered-logo-fouc="true"])) .dwc-center-guide::before {
    content: 'To fix FOUC on the header, Go to Header Pro div > Attribute > data-fix-centered-logo-fouc, set the value to "true"';
    position: absolute;
    top: 30vh;
    padding: 1rem;
   background-color: white;
 
}

.dwc-logo-is-centered .dwc-menu-wrap{
  inline-size:100%
}


  
  .dwc-nest-header .brx-nav-nested-items {    
    transition-property: opacity,transform;   
}
  
  body.adaptive-height-active:has([data-fix-centered-logo-fouc="true"]):not(:has(.dwc-logo-is-centered))::before {
    content: 'Go to the Header Pro section > Attribute > data-fix-centered-logo-fouc, remove the value "true" OR enable Centered Logo';
}
  

}

/* end min-width */

/*fix centered logo fouc*/
  html:not(.dwc-mobile)  .bricks-is-frontend header:has([data-fix-centered-logo-fouc="true"]):not(.desktop-centered header) {
    opacity: 0;
}



/*end fix fouc*/

.dwc-adaptive-height:not(.dwc-stripe-style){
    --dropdown-content-gap: 0 
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content){
  inset-inline-start: 0 !important;
}



html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content .brx-dropdown-content:not(.brx-sub-submenu-overflow-right, .brx-submenu-overflow-right){
inset-inline-start: 100% !important;
}


html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
    min-inline-size: var(--dropdown-width) !important;    
}

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{ 
  box-shadow: var(--dropdown-content-shadow);
}


.dwc-nest-menu[data-submenu-reveal="expand"] .brx-nav-nested-items > .brxe-dropdown:not([data-submenu-reveal="slide"], .brx-has-megamenu)  > .brx-submenu-toggle {
transform: translateY(0);
z-index: 9999;
}


:is([data-submenu-reveal="expand"][data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
:is(.brx-header-right, .brx-header-left) [data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
inset-block-start: 0;
transition: 0s;
min-inline-size: var(--mobile-menu-width);
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner:before {   
block-size: var(--open-icon-line-height);
inset-inline-end: var(--open-icon-align);       
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:before {   
inline-size: var(--open-icon-size);      
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):before {   
inset-block-start: calc(var(--icon-line-gap) * -1); 
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):after {   
inset-block-end: calc(var(--icon-line-gap) * -1); 
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner{
block-size: var(--open-icon-line-height);
inset-inline-end:  var(--open-icon-horizontal-offset);      
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner{
inline-size:var(--iw);    
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner:after {   
block-size: var(--open-icon-line-height);
inset-inline-end:  var(--open-icon-align);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:after {   
inline-size: var(--aw);
}


.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:after,
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner{
inline-size: calc(var(--iw) * 1.2);
}


.dwc-nest-toggle--open.brxa--vortex .brxa-wrap{
inline-size: var(--open-icon-size)
}

.dwc-nest-menu .brxa-inner, 
.dwc-nest-menu .brxa-inner:after, 
.dwc-nest-menu .brxa-inner:before{
background-color: var(--menu-toggle-clr)
}

.dwc-nest-menu.brxe-nav-nested .brxe-toggle i{
color: var(--menu-toggle-clr)
}

.dwc-nest-menu .brxa-wrap:hover .brxa-inner,
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:after, 
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:before {
background-color: var(--menu-toggle-hover-clr) !important
}

/* icon animation */

.dwc-nest-toggle--open.brxa--vortex .brxa-inner {
transition-duration: .3s;
transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
transform: rotate(225deg);
transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before {
opacity: 0;
inset-block-start: calc(var(--icon-line-gap) * -1);
inline-size: 0px !important;   
}

.dwc-nest-toggle--open .brxa-inner:before {
transition-duration: 0.25s;
transition-property: inline-size, tansform !important;

}



/* MENU ITEMS SPACING AND COLOR*/
/* Shared styles for both menu types */
.dwc-nest-menu .brx-nav-nested-items > li > a:not(.dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
font-weight: var(--menu-item-font-weight);
font-size: var(--menu-item-font-size);
color: var(--menu-item-clr);
background-color: var(--menu-item-bg);
inline-size: 100%;
}

.dwc-nest-menu .brx-dropdown-content > .brxe-dropdown > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
  --menu-item-font-size: var(--dropdown-item-font-size)
}

/* Specific padding for nested menu items */
.dwc-nest-menu .brx-nav-nested-items > li > a,
.dwc-nest-menu .brx-nav-nested-items > li.brx-has-megamenu .brx-submenu-toggle {
padding-block: var(--menu-item-block-padding);
padding-inline: var(--menu-item-inline-padding) !important;
}

/* Specific padding for dropdown items */
.dwc-nest-menu .brx-dropdown-content > .menu-item > a,
.dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle {
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-item-inline-padding) !important;
}

.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not([aria-current="page"], li:hover > *),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *, .open.active *) {
color: var(--dropdown-item-clr) !important;
}


/* DROPDOWN MENU ITEMS BG COLOR */
.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not(.brx-has-megamenu a),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *) {
background-color: var(--dropdown-item-bg)
}

/* DROPDOWN BG COLOR */
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
background-color: var(--dropdown-content-bg);
}

/* HOVER STYLES */
.dwc-nest-menu .brx-nav-nested-items > li:hover > a,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item:hover > a {
color: var(--menu-item-hover-clr);
background-color: var(--menu-item-hover-bg)
}

.dwc-nest-nav-dropdown-link:hover {
color: var(--menu-item-hover-clr);
}

.dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):hover::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):focus-visible::before,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li:focus-within > .brx-submenu-toggle::before{
    content: '';
    background-color: var(--menu-item-hover-border-bg);
    inline-size: 100%;
    block-size: var(--menu-item-hover-border-height);
    position: absolute;
    inset-block-start: calc(100% - var(--menu-item-hover-border-height));
    inset-inline-start: 0;
}

.dwc-nest-menu .brx-nav-nested-items > li.menu-item {
   position: relative; 
}

/* ACTIVE STYLES */
/* links and dropdwon active styles */
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(li:hover > a, a:hover, .dwc-nest-menu__logo, 
[data-last-item-is-button="true"] .menu-item:last-of-type a, 
[data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, 
[data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a),
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]):not(li:hover) > .brx-submenu-toggle {
color: var(--menu-item-active-clr);
background-color: var(--menu-item-active-bg);
}

.dwc-nest-menu .brx-nav-nested-items .brx-submenu-toggle > a[aria-current="page"]{   
  background-color: initial !important;  
}

.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle{
  position: relative;
}

.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not([data-last-item-is-button="true"] .menu-item:last-of-type a, 
[data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, 
[data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .brx-submenu-toggle > a)::before,
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .brx-submenu-toggle::before{
  content: '';
  background-color: var(--menu-item-active-border-bg);
  inline-size: 100%;
  block-size: var(--menu-item-active-border-height);
  position: absolute; 
  inset-block-start: calc(100% - var(--menu-item-active-border-height));
  inset-inline-start: 0;  
}

.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .brx-submenu-toggle > :is(a:not(.dwc-nest-menu__logo), svg, button, span){
color: var(--menu-item-active-clr);
}


/* DROPDOWN HOVER BG */
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle:not(.brx-has-megamenu *), 
.dwc-nest-menu .brx-dropdown-content > li:hover > a:not(.brx-has-megamenu a){
background-color: var(--dropdown-item-hover-bg) ;
color: var(--dropdown-item-hover-clr);
}


.dwc-nest-menu.brxe-nav-nested .brx-submenu-toggle {
justify-content: space-between;
}

/* DROPDOWN INDENT */

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"])
.brxe-dropdown:not(.brx-has-megamenu) > 
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) {
padding-inline-start: var(--dropdown-indent) !important;
padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
border-left: var(--dropdown-indent-line);  
background-color: var(--dropdown-indent-bg)
}

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.brxe-dropdown:not(.brx-has-megamenu) > 
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle){
padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
}

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.open.active.brxe-dropdown > .brx-submenu-toggle{
background-color: var(--dropdown-active-bg);
color: var(--dropdown-active-clr);
}

:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) 
:is([data-submenu-reveal="expand"]) 
.open.active.brxe-dropdown > .brx-submenu-toggle svg:not(.open.active.brxe-dropdown:hover > .brx-submenu-toggle svg){
color: var(--dropdown-active-clr);
}


/* MENU ITEMS COLOR */
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle :where(span, a, svg) {
color: inherit;
font-weight: inherit;
} 

/* CHEVRON */
.dwc-nest-menu .brx-nav-nested-items > li:not(li:has([aria-current="page"]), li:hover) .brx-submenu-toggle svg{
color: var(--chevron-clr);
}

.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle svg{
  font-size: var(--chevron-size);
  color: var(--chevron-clr);
  }
  .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .brx-submenu-toggle svg,
.dwc-nest-menu .brx-nav-nested-items  li:hover > .brx-submenu-toggle svg{  
  color: var(--chevron-hover-clr);
  }

.brx-dropdown-content .brxe-dropdown { 
position: static;   
}

.brx-dropdown-content:not(.brx-has-megamenu .brx-dropdown-content) {
padding-inline-end: 0 !important;
}


/*OVERLAY*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) :is(.brxe-code, .dwc-nest-menu-overlay),
body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay,
[data-builder-mode] .dwc-nest-menu-overlay {
display: none;
}

.bricks-is-frontend #brx-header .dwc-nest-menu[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
visibility: hidden;
}

/* builder */

[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top {
min-block-size: 80px !important;
}



/* ===========DESKTOP ONLY ============== */

:is( html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)), 
.dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) {
  background-color: transparent !important;
}


html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu){
inline-size: 100%;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type){
margin-inline-start: auto;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type) {
margin-inline-start: auto;
}

html:not(.dwc-mobile) .dwc-nest-tooltip {
display: none;
}


html:not(.dwc-mobile)  .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *, [data-offcanvas="true"] *)  {
box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right) .brxe-nav-nested .brxe-dropdown.open>.brx-dropdown-content {
  display: flex;
  min-width: auto;
  opacity: 1;
  overflow-y: auto;
  position: static;
  visibility: visible;
  
}

/* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:has(.brx-sub-submenu-overflow-right):hover::after {
  inset-inline-end: 100%;  
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:not(.brxe-dropdown:has(.brx-sub-submenu-overflow-right)):hover::after {   
   inset-inline-start: 100%;
}


html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:hover::after {
   content: "";
   position: absolute;
   inset-block-end: 0;
   block-size: 100%;
   inline-size: 100%;   
   z-index: -1;   
}

/* html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open  .brx-dropdown-content .brxe-dropdown:hover::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  block-size: calc((var(--menu-item-inline-padding) * 2) + (var(--menu-item-font-size) * 2));
  inline-size: 150%;
  inset-inline-end: 50%;
  transform: translateX(50%);
  z-index: -1;
  } */

/*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING  */
html:not(.dwc-mobile) .open:has(.open) >  .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--dropdown-inactive-overlay);
pointer-events: none;
border-radius: var(--dropdown-content-border-radius);
}

/* LAST BUTTON LEFT PADDDING ON DESKTOP */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
padding-inline-start: var(--menu-item-inline-padding);
}

/* hide toggle with back button appears */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Open Menu"] {
z-index: 1;
}

/* fades in close button when the main toggle is covered by the back button */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Close Menu"]:not([data-submenu-reveal="expand"] *){
opacity: 1;
}

html:not(.dwc-mobile) [data-mobile-top-transparent="true"][data-offcanvas="true"]:not([data-show-mobile-logo="true"]) .brxe-toggle[aria-label="Close Menu"] {
opacity: 0;
}

html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper{
  z-index: 9999
  }

html:not(.dwc-mobile) [data-offcanvas="true"].dwc-nest-menu .brxe-toggle {
display: flex;
}

/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-nav-list:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) {
background: transparent !important;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle),
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > a,
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > button {
cursor: default;
}

/* handles translate and opacity animation for stripe style on desktop */
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(0);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s 0.15s;
opacity: 1;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(5%);
}

html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(-5%);
}

/* mobile logo */
html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo:not([data-offcanvas="true"]:not(.brx-header-left *, .brx-header-right *) .dwc-nest-menu__mobile-logo) {
display: none;
}


/* prevent fouc when offcanvas is enabled and anime height */
body.bricks-is-frontend:has([data-offcanvas="true"])
.dwc-nav-wrapper:not(.show-nav .dwc-nav-wrapper){
display: none;
}

.dwc-mobile [data-hide-close-bar = 'true'] .dwc-nav-wrapper{
inset-block-start: var(--dwc-nest-header-height) 
}

:is(.brx-header-left, .brx-header-right) .dwc-nest-header::before{
display: none;
}

/* mobile menu from top behind header */
.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) {
  z-index: unset !important;
}

.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper {
z-index: -1;
}

.dwc-mobile .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) {
  background-color: var(--header-bg)
}

/************************************
MENU HEIGHT/ STRIPE STYLE
************************************/

:is([data-builder-mode], .brx-header-right, .brx-header-left) .dwc-nest-header::after,
body:has([data-offcanvas="true"]) .dwc-nest-header::after {
display: none;
}

.dwc-nest-header:not(:is(.dwc-adaptive-height, .dwc-stripe-style) .dwc-nest-header)::after{
display: none;
}


html:not(.dwc-mobile) .dwc-nest-header::after {
  display: none;
  content: '';
  min-block-size: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  transition-delay: 0.1s !important;
  pointer-events: none;
  transition: inline-size 0.2s,
    block-size 0.2s,
    opacity 0.2s,
    inset-inline-start 0.2s,
    transform 0.2s !important;
  will-change: block-size, inline-size, inset-inline-start, transform, opacity;
  contain: layout paint;
  z-index: -1;
}

html:not(.dwc-mobile) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
  position: fixed;
}

html:not(.dwc-mobile) .dwc-adaptive-height:not(.dwc-stripe-style) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
  inset-block-start: 0;
}

html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"])::after {
  position: absolute;
  inset-block-end: calc(100% - var(--dwc-nest-header-height));
  block-size: 1000px;
  transform: translateY(calc(var(--dropdown-menu-height) * 1.01)) translateZ(0);
}


html:not(.dwc-mobile) .adaptive-height-active:is(.dwc-stripe-style, .dwc-adaptive-height) .dwc-nest-header::after {
  display: block;
}

.dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.adaptive-height-active .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content){
  display:none
}

html:not(.dwc-mobile) body:has(.brx-has-megamenu.open) .dwc-nest-header::after {
transition-delay: 0s !important;
}

/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0s;
box-shadow: none !important;
transition-duration: 0s;
overflow-x: hidden;
}

html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0.1s;
transition-duration: .2s;
}


html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before {
content: '';
position: absolute;
inset-block-start: 100%;
block-size: calc(var(--dwc-nest-header-height)* 0.5);
inline-size: 50vw;
transform: translateX(-50%);

}

html:not(.dwc-mobile) .dwc-stripe-style .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
overflow-x: hidden;
border-radius: var(--stripe-border-radius);
}


html:not(.dwc-mobile) .dwc-nest-header {
position: relative;
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::before {
content: '';
inline-size: 15px;
block-size: 15px;
background-color: var(--adaptive-height-bg);
position: absolute;
inset-block-start: 100%;
transition: 0s;
transition-property: inset-inline-start, transform, opacity;
inset-inline-start: var(--navlink-midpoint);
transform: translateX(-50%) rotate(45deg) translateY(calc(50% + 2px));
pointer-events: none;
border-top: var(--adaptive-height-border);
border-left: var(--adaptive-height-border);
z-index: 999;
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header:has(.brxe-dropdown.brx-has-megamenu.open:hover)::before {
  transition: 
    opacity 0.2s 0.1s, 
    transform 0.2s 0s,
  inset-inline-start 0.2s 0s;
}

html:not(.dwc-mobile) .dwc-nest-header::before{
opacity: 0 ;
}

html:not(.dwc-mobile) .dwc-nest-header.hide-menu-animation::after {
  opacity: 0 !important;
  }

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header.show-menu-animation:has(.brx-has-megamenu:hover)::before,
html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after {
opacity: 1;
}


html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
border: var(--adaptive-height-border);
}


html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
/* transform: translateY(calc(var(--dwc-nest-header-height) * 0.5)); */
}

html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 2.5rem);
inline-size: calc(var(--dropdown-menu-width) + 5rem);
transform: unset;
inset-block-start: calc(var(--dwc-nest-header-height) + 14px);
block-size: var(--dropdown-menu-height);
z-index: 1;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style:has(.brx-has-megamenu.open):not(:has([data-optimize-stripe=true])) .dwc-nest-header::after {
block-size: calc(var(--dropdown-menu-height) + 0rem) !important;
opacity: 1;
}

/* hide nav content until js is ready*/
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu>.brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-offcanvas="true"] .brx-dropdown-content) {
opacity: 0;
}



body:has(.brx-has-megamenu.open) .sticky .dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
}

.dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
opacity: 0;
}

html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 1.5px);
inline-size: calc(var(--dropdown-menu-width) + 2.5px);
/*transform: unset;*/
block-size: calc(var(--dropdown-menu-height) + 3px) !important;
z-index: 1;
border-radius: var(--stripe-border-radius);
transform: translateZ(0);
opacity: 1
}


html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
border: var(--adaptive-height-border);
}


html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transform: translateY(16px) !important; 
inset-block-start: 100%;
}


.dwc-nest-header:not(.show-nav .dwc-nest-header)::after {
display: none;
}

/****************
MENU OVERLAY
***************/

.dwc-nest-menu-overlay {
position: fixed;
inline-size: 100%;
block-size: 100%;
background: var(--dwc-overlay-clr) !important;
z-index: 1;   
opacity: 0;
transition: 0.4s;
backdrop-filter: blur(var(--backdrop-blur));
}

body:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay  {
  inset-block-start: var(--dwc-nest-header-height);
}

body:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"]) .dwc-nest-menu-overlay  {
  inset-block-start: 0;
}

.logged-in:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay:not(:has(+ .x-header)) {
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height));
}


@media (min-width:1025px){
.bricks-is-frontend:not(:has([data-offcanvas="true"])) header:has(.open) .dwc-nest-menu-overlay {
  opacity: 1;
}
}


.dwc-nest-menu-overlay {
pointer-events: none;
}

.no-scroll .dwc-nest-menu-overlay {
opacity: 1;  
}

:is(.brx-header-right, .brx-header-left) .dwc-nest-header__container {
padding-inline: 0
}



/*fade in back button*/
@-webkit-keyframes dwc-nest-fade-in {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
@keyframes slide-in-right {
0% {
  opacity: 0;
}
100% {   
  opacity: 1;
}
}

/* configurable menu and submenu slide out speed */
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
.bricks-is-frontend :is([data-submenu-reveal="slide"][data-offcanvas="true"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
:is(.bricks-is-frontend.brx-header-right, .bricks-is-frontend.brx-header-left) :is([data-submenu-reveal="slide"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper){
transition-duration: calc(0.5s / var(--slide-out-speed)) !important;    
}

#brx-header{
--content-gap: 0;
}


/* overlay header */
html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]) {
padding: var(--overlay-header-inset);  
}

html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]):not(.sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0; 
}

html:not(.dwc-mobile) .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header = "true"]:not(:has([data-offcanvas="true"])){
backdrop-filter: blur(var(--overlay-header-blur));
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open) > 
.dwc-nest-header[data-overlay-header = "true"]{
background-color: var(--overlay-header-bg-active) !important;
}

/* overlay on mobile */
.dwc-mobile .bricks-is-frontend 
#brx-header:has([data-overlay-header-mobile = "true"]) {
padding: var(--overlay-header-inset);  
}

.dwc-mobile .bricks-is-frontend 
#brx-header:has([data-overlay-header-mobile = "true"]):not(.sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0; 
}

.dwc-mobile .bricks-is-frontend #brx-header > 
.dwc-nest-header[data-overlay-header-mobile = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}

/*offset hero top padding when overlay header is active */
#brx-header:has([data-offset-section-padding="true"]) + main > :is(section, div) {
  padding-block-start: var(--overlay-offset-padding);
}

/* menu height anime on overlay header  */

html:not(.dwc-mobile) .bricks-is-frontend 
#brx-header:has([data-overlay-header = "true"]) 
.dwc-nest-header::after {
border-radius: var(--overlay-header-radius);
inset-block-end: calc(100% + var(--overlay-header-inset));
opacity: 1;    
}

html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style)
#brx-header:has([data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"])) 
.dwc-nest-header.show-menu-animation::after {
    transform: translateY( calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)))) translateZ(0)
}

html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header:has([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header.show-menu-animation::after {
  block-size: calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)));
}

/* we need to reposition the overlay outside the header */
html:not(.dwc-mobile) .bricks-is-frontend:has(.open):not(:has([data-offcanvas="true"])) .dwc-nest-menu-overlay{
  opacity: 1;
 }

/*menu items border radius desktop only*/
html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items > li > 
:is(a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo ), .brx-submenu-toggle){
border-radius: var(--menu-item-radius);
}

html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items {
  gap: var(--menu-items-gap);
}

/* dynamic dropdown conten width and position */

html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
  min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
  inset-inline-start: var(--left-position)!important;
}

html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content {
  border-radius: var(--dropdown-content-border-radius);
}

.dwc-nest-header{
  position: relative;
  z-index: 9999;
  
}

/* optimize multi row header*/
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{
  --dwc-nest-header-height:var(--fullscreen-mobile-menu-top-height) !important
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
    background-color: var(--mobile-menu-top-bg) !important;
   align-items: center !important;
  animation: none !important;
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper{
  z-index: 99999
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .brxe-toggle {
    display: block;
}


.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]:not([data-hide-mobile-logo="true"]) .dwc-nest-menu__mobile-logo {
    display: flex;
}

/* overlay header on multirow*/
html:not(.dwc-mobile) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"] > div:first-child{
    border-top-left-radius: var(--overlay-header-radius);
   border-top-right-radius: var(--overlay-header-radius);
}

/* BricksExtras support*/

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:has(.dwc-nest-header){
    position: relative;
    z-index:1;
}

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:first-child{
    position: relative;
    z-index: 99991;
}




[data-x-overlay]:not([data-x-overlay="none"]) .dwc-nest-header{
background: var(--x-overlay-header-background)!important;
 }

html:not(.dwc-mobile) .brxe-xheaderrow .dwc-nest-header::after {
  block-size: 1000px;
}



/* in builder */
[data-builder-mode] [data-offcanvas="true"] .dwc-nest-toggle--open{
display: none !important;
}

[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top{
  display: none;
}


:is(.brx-header-left, .brx-header-right) [data-builder-mode] .brx-nav-nested-items,
[data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items {
  overflow-y: auto;
  scrollbar-width: thin !important;
  justify-content: flex-start !important;
box-shadow: var(--sidebar-shadow);
}


:is(.brx-header-left, .brx-header-right) [data-builder-mode] .dwc-nav-wrapper,
[data-builder-mode] [data-offcanvas="true"] .dwc-nav-wrapper {
  inset-inline-end: auto ;
  inset-inline-start: 0;
}

/* preview dropdown content width in builder*/

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content){
  min-inline-size:var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;  
  transform: translatex(50px);
  border: dotted #00b0f4 2px
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content):not([data-hide-instruction="true"])::after{
    content: 'Set dropdown Content width in dropdown Content ATTRIBUTES > style, value:--dropdown-content-width: e.g. 1080px. Leave empty to use default width (set in Menu Styles CSS code block) | Set alignment in ATTRIBUTES > data-content-align, values: left, right, center. This aligns the dropdown content to the dropdown button, leave empty to align center to the header. aligments are applied on frontend only. | TIP: click here to select dropdown Content';
    position: absolute;
    inset-block-start: 102%;
    color: #e1e1e1;
    font-size: 12px;    
    letter-spacing: 0.5px;
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
}

/*set alignment for sidebar edit on desktop*/
:is(.brx-header-left, .brx-header-right)[data-builder-mode] .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items,
[data-builder-mode] .dwc-nest-menu.brxe-nav-nested[data-offcanvas="true"] .brx-nav-nested-items {
    justify-content: flex-start !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
    content: 'To edit Sidebar, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
    position: absolute;    
    padding-inline-start: 20px;
    color: #e1e1e1;
    font-size: 12px;    
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
    inline-size: 250px;
}

.brx-header-left[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
  inset-inline-start: 100%;
}

.brx-header-right[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
  inset-inline-end: 100%;
}

[data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
     content: 'To edit Offcanvas, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
    position: absolute;
    inset-block-start: 100%;
    padding-block-start: 20px;
    color: #e1e1e1;
    font-size: 12px;    
    line-height: 1.5;
    background: #2b2b2b;
    min-block-size: fit-content;
    padding: 1em;
    inline-size: 250px;
}

@media (max-width: 1200px){
  [data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
     content: 'To edit Offcanvas, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" ';
    position: absolute;
    inset-inline-start: var(--mobile-menu-width);
    padding-inline-start: 20px;
  }
}

[data-builder-mode] [data-offcanvas="true"]:not(.brx-open) #dwc_nav_wrapper {
    transform: translateX(0);
    visibility: visible;
}

[data-builder-window] [data-last-item-is-button="true"][data-offcanvas="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}


/* === */

:is(.brx-header-left, .brx-header-right)[data-builder-window]  .brxe-nav-nested .brxe-dropdown .brx-dropdown-content:not(.brx-open .brx-dropdown-content) {
    display: none;
}


:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {   
    scrollbar-width: none;
}


/* stripe style fix*/
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:not(:has([data-offcanvas="true"])) {
    align-items: stretch !important;
  }
  
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .dwc-nav-wrapper,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li > 
  a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
  /* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a) */ { 
    height: 100%;
  }
  
  html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
    height: 100%;
    display: flex;
    align-items: center;
  }



/*fix overlay in boxed mode*/
.brx-boxed .dwc-nest-menu-overlay {
    inline-size: var(--boxed-width, 100%);
}

/*wait for stripe style to load before active */
body:is(.dwc-stripe-style, .dwc-adaptive-height):not(.adaptive-height-active, .brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu{
  pointer-events: none;
}


/* LAST CTA BUTTONS */
/* Button styling for FRIST BUTTON*/
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type a {
    color: var(--menu-cta-clr);
    background-color: var(--menu-cta-bg);
    border-radius: var(--menu-cta-radius) !important;
    padding-inline: var(--menu-cta-inline-padding) !important;
    padding-block: var(--menu-cta-block-padding) !important;
    border: var(--menu-cta-border);
}

:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(1) a:hover {
    color: var(--menu-cta-hover-clr);
    background-color: var(--menu-cta-hover-bg);
}

/* Button styling for second button*/
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a {
    color: var(--menu-cta-2-clr);
    background-color: var(--menu-cta-2-bg);
    border-radius: var(--menu-cta-2-radius) !important;
    padding-inline: var(--menu-cta-2-inline-padding) !important;
    padding-block: var(--menu-cta-2-block-padding) !important;
    border: var(--menu-cta-2-border);
}

:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a:hover {
    color: var(--menu-cta-2-hover-clr);
    background-color: var(--menu-cta-2-hover-bg);
}

/* Button styling for third button */
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a {
    color: var(--menu-cta-clr);
    background-color: var(--menu-cta-3-bg);
    border-radius: var(--menu-cta-3-radius) !important;
    padding-inline: var(--menu-cta-3-inline-padding) !important;
    padding-block: var(--menu-cta-3-block-padding) !important;
    border: var(--menu-cta-3-border);
}

[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a:hover {
    color: var(--menu-cta-hover-clr);
    background-color: var(--menu-cta-3-hover-bg);
}

/* Adjust padding for all variants in desktop mode */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type,
html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2),
html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) {
    padding-inline-start: var(--menu-item-inline-padding);
}

/* Center alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type) {
    margin-inline-start: auto;
}

/* Center alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(2), :first-of-type) {
    margin-inline-start: auto;
}

/* Center alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(3), :first-of-type) {
    margin-inline-start: auto;
}

/* Left alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:last-of-type {
    margin-inline-start: auto;
}

/* Left alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(2) {
    margin-inline-start: auto;
}

/* Left alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(3) {
    margin-inline-start: auto;
}

/* General width rule for all button cases and alignments */
html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwc-nest-menu) {
    inline-size: 100%;
}



/* align dropdown content to bottom */
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:has([data-align-content-bottom="true"]):not(:has([data-offcanvas="true"])) {
  align-items: stretch !important;
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .dwc-nav-wrapper,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li > 
a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
/* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a, .dwc-nest-menu__logo)*/ { 
  height: 100%;
}

html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
  height: 100%;
  display: flex;
  align-items: center;
}

/* dropdown content gap */
html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content) {
  transform: translateY(var(--dropdown-content-gap)) scaleX(1) scaleY(1);
}

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content .brx-dropdown-content{
  transform: translateY(0) scaleX(1) scaleY(1);
}

/* caret on dropdown (non stripe) */


/* html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after {
  content: '';
  position: absolute;
  background-color: var(--dropdown-content-bg);
  transform: rotate(45deg);
  inset-block-end: calc(var(--dropdown-content-gap) * -2.1);
  inset-inline-start: calc(50% - var(--dropdown-content-gap));
  opacity: 0;
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
  inline-size: calc(var(--dropdown-content-gap) * 1.5);
  block-size: calc(var(--dropdown-content-gap) * 1.5);
  opacity: 1;
  transition: opacity 0.2s 0.1s;
} */

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
  inline-size: calc(var(--dropdown-content-gap) * 1.2);
  block-size: calc(var(--dropdown-content-gap) * 1.2);
  opacity: 1;
  transition: opacity 0.2s 0.1s;
}

html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after {
  content: '';
  position: absolute;
  background-color: var(--dropdown-content-bg);
  transform: rotate(45deg);
  inset-block-end: calc(var(--dropdown-content-gap) * -1.6);
  inset-inline-start: calc(50% - var(--dropdown-content-gap));
  opacity: 0; 
}


html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after { 
  border-top: var(--dropdown-content-border);
  border-left: var(--dropdown-content-border);
  z-index: 9999;
  inset-block-end: calc(var(--dropdown-content-gap) * -1.55);

}

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)  .brx-dropdown-content/*:not(.brx-dropdown-content .brx-dropdown-content)*/ {
 outline: var(--dropdown-content-border);
}

html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items .open:has(.open) >  .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {  
  background-color: initial;

}

/* === ends == */

body:not(.adaptive-height-active) .brxe-dropdown::after{
display: none;
}

/* multi-level dropdwon arrow > */

html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) 
.dwc-nest-menu:not([data-offcanvas="true"])
.brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button 
svg {
  transform: rotate(270deg);
}


/* align dropwdown in builder */

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="left"][preview-alignment="true"]{
left: 0 !important;
right: auto !important;
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="right"][preview-alignment="true"]{
left: auto !important;
right: 0 !important; 
}

[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content[data-content-align="center"][preview-alignment="true"]{
left: 50% !important;
transform: translatex(-50%) !important;
}


/* breakdout link*/
.dwc-nest-menu > [data-breakout-link]:not(.dwc-nest-menu__logo){
      color: var(--menu-cta-clr);
    background-color: var(--menu-cta-bg);
    border-radius: var(--menu-cta-radius) !important;
    padding-inline: var(--menu-cta-inline-padding) !important;
    padding-block: var(--menu-cta-block-padding) !important;
    border: var(--menu-cta-border);   
}

.dwc-nest-menu > [data-breakout-link="before"],
.dwc-nest-menu > [data-breakout-link]:not([data-breakout-link="after"], .dwc-nest-menu__logo){   
  margin-inline-end: var(--cta-breakout-gap);
  margin-inline-start: auto;
}

.dwc-nest-menu > [data-breakout-link="after"]{   
  margin-inline-start: var(--cta-breakout-gap);
  order: 1;
}

.dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]),
.brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]){
inline-size: 100% !important;
}

.dwc-stripe-style .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]), 
.dwc-stripe-style .brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]) {   
    min-height: var(--header-min-height);
}

.dwc-nest-header__container:has(.brx-nav-nested-items .dwc-nest-menu__logo[data-breakout-link]) { 
  flex-direction: column !important;
  justify-content: center !important;
}


.dwc-nest-menu > [data-breakout-link="after"] + .brxe-toggle[aria-label="Open Menu"]{
    margin-inline-start: auto;
}


/*
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content) > li, 
.dwc-mobile  .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.brx-has-megamenu .brx-dropdown-content > li {
    padding-block-end: 8rem;
}*/

body:has(.brx-has-megamenu.open) .brx-sticky .dwc-nest-header::after {
  background-color: var(--adaptive-height-bg) !important;
}

html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header="true"]):not(.brx-sticky) {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]):not(.brx-sticky) {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}
function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) {
  
    const classList = document.documentElement.classList;
    const isMobile = window.innerWidth < minWidth;
    
    if (isMobile) {
        classList.add('dwc-mobile');
    } else {
        classList.remove('dwc-mobile');
    }
  }
  updateMobileClass();

  // Centered Logo functionality
class CenteredLogoController {
    constructor(config = {}) {
        this.config = {
            enable: config.enable ?? CenteredLogoCONFIG.enable,
            allowOddItems: config.allowOddItems ?? CenteredLogoCONFIG.allowOddItems,           
            forceCenteredLogo: config.forceCenteredLogo ?? CenteredLogoCONFIG.forceCenteredLogo,            
            centerNudge: config.centerNudge ?? CenteredLogoCONFIG.centerNudge,
            roundOffFactor: config.roundOffFactor || CenteredLogoCONFIG.roundOffFactor,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector
        };
        
        this.logoListItem = null;
        this.listItems = [];
        this.resizedFinished = null;
        this.isInitialized = false;
    }
    
    // Method to check if DOM elements are ready
    checkDOMReady() {       
        const headerLogo = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`);
        const headerInner = document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`);
        const menu = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
        const listParent = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);
        
        return headerLogo && headerInner && menu && listParent;
    }
    
    // Early initialization attempt
    initializeEarly() { 
        if (!this.config.enable || this.isInitialized) return;
        
        // Try immediate initialization if elements are ready
        if (this.checkDOMReady()) {           
          document.body.classList.add('dom-ready')
            this.setupElements();
            this.initialize(); 
            return;
        }
        
        // If not ready, use polling with shorter intervals for faster response
        const pollForElements = () => {
            if (this.checkDOMReady()) {
                this.setupElements();
                this.initialize(); 
                return;
            }
            // Poll every 10ms for very fast response
            setTimeout(pollForElements, 10);
        };
        
        pollForElements();
    }
    
    setupElements() {
        this.elements = {
            headerLogo: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`),
            headerInner: document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`),
            menu: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`),
            listParent: document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`)
        };
    }
    
    initialize() {
        
        if (!this.config.enable || this.isInitialized) {
            return;
        }
        
        // Ensure elements are set up before proceeding
        if (!this.elements) {
            this.setupElements();
        }
        
        // Check if all required elements exist
        if (!this.elements.headerLogo || !this.elements.headerInner || 
            !this.elements.menu || !this.elements.listParent) {
            return;
        }
        
        this.isInitialized = true;
        
        // Create logo list item
        this.logoListItem = document.createElement('li');
        this.logoListItem.classList.add('dwc-header-logo-item');
        
        // Get list items excluding those with toggle divs
        this.listItems = Array.from(this.elements.listParent.children).filter(item => 
            !item.querySelector('.brx-toggle-div')
        );
        
        // Calculate position
        const halfIndex = this.listItems.length / 2;
        const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor);
        this.logoListItem.style.order = logoOrder;
      
    //  this.elements.headerInner.classList.add('dwc-logo-is-centered');
        
        // Apply centering immediately
        this.centerLogo(logoOrder);
        
    
        
        // Add resize listener
        window.addEventListener('resize', this.centerLogo.bind(this, logoOrder));
    }
    
    roundHalfIndex(halfIndex, roundOffFactor) {
        if (roundOffFactor === 'before') {
            return Math.floor(halfIndex + 1);
        } else {
            return Math.ceil(halfIndex + 1);
        }
    }
    
    centerLogo(logoOrder) {
        if (!this.config.allowOddItems && this.listItems.length % 2 !== 0) {
            return;
        }
        
        clearTimeout(this.resizedFinished);
        
        this.resizedFinished = setTimeout(() => {
            const isDesktop = window.innerWidth >= MegaMenuCONFIG.minWidth;
            
            if (isDesktop) {
              document.body.classList.add('desktop-centered')
                let listID = 1;
                
                // Set order for list items
                this.listItems.forEach(listItem => {
                    if (!listItem.dataset.id) {
                        listItem.dataset.id = listID++;
                    }
                    this.logoListItem.style.order = logoOrder;
                    listItem.style.order = listItem.getAttribute('data-id');
                });
                
                if (!this.elements.listParent.contains(this.logoListItem) || 
                    !this.elements.listParent.contains(this.elements.headerLogo)) {
                    
                    this.elements.listParent.prepend(this.logoListItem);
                    this.logoListItem.append(this.elements.headerLogo);
                    this.elements.headerInner.classList.add('dwc-logo-is-centered');
                    
                    const logoBounds = this.elements.headerLogo.getBoundingClientRect();
                    const viewportWidth = document.documentElement.clientWidth;
                    const logoWidth = this.elements.headerLogo.offsetWidth;
                    const distanceRight = logoBounds.x;
                    
                    // Force center if needed
                    if (this.config.forceCenteredLogo) {
                        const rightOffset = ((distanceRight + (logoWidth / 2)) + this.config.centerNudge) - (viewportWidth / 2);
                        const offsetMargin = rightOffset * 2;
                        this.elements.menu.style.marginRight = offsetMargin + 'px';
                    }
                  
                                if (CenteredLogoCONFIG.centerGuide) {
                            if (document.body.classList.contains('logged-in')) {
                                // Check if the indicator already exists
                                if (!document.querySelector('.dwc-center-guide')) {
                                    const indicatorEl = document.createElement('div')
                                    indicatorEl.classList.add('dwc-center-guide')
                                    indicatorEl.style.width = this.elements.headerLogo.offsetWidth + 'px';
                                    document.body.appendChild(indicatorEl)
                                }
                            }
                        }     
                  
                }
                
            } else {
               document.body.classList.remove('desktop-centered');
                this.elements.headerInner.classList.add('dwc-logo-is-centered');
                this.elements.menu.style.marginRight = null;
                this.elements.headerInner.prepend(this.elements.headerLogo);
                this.logoListItem.style.order = null;
                this.listItems.forEach(listItem => {
                    listItem.style.order = null;
                });
            }
        }, 500);
    }
}
  
  class MenuAnimationController {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
            adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
            toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
            menuAutoExpansion: config.menuAutoExpansion ?? MegaMenuCONFIG.menuAutoExpansion,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.brx-has-megamenu`,
            offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,  // Added shiftFactor
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow   // Added minOverflow
        };
        
        this.navTopLinks = document.querySelectorAll(this.config.navTopLinksSelector);
        this.header = document.querySelector(this.config.headerSelector);
        
        this.maxMenuWidth = 0;
        this.maxMenuHeight = 0;
        this.headerTimeoutId = null;
        this.mobileMenuTimeoutId = null;
        
        this.applyConfigClasses();
    }
    
    applyConfigClasses() {
      if (MegaMenuCONFIG.stripeStyle) {
          document.body.classList.add('dwc-stripe-style');
      }
      if (MegaMenuCONFIG.adaptiveHeight) {
          document.body.classList.add('dwc-adaptive-height');
      }
  
      if (this.header) {
          this.header.style.setProperty('--stripe-style-enabled', this.config.stripeStyle ? '1' : '0');
          this.header.style.setProperty('--height-animation-enabled', this.config.adaptiveHeight ? '1' : '0');
      }
    }
    
    isAboveMinWidth() {
        return window.innerWidth >= this.config.minWidthThreshold;
    }
    
    isOffCanvas() {
        return !!document.querySelector(this.config.offCanvasSelector);
    }
    
    hasHeaderClass() {
        return document.body.classList.contains('brx-header-left') || 
               document.body.classList.contains('brx-header-right');
    }
    
    updateMenuVariables() {
      if (!this.isAboveMinWidth() || !this.header) return;
      
      let menuOpened = false;
      let menuWidth = 0;
      let menuHeight = 0;
      let menuLeftOffset = 0;
      
      this.navTopLinks.forEach(link => {
          if (link.classList.contains('open')) {
              requestAnimationFrame(() => {
                  let dropdownMenu = link.querySelector('.dwc-nest-nav-list');
                  let nestHeader = link.closest(this.config.headerSelector);
                  
                  if (dropdownMenu) {
                      menuWidth = dropdownMenu.offsetWidth;
                      menuHeight = dropdownMenu.offsetHeight;
                      menuLeftOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX;
                      
                      this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth);
                      this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight);
                      
                      let scaleX = menuWidth / this.maxMenuWidth;
                      let scaleY = menuHeight / this.maxMenuHeight;
                      
                      if (this.config.adaptiveHeight || this.config.stripeStyle) {
                          this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`);
                      }
                      
                      if (this.config.stripeStyle) {
                          this.header.style.setProperty('--dropdown-menu-x', `${menuLeftOffset}px`);
                          this.header.style.setProperty('--dropdown-menu-width', `${menuWidth}px`);
                          this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
                          this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
                          this.header.style.setProperty('--dropdown-menu-scale-x', scaleX.toString());
                          this.header.style.setProperty('--dropdown-menu-scale-y', scaleY.toString());
                      }
                  }
              });
              menuOpened = true;
              this.header.classList.add('show-menu-animation');
              this.header.classList.remove('hide-menu-animation');
          }
      });
      
      if (!menuOpened) {
          this.header.style.setProperty('--dropdown-menu-height', '0px');
          this.header.style.setProperty('--dropdown-menu-scale-y', '0');
          
          if (this.header) {
              this.header.classList.add('hide-menu-animation');
              this.header.classList.remove('show-menu-animation');
          }
      }
    }
  
    updateDropdownPositions() {
        const viewportWidth = document.documentElement.clientWidth;
        if (viewportWidth < this.config.minWidthThreshold) return; // Run only on desktop
    
        const dropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content`);
        const defaultElement = document.querySelector('#brx-header');
        const defaultRect = defaultElement ? defaultElement.getBoundingClientRect() : null;
    
        requestAnimationFrame(() => {
            dropdowns.forEach((dropdown) => {
                const computedStyle = getComputedStyle(dropdown);
                const contentWidth = parseInt(computedStyle.getPropertyValue('--dropdown-content-width'), 10);
                
                // Extract scale factor from transform
                const transform = computedStyle.transform || computedStyle.webkitTransform;
                let scaleX = 1;
                
                if (transform && transform !== 'none') {
                    const matrix = transform.match(/^matrix\((.+)\)$/);
                    if (matrix) {
                        const values = matrix[1].split(', ');
                        scaleX = parseFloat(values[0]);
                    }
                }
    
                const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown');
                if (!parentLi) return;
    
                const contentAlign = dropdown.getAttribute('data-content-align');
                const validAlignments = ['left', 'center', 'right'];
                const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign);
    
                let leftPosition;
                const liRect = parentLi.getBoundingClientRect();
                const dropdownRect = dropdown.getBoundingClientRect();
                
                // Calculate actual width by dividing by the scale factor
                const actualDropdownWidth = dropdownRect.width / scaleX;
    
                if (!hasValidAlignment) {
                    if (defaultRect) {
                        // Account for window scroll and parent container position
                        const headerElement = defaultElement;
                        const headerRect = headerElement ? headerElement.getBoundingClientRect() : null;
                        
                        if (headerRect) {
                            const headerLeftOffset = headerRect.left + window.scrollX;
                            leftPosition = (defaultRect.width - actualDropdownWidth) / 2 - (liRect.left - headerLeftOffset);
                        } else {
                            leftPosition = 0;
                        }
                    } else {
                        leftPosition = 0;
                    }
                } else {
                    switch (contentAlign) {
                        case 'left':
                            leftPosition = 0;
                            const rightEdge = liRect.left + actualDropdownWidth;
    
                            if (rightEdge >= viewportWidth) {
                                let overflow = rightEdge - viewportWidth;                                
    
                                if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
                                leftPosition -= overflow * this.config.shiftFactor;
                            }                            
                            break;
                        case 'right':
                            leftPosition = liRect.width - actualDropdownWidth;
                            const leftEdge = liRect.left + leftPosition;
                            if (leftEdge <= 0) {
                                let overflow = -leftEdge;
                                if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
                                leftPosition += overflow * this.config.shiftFactor;
                            }
                            break;
                        case 'center':
                            leftPosition = (liRect.width - actualDropdownWidth) / 2;
                            break;
                    }
                }
    
                dropdown.style.setProperty('--left-position', `${leftPosition}px`);
                if (!dropdown.style.getPropertyValue('--left-position')) {
                    dropdown.style.setProperty('--left-position', '0px');
                }
            });
        });
    }
    
    setCurrentPageDropdownActive() {
        if (!this.config.menuAutoExpansion) return;
        
        const isDesktop = window.innerWidth >= this.config.minWidthThreshold;
        const hasSpecialHeader = document.body.classList.contains('brx-header-left') || 
                                 document.body.classList.contains('brx-header-right');
        const isOffCanvas = !!document.querySelector(this.config.offCanvasSelector);
        
        if (isDesktop && !hasSpecialHeader && !isOffCanvas) return;       
      
      
        const currentPageLink = document.querySelector('[aria-current="page"]');       
      
        if (currentPageLink) {
            const parentDropdown = currentPageLink.closest('.brxe-dropdown');          
            
            if (parentDropdown) {
                setTimeout(() => {
                    parentDropdown.classList.add('open', 'active');                
                    
                    const submenuToggle = parentDropdown.querySelector('.brx-submenu-toggle');
                    let button = submenuToggle ? submenuToggle.querySelector('button') : null;
                    const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');

                    if (button) {                        
                        menuToggle.addEventListener('click', () => {
                            setTimeout(() => {
                                const submenuIsOpen = parentDropdown.classList.contains('open', 'active');
                                if(submenuIsOpen){
                                     button.setAttribute('aria-expanded', 'true');
                                }                           
                            }, 100)
                          });                        
                      }

                   
                    
                    setTimeout(() => {
                        currentPageLink.scrollIntoView({
                            behavior: 'smooth',
                            block: 'nearest'
                        });
                    }, 600);
                }, 700);
            }
        }
    }
    
    updateChevronPosition(targetLink) {
      if (!this.config.stripeStyle) return;
      
      requestAnimationFrame(() => {
          let headerElement = document.querySelector(this.config.headerSelector);
          if (!headerElement) {
              console.error('Chevron parent element not found.');
              return;
          }
          
          let linkRect = targetLink.getBoundingClientRect();
          let linkMidpoint = linkRect.left + linkRect.width / 2;
          let headerRect = headerElement.getBoundingClientRect();
          let headerLeftOffset = headerRect.left + window.scrollX;
          
          headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`);
          headerElement.style.setProperty('--chevron-parent-left', `${headerLeftOffset}px`);
          headerElement.style.setProperty('--navlink-midpoint', `${linkMidpoint - headerLeftOffset}px`);
          headerElement.style.setProperty('--navlink-left', `${linkRect.left - headerLeftOffset}px`);
          headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`);
      });
    }
    
    updateHeaderHeight() {
        if (this.headerTimeoutId) {
            clearTimeout(this.headerTimeoutId);
        }
        
        requestAnimationFrame(() => {
            if (this.header) {
                this.headerTimeoutId = setTimeout(() => {
                    let headerHeight = this.header.offsetHeight;
                    document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`);
                }, 300);
            }
        });
    }
    
    setMobileMenuTopHeight() {
        if (this.mobileMenuTimeoutId) {
            clearTimeout(this.mobileMenuTimeoutId);
        }
        
        let mobileMenuTop = document.getElementById('mobile_menu_top');
        if (!mobileMenuTop) {
            console.error('Mobile menu top element not found');
            return;
        }
        
        this.mobileMenuTimeoutId = setTimeout(() => {
            let menuTopHeight = mobileMenuTop.offsetHeight;
            document.body.style.setProperty('--mobile-menu-top-height', `${menuTopHeight}px`);
        }, 1000);
    }


    updateMobileLogo() {
        let mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
        let desktopLogo = document.querySelector('.dwc-nest-menu__logo');
        
        if (!mobileLogo) {
            console.error('Mobile logo container not found');
            return;
        }
        
        if (!desktopLogo) {
            console.error('Desktop logo container not found');
            return;
        }
        
        // Updated to check for either img or svg in desktop logo
        let desktopLogoElement = desktopLogo.querySelector('img, svg');
        if (!desktopLogoElement) return;
        
        // Check if mobile logo has an image or SVG
        const currentMobileLogo = mobileLogo.querySelector('img, svg');
        
        // Store original logo data if not already stored
        if (!mobileLogo.hasAttribute('data-original-logo-type') && currentMobileLogo) {
            // Get logo type (img or svg)
            const logoType = currentMobileLogo.tagName.toLowerCase();
            mobileLogo.setAttribute('data-original-logo-type', logoType);
            
            if (logoType === 'img') {
                mobileLogo.setAttribute('data-original-logo-src', currentMobileLogo.src);
                mobileLogo.setAttribute('data-original-logo-alt', currentMobileLogo.alt || '');
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.className || '');
            } else if (logoType === 'svg') {
                // Store SVG content as a string
                mobileLogo.setAttribute('data-original-logo-content', currentMobileLogo.outerHTML);
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.getAttribute('class') || '');
            }
        }
        
        if (this.isAboveMinWidth()) {
            if (currentMobileLogo) {
                mobileLogo.removeChild(currentMobileLogo);
            }
            
            // Clone desktop logo (either img or svg)
            let newLogo = desktopLogoElement.cloneNode(true);
            newLogo.removeAttribute('id');
          //  mobileLogo.appendChild(newLogo);
        } else {
            // For mobile view
            const originalLogoType = mobileLogo.getAttribute('data-original-logo-type');
            
            if (!currentMobileLogo) {
                // If no current logo, clone desktop logo
                let mobileLogoElement = desktopLogoElement.cloneNode(true);
                mobileLogoElement.removeAttribute('id');
                mobileLogo.appendChild(mobileLogoElement);
            } else if (originalLogoType) {
                mobileLogo.removeChild(currentMobileLogo);
                
                if (originalLogoType === 'img') {
                    // Restore original img
                    let mobileLogoImage = document.createElement('img');
                    mobileLogoImage.src = mobileLogo.getAttribute('data-original-logo-src');
                    mobileLogoImage.alt = mobileLogo.getAttribute('data-original-logo-alt') || '';
                    mobileLogoImage.className = mobileLogo.getAttribute('data-original-logo-class') || '';
                    mobileLogo.appendChild(mobileLogoImage);
                } else if (originalLogoType === 'svg') {
                    // Restore original SVG
                    const svgContent = mobileLogo.getAttribute('data-original-logo-content');
                    if (svgContent) {
                        const tempContainer = document.createElement('div');
                        tempContainer.innerHTML = svgContent;
                        const svgElement = tempContainer.querySelector('svg');
                        if (svgElement) {
                            mobileLogo.appendChild(svgElement.cloneNode(true));
                        }
                    }
                }
            }
        }
    }
    
    
    initDesktopNav() {
        if (this.isOffCanvas() || !this.header || this.hasHeaderClass()) return;
        
        let menuElement = this.header.querySelector('.dwc-nest-menu');
        if (menuElement) {
            menuElement.classList.remove('brx-open');
            menuElement.querySelectorAll('.brxe-dropdown').forEach(dropdown => {
                dropdown.classList.remove('active', 'open');
            });
        }
    }
    
    initializeMaxDimensions() {
      if (!this.isAboveMinWidth()) return;
      
      this.navTopLinks.forEach(link => {
          let dropdown = link.querySelector('.dwc-nest-nav-list');
          if (dropdown) {
              this.maxMenuWidth = Math.max(this.maxMenuWidth, dropdown.offsetWidth);
              this.maxMenuHeight = Math.max(this.maxMenuHeight, dropdown.offsetHeight + 10);
          }
      });
      
      this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
      this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
      this.header.style.setProperty('--dropdown-menu-scale-x', '0');
      this.header.style.setProperty('--dropdown-menu-scale-y', '0');
    }
    
    resetForMobile() {
      this.header.style.setProperty('--dropdown-menu-scale-x', '0');
      this.header.style.setProperty('--dropdown-menu-scale-y', '0');
      this.header.style.setProperty('--dropdown-menu-width', '0');
      
      if (this.header) {
          this.header.classList.remove('show-menu-animation', 'hide-menu-animation');
      }
    }

    setBoxedWidthVariable() {
        // Check if body has the brx-boxed class
        if (document.body.classList.contains('brx-boxed')) {
          // Get computed style for the body
          const computedStyle = window.getComputedStyle(document.body);
          
          // Get the max-width value
          const maxWidth = computedStyle.getPropertyValue('max-width');
          
          // Set the max-width as a CSS variable on the body
          document.body.style.setProperty('--boxed-width', maxWidth);
          
          return maxWidth;
        } else {
          return null;
        }
      }

      closeNavOnClick() {
        const menuItemLinks = document.querySelectorAll('.dwc-nest-menu a');
        const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');
        
        // Always remove existing event listeners first
        menuItemLinks.forEach(link => {
            const storedHandler = link._clickHandler;
            if (storedHandler) {
                link.removeEventListener('click', storedHandler);
                delete link._clickHandler;
            }
        });
        
        // Check condition - if true, exit without adding new listeners
        if(this.isAboveMinWidth() && !this.isOffCanvas()) return;
        
        // Only add new event listeners if the condition is false
        menuItemLinks.forEach(link => {
            const clickHandler = () => {
                if (menuToggle) {
                    menuToggle.click();
                }
            };
            
            link._clickHandler = clickHandler;
            link.addEventListener('click', clickHandler);
        });
    }
  }
  
  class TooltipManager {
    constructor(config) {
        this.config = {
            toolTip: config.toolTip || false
        };
        this.targetButton = null;
        this.tooltipProcessed = false;
    }
    
    setBackText() {
        let menuElement = document.querySelector('.dwc-nest-menu');
        let forcedBackText = menuElement.getAttribute('data-back-text')
        document.querySelectorAll('.brx-submenu-toggle').forEach(submenu => {
            const textContent = submenu.textContent.trim();
            const button = submenu.querySelector('.brx-submenu-toggle > button');
            if (button) {
                button.setAttribute('data-text', textContent);
                button.setAttribute('data-back-text', forcedBackText);
            }
        });
    }
    
    updateTooltipDataText(button) {
        if (!this.config.toolTip) return;

        let menuElement = document.querySelector('.dwc-nest-menu');
        let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')
        
        const closestUl = button.closest('.brx-nav-nested-items');
        if (closestUl) {
            const tooltip = closestUl.querySelector('.dwc-nest-tooltip');
            if (tooltip) {
                const buttonText = button.getAttribute('data-text');
                tooltip.setAttribute('data-text', buttonText);
                tooltip.innerText = toolTipBackText + ' ' + buttonText;
            }
        }
    }
    
    addTooltip(button) {
        if (!this.config.toolTip) return;

        let menuElement = document.querySelector('.dwc-nest-menu');
        let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')
        
        const closestUl = button.closest('ul');
        if (!closestUl) return;
        
        this.removeTooltipFrom(closestUl);
        
        const tooltip = document.createElement('div');
        tooltip.className = 'dwc-nest-tooltip';
        tooltip.innerText = toolTipBackText;
        tooltip.style.position = 'fixed';
        tooltip.style.bottom = '12px';
        tooltip.style.left = '12px';
        tooltip.style.background = 'rgb(0 0 0 / 30%)';
        tooltip.style.color = 'white';
        tooltip.style.padding = '5px 10px';
        tooltip.style.borderRadius = '5px';
        tooltip.style.fontSize = '12px';
        tooltip.style.zIndex = '9999';
        tooltip.style.opacity = '0';
        tooltip.style.transition = 'opacity 1.5s';
        tooltip.style.pointerEvents = 'none';
        closestUl.appendChild(tooltip);
        
        requestAnimationFrame(() => {
            tooltip.style.opacity = '1';
        });
    }
    
    removeAllTooltips() {
        document.querySelectorAll('.dwc-nest-tooltip').forEach(tooltip => tooltip.remove());
    }
    
    removeTooltipFrom(ulElement) {
        const existingTooltip = ulElement.querySelector('.dwc-nest-tooltip');
        if (existingTooltip) existingTooltip.remove();
    }
    
    setupTooltipObserver() {
        const tooltipObserver = new MutationObserver((mutationsList) => {
            if (this.tooltipProcessed) return;
            
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    for (const node of mutation.addedNodes) {
                        if (node.nodeType === Node.ELEMENT_NODE &&
                            node.classList.contains('dwc-nest-tooltip') &&
                            !this.tooltipProcessed) {
                            const button = document.querySelector('.open.active > .brx-submenu-toggle > button:not(.open .open button)');
                            if (button) {
                                this.updateTooltipDataText(button);
                                this.tooltipProcessed = true;
                                return;
                            }
                        }
                    }
                }
            }
        });
        
        tooltipObserver.observe(document.body, { childList: true, subtree: true });
    }
  }
  
  class SwipeGestureHandler {
    constructor(config) {
        this.config = {
            swipeToClose: config.swipeToClose || false
        };
        this.targetButton = null;
        this.startX = 0;
        this.startY = 0;
        this.endX = 0;
        this.endY = 0;
    }
    
    initialize() {
        if (!this.config.swipeToClose) return;
        
        document.addEventListener('touchstart', this.handleTouchStart.bind(this));
        document.addEventListener('touchend', this.handleTouchEnd.bind(this));
    }
    
    handleTouchStart(event) {
        if (!this.isMobileMenuOpen()) return;
        
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
    }
    
    handleTouchEnd(event) {
        if (!this.isMobileMenuOpen()) return;
        
        this.endX = event.changedTouches[0].clientX;
        this.endY = event.changedTouches[0].clientY;
        
        let diffX = this.endX - this.startX;
        let diffY = Math.abs(this.endY - this.startY);
        
        if (diffX > 50 && diffY < 30 && this.targetButton) {
            this.targetButton.click();
            this.targetButton = null;
        }
    }
    
    isMobileMenuOpen() {
        return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open');
    }
    
    setTargetButton(button) {
        this.targetButton = button;
    }
  }
  
  class OffcanvasMenuHandler {
    constructor(config) {
        this.config = config || {};
    }
    
    applyMobileStyles() {
        let offcanvasMenu = document.querySelector(this.config.offCanvasSelector);
        let hasHeaderPosition = ['brx-header-left', 'brx-header-right'].some(cls => 
            document.body.classList.contains(cls)
        );
        
        if (!offcanvasMenu && !hasHeaderPosition) return;
        
        let styleSheet = document.querySelector('[data-stylesheet]');
        if (!styleSheet) return;
        
        let styleElement = styleSheet.querySelector('style');
        if (!styleElement) return;
        
        let originalStyles = styleElement.textContent || styleElement.innerText;
        let modifiedStyles = originalStyles.replace(/\(max-width:\s*\d+px\)/g, '(max-width: 5000px)');
        
        let newStyleElement = document.createElement('style');
        newStyleElement.id = 'dwc-offcanvas-styles';
        newStyleElement.textContent = modifiedStyles;
        
        document.head.appendChild(newStyleElement);
        
        setTimeout(() => {
            document.body.classList.add('show-nav');
        }, 100);
        
        styleSheet.remove();
    }
  }
  
  class MenuSystem {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
            adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
            toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
            swipeToClose: config.swipeToClose ?? MegaMenuCONFIG.swipeToClose,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.brx-has-megamenu`,
            offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,  // Added shiftFactor
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow  // Added minOverflow
        };
        
        this.animationController = new MenuAnimationController(this.config);
        this.tooltipManager = new TooltipManager(this.config);
        this.swipeHandler = new SwipeGestureHandler(this.config);
        this.offcanvasHandler = new OffcanvasMenuHandler(this.config);
        this.centeredLogoController = new CenteredLogoController(this.config); // Add the CenteredLogoController

         // Start early initialization for centered logo
         this.centeredLogoController.initializeEarly();
    }
    
    initialize() {
        updateMobileClass(this.config.minWidthThreshold);
        
        document.addEventListener('DOMContentLoaded', () => {
           let overlay = document.querySelector('.dwc-nest-menu-overlay');
           if (!overlay) {
               overlay = document.createElement('nav-overlay');
               overlay.className = 'dwc-nest-menu-overlay';
               
               const header = document.querySelector('#brx-header');
               let mainContent = document.querySelector('main');
               
               if (header) {
                   header.parentNode.insertBefore(overlay, header);
               } else if (mainContent) {
                   mainContent.parentNode.insertBefore(overlay, mainContent);
               }
           }
            
            this.offcanvasHandler.applyMobileStyles();
            this.animationController.updateHeaderHeight();
            this.animationController.initializeMaxDimensions();
            this.animationController.setMobileMenuTopHeight();
            this.animationController.updateMobileLogo();
            this.animationController.setCurrentPageDropdownActive();
            this.tooltipManager.setBackText();
            this.tooltipManager.setupTooltipObserver();
            this.animationController.closeNavOnClick();
            this.centeredLogoController.initialize()
            
            if (this.animationController.isAboveMinWidth()) {
                this.setupDesktopBehavior();
            } else {
                this.swipeHandler.initialize();
            }
            
            this.setupEventListeners();
            
            if (!this.animationController.isAboveMinWidth()) {
                this.animationController.resetForMobile();                
            }

           
            
            setTimeout(() => {
                document.body.classList.add('show-nav');
                this.animationController.updateHeaderHeight();
            }, 200);
            
            setTimeout(() => {
                document.body.classList.add('adaptive-height-active');
                if (this.animationController.isAboveMinWidth()) {                 
                    this.animationController.updateDropdownPositions(); // Initial desktop positioning
                    this.animationController.setBoxedWidthVariable()
                } 
            }, 1200);
        });
        
        return this;
    }
    
    setupDesktopBehavior() {
        this.animationController.navTopLinks.forEach(link => {
            link.removeEventListener('mouseenter', this.handleMouseEnter);
            link.addEventListener('mouseenter', this.handleMouseEnter);
        });
    }
    
    handleMouseEnter = (event) => {
        this.animationController.updateChevronPosition(event.target);
    };
    
    setupEventListeners() {
        let observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    this.animationController.updateMenuVariables();
                }
            });
        });
        
        this.animationController.navTopLinks.forEach(link => 
            observer.observe(link, { attributes: true })
        );
        
        document.addEventListener('click', event => {
            let submenuToggle = event.target.closest('.brx-submenu-toggle');
            if (submenuToggle) {
                setTimeout(() => {
                    let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button');
                    let targetButton = Array.from(openButtons).find(button => {
                        let parentDropdown = button.closest('.brxe-dropdown.open.active');
                        return parentDropdown && 
                               parentDropdown.tagName.toLowerCase() === 'li' && 
                               !parentDropdown.querySelector('.brxe-dropdown.open.active:not(:scope)');
                    });
                    
                    if (targetButton) {
                        this.swipeHandler.setTargetButton(targetButton);
                        
                        if (this.config.toolTip) {
                            this.tooltipManager.removeAllTooltips();
                            this.tooltipManager.addTooltip(targetButton);
                            this.tooltipManager.updateTooltipDataText(targetButton);
                        }
                    }
                }, 50);
            }
        });
        
        window.addEventListener('resize', this.debounce(() => {
            updateMobileClass(this.config.minWidthThreshold);
            this.animationController.updateHeaderHeight();
            this.animationController.initializeMaxDimensions();
            this.animationController.setMobileMenuTopHeight();
            this.animationController.updateMobileLogo();
            this.animationController.closeNavOnClick();
            
            if (this.animationController.isAboveMinWidth()) {
                this.animationController.updateMenuVariables();
                this.animationController.initDesktopNav();
                this.setupDesktopBehavior();
                this.animationController.updateDropdownPositions(); // Update on resize                
            } else {
                this.animationController.resetForMobile();
                this.swipeHandler.initialize();                
            }
        }, 300));
    }
    
    debounce(func, delay) {
        let timeoutId;
        return function(...args) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }
  }
  

  const mainMenu = new MenuSystem().initialize(); 
  

  //==== HEADER INSTANCE EXPERIMENTAL ====
  /*
  const secondaryMenu = new MenuSystem({   
    headerSelector: '.second.dwc-nest-header',
    adaptiveHeight: 1,
    stripeStyle: 0,
    shiftFactor: 1.5,  // Example override
    minOverflow: 300   // Example override
  }).initialize();
  */

// Use WeakMap for better garbage collection
const originalParents = new WeakMap();
let isMobileView = null;
let resizeTimer;

function handleResponsiveMenu() {
  const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth; // Adjust breakpoint as needed
  
  // Only run the logic if the view state changed
  if (isMobileView === currentIsMobile) return;
  
  isMobileView = currentIsMobile;
  const nestMenu = document.querySelector('.dwc-nest-menu');
  
  if (!nestMenu) return;
  
  if (isMobileView) {
    // Mobile behavior
    const targetItems = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]');
    const fragment = document.createDocumentFragment();
    
    targetItems.forEach(item => {
      const parent = item.parentElement;
      parent.classList.add('has-breakout-link')
      
      // Store original parent if not already stored
      if (!originalParents.has(item)) {        
        originalParents.set(item, parent);
      }
      
      // Add to document fragment instead of direct DOM manipulation
      fragment.appendChild(item);
      
      // Hide the original parent
      parent.style.display = 'none';
    });
    
    // Single DOM operation to insert all items
    nestMenu.insertBefore(fragment, nestMenu.firstChild);
  } else {
    // Desktop behavior - restore items to original parents
    const movedItems = nestMenu.querySelectorAll('[data-breakout-link]');
    
    movedItems.forEach(item => {
      const originalParent = originalParents.get(item);
      if (originalParent) {
        originalParent.appendChild(item);
        originalParent.style.display = '';
      }
    });
  }
}

// Run on page load
handleResponsiveMenu();

// Debounce resize events
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(handleResponsiveMenu, 150);
});

// Optional: Add for better initial load behavior
document.addEventListener('DOMContentLoaded', handleResponsiveMenu);
/* DO NOT ADD ANY CODE IN THIS CODE BLOCK */

/*MOBILE MENU/OFFCANVAS/SIDEBAR STYLES*/




@media only screen and (max-width: 1200px) {  
    .desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
    opacity: 0;
}
  
  .dwc-nest-menu__logo[data-breakout-link]{
margin-inline-end: auto
}
  
    /*special mobile menu styles for overlay header UPDATED */

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  transform: translateY(-100%);
}


.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .brx-nav-nested-items {
  transform: translateY(0%);
}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  transition: 0.45s;
  transition-timing-function: var(--mobile-menu-ttf);
  inset-block-start: calc(var(--overlay-header-radius) * -1);
}


.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  inset-block-start: calc(var(--dwc-nest-header-height) / -2);
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
  --mobile-menu-width: 100% !important;
  inline-size: var(--mobile-menu-width);
  border-bottom-left-radius: var(--mobile-menu-radius);
  border-bottom-right-radius: var(--mobile-menu-radius);
  padding-block-start: calc(var(--dwc-nest-header-height) / 2);
  overflow-x: hidden;
}

.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .brx-nav-nested-items {
  max-block-size: fit-content;
}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
  transform: translateY(0%);
  border-radius: var(--overlay-header-radius);
  overflow: hidden !important;
  inset-block-start: var(--overlay-header-inset);

}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .dwc-nav-wrapper {
  transform: translateY(0%);
}

.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) {
  --mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important;
  inline-size: var(--mobile-menu-width) !important;
  inset-inline-end: var(--overlay-header-inset) !important;
  block-size: calc(100dvb - var(--overlay-header-inset))
}

.dwc-mobile .dwc-nest-menu.brxe-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
  height: 0;
}


.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
  padding-inline: initial
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
  border-block-end: initial;
}


.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"])) .dwc-nest-nav-items:has(.open.active) .brx-submenu-toggle>button:not(.brxe-dropdown.open.active .brx-submenu-toggle > button) {
  opacity: 0;
}

.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
  inset-block-start: var(--overlay-header-radius) !important;
  padding-block-start: 50px;
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
  inset-block-start: var(--overlay-header-radius) !important;
  padding-block-start: 50px;
}


.dwc-mobile .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle > button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
    z-index: 9999;
    min-inline-size: 100%;
    min-block-size: 50px;
    inset-block-start: var(--overlay-header-radius);
}


.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
  min-block-size: 100%;
}

  /*
.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-nav-nested-items:has(.open.active) {
  overflow-y: hidden;
}
*/
  
.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content)>li {
  padding-block-end: 40px;
}

.dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div {
  padding-inline: var(--menu-item-inline-padding);
  border-radius: var(--overlay-header-radius);
}

/* special style UPDATED ends*/
  
  
    
    #dwc-nest-menu .brx-nav-nested-items {
      width: var(--mobile-menu-width);
  }
  
      /*  unset default values */
    
      [data-offcanvas="true"] .open:has(.open) .brx-dropdown-content::before {
          display: none !important;
      }
    
      [data-offcanvas="true"] .brx-nav-nested-items {
          flex-wrap: nowrap;
      }
    
    .dwc-nest-menu .brx-nav-nested-items {
        gap: 0;
    }
    
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content)  {
          display: flex;
          visibility: hidden;  
      }
    
      [data-overlay-header="true"] .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content),
    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
        min-inline-size: 0 !important;
    }
    
      .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown>.brx-dropdown-content {
          overflow-y: auto;
      }
    
      .dwc-nest-menu .brx-nav-nested-items {
          flex-direction: column !important;
          flex-wrap: nowrap;
    
      }
    
      .dwc-nest-toggle--open.brxe-toggle {
          display: flex !important;
      }
    
      .dwc-nest-menu .brx-nav-nested-items {
          position: relative !Important;
          background: var(--mobile-menu-bg) !important;
          align-items: stretch;
          flex: 1;
      }
    
    
    
    
    
      .dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) {
          transform: unset
      }
    
      .dwc-nest-nav-top-link:not(.brx-has-megamenu)>.brx-dropdown-content {
          transform: translateZ(0);
          transform: unset;
      }
    
      .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
          opacity: unset !important;
          visibility: unset !important;
      }
    
      .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
          overflow-y: auto;
          scrollbar-width: none;
          justify-content: flex-start !important;
      }
    
    
      /* set new values  */
    
      .dwc-nav-wrapper {
          position: fixed;
          inset-block: 0;
          inset-inline-end: 0;
          transform: translateX(100%);
          background-color: var(--mobile-menu-bg);
          transition: 0.45s;
          transition-timing-function: var(--mobile-menu-ttf);
          z-index: 1;
          flex-wrap: nowrap;
          inline-size: var(--mobile-menu-width);
          visibility: hidden;
      }
    
      /* RTL */
      [dir="rtl"] .dwc-nav-wrapper{
        inset-inline-end: initial;
        inset-inline-start: 0;
    }
    
      .brx-open .dwc-nav-wrapper {
          transform: translateX(0%);
          visibility: visible;
      }
    
    
    
      .dwc-nest-menu-top {
          background-color: var(--mobile-menu-top-bg);
          border-block-end: var(--menu-item-border);
          min-block-size: var(--dwc-nest-header-height);
          display: flex;
          flex-direction: row;
          align-items: center;
      }
    
    
    
      .dwc-nest-nav-top-link.brx-has-megamenu,
      .dwc-nest-dropdown-content>.menu-item>a {
          border-block-end: var(--menu-item-border);
      }
    
      .dwc-nest-nav-top-link:not(.brx-has-megamenu):not(.open, :has(.open)),
      .dwc-nest-dropdown-content>.brxe-dropdown:not(.open, :has(.open)) {
          border-block-end: var(--menu-item-border);
      }
    
    
    
      /* MENU CTA (LAST BUTTON) */
    
      :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type,
    :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+2), 
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+3) {
        padding-inline: var(--menu-item-inline-padding) !important;
        padding-block: var(--menu-item-block-padding) !important;
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: var(--cta-width);
    }
      
     [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+2) + li{
        padding-block-start: var(--cta-gap-offset) !important
    }
    
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+3) + li{
      padding-block-start: var(--cta-gap-offset) !important
    }
    
    
      :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a,
      :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+2) a, 
      [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items> .menu-item:nth-last-of-type(-n+3) a {
        justify-content: center;
      }
    
    
    
      /* MOBILE MENU SLIDE IN DIRECTION */
      .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
          transform: translateX(-100%);
          inset-inline-start: 0;
          overflow: hidden;
      }
    
      /* RTL */
      [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { 
        inset-inline-start: initial;
        inset-inline-end: 0;
    }
    
    [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { 
      inset-inline-start: initial;
      inset-inline-end: 0;
    }
    
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button), 
      
    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button) {
      inset-inline-start: initial;
      inset-inline-end: 0;
      justify-content: flex-end;
    }
    
    
    
    
      .bricks-is-frontend [data-slide-in-direction="left"].brx-open .dwc-nav-wrapper {
          transform: translateX(0);
      }
    
      /* SLIDE IN TOP */
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"].brx-open .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"].brx-open .dwc-nav-wrapper {
          transform: translateY(0%);
      }
    
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"] .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"] .dwc-nav-wrapper {
          transform: translateY(-100%);
      }
    
      /* SLIDE IN BOTTOM */
    
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"].brx-open .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"].brx-open .dwc-nav-wrapper {
          transform: translateY(0%);
      }
    
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"] .dwc-nav-wrapper,
      .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"] .dwc-nav-wrapper {
          transform: translateY(100%);
      }
    
      .bricks-is-frontend [data-slide-in-direction="left bottom"] .dwc-nav-wrapper,
      .bricks-is-frontend [data-slide-in-direction="left top"] .dwc-nav-wrapper {
          inset-inline-start: 0;
          overflow: hidden;
      }
    
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-track,
      .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-track {
          border-radius: 50vw;
          background-color: transparent;
      }
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar,
      .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar {
          inline-size: 0px;
          background-color: transparent;
      }
    
      .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-thumb,
      .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-thumb {
          border-radius: 50vw;
          background-color: #55565d;
      }
    
      /* SCROLLBARS END */
    
    
    
      /*  SLIDE IN DIRECTION - DROPDOWN ITEMS*/
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
      .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content {
          max-block-size: unset;
          position: absolute !important;
          opacity: 1;
          transition-duration: 0.45s !important;
          transition-timing-function: var(--mobile-menu-ttf);
          padding-block-end: 80px;
      }
    
      .bricks-is-frontend .dwc-nest-menu [data-submenu-reveal="expand"].brx-has-megamenu > ul {
          position: static !important;
          padding-block-end: 0 !important;
          transition: 0.3s ease-in-out !important;
      }
    
    
    
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          inset: 0 !important;
          transform: translateX(100%);
          transition-property: opacity, transform, visibility;
          min-block-size: calc(100dvb - var(--dwc-nest-header-height));
          position: fixed !important;
      }
    
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
          inset-block-start: var(--dwc-nest-header-height) !important;
      }
    
      .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul),
      .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          transform: translateX(-100%);
      }
    
      .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu.brx-open .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          transform: translateX(0) !important;
      }
    
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
          transform: translateX(0) !important;
          visibility: visible;
      }
    
      /*  SLIDE IN  - mult-level DROPDOWN ITEMS*/
      .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
            inset-block: 0 !important;
            inline-size: 100%;
            transition-property: inset-inline-start, visibility, opacity;
            inset-inline-start: 100% !important;
            min-block-size: 100dvb;
            position: fixed !important;
        }
    
        .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
        .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
      .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content) {       
          inset-inline-start: -100% !important;
           }
    
      /* RTL */
      [dir="rtl"]  .brx-header-right.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content, 
    [dir="rtl"]  .brx-header-right.bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content, 
    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
        inset-inline-start: -100% !important;
    }
    
    [dir="rtl"]  .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content, 
    [dir="rtl"]  .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content, 
    [dir="rtl"]  .brx-header-left.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content {
        inset-inline-start: 100% !important;
    }
    
    
     
    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
        inset-block-start: var(--dwc-nest-header-height) !important;
    }
    
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
        inset-inline-start: 0 !important;
    }
    
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
      html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
          inset-inline-start: 0 !important;
          visibility: visible;
      }
    
      .bricks-is-frontend .dwc-nest-menu .brxe-dropdown {
          position: static;
      }
    
    
      .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
          transform: rotate(270deg)
      }
    
      /*  EXPAND  - mult-level DROPDOWN ITEMS*/
      .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > .brxe-dropdown .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content>.menu-item:not([data-submenu-reveal="slide"] li) {
            transform: translateY(-100px);
            opacity: 0;
            transition: transform 0s, opacity 0s
        }
    
        .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > .brxe-dropdown.open .brx-dropdown-content > li,
        .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu).open>.brx-dropdown-content>.menu-item {
            transform: translateY(0);
            opacity: 1 !important;
            transition: transform 0.4s, opacity 0.4s
        }
    
      /* MOBILE LOGO */
      .dwc-nest-menu:not([data-submenu-reveal="expand"]):has(.brxe-dropdown.open) .dwc-nest-menu__mobile-logo {
        opacity: 0;
        transition: 0s;
      }
    
      .dwc-nest-menu__mobile-logo {
          opacity: 1;
          transition: opacity 0.45s 0.15s var(--mobile-menu-ttf);
      }
    
      .dwc-nest-menu__mobile-logo:not(.brx-header-left *, .brx-header-right *) {
          min-block-size: var(--dwc-nest-header-height);
      }
    
      .brx-header-left .dwc-nest-menu__mobile-logo,
      .brx-header-right .dwc-nest-menu__mobile-logo {
          min-block-size: var(--top-offset);
      }
    
      :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__logo {
          display: none;
      }
    
      :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__mobile-logo {
          display: flex;
      }
    
              /* DROPDOWN INDENT */
    
  
  .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content),
  .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content {
  padding-inline-start: var(--dropdown-indent) !important;
  padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
  border-left: var(--dropdown-indent-line);  
  background-color: var(--dropdown-indent-bg)
  }
  
  
  .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) >   .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle),
  .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) > .brx-dropdown-content > * > :is(a, .brx-submenu-toggle){
  padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
  }
  
  
  .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open > .brx-submenu-toggle,
  .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open > .brx-submenu-toggle{
  background-color: var(--dropdown-active-bg);
  color: var(--dropdown-active-clr);
  }
    
    
     /* BACK BUTTON POSITIONING */
     .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button),
     .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button) {
         min-inline-size: 70%;
         position: fixed;
         inset-block-start: 0;
         transform: translateY(0%) !important;
         inset-inline-start: var(--menu-item-inline-padding);
         color: var(--back-text-clr);
         text-transform: var(--back-text-transform);
         letter-spacing: 1px;
         /* padding-inline: 1rem !important; */
         z-index: 1000;
         font-size: var(--back-text-font-size);
         font-weight: var(--back-text-font-weight);
         background-color: var(--back-text-bg);
         min-block-size: calc(var(--dwc-nest-header-height) - 2px);
         -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
         animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
     }
    
     
    
    
   /* BACK BUTTON TEXT, (ATTR SET BY JS) */
   .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-submenu-reveal="expand"]  button, [data-hide-close-bar="true"] button):after,
      
   .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button):after {
       content: attr(data-text);
   }
  
   /* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */
   .bricks-is-frontend [data-force-backtext="true"]:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"]) > .brx-submenu-toggle button::after{
       content: attr(data-back-text) !important;
   }
  
   .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown:not([data-submenu-reveal="expand"]) .brx-submenu-toggle button[aria-expanded] {
       transition: unset !important;
   }
  
   /* BACK BUTTON CHEVRON ARROW direction */
   .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open > .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg),
   .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-submenu-toggle button svg {
       transform: rotate(90deg);
       margin-inline-end: 0.5em;
       inline-size: 10px;
   }
    
      /* RTL */
      [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"]) > .brx-submenu-toggle button svg, 
      [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-submenu-toggle button svg {
          order: 2;
          margin-inline-end: initial;
          margin-inline-start: 0.5em;
      }
    
    
    
    
     /* overlay back button on logo*/
     body:has(.brx-open .open.active:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"]:not([data-submenu-reveal="expand"]) .dwc-nest-menu-top {
      background-color: var(--mobile-menu-top-bg) !important;
      -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
      animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
  }
  
  body:has([data-submenu-reveal="slide"].brxe-dropdown.open, [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
      background-color: var(--mobile-menu-top-bg) !important;
  }
  
  .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nav-wrapper:not([data-below-header="true"] .dwc-nav-wrapper, [data-show-mobile-logo="true"] .dwc-nav-wrapper, [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper) {
    background-color: transparent !important;
}
  
  
  .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *, [data-show-mobile-logo="true"] *) {
      background-color: transparent !important;
  }
    
    
    
    
      /* MENU BELOW HEADER */
      .bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper {
          inset-block-start: var(--dwc-nest-header-height);
      }
    
      [data-below-header="true"] .dwc-nest-menu-top {
          min-block-size: var(--top-offset);
      }
    
      .bricks-is-frontend [data-below-header="true"] .brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"]  button){
          min-block-size: calc(var(--top-offset) - 1px);
          padding-block: 0 !important;
      }
    
    
      .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
      .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
          inset-block-start: calc(var(--top-offset) + 1px) !important;
      }
    
      .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
          inset-block-start: calc(var(--top-offset) + 1px) !important;
      }
    
      .dwc-nest-menu[data-below-header="true"] .dwc-nest-menu__mobile-logo {
          display: none;
      }
    
    
    
      /* tooltip */
    
      .dwc-nest-tooltip:not(.open.active ~ .dwc-nest-tooltip) {
          opacity: 0 !important;
      }
    
    
      @keyframes slideIn {
          0% {
              transform: translateX(-100%);
              opacity: 0;
          }
    
          100% {
              transform: translateX(0);
              opacity: 1;
          }
      }
    
      @keyframes fadeOut {
          0% {
              transform: translateX(0);
              opacity: 1;
          }
    
          100% {
              transform: translateX(150%);
              opacity: 0;
          }
      }
    
      .dwc-nest-tooltip {
          animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
      }
    
    
      /* EXPAND DROP DOWN */
      /* EXPAND MEGA MENU DROP DOWN */
    
      [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content {
          display: grid !important;
          grid-template-rows: 0fr;
          grid-template-columns: 1fr;
          transition: 0.3s ease-in-out;
          overflow: hidden;
          position: static;
          visibility: visible;
          opacity: 1;
      }
    
      [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
          grid-template-rows: 1fr;
          grid-template-columns: 1fr;
    
      }
    
      [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content> :is(div, li) {
          padding-block: 0 !important;
          opacity: 0;
          transition: opacity 0.3s ease;
      }
    
      [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content :is(div, li):not([data-submenu-reveal="slide"] *) {
          flex-wrap: nowrap !important;
          min-block-size: 0 !important;
      }
    
       [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
          opacity: 1;
          transition: opacity 0.25s 0.25s ease;
      }
    
      /* EXPAND MEGA MENU DROP DOWN -- MODULAR*/
    
      [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content {
          display: grid !important;
          grid-template-rows: 0fr;
          grid-template-columns: 1fr;
          transition: 0.3s ease-in-out;
          overflow: hidden;
          position: static;
          visibility: visible;
          opacity: 1;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
          grid-template-rows: 1fr;
          grid-template-columns: 1fr;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content> :is(div, li) {
          padding-block: 0 !important;
          opacity: 0;
          transition: opacity 0.3s ease;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content :is(div, li) {
          flex-wrap: nowrap !important;
          min-block-size: 0 !important;
      }
    
      [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
          opacity: 1;
          transition: opacity 0.8s 0.25s ease;
      }
    
      /* HIDE TOP CLOSE BAR */
      [data-hide-close-bar='true'] .dwc-nest-menu-top {
          display: none;
      }
    
    
    
        /* hide close button, bring main hamburger to front */
  
  .dwc-nest-menu .brxe-toggle{
            position: relative;
        }
  
        [data-mobile-top-transparent="true"]:not(:has(.brxe-dropdown.open)) .brxe-toggle[aria-label="Open Menu"]{
            z-index: 9999;
        }
  
  [data-show-toggle-always = "true"]
.brxe-toggle[aria-label="Open Menu"] {
    z-index: 9999;
}
    
        .dwc-nest-menu:not([data-mobile-top-transparent="true"], [data-below-header="true"]) .brxe-toggle[aria-label="Close Menu"] {
          display: grid;
          place-items: center;
          height: 100%;
      }
      
      .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown>.brx-dropdown-content {
          transform: unset;
      }
    
      .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.open>.brx-dropdown-content {
          transform: unset;
      }
      
      .dwc-stripe-style .dwc-nest-header::after,
        .dwc-stripe-style .dwc-nest-header::before{
    display: none !important;
    }
      
    
      /* builder */
      [data-builder-mode] .dwc-nest-menu-top {
          min-block-size: 80px !important;
      }
    
      [data-builder-mode] .dwc-nest-nav-items {
          overflow-y: scroll;
      }
      
      /* in builder ends*/
    
      
    
    }
/* ============= NAV STYLES =========== */

:root{
  
	--primary-clr: orangered;
  --header-bg: white;  
  --header-min-height:60px;
  
  /*when using fullscreen mobile menu*/
  --fullscreen-mobile-menu-top-height: 60px;
  
  --sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  
  /* default width for mega menu dropdown content */
  --dropdown-content-default-width: 1080px; 
  
  /* mega menu dropdown content border radius*/
  --dropdown-content-border-radius: 0;
  
  /* space between dropdwon content and header */
  --dropdown-content-gap:0; 

  /*	mobile/offcanvas menu width */
  --mobile-menu-width: min(300px, 100%); 
  
  /* radius for special mobile style on overlay header*/
  --mobile-menu-radius: var(--overlay-header-radius);

  /* 	mobile/offcanvas/sidebar
  higher value = faster
  use any value, even decimals */  
  --slide-out-speed: 1.3;
  
  /* Back text bar height for sidebar nav & menu below header */
  --top-offset: 40px;
  
  /* overlay backdrop blur */
  --backdrop-blur: 0px;
  

  /* ========================
  MENU ITEMS
  ======================== */

  /* Colors */
  --menu-item-clr: #000;
  --menu-item-hover-clr: var(--primary-clr);  
  --menu-toggle-clr: var(--menu-item-clr);
  --menu-icon-clr: var(--primary-clr);
  
  /* hover colors */
    --menu-toggle-hover-clr: var(--menu-item-hover-clr);
  --menu-item-hover-border-bg: var(--menu-item-active-border-bg);
  --menu-item-hover-border-height:var(--menu-item-active-border-height);
  
  /* active colors */
  --menu-item-active-clr: var(--menu-item-hover-clr);
   --menu-item-active-border-height: 2px;
  --menu-item-active-border-bg: var(--primary-clr);

  /* Backgrounds */
  --menu-item-bg: initial;
  --menu-item-hover-bg: white;
  --menu-item-active-bg: #ededed;

  /* Spacing */
  --menu-item-inline-padding: 1.1rem; /*horizontal padding*/
  --menu-item-block-padding: 1rem; /* vertical padding*/
  --menu-items-gap: 0;

  /* Typography */
  --menu-item-font-weight: 500;
  --menu-item-font-size: 14px;

  /* Bottom Border | Radius */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1); /*mobile only*/
  --menu-item-radius: 0;

  

  
   /* ========================
  MENU CTA BUTTON (ALL BUTTONS)
  ======================== */
  
    /* all cta buttons max width on mobile */
  --cta-width: 100%;
  
  /* gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/
  --cta-gap-offset: 0; 
  
  /* gap between breakout cta and menu toggle on mobile */
  --cta-breakout-gap:20px;
  

  /* ========================
  MENU CTA BUTTON (LAST BUTTON)
  ======================== */

  /* Colors */
  --menu-cta-clr: white;
  --menu-cta-hover-clr: white;

  /* Backgrounds */
  --menu-cta-bg: black;   
  --menu-cta-hover-bg: var(--primary-clr);

  /* Spacing */
  --menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
  --menu-cta-block-padding: var(--menu-item-block-padding);

  /* Borders & Radius */
  --menu-cta-border: none; 
  --menu-cta-radius: 0em;
  
  
  
  /* ========================
  MENU CTA BUTTON (SECOND BUTTON)
  ======================== */

  /* Colors */
  --menu-cta-2-clr: white;
  --menu-cta-2-hover-clr: white;

  /* Backgrounds */
  --menu-cta-2-bg: black;   
  --menu-cta-2-hover-bg: var(--primary-clr);

  /* Spacing */
  --menu-cta-2-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-2-block-padding: var(--menu-cta-block-padding);

  /* Borders & Radius */
  --menu-cta-2-border: var(--menu-cta-border); 
  --menu-cta-2-radius: var(--menu-cta-radius);
  
  
  
  /* ========================
  MENU CTA BUTTON (THIRD BUTTON)
  ======================== */

  /* Colors */
  --menu-cta-3-clr: white;
  --menu-cta-3-hover-clr: white;

  /* Backgrounds */
  --menu-cta-3-bg: black;   
  --menu-cta-3-hover-bg: var(--primary-clr);

  /* Spacing */
  --menu-cta-3-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-3-block-padding: var(--menu-cta-block-padding);

  /* Borders & Radius */
  --menu-cta-3-border: var(--menu-cta-border); 
  --menu-cta-3-radius: var(--menu-cta-radius);


  /* ========================
  DROPDOWN LINKS
  ======================== */
  
  --dropdown-width: 200px;

  /* Colors */
  --dropdown-item-clr: var(--menu-item-clr);
  --dropdown-item-hover-clr: var(--menu-item-hover-clr);
  --dropdown-heading-clr: var(--primary-clr);
  --dropdown-active-clr: white;

  /* Backgrounds */
  --dropdown-content-bg: var(--mobile-menu-bg);
  --dropdown-content-inner-bg: var(--mobile-menu-bg);
  --dropdown-item-hover-bg: white;
  --dropdown-item-bg: white;
  --dropdown-indent-bg: rgb(0 0 0 / 5%);
  --dropdown-active-bg: black;
  --dropdown-inactive-overlay: rgb(0 0 0 / 10%);

  /* Spacing */
  --dropdown-item-inline-padding: var(--menu-item-inline-padding); 
  --dropdown-item-block-padding: var(--menu-item-block-padding); 
  --dropdown-indent: 0.6rem;
  --dropdown-indent-item-pad-offset: 0.5;
  
  /* Typography */
  --dropdown-item-font-size: var(--menu-item-font-size);

  /* Border & Shadow */
  --dropdown-indent-line: solid 1px rgb(0 0 0 / 25%);
  --dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%);
  --dropdown-content-border: solid 1px var(--primary-clr);;

  /* ========================
  CHEVRON (Dropdown Arrow)
  ======================== */

  --chevron-size: 14px;
  --chevron-clr: var(--menu-item-clr);
  --chevron-hover-clr:var(--menu-item-hover-clr);


  /* ========================
  MENU TOGGLE - Hamburger
  ======================== */

  --open-icon-size: 30px; 
  --open-icon-line-height: 3px;
  --icon-line-gap: 0.5em; /* gap between the lines*/
  --open-icon-line-variance: 9px; /* by how much the lines vary in width, e.g. 0 = same width*/
  --open-icon-align: 0;   /* when the lines' width varies, 0 = align right, auto = align left*/
  --open-icon-horizontal-offset: 0px; /* nudge the icon left or right from edge of screen*/



  /* ======================================
  ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER
  ========================================= */

  --adaptive-height-bg: #fff;
  --adaptive-height-border: 1px solid #fff;

  
  
  /* ========================
  STRIPE - when [data-optimize-stripe="true"]
  ======================== */

  --stripe-border-radius: 10px;


  /* ========================
  MOBILE/OFFCANVAS MENU
  ======================== */

  --mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95); /* Transition timing function */
  --mobile-menu-bg: white; /* mobile menu background color */
  --mobile-menu-top-bg: white; /* mobile menu close bar background color */


  /* =================
  OVERLAY HEADER
  ================== */
  --overlay-header-width:1400px;
  --overlay-header-inset:1rem ;
  --overlay-header-bg: rgb(255 255 255 / 100%);
  --overlay-header-bg-active: rgb(255 255 255 / 100%);
  --overlay-header-blur: 10px;
  --overlay-header-radius: 1rem;
  --overlay-header-shadow: 0px 2px 20px rgb(0 0 0 / 20%);
  --overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem);


  /* ========================
  BACK TEXT
  ======================== */

  --back-text-clr: var(--menu-item-clr); /* back to previous menu color */
  --back-text-font-size: 12px;
  --back-text-font-weight: 600;
  --back-text-transform: uppercase;
  --back-text-bg: var(--mobile-menu-top-bg);



  /* ========================
  SIDEBAR NAV - OVERLAY MODE
  ======================== */

  --overlay-sidebar-radius: 1rem ;
  --overlay-sidebar-bg: rgb(255 255 255 / 80%);
  --overlay-sidebar-shadow: 0 0 30px rgb(39 50 59 / 10%);
  --overlay-sidebar-inset: 12px;
  
    

  /* ========================
  PAGE OVERLAY - color/opacity
  ======================== */

  --dwc-overlay-clr: rgba(0, 0, 0, 0.3);




  /* ======== DON'T YOU DARE! ======== */

  --iw: calc(var(--open-icon-size) - var(--open-icon-line-variance));
  --aw: calc(var(--iw) - var(--open-icon-line-variance));
}


  /* SIDEBAR BACK TEXT BAR HEIGHT WHEN BACK TEXT OVERLAYS LOGO */
	#brx-header:has([data-sidebar-back-text-on-logo="true"]) {
    --top-offset: var(--mobile-menu-top-height);
  }


/* ========================================
MOBILE STYLES
copy above variables to modify
for mobile breakpoint
========================================= */

.dwc-mobile{
  --mobile-menu-width: min(450px, 100%); 

  --menu-item-font-size: 18px;
  --dropdown-item-font-size:var(--menu-item-font-size);
  --back-text-font-size: 16px;
  --menu-item-hover-border-bg: initial;

}

 /* ========================
  STICKY HEADER STYLES
copy variables to modify
for sticky header
  ======================== */

.sticky.scrolling{

/* add your sticky styles variable here */
  

}





/* ========== NAV STYLES END ============== */


/* ======== CHANGE postid-xxxx TO THIS TEMPLATE'S ID ========= */    

/*hide sidebar in builder */
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header:not(.postid-21924 *) {
  display: none !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-21924 *) {
  margin: unset !important;
}



const MegaMenuCONFIG = {
    // Minimum width threshold for desktop behavior,
    // should be 1px larger than mobile (max-width) breakpoint in the "MENU Styles/Options" CSS code block
  //IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block
    minWidth: 1201, 
  
    // automatically open the current menu panel/dropdown (mobile, offcanvas & sidebar)
    menuAutoExpansion: true,  
    
    swipeToClose: true,  
  
    // show or hide swipe to close hint
    toolTip: true, 
  
    // adaptive height animation
    adaptiveHeight: false,
  
    // Stripe menu animation
    stripeStyle: false,
  
    headerSelector: '.dwc-nest-header',

    // New properties for dropdown positioning
    shiftFactor: 1,  // Factor to shift overflow
    minOverflow: 10   // Minimum overflow threshold
};

// Centered Logo Configuration
const CenteredLogoCONFIG = {
    enable: 0,    
  	centerGuide: 1,
    forceCenteredLogo: 1,   
// move the navigation left 
// or right using negative or positive value
    centerNudge: 0,  
// allow centered logo when no. of 
// menu items are odd e.g. 5 or 7
  	allowOddItems: 1,   
// place logo 'before' or 'after' the odd menu item
    roundOffFactor: 'before' 
};
Padelrackets en spelerachtergrond bij NXT Level Padelacademy voor professionele padeltraining en coaching.
Padel verdediging

Hoe speel je uit het glas bij padel?

Uit het glas spelen is één van de belangrijkste vaardigheden bij padel. Het geeft je extra tijd, maar alleen als je rustig blijft, goed staat en de bal durft te laten komen.

Uit het glas spelen bij padel

Wat betekent uit het glas spelen?

Uit het glas spelen betekent dat je de bal eerst laat stuiten en daarna via het glas laat terugkomen voordat je hem slaat. In plaats van de bal direct te nemen, gebruik je het glas om meer tijd en ruimte te krijgen.

Veel spelers vinden dit in het begin lastig. Ze willen de bal te vroeg slaan, raken gehaast en komen daardoor juist in de problemen. Goede spelers gebruiken het glas niet als noodoplossing, maar als onderdeel van hun verdediging.

Uit het glas spelen helpt je om:

  • meer tijd te krijgen;
  • diepe ballen beter te verdedigen;
  • rustiger te blijven onder druk;
  • de rally opnieuw op te bouwen;
  • betere keuzes te maken vanuit achterin.
Het glas is geen probleem waar je vanaf moet. Het is juist één van de redenen waarom padel tactisch zo interessant is.

Wanneer laat je de bal via het glas komen?

Niet elke bal hoeft via het glas. Je kiest voor glas wanneer de bal diep komt, je weinig ruimte hebt of wanneer direct spelen gehaast zou worden.

De belangrijkste vraag is: krijg ik meer controle door te wachten? Als het antwoord ja is, is het glas vaak je beste vriend.

Voorbeeld uit een rally

De tegenstander speelt een diepe volley richting je achterglas. Je staat achterin en de bal komt dicht bij je voeten.

Als je de bal direct neemt, moet je haasten. Je raakt de bal waarschijnlijk te laat of te dicht op je lichaam.

Laat je de bal via het glas komen, dan krijg je extra tijd. Je stapt iets opzij, wacht tot de bal terugkomt en speelt daarna gecontroleerd een lob of rustige bal terug.

Situatie
Beste keuze
Bal komt diep en snel
Via het glas laten komen
Bal komt langzaam en voor je
Direct spelen
Bal komt dicht op je lichaam
Ruimte maken en glas gebruiken
Je hebt tijd en balans
Zelf kiezen: direct of via glas

Hoe speel je technisch uit het glas?

Goed uit het glas spelen draait om timing en positie. Je hoeft niet sneller te bewegen, maar slimmer. De bal komt namelijk terug naar jou toe.

1

Herken de diepe bal

Zie vroeg of de bal diep genoeg is om via het glas te laten komen.

2

Maak ruimte

Ga niet tegen het glas staan. Geef jezelf plek om de bal terug te zien komen.

3

Wacht langer dan je denkt

Veel spelers slaan te vroeg. Laat de bal eerst echt uit het glas komen.

4

Raak de bal voor je lichaam

Als je de bal naast of achter je raakt, verlies je controle.

5

Kies een rustige bal

Vaak is een lob, chiquita of diepe bal beter dan hard terugslaan.

6

Herstel je positie

Na je slag moet je meteen opnieuw klaarstaan voor de volgende bal.

De grootste verbetering komt vaak niet door harder trainen, maar door langer durven wachten.

Achterglas, zijglas en dubbel glas

Niet elke glasbal gedraagt zich hetzelfde. De bal kan via het achterglas komen, via het zijglas, of via beide. Elk type vraagt een andere timing.

Achterglas

Bal komt recht terug

Dit is vaak de eerste glasbal die spelers leren. Je wacht tot de bal terugkomt en speelt daarna rustig voor je lichaam.

Zijglas

Bal verandert van richting

Het zijglas vraagt meer lezen. De bal komt vaak schuin terug en je moet sneller ruimte maken.

Dubbel glas

Achterglas en zijglas

Bij dubbel glas verandert de bal meer van richting. Veel spelers lopen te vroeg naar de verkeerde plek.

Hoge bal

Bal komt hoog terug

Als de bal hoog genoeg terugkomt, kun je soms aanvallen met een bajada.

Coachmoment

Als een speler moeite heeft met dubbel glas, is het probleem vaak niet de slag. Het probleem is dat de speler te vroeg beslist waar de bal komt.

Wacht iets langer, lees eerst de richting na het glas en beweeg daarna pas naar het contactpunt.

Welke bal speel je na het glas?

Uit het glas spelen is niet alleen de bal terugbrengen. Je moet ook kiezen wat de slimste volgende bal is.

Tijd maken

Lob

Kies een lob als tegenstanders aan het net staan en jij tijd wilt terugpakken.

Lees meer over lob → Laag spelen

Chiquita

Kies een chiquita als je laag naar de voeten wilt spelen en tempo wilt breken.

Lees meer over chiquita → Aanvallen

Bajada

Kies een bajada als de bal hoog genoeg uit het glas terugkomt.

Lees meer over bajada → Rust

Veilig verdedigen

Soms is de beste keuze simpel: diep, rustig en zonder risico terugspelen.

Lees meer over verdedigen →

Veelgemaakte fouten bij uit het glas spelen

De meeste fouten ontstaan doordat spelers het glas niet vertrouwen. Ze slaan te vroeg, staan te dicht op de bal of willen te snel aanvallen.

Te vroeg

De bal nemen vóór het glas helpt

Veel spelers slaan direct terwijl het glas juist meer tijd zou geven.

Te dicht

Tegen het glas staan

Dan heb je geen ruimte om de bal goed te laten terugkomen.

Paniek

Alles hard terugspelen

Verdedigen uit het glas vraagt vaak juist rust en controle.

Verkeerd lezen

Te vroeg bewegen bij dubbel glas

Daardoor loop je naar de verkeerde plek en raak je de bal uit balans.

Geen keuze

Altijd dezelfde bal spelen

Soms is een lob goed, soms een chiquita en soms alleen veilig terug.

Geen herstel

Blijven kijken na je slag

Na een glasbal moet je meteen opnieuw klaarstaan.

Hoe verschilt uit het glas spelen per niveau?

1.5 – 2.5

Beginner

Beginners slaan vaak te vroeg en vertrouwen het glas nog niet. Focus op wachten en ruimte maken.

3 – 4

Intermediate

Je leert beter kiezen tussen lob, chiquita, veilige bal of bajada.

5+

Gevorderd

Gevorderde spelers gebruiken het glas om tempo te controleren, patronen te lezen en druk om te draaien.

Op hoger niveau is uit het glas spelen geen noodoplossing. Het is een manier om de rally bewust te sturen.

Wanneer moet je de bal juist niet via het glas laten komen?

Het glas is nuttig, maar niet altijd de beste keuze. Soms geef je juist tijd weg als je wacht.

Bal ligt voor je

Je hebt tijd om direct te spelen

Als je goed staat en de bal voor je lichaam komt, kan direct spelen beter zijn.

Bal sterft weg

De bal komt niet goed terug

Sommige ballen komen na het glas te laag of te kort terug.

Aanvalskans

Je kunt druk zetten

Soms kun je de bal eerder nemen om tegenstanders minder tijd te geven.

Te laat

Je hebt het moment gemist

Als je te laat bent, is direct improviseren soms veiliger dan wachten.

Welke onderwerpen horen hierbij?

Basis

Glas gebruiken

Leer eerst wanneer het glas je helpt en wanneer direct spelen slimmer is.

Lees meer over glas → Aanval uit glas

Bajada

Als de bal hoog uit het glas komt, kun je soms aanvallend spelen.

Lees meer over bajada → Verdediging

Verdedigen bij padel

Uit het glas spelen is één van de belangrijkste verdedigende vaardigheden.

Lees meer over verdedigen → Positie

Waar moet je staan?

Zonder goede positie wordt uit het glas spelen veel moeilijker.

Lees meer over positie →

Veelgestelde vragen over uit het glas spelen

Wat betekent uit het glas spelen bij padel?

Dat betekent dat je de bal na de stuit via het glas laat terugkomen voordat je hem slaat.

Wanneer laat je de bal via het glas komen?

Vooral bij diepe ballen, snelle ballen of ballen waarbij direct spelen gehaast zou worden.

Waarom vinden beginners het glas moeilijk?

Veel beginners slaan te vroeg en vertrouwen nog niet dat de bal terugkomt uit het glas.

Wat is dubbel glas bij padel?

Dubbel glas betekent dat de bal via achterglas en zijglas komt. De richting verandert dan sterker.

Welke bal speel je na het glas?

Vaak een lob, chiquita, veilige bal of bajada. De juiste keuze hangt af van hoogte, tijd en positie.

Moet je altijd wachten op het glas?

Nee. Als je goed staat en de bal voor je ligt, kan direct spelen slimmer zijn.