/* ---------- BASELINES ---------- */

.dii-content-nav-menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--cms-border);
  background: var(--cms-bg);
  padding: 0;
}
.dii-content-nav-menu li {
  position: relative;
  background: inherit;
  color: var(--cms-text);
}
.dii-content-nav-menu a,
.dii-content-nav-menu a:hover {
  color: inherit;
}
.dii-content-nav-menu .dii-sub-menu-link {
  display: block;
  border-radius: inherit;
  background: inherit;
  padding: 0.75rem 1rem;
  transition: all var(--transition);
}
.dii-content-nav-menu li:hover {
  background: var(--cms-bg-hover);
}
.dii-content-nav-menu .dii-sub-menu-link:has(+ a) {
  padding-right: 2rem;
}
.dii-content-nav-menu .dii-sub-menu-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}
.dii-content-nav-menu .dii-sub-menu-icon::before {
  content: "\f054";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
  font-size: 0.75rem;
  transition: all var(--transition);
}
.dii-content-nav-menu ul ul {
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 14rem;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  border: 1px solid var(--cms-border);
  transition: opacity var(--transition);
}
.dii-content-nav-menu li:hover > ul {
  visibility: visible;
  opacity: 1;
}
.dii-content-nav-menu ul ul > li:first-child {
  border-top-right-radius: 0.5rem;
}
.dii-content-nav-menu ul ul > li:has(ul):hover {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dii-content-nav-menu ul ul > li:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.dii-content-nav-menu ul ul > li:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0.5rem;
  border-bottom-left-radius: 0;
}

/* ----- Horizontal ----- */

.dii-content-nav-menu.horizontal > ul {
  flex-direction: row;
  align-items: center;
}
.dii-content-nav-menu.horizontal > ul > li:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.dii-content-nav-menu.horizontal > ul > li:first-child:has(.dii-sub-menu-link + a):hover {
  border-bottom-left-radius: 0;
}
.dii-content-nav-menu.horizontal > ul > li > ul {
  top: 100%;
  left: 0;
}
.dii-content-nav-menu.horizontal > ul > li > .dii-sub-menu-icon::before {
  content: "\f078";
}

/* ----- Vertical ----- */

.dii-content-nav-menu.vertical > ul {
  flex-direction: column;
}
.dii-content-nav-menu.vertical > ul > li:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.dii-content-nav-menu.vertical ul:has(> li:first-child:hover),
.dii-content-nav-menu.vertical ul > li:first-child:has(ul):hover {
  border-top-right-radius: 0;
}
.dii-content-nav-menu.vertical ul:not(:has(> li:first-child > ul)) {
  border-top-right-radius: 0.5rem !important;
}
.dii-content-nav-menu.vertical > ul > li:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.dii-content-nav-menu.vertical > ul > li:last-child:has(ul):hover {
  border-bottom-right-radius: 0;
}

/* ---------- COLOR OPTIONS ---------- */

.dii-content-nav-menu:not(.theme-none) ul {
  border: 0;
}
.dii-content-nav-menu:not(.theme-none) .dii-sub-menu-icon {
  top: 0.75rem;
  right: 0.75rem;
}
.dii-content-nav-menu.theme-dark {
  --cms-bg: #1d293d;
  --cms-bg-hover: #0f172b;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-light {
  --cms-bg: #f1f5f9;
  --cms-bg-hover: #e2e8f0;
  --cms-text: var(--color-text);
}
.dii-content-nav-menu.theme-blue {
  --cms-bg: #1447e6;
  --cms-bg-hover: #193cb8;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-gold {
  --cms-bg: #e17100;
  --cms-bg-hover: #bb4d00;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-green {
  --cms-bg: #00a63e;
  --cms-bg-hover: #008235;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-red {
  --cms-bg: #e7000b;
  --cms-bg-hover: #c10007;
  --cms-text: var(--color-white);
}

/* ---------- HEADER MAIN NAV ---------- */

#design-container-main-nav {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0;
}
#design-container-main-nav .dii-content-list {
  min-width: 5rem;
}
#design-container-main-nav:has(.dii-content-nav-menu) .dii-content-list {
  min-height: initial;
}
#design-container-main-nav .dii-content {
  position: relative;
}
#design-container-main-nav ul {
  border: 0;
  background: transparent;
}
#design-container-main-nav ul ul {
  border-top-right-radius: 0.5rem;
  background: var(--cms-bg);
}
#design-container-main-nav ul ul ul {
  top: 2.5rem;
  left: -1rem;
  border-top-right-radius: 0;
}
#design-container-main-nav .dii-content-nav-menu ul ul .dii-sub-menu-icon::before {
  content: "\f107";
}
#design-container-main-nav .dii-content-nav-menu ul ul li:hover {
  background: var(--cms-bg-hover);
}
#design-container-main-nav .dii-content-nav-menu ul ul li:hover > ul,
#design-container-main-nav .dii-content-nav-menu ul ul li:hover > ul > li:first-child {
  border-top-left-radius: 0.5rem;
}
#design-container-main-nav .dii-content-nav-menu ul ul li:hover > .dii-sub-menu-icon::before {
  transform: rotate(90deg);
}
#design-container-main-nav .dii-content-nav-menu ul ul > li:has(ul):hover {
  border-top-right-radius: 0;
}
#design-container-main-nav .dii-content-nav-menu ul ul > li:first-child:has(> ul):hover {
  border-top-right-radius: 0;
}
#design-container-main-nav .dii-content-nav-menu ul ul > li:last-child:has(> ul):hover {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: 0;
}
#design-container-main-nav .dii-content:has(> .dii-content-nav > .dii-action-drag:hover) {
  background: color-mix(in srgb, var(--cms-bg-hover), transparent 93%);
}

/* Top Nav Styles */

#design-container-main-nav .dii-content-nav-menu > ul > li {
  border-radius: 0.5rem;
  color: var(--cms-text);
}
#design-container-main-nav .dii-content-nav-menu > ul > li:has(ul) {
  border-radius: 0.5rem 0.5rem 0 0;
}
#design-container-main-nav .dii-content-nav-menu > ul > li:hover {
  background: var(--cms-bg);
}
#design-container-main-nav .dii-content-nav-menu > ul > li > .dii-sub-menu-link {
  padding: 0.75rem 1rem;
}
#design-container-main-nav .dii-content-nav-menu > ul > li > .dii-sub-menu-icon {
  display: none;
}

/* Adding Nav Items */

#design-container-main-nav:has(.dii-content-nav-menu) .dii-content-add {
  display: none;
}
#design-container-main-nav .dii-content-add:has(.dii-content-add-area[style*="display: block"]) {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  color: var(--cms-text);
}
#design-container-main-nav .dii-content-add:hover {
  background: transparent;
}
#design-container-main-nav .dii-content-add a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--cms-bg);
  color: var(--cms-text);
  box-shadow: var(--cms-btn-shadow);
}
#design-container-main-nav .dii-content-add a::after {
  content: "Add Nav";
}
#design-container-main-nav .dii-content-add a:hover {
  background: var(--cms-bg-hover);
}
#design-container-main-nav .dii-content-add-nav .ui-icon,
#design-container-main-nav .dii-content-add-nav span {
  display: none;
}
#design-container-main-nav .dii-content-add-area {
  padding: 0.25rem 1rem;
}

/* ---------- MEDIA QUERIES ---------- */

@media only screen and (min-width: 1025px) {
  .cms-header #design-container-main-nav .dii-content-nav-menu[style*="display: none"] {
    display: block !important;
  }
}

@media only screen and (max-width: 1024px) {
  .cms-header.cms-sticky-header.is-sticky {
    position: relative;
  }
  .cms-header #design-container-main-nav #ww-btn-main-nav {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    padding: 0;
    font-size: 0;
  }
  .cms-header #design-container-main-nav #ww-btn-main-nav .fa-bars {
    font-size: 1.5rem;
    color: var(--cms-text);
  }
  .cms-header #design-container-main-nav #ww-btn-main-nav .fa-caret {
    display: none;
  }
  .cms-header #design-container-main-nav .dii-content-list {
    position: absolute;
    top: 40px;
    right: 0;
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu {
    display: none;
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu > ul {
    flex-direction: column;
    align-items: initial;
    min-width: 15rem;
    border-radius: 0;
    border-bottom-left-radius: 0.5rem;
    background: var(--cms-bg);
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu li {
    background: none;
  }
  .cms-header #design-container-main-nav .dii-sub-menu-link {
    border-radius: 0;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: normal;
    text-transform: none;
  }
  .cms-header #design-container-main-nav li:has(> .show),
  .cms-header #design-container-main-nav .dii-content-nav-menu ul ul li:hover {
    border-radius: 0;
  }
  .cms-header #design-container-main-nav li:has(> .show) > .dii-sub-menu-link {
    background: var(--cms-bg-hover);
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu > ul > li > .dii-sub-menu-icon {
    display: flex;
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu .dii-sub-menu-icon::before {
    content: "\f078";
    transition: all var(--transition);
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu .dii-sub-menu-icon:has(+ .show)::before {
    transform: rotate(180deg);
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu ul.show {
    opacity: 1;
    visibility: visible;
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu ul ul {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-width: initial;
    border-radius: 0;
    border-bottom-left-radius: 0.5rem;
    filter: brightness(135%);
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu ul ul ul {
    filter: brightness(150%);
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu ul ul ul ul {
    filter: brightness(165%);
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu ul ul:not(.show) {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .cms-header #design-container-main-nav {
    padding: 0;
  }
  .cms-header #design-container-main-nav > .dii-content-list {
    position: relative;
    width: 100svw;
  }
  .cms-header #design-container-main-nav .dii-content-nav-menu > ul,
  .cms-header #design-container-main-nav .dii-content-nav-menu ul ul {
    border-bottom-left-radius: 0;
  }
}