/* Responsive Enhancement Styles for API Connect */

/* Mobile-first approach for better responsiveness */
@media (max-width: 640px) {
  /* Hero section adjustments */
  .hero-title {
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  
  /* Feature cards in mobile */
  .feature-card {
    padding: 1.25rem;
  }
  
  /* Navigation adjustments */
  .mobile-menu {
    max-height: 100vh;
    overflow-y: auto;
  }
  
  /* Form inputs in modals */
  .modal-form input,
  .modal-form select,
  .modal-form textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Pricing cards spacing */
  .pricing-card {
    margin-bottom: 1rem;
  }
  
  /* Admin panel cards */
  .admin-card {
    padding: 1rem;
  }
  
  /* Tech stack icons */
  .tech-icon {
    padding: 0.75rem;
  }
  
  /* Contact section spacing */
  .contact-item {
    margin-bottom: 1rem;
  }
}

/* Tablet specific adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Feature grid optimizations */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Admin panel grid */
  .admin-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Pricing section */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* High resolution mobile devices */
@media (max-width: 480px) {
  /* Ultra small screens adjustments */
  .container-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Button sizes */
  .btn-mobile {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  /* Modal adjustments */
  .modal-content {
    margin: 0.5rem;
    max-height: 95vh;
  }
  
  /* Text scaling */
  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* Icon sizing */
  .mobile-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  /* Hero section height adjustment */
  .hero-section {
    min-height: 100vh;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  /* Modal height adjustments */
  .modal-landscape {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  /* Larger touch targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Button spacing */
  .button-group button {
    margin: 0.25rem;
  }
  
  /* Form input spacing */
  .form-group {
    margin-bottom: 1.25rem;
  }
}

/* Dark mode considerations for responsive design */
@media (prefers-color-scheme: dark) {
  /* Ensure proper contrast on smaller screens */
  .modal-content {
    background-color: rgb(31, 41, 55);
    color: white;
  }
  
  .card-dark {
    background-color: rgb(55, 65, 81);
    border-color: rgb(75, 85, 99);
  }
}

/* Print styles for responsive content */
@media print {
  /* Hide interactive elements */
  .no-print {
    display: none !important;
  }
  
  /* Adjust layout for print */
  .print-layout {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp icons and images */
  .high-dpi-icon {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Accessibility enhancements for responsive design */
@media (prefers-reduced-motion: reduce) {
  /* Disable animations for users who prefer reduced motion */
  .animate-on-scroll,
  .animate-fade-in-up,
  .animate-fade-in-down {
    animation: none !important;
    transition: none !important;
  }
}

/* Focus styles for keyboard navigation */
.focus-visible:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Container query support (where available) */
@container (max-width: 400px) {
  .container-responsive {
    padding: 0.5rem;
  }
  
  .container-responsive h1,
  .container-responsive h2,
  .container-responsive h3 {
    font-size: smaller;
  }
}

/* Ensure proper scrolling on iOS */
.scroll-container {
  -webkit-overflow-scrolling: touch;
}

/* Fix viewport issues on mobile browsers */
@supports (-webkit-touch-callout: none) {
  .ios-fix {
    min-height: -webkit-fill-available;
  }
}

/* Loading states for responsive components */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Responsive typography scaling */
@media (max-width: 640px) {
  .responsive-text-xl { font-size: 1.125rem; }
  .responsive-text-2xl { font-size: 1.25rem; }
  .responsive-text-3xl { font-size: 1.5rem; }
  .responsive-text-4xl { font-size: 1.875rem; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .responsive-text-xl { font-size: 1.25rem; }
  .responsive-text-2xl { font-size: 1.5rem; }
  .responsive-text-3xl { font-size: 1.875rem; }
  .responsive-text-4xl { font-size: 2.25rem; }
}

/* Grid system enhancements */
.responsive-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}