/* ═══════════════════════════════════════════════════════════════════════════
   PyStatR+ Mobile Dropdown CSS
   
   PURPOSE: Support tap/click dropdown behavior on mobile
   TARGET: Screens < 768px
   
   PRESERVES:
   - Existing colors and fonts
   - Desktop hover behavior
   - All existing styling
   ═══════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   MOBILE DROPDOWN BEHAVIOR (< 768px)
   ========================================================================== */

@media only screen and (max-width: 767px) {
  
  /* Remove hover-based dropdown on mobile - require tap */
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: none;
  }
  
  /* Show dropdown only when .show class is present (via JS) */
  .navbar .nav-item.dropdown.show > .dropdown-menu {
    display: block !important;
    position: static !important;
    width: 100%;
    min-width: 100%;
    z-index: 1000;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Dropdown toggle visual feedback */
  .navbar .dropdown-toggle.show {
    color: #38BDF8 !important; /* Brand Cyan */
  }
  
  /* Dropdown caret rotation when open */
  .navbar .dropdown-toggle::after {
    transition: transform 0.2s ease;
  }
  
  .navbar .dropdown-toggle.show::after {
    transform: rotate(180deg);
  }
  
  /* Ensure dropdown menu is properly styled on mobile */
  .navbar .dropdown-menu.show {
    animation: dropdownFadeIn 0.2s ease;
  }
  
  @keyframes dropdownFadeIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Touch-friendly tap targets */
  .navbar .dropdown-item {
    padding: 0.75rem 1rem !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Prevent text selection on tap */
  .navbar .dropdown-toggle {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
  }
  
}

/* ==========================================================================
   DESKTOP HOVER BEHAVIOR (>= 768px) - Preserved
   ========================================================================== */

@media only screen and (min-width: 768px) {
  
  /* Restore hover-based dropdown on desktop */
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
  
}