body.menu-open {
  @apply h-screen overflow-hidden;
}

.header-wrapper-main {
  @apply relative;
}

#header .site-title-text {
  @apply text-xl lg:text-2xl text-[var(--rb-header-color)] uppercase;
}

#header .site-title-sticky {
  @apply hidden;
}

#header.is-sticky .site-title-sticky {
  @apply block;
}

#header.is-sticky .site-title {
  @apply invisible;
}

#navigation-menu .dl-menu-wrapper {
  @apply lg:hidden;
}

#navigation-menu .main-menu-wrapper {
  @apply hidden lg:block;
}

/* ---------- Desktop Menu ---------- */

#header .main-menu {
  @apply flex;
}

.main-menu .menu-item a,
.main-menu .menu-action-button-parent {
  @apply block p-2 uppercase no-underline text-8px xl:text-13px font-normal;
}

.main-menu > .menu-item > a,
.login_register_popup_btn {
  @apply text-[var(--rb-base-nav-link-color)] hover:text-[var(--rb-base-nav-link-hover-color)] bg-[var(--rb-base-nav-link-background-color)];
}

.main-menu > .menu-item:hover > a {
  @apply bg-[var(--rb-base-nav-link-hover-background-color)] text-[var(--rb-base-nav-link-hover-color)];
}

.main-menu > .menu-item.current-menu-item a {
  @apply text-[var(--rb-base-nav-link-current-color)] hover:text-[var(--rb-base-nav-link-current-hover-color)] bg-[var(--rb-base-nav-link-current-background-color)];
}

.main-menu > .menu-item > .sub-menu .menu-item a {
  @apply text-[var(--rb-base-nav-submenu-link-color)] hover:text-[var(--rb-base-nav-submenu-link-hover-color)] hover:bg-[var(--rb-base-nav-submenu-link-hover-background-color)];
}

.main-menu > .menu-item > .sub-menu .menu-item.current-menu-item > a {
  @apply text-[var(--rb-base-nav-link-current-color)] hover:text-[var(--rb-base-nav-link-current-hover-color)] bg-[var(--rb-base-nav-link-current-background-color)];
}

.main-menu .menu-item-has-children {
  @apply relative;
}

.main-menu .menu-item-has-children > a {
  @apply pr-6.5 relative;
}

.main-menu .menu-item-has-children > a::after {
  @apply font-awesome font-light text-10px xl:text-xs content-['\f078'] block absolute top-1/2 -translate-y-1/2 right-2;
}

.main-menu .menu-item-has-children .sub-menu .menu-item-has-children > a::after {
  @apply content-['\f054'];
}

.sub-menu {
  @apply hidden min-w-52 z-50 bg-[var(--rb-base-nav-submenu-background-color)] absolute;
}

.main-menu > .menu-item-has-children > .sub-menu {
  @apply left-0 top-full shadow-submenu shadow-[var(--rb-base-sticky-nav-box-shadow)];
}

.main-menu .menu-item-has-children:hover > .sub-menu {
  @apply block;
}

.main-menu .menu-item-has-children:nth-last-child(3) > .sub-menu,
.main-menu .menu-item-has-children:nth-last-child(2) > .sub-menu,
.main-menu .menu-item-has-children:nth-last-child(1) > .sub-menu {
  @apply left-auto right-0;
}

.main-menu .menu-item-has-children .menu-item-has-children > .sub-menu {
  @apply left-52 top-0;
}

.main-menu .menu-item-has-children:nth-last-child(3) .menu-item-has-children > .sub-menu,
.main-menu .menu-item-has-children:nth-last-child(2) .menu-item-has-children > .sub-menu,
.main-menu .menu-item-has-children:nth-last-child(1) .menu-item-has-children > .sub-menu {
  @apply right-52 left-auto;
}

/* ---------- Mobile Menu ---------- */

.dl-menu {
  @apply absolute opacity-0 pointer-events-none translate-y-3 top-full left-0 h-screen w-screen bg-[var(--rb-base-sticky-nav-background-color)] p-4 pb-5 overflow-auto transition;
}

.dl-menu.dl-menuopen {
  @apply opacity-100 translate-y-0 pointer-events-auto;
}

.dl-menu li .dl-submenu {
  @apply hidden;
}

.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
  @apply hidden;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
    @apply block;
}

.dl-trigger {
  @apply w-7 h-7 border-0 relative select-none cursor-pointer outline-0;
}

.dl-trigger span {
  @apply block w-7.5 h-0.5 mx-auto mb-1.5 relative bg-[var(--rb-base-nav-link-color)] rounded z-10 origin-[4px_0] transition-transform;
}

.dl-trigger span:first-child {
  @apply origin-top-left;
}

.dl-trigger span:nth-of-type(2) {
  @apply origin-bottom-left;
}

.dl-trigger span:last-child {
  @apply mb-0;
}

.dl-trigger.dl-active span:first-child {
  @apply opacity-0;
}

.dl-trigger.dl-active span:nth-of-type(2) {
  @apply -ml-2 [transform:rotate(-45deg)_translate(0,18px)];
}

.dl-trigger.dl-active span:last-child {
  @apply -ml-2 [transform:rotate(45deg)_translate(0,-18px)];
}

.dl-menu li a {
  @apply block relative py-4 text-xs leading-none font-normal border-b border-[var(--rb-base-nav-submenu-border-color)] text-[var(--rb-base-nav-link-color)] outline-none uppercase;
}

.dl-menu li.dl-back > a {
  @apply pl-6 bg-black/10 relative border-0;
}

.dl-menu li.dl-back > a::after {
  @apply absolute left-2 top-1/2 -translate-y-1/2 font-awesome content-['\f053'] block text-[var(--rb-base-nav-link-color)];
}

.dl-menu .menu-item-has-children > a {
  @apply relative;
}

.dl-menu .menu-item-has-children > a::after {
  @apply absolute right-1.5 top-1/2 -translate-y-1/2 font-awesome content-['\f105'] block text-[var(--rb-base-nav-link-color)];
}