/* Mobile-specific enhancements and optimizations */

/* General mobile spacing optimizations */
@media (max-width: 768px) {
  /* Reduce excessive vertical spacing */
  .section {
    padding: 35px 0 !important;
  }
  
  .section-title {
    margin-bottom: 24px !important;
  }
  
  /* Optimize content gaps */
  .hero-content,
  .about-content,
  .skills-content,
  .contact-content {
    gap: 24px !important;
  }
}

@media (max-width: 480px) {
  /* Further reduce spacing on small screens */
  .section {
    padding: 25px 0 !important;
  }
  
  .section-title {
    margin-bottom: 20px !important;
  }
  
  .hero-content,
  .about-content,
  .skills-content,
  .contact-content {
    gap: 20px !important;
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix for iOS viewport height issues */
  .hero,
  .section {
    min-height: -webkit-fill-available;
  }
  
  /* Prevent zoom on form inputs */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Better touch scrolling */
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Android specific optimizations */
@media screen and (-webkit-device-pixel-ratio: 2) {
  /* High DPI optimizations */
  .floating-logo,
  .social-icon-img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Touch device optimizations */
@media (any-hover: none) and (any-pointer: coarse) {
  /* Remove hover effects on touch devices */
  .cta-button:hover,
  .nav-link:hover,
  .social-link:hover,
  .contact-method:hover {
    transform: none !important;
    background: inherit !important;
  }
  
  /* Enhanced touch feedback */
  .cta-button:active,
  .nav-link:active,
  .social-link:active,
  .contact-method:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
  }
  
  /* Better touch targets */
  button,
  a,
  .clickable {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Mobile keyboard visibility fixes */
body.keyboard-visible {
  .hero {
    min-height: 50vh;
  }
  
  .nav {
    position: absolute;
  }
}

/* Landscape orientation optimizations */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: 90vh;
    padding-top: 60px;
    padding-bottom: 20px;
  }
  
  .hero-content {
    gap: 32px;
  }
  
  .hero-visual {
    height: 200px;
  }
  
  .tech-circle {
    width: 160px !important;
    height: 160px !important;
  }
  
  .inner-circle {
    width: 120px !important;
    height: 120px !important;
  }
  
  /* Reduce section spacing in landscape */
  .section {
    padding: 20px 0 !important;
  }
}

/* Ultra-small screens (older phones) */
@media (max-width: 320px) and (max-height: 480px) {
  .hero-title {
    font-size: 1.75rem !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
  }
  
  .hero-description {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  .cta-button {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
  }
  
  .tech-circle {
    width: 140px !important;
    height: 140px !important;
  }
  
  .inner-circle {
    width: 110px !important;
    height: 110px !important;
  }
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
  .glass,
  .glass-strong {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #ffffff !important;
  }
  
  .nav-link,
  .cta-button {
    border: 1px solid #ffffff !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .floating-icon,
  .tech-circle,
  .scroll-arrow {
    animation: none !important;
  }
  
  .cta-button:active,
  .nav-link:active {
    transform: none !important;
  }
}

/* Better focus indicators for mobile navigation */
.nav-link:focus-visible,
.cta-button:focus-visible,
.social-link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Improved mobile menu overlay */
@media (max-width: 768px) {
  .nav-menu.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    backdrop-filter: blur(2px);
  }
}

/* Better form experience on mobile */
@media (max-width: 480px) {
  .form-input:focus,
  .form-textarea:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  }
  
  /* Prevent horizontal scrolling on form elements */
  .contact-form {
    overflow-x: hidden;
  }
  
  .form-input,
  .form-textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Optimize section spacing for mobile */
  .section:not(.hero) {
    padding: 25px 0 !important;
  }
  
  .section-title {
    margin-bottom: 20px !important;
  }
  
  /* Reduce gaps between content elements */
  .about-content,
  .skills-content,
  .contact-content {
    gap: 20px !important;
  }
  
  /* Hero section mobile optimization */
  .hero {
    min-height: 85vh !important;
    padding: 70px 0 20px 0 !important;
  }
}

/* Performance optimizations for animations on mobile */
@media (max-width: 768px) {
  .floating-icon,
  .tech-circle {
    will-change: transform;
    backface-visibility: hidden;
  }
  
  /* Reduce animation complexity on mobile */
  .floating-icon {
    animation-duration: 4s !important;
  }
  
  .tech-circle {
    animation-duration: 3s !important;
  }
}

/* Safe area insets for devices with notches */
@supports (padding: max(0px)) {
  .nav {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  .hero {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  
  .footer {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}