/* Desktop dropdown behavior - Override conflicting styles from myStyle.css */
@media (min-width: 992px) {

  /* Base dropdown menu styling for desktop */
  .nav-item.dropdown .dropdown-menu.navDropdown {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 0 !important;
    display: none !important;
    z-index: 1000 !important;
    width: auto !important;
    /* Override the 100% width from myStyle.css */
    min-width: 200px !important;
    transform: none !important;
    /* Override the transform from myStyle.css */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  /* Show dropdown when React state adds 'show' class */
  .nav-item.dropdown .dropdown-menu.navDropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Also support hover for better UX */
  .nav-item.dropdown:hover .dropdown-menu.navDropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}