/* Wallet Wiseguys - Enhanced Mobile Optimizations */

/* Base mobile styles */
@media (max-width: 768px) {
  /* Navigation */
  nav a, nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Mobile menu links */
  #mobile-menu a {
    min-height: 48px;
    padding: 12px 0;
    font-size: 1rem;
  }
  
  /* All buttons and CTAs */
  .btn, button, a[class*="rounded"], 
  a[class*="bg-"][class*="px-"] {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
  }
  
  /* Footer links */
  footer a {
    display: inline-block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 28px;
  }
  
  /* Prevent zoom on input focus (iOS) */
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* Responsive typography */
  h1, .text-5xl, .text-6xl, .text-7xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2, .text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h3, .text-3xl {
    font-size: 1.25rem !important;
  }
  
  .text-xl {
    font-size: 1.125rem !important;
  }
  
  .text-2xl {
    font-size: 1.25rem !important;
  }
  
  /* Stack cards vertically with proper spacing */
  .grid {
    gap: 1rem !important;
  }
  
  /* Reduce section padding */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Fix horizontal overflow */
  body {
    overflow-x: hidden;
  }
  
  /* Better spacing for cards */
  .card, [class*="rounded-2xl"], [class*="rounded-xl"] {
    padding: 1rem !important;
  }
  
  /* Hero section adjustments */
  .min-h-screen {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
  
  /* Quiz specific */
  .option-card {
    padding: 1rem !important;
    min-height: 60px;
  }
  
  /* Stats grid on mobile */
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* CTA buttons stack on mobile */
  .flex-col.sm\\:flex-row {
    flex-direction: column !important;
  }
  
  .flex-col.sm\\:flex-row > * {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  h1, .text-5xl, .text-6xl, .text-7xl {
    font-size: 1.625rem !important;
  }
  
  h2, .text-4xl {
    font-size: 1.25rem !important;
  }
  
  /* Reduce horizontal padding */
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Smaller buttons */
  .btn, button, a[class*="rounded"] {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

/* Safe area insets for notched phones (iPhone X+) */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  
  nav {
    padding-top: env(safe-area-inset-top);
  }
  
  /* Fixed bottom elements */
  .fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Improve tap highlighting on mobile */
@media (hover: none) {
  a, button {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
  }
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .card-hover:hover,
  .hover-lift:hover,
  [class*="hover:scale"]:hover,
  [class*="hover:transform"]:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Better focus states for accessibility */
*:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

/* Landscape mode adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .min-h-screen {
    min-height: auto;
  }
  
  section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  a, button {
    text-decoration: underline;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}