 /* Hide all submenus by default */
.menu li ul,
.menu li ul ul {
    display: none;
    position: absolute;
    background: #fff;
    z-index: 999;
    padding: 8px 10px 5px 5px;
    margin: 10px 10px 5px 4px;
    list-style: none;
}

/* Position submenus properly */
.menu li {
    position: relative;
}

.menu-item-has-children.submenu-open > ul.sub-menu {
    display: block;
    top: 100%;
    left: 0;
}

/* Nested submenu (e.g., level 3+) */
/* Show sub-submenus (level 3+) on hover */
.menu li ul li:hover > ul {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
}


/* Style menu items */
.menu li {
    display: inline-block;
    position: relative;
}

/* Add arrow icon for menu items with submenus */
.menu li.menu-item-has-children > a::after {
    content: "\f107"; /* Unicode for fa-angle-down */
    font-family: "Font Awesome 5 Free"; /* or "Font Awesome 5 Free" depending on version */
    font-weight: 900; /* required for solid style */
    font-size: 12px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.menu ul.sub-menu li.menu-item-has-children > a::after {
    transform: rotate(-90deg);
}


/* Optional: Basic submenu item styling */
.menu li ul li {
    display: block;
    padding: 10px;
    white-space: nowrap;
}

@media (max-width: 991px) {
  .menu ul.sub-menu {
    display: none;
    flex-direction: column;
    padding-left: 5px;
    margin-top: 0px;
    position: static; /* remove default flyout behavior */
    box-shadow: none;
  }

  .menu-item-has-children.submenu-open > ul.sub-menu {
    display: flex;
  }

  .submenu-toggle {
    float: right;
    padding: 12px;
    cursor: pointer;
  }

  .submenu-toggle i {
    transition: transform 0.3s ease;
  }

  .menu-item-has-children.submenu-open > .submenu-toggle i {
    transform: rotate(-180deg);
  }

  .menu ul.sub-menu li {
    border-bottom: 1px solid #f0f0f0;
  }

  .menu ul.sub-menu li a {
    padding: 10px 16px;
    display: block;
    color: #555;
    font-size: 14px;
  }

  /* Prevent any submenu from appearing at side */
  .menu li.menu-item-has-children {
    position: relative;
  }

  .menu li.menu-item-has-children ul.sub-menu {
    position: static;
    top: auto;
    left: auto;
    background: none;
  }
}


