/* Cross-Device Dropdown Fixes */

/* Common styles for all devices */
.dropdown-content {
  transition: all 0.3s ease;
}

/* Desktop-specific styles */
@media (min-width: 992px) {
  /* Show dropdown on hover */
  .nav-item.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  /* Initial state */
  .dropdown-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 10px 0;
    pointer-events: none;
  }
  
  /* Dropdown items styling */
  .dropdown-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
  }
  
  /* Hover effect */
  .dropdown-item:hover {
    background-color: #f5f5f5;
    transform: translateX(5px);
  }
}

/* Mobile-specific styles */
@media (max-width: 991px) {
  /* Reset desktop hover behaviors */
  .nav-item.dropdown:hover .dropdown-content {
    opacity: initial;
    visibility: initial;
    transform: initial;
  }
  
  /* Hide dropdown by default */
  .dropdown-content {
    display: none;
    max-height: 0;
    overflow: hidden;
  }
  
  /* Show dropdown when active class is present */
  .nav-item.dropdown.show-dropdown .dropdown-content {
    display: block !important;
    max-height: 1000px;
    overflow: visible;
  }
  
  /* Force dropdown to be block level */
  .dropdown-content {
    position: static;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    background: #f8f8f8;
  }
  
  /* Ensure dropdown items are properly styled */
  .dropdown-item {
    display: block;
    padding: 15px 20px 15px 50px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  
  /* Visual indicator for dropdown toggle */
  .nav-item.dropdown .fa-chevron-down {
    transition: transform 0.3s ease;
  }
  
  .nav-item.dropdown.show-dropdown .fa-chevron-down {
    transform: rotate(180deg);
  }
  
  /* Prevent flash of unstyled content */
  .dropdown-content {
    visibility: visible;
    opacity: 1;
  }
}