/**
 * Mobile Touch Target Optimization
 * Ensures all interactive elements meet 48px minimum touch target requirement
 * Optimized for iOS and Android devices with proper spacing to prevent mis-taps
 */

/* ========================================
   GLOBAL TOUCH TARGET STANDARDS
   ======================================== */

:root {
  /* Touch target minimum size (WCAG 2.5.5 AAA standard) */
  --touch-target-min: 48px;
  --touch-target-spacing: 8px;
  
  /* Mobile-specific spacing */
  --mobile-space-xs: 8px;
  --mobile-space-sm: 12px;
  --mobile-space-md: 16px;
  --mobile-space-lg: 24px;
  --mobile-space-xl: 32px;
}

/* Ensure all clickable elements have minimum touch target */
@media (hover: none) and (pointer: coarse) {
  /* Universal touch target enhancement */
  a, button, input, select, textarea, 
  [role="button"], [onclick], [tabindex="0"] {
    position: relative;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  /* Ensure proper tap highlight for touch feedback */
  a, button, [role="button"], [onclick] {
    -webkit-tap-highlight-color: rgba(63, 81, 181, 0.1);
    /* touch-action: manipulation; REMOVED - causes iOS scroll issues */
  }
}

/* ========================================
   NAVIGATION DOTS ENHANCEMENT
   ======================================== */

@media (max-width: 768px) {
  .testimonial-navigation {
    padding: var(--mobile-space-lg) 0;
  }
  
  .nav-dots {
    display: flex;
    gap: var(--mobile-space-md) !important; /* Increase spacing between dots */
    align-items: center;
    justify-content: center;
    padding: var(--mobile-space-sm) 0;
  }
  
  .nav-dot {
    /* Increase visual size while maintaining larger touch target */
    width: 16px !important;
    height: 16px !important;
    position: relative;
    margin: 0 !important;
    
    /* Create larger invisible touch target */
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: var(--touch-target-min);
      height: var(--touch-target-min);
      border-radius: 50%;
      z-index: 1;
    }
  }
  
  /* Navigation arrows */
  .nav-btn {
    width: var(--touch-target-min) !important;
    height: var(--touch-target-min) !important;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Ensure adequate spacing from dots */
    &.prev-btn {
      margin-right: var(--mobile-space-md);
    }
    
    &.next-btn {
      margin-left: var(--mobile-space-md);
    }
  }
}

/* ========================================
   MODAL CLOSE BUTTON OPTIMIZATION
   ======================================== */

.portfolio-close {
  /* Increase touch target size */
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px !important;
  line-height: 1;
  padding: 0;
  
  /* Adjust position for larger size */
  top: 8px !important;
  right: 8px !important;
  
  /* Add visible touch area indicator on mobile */
  @media (hover: none) and (pointer: coarse) {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* ========================================
   FORM INPUT TOUCH OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
  /* Text inputs and selects */
  .form-control {
    min-height: var(--touch-target-min) !important;
    padding: 14px 16px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Textareas need special handling */
  textarea.form-control {
    min-height: 120px !important; /* Comfortable for typing */
    line-height: 1.5;
  }
  
  /* Radio and checkbox containers */
  .radio-option, .checkbox-option {
    min-height: var(--touch-target-min);
    padding: var(--mobile-space-sm) !important;
    margin-bottom: var(--mobile-space-sm) !important;
    align-items: center;
  }
  
  /* Radio buttons and checkboxes */
  input[type="radio"], 
  input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    margin: 0 var(--mobile-space-sm) 0 0 !important;
    flex-shrink: 0;
  }
  
  /* Custom checkbox */
  .checkmark {
    width: 24px !important;
    height: 24px !important;
    margin-right: var(--mobile-space-sm);
  }
  
  .checkbox-option input[type="checkbox"]:checked + .checkmark::after {
    font-size: 16px !important;
  }
}

/* ========================================
   CTA BUTTON ENHANCEMENTS
   ======================================== */

@media (max-width: 768px) {
  .cta-primary, .cta-secondary,
  .btn-primary, .btn-secondary {
    min-height: var(--touch-target-min) !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 600;
    border-radius: 6px;
    
    /* Add touch feedback */
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  }
  
  /* Hero CTA buttons need extra spacing */
  .hero-cta-container {
    gap: var(--mobile-space-md) !important;
    
    .cta-primary, .cta-secondary {
      width: 100%;
      max-width: 300px;
    }
  }
}

/* ========================================
   PROGRESS STEPS OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
  .progress-steps {
    padding: 0 var(--mobile-space-md);
    margin-bottom: var(--mobile-space-lg);
  }
  
  .progress-step {
    /* Ensure adequate touch target */
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: var(--touch-target-min);
      height: var(--touch-target-min);
      z-index: 3;
    }
  }
  
  .step-number {
    width: var(--touch-target-min) !important;
    height: var(--touch-target-min) !important;
    font-size: 18px !important;
    font-weight: 700;
  }
  
  .step-label {
    margin-top: var(--mobile-space-xs);
    font-size: 13px !important;
  }
}

/* ========================================
   SERVICE & PORTFOLIO CARDS
   ======================================== */

@media (max-width: 768px) {
  .service-card, .portfolio-card {
    /* Ensure entire card is easily tappable */
    min-height: 200px;
    margin-bottom: var(--mobile-space-lg) !important;
    
    /* Add visual feedback on touch */
    &:active {
      transform: scale(0.98);
      transition: transform 0.1s ease;
    }
  }
  
  /* Portfolio overlay button */
  .portfolio-view-btn {
    min-height: var(--touch-target-min);
    padding: 14px 24px !important;
    font-size: 16px !important;
  }
}

/* ========================================
   SOCIAL MEDIA ICONS
   ======================================== */

footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  margin: 0 var(--mobile-space-xs);
  
  i {
    font-size: 24px !important;
  }
  
  /* Add touch feedback */
  @media (hover: none) and (pointer: coarse) {
    &:active {
      transform: scale(0.9);
      opacity: 0.8;
    }
  }
}

/* ========================================
   TECH TAGS OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
  .tech-tag, .tech-tag-modal {
    /* Increase size for better tappability */
    padding: 8px 12px !important;
    font-size: 13px !important;
    margin: 4px !important;
    
    /* Ensure minimum touch height */
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ========================================
   MOBILE MENU IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
  /* Contact information in sidebar */
  #contact p {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: var(--mobile-space-xs) 0;
    
    /* Icon spacing */
    i {
      min-width: 32px;
      font-size: 20px !important;
    }
    
    /* Make phone and email fully tappable */
    a {
      flex: 1;
      padding: var(--mobile-space-xs);
      margin: 0 0 0 var(--mobile-space-xs);
    }
  }
}

/* ========================================
   FORM NAVIGATION BUTTONS
   ======================================== */

@media (max-width: 768px) {
  .form-navigation {
    gap: var(--mobile-space-md) !important;
    padding: var(--mobile-space-lg) 0;
    
    /* Stack buttons on very small screens */
    @media (max-width: 400px) {
      flex-direction: column-reverse;
      
      button {
        width: 100% !important;
      }
    }
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus indicators for touch devices */
@media (hover: none) and (pointer: coarse) {
  :focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  /* Remove focus styles for touch interactions */
  :focus:not(:focus-visible) {
    outline: none;
  }
}

/* ========================================
   SCROLL OPTIMIZATION
   ======================================== */

/* Prevent accidental horizontal scrolling */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  /* Smooth scrolling for anchor links - DISABLED for iOS compatibility */
  html {
    /* scroll-behavior: smooth; REMOVED - causes iOS scroll freezing */
    /* -webkit-overflow-scrolling: touch; REMOVED - deprecated, causes issues */
  }
}

/* ========================================
   PLATFORM-SPECIFIC OPTIMIZATIONS
   ======================================== */

/* iOS-specific adjustments */
@supports (-webkit-touch-callout: none) {
  /* Prevent callout menu on long press */
  a, button, [role="button"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }
  
  /* Fix for iOS form zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Android-specific adjustments */
@media (hover: none) and (pointer: coarse) and (min-resolution: 2dppx) {
  /* Higher contrast for OLED screens */
  .nav-dot.active,
  .progress-step.active .step-number {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce animations on low-end devices */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.2s !important;
  }
}

/* Hardware acceleration for touch interactions - DISABLED for iOS performance */
/* iOS has issues with excessive will-change and 3D transforms */
/*
.nav-btn, .nav-dot, .cta-primary, .cta-secondary,
.service-card, .portfolio-card {
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
*/