/* ========================= */
/* nav default style start  */
/* ======================= */

.nav-container ul.menu,
.nav-container ul.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-container ul.menu > li > a,
.nav-container ul.sub-menu > li > a {
  color: inherit;
}

.nav-container ul.menu > li > a {
  display: inline-block;
}

.nav-container ul.sub-menu > li > a {
  display: block;
}

/* ========================== */
/* nav horizontal layout  */
/* ========================= */

.layout-horizontal ul.menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

.layout-horizontal ul.menu > li {
  padding: 12px;
}

.layout-horizontal ul.menu > li.menu-item-has-children {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.layout-horizontal ul.menu > li.menu-item-has-children ul.sub-menu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 10;
  visibility: hidden;
}

.layout-horizontal ul.menu > li.menu-item-has-children:hover ul.sub-menu {
  visibility: visible;
}

.layout-horizontal ul.sub-menu {
  padding: 4px;
  display: block;
  background-color: var(--background-color);
  border-radius: 8px;
  box-shadow: 0px 2px 8px rgba(17, 24, 39, 0.12);
}

.layout-horizontal ul.sub-menu li {
  width: 100%;
  padding: 0;
  display: block;
}

.layout-horizontal ul.sub-menu li a {
  padding: 8px 12px;
  display: block;
}

.layout-horizontal ul.sub-menu li a:hover {
  background-color: var(--dark-bg-color);
}

/* ========================== */
/* nav vertical layout  */
/* nav off canvas menu layout  */
/* ========================= */

.layout-off-canvas ul.menu,
.layout-vertical ul.menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.layout-off-canvas ul.menu > li,
.layout-vertical ul.menu > li {
  padding: 0;
}

.layout-off-canvas ul.menu > li > a,
.layout-vertical ul.menu > li > a {
  padding: 12px;
  display: block;
}
.layout-off-canvas ul.menu > li > a:hover {
  background-color: var(--dark-bg-color);
}

.layout-off-canvas ul.menu li.menu-item-has-children,
.layout-vertical ul.menu li.menu-item-has-children {
  position: relative;
}

.layout-off-canvas ul.menu li.menu-item-has-children > .menu-drop-down-selector,
.layout-vertical ul.menu li.menu-item-has-children > .menu-drop-down-selector {
  position: absolute;
  inset-inline-end: 0;
  top: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--dark-bg-color);
  border-radius: 6px;
}

.layout-off-canvas ul.sub-menu,
.layout-vertical ul.sub-menu {
  padding: 4px;
  display: none;
  overflow: hidden;
}

.layout-off-canvas ul.sub-menu li,
.layout-vertical ul.sub-menu li {
  width: 100%;
  padding: 0;
  display: block;
}

.layout-off-canvas ul.sub-menu li a,
.layout-vertical ul.sub-menu li a {
  padding: 8px 12px;
  display: block;
}

.layout-off-canvas ul.sub-menu li a:hover,
.layout-vertical ul.sub-menu li a:hover {
  background-color: var(--dark-bg-color);
}

/* ========================== */
/* nav off canvas layout  */
/* ========================= */

.layout-off-canvas .off-canvas-menu-content {
  position: fixed;
  z-index: 999;
  top: 0;
  inset-inline-end: 0;
}

.layout-off-canvas .overlay {
  position: fixed;
  z-index: 99;
  inset: 0;
  background-color: var(--light-text-color);
}