/* ===========================================
   NAV MENU - Menu items in nav bar
   =========================================== */

/* Container wrapper - display inline with nav */
.nav-bar .bwa-menu__top__wrapper {
  position   : static;
  transform  : none;
  width      : auto;
  max-width  : none;
  background : transparent;
  border     : none;
  overflow   : visible;
  z-index    : 10;
  display    : contents;
}

.nav-bar .bwa-menu__top {
  display         : flex;
  flex-direction  : row;
  align-items     : center;
  gap             : 4px;
  margin          : 0;
}

/* ===========================================
   MAIN MENU ITEMS (Menu Right - ID 3)
   =========================================== */

.nav-bar .bwa-menu__main-item {
  position : relative;
  margin   : 0;
}

.nav-bar .bwa-menu__main-item .bwa-menu__link-title {
  display         : flex;
  align-items     : center;
  gap             : 8px;
  padding         : 12px 16px;
  font-size       : 1rem;
  font-weight     : 500;
  color           : var(--color-black-default);
  text-decoration : none;
  transition      : background-color 0.2s ease;
  line-height     : 1.5;
}

.nav-bar .bwa-menu__main-item .bwa-menu__link-title:hover {
  background-color : var(--color-grey-default);
}

.nav-bar .bwa-menu__main-item .bwa-menu__title__wrapper {
  display     : flex;
  align-items : center;
  gap         : 8px;
}

.nav-bar .bwa-menu__main-item .bwa-menu__title {
  font-size   : 1rem;
  font-weight : 500;
}

/* Hide submenu trigger for simple links */
.nav-bar .bwa-menu__main-item .sub-menu__trigger {
  display : none;
}

/* ===========================================
   HIDE MOBILE ELEMENTS
   =========================================== */

.nav-bar .mobile_only,
.nav-bar #tab_initial,
.nav-bar #tab_back,
.nav-bar .menu_mobile_back,
.nav-bar .see-all-btn,
.nav-bar .js-tab_back,
.nav-bar .see-all-btn__container {
  display : none !important;
}

/* ===========================================
   SUBMENU WRAPPER (if any menu has submenu)
   =========================================== */

.nav-bar .bwa-menu__main-item .bwa-menu__sub-menu__wrapper {
  position         : absolute;
  top              : 100%;
  left             : 0;
  min-width        : 250px;
  background       : var(--color-white-default);
  border-radius    : var(--radius-lg);
  box-shadow       : 0 10px 40px rgba(0, 0, 0, 0.15);
  opacity          : 0;
  visibility       : hidden;
  transform        : translateY(10px);
  transition       : all 0.2s ease;
  z-index          : 100;
  overflow         : hidden;
  padding          : 8px 0;
  margin-top       : 0;
}

.nav-bar .bwa-menu__main-item.--is-hover .bwa-menu__sub-menu__wrapper,
.nav-bar .bwa-menu__main-item:hover .bwa-menu__sub-menu__wrapper {
  opacity    : 1;
  visibility : visible;
  transform  : translateY(0);
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (min-width : 1200px) {
  body[data-is-desktop="true"] .nav-bar .bwa-menu__top__wrapper[data-is-desktop="true"] {
    display : flex;
  }
}