/* Touch Targets Optimization for Mobile Devices */
/* Ensures all interactive elements meet minimum 44px touch target size */

/* Mobile Menu Touch Targets */
.mobile-menu-btn,
.mobile-menu-close-btn {
  /* Ensure minimum touch target size */
  min-width: 48px !important;
  min-height: 48px !important;
  /* Add padding if needed to reach minimum size */
  padding: 10px !important;
}

.mobile-nav-item {
  /* Ensure minimum touch target size */
  min-height: 44px !important;
  /* Add padding to increase touch area */
  padding: 12px 25px !important;
  /* Increase spacing between items */
  margin: 2px 0 !important;
}

.mobile-nav-item i {
  /* Ensure icon touch target */
  min-width: 24px !important;
  min-height: 24px !important;
  /* Center icon */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-dapp-button {
  /* Ensure minimum touch target size */
  min-width: 44px !important;
  min-height: 44px !important;
  /* Add padding if needed */
  padding: 12px 20px !important;
}

/* Ensure adequate spacing between touch targets */
.mobile-nav-item + .mobile-nav-item {
  margin-top: 1px !important;
}

/* iPhone X+ safe area adjustments */
@supports (padding: max(0px)) {
  .mobile-menu-header {
    padding-top: calc(15px + constant(safe-area-inset-top)) !important;
    padding-top: calc(15px + env(safe-area-inset-top)) !important;
  }
  
  .mobile-menu-content {
    padding-bottom: calc(20px + constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
}

/* High contrast mode for better touch target visibility */
@media (prefers-contrast: high) {
  .mobile-nav-item {
    border-left: 2px solid transparent !important;
  }
  
  .mobile-nav-item:hover,
  .mobile-nav-item:focus {
    border-left: 2px solid #FFD700 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item,
  .mobile-menu-btn,
  .mobile-menu-close-btn {
    transition: none !important;
  }
}

/* Ensure touch targets are visible on all backgrounds */
.mobile-nav-item:hover,
.mobile-nav-item:focus {
  /* Ensure sufficient contrast */
  background: rgba(255, 215, 0, 0.1) !important;
  outline: 2px solid #FFD700 !important;
  outline-offset: -2px !important;
}

/* Touch target visualization for debugging (uncomment if needed) */
/*
.mobile-menu-btn::after,
.mobile-menu-close-btn::after,
.mobile-nav-item::after,
.mobile-dapp-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  border-radius: 50%;
  pointer-events: none;
  display: none;
}

.debug-touch-targets .mobile-menu-btn::after,
.debug-touch-targets .mobile-menu-close-btn::after,
.debug-touch-targets .mobile-nav-item::after,
.debug-touch-targets .mobile-dapp-button::after {
  display: block;
}
*/

/* Ensure proper focus indicators for accessibility */
.mobile-menu-btn:focus,
.mobile-menu-close-btn:focus,
.mobile-nav-item:focus,
.mobile-dapp-button:focus {
  outline: 2px solid #FFD700 !important;
  outline-offset: 2px !important;
}

/* Remove focus styles on touch devices to prevent focus traps */
@media (hover: none) and (pointer: coarse) {
  .mobile-menu-btn:focus,
  .mobile-menu-close-btn:focus,
  .mobile-nav-item:focus,
  .mobile-dapp-button:focus {
    outline: none !important;
  }
}