/* Custom CSS overrides */

/* Prevent color transitions to avoid blinking */
*, *::before, *::after {
  transition: none !important;
  animation: none !important;
}

/* Fix for logo display in menu */
html[data-placement=horizontal] .nav-container .logo img,
html[data-placement=horizontal] .nav-container .logo .img,
html[data-placement=vertical] .nav-container .logo img,
html[data-placement=vertical] .nav-container .logo .img {
  width: auto;
  height: 35px;
  object-fit: contain;
  object-position: left;
}

/* Fix for logo display in mobile view */
@media (max-width: 767px) {
  .nav-content .logo img {
    width: auto !important;
    height: 30px !important;
    object-fit: contain !important;
    object-position: left !important;
    max-width: 100% !important;
  }
  
  /* Ensure logo container has enough space */
  .nav-content .logo {
    min-width: 120px;
    display: flex;
    align-items: center;
  }
  
  /* Fix for submenu items in mobile view */
  .menu-container.mobile-sub-menu-open .menu .sub-menu {
    display: block !important;
  }
  
  /* Make sure dropdown menus are visible in mobile view */
  .menu-container.mobile-menu-open .menu .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 2rem !important;
  }
  
  /* Style for submenu items in mobile view */
  .menu-container.mobile-menu-open .menu .dropdown-menu .dropdown-item {
    color: var(--light-text) !important;
    padding: 0.5rem 1rem !important;
  }
  
  /* Add indentation for submenu items */
  .menu-container.mobile-menu-open .menu .dropdown-menu li {
    padding-left: 1rem !important;
  }
  
  /* Make sure dropdown toggles work in mobile */
  .menu-container.mobile-menu-open .menu .dropdown-toggle::after {
    display: inline-block !important;
  }
}

/* Fix for very small screens */
@media (max-width: 480px) {
  .nav-content .logo img {
    height: 25px !important;
  }
}

/* Add JavaScript to handle mobile submenu toggling */
@media (max-width: 767px) {
  /* Ensure parent menu items with children are clickable to expand submenus */
  .menu-container.mobile-menu-open .menu .dropdown > a {
    position: relative;
  }
  
  /* Add a visual indicator for expandable menu items */
  .menu-container.mobile-menu-open .menu .dropdown > a::after {
    content: '+';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
  }
  
  /* Change indicator when expanded */
  .menu-container.mobile-menu-open .menu .dropdown.show > a::after {
    content: '-';
  }
}

/* Make user icon always visible in menu */
.user-container .user i[data-acorn-icon="user"] {
  opacity: 1 !important;
  color: var(--light-text) !important;
  visibility: visible !important;
}

/* Make sure the user menu text is also visible */
.user-container .user .name {
  color: var(--light-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure consistent styling on hover */
.user-container .user:hover i[data-acorn-icon="user"],
.user-container .user:hover .name {
  color: var(--light-text) !important;
  opacity: 1 !important;
}