/* ===================================
   Online Invoices Maker - Enhanced Mobile Optimizations
   Comprehensive Mobile-First Enhancements
   Supports all modern mobile devices (2024)
   =================================== */

/* ===================================
   DOCUMENTATION PAGES MOBILE OPTIMIZATION
   =================================== */

/* Base documentation styles for mobile */
@media (max-width: 768px) {
  .doc-container {
    max-width: 100%;
    margin: 1rem auto;
    padding: 1rem;
  }
  
  .doc-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .doc-header h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  
  .doc-section {
    margin-bottom: 1.5rem;
  }
  
  .doc-section h2 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .doc-section h3 {
    font-size: 1.1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  .doc-section h4 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .doc-section p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  .doc-section ul,
  .doc-section ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .doc-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
  }
  
  .back-link {
    font-size: 0.875rem;
    padding: 0.5rem 0;
  }
}

/* Contact Page Mobile */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .contact-card {
    padding: 1.25rem !important;
  }
  
  .contact-icon {
    font-size: 2rem !important;
  }
  
  .contact-form {
    padding: 1.25rem !important;
    margin: 1.5rem 0 !important;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px !important;
    padding: 0.75rem !important;
  }
  
  .form-group textarea {
    min-height: 120px !important;
  }
  
  .success-message {
    font-size: 0.875rem;
    padding: 0.875rem;
  }
}

/* API Page Mobile */
@media (max-width: 768px) {
  .coming-soon-box {
    padding: 2rem 1.25rem !important;
    margin: 1.5rem 0 !important;
  }
  
  .coming-soon-box h2 {
    font-size: 1.5rem !important;
  }
  
  .feature-preview {
    padding: 1rem !important;
    margin: 0.75rem 0 !important;
  }
  
  .feature-preview h3 {
    font-size: 1.1rem !important;
  }
  
  .notify-form {
    flex-direction: column !important;
    gap: 0.75rem !important;
    max-width: 100% !important;
  }
  
  .notify-form input {
    font-size: 16px !important;
    padding: 0.75rem !important;
  }
  
  .notify-form button {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
  }
  
  .timeline {
    padding-left: 1rem !important;
  }
  
  .timeline-item {
    padding-left: 1.5rem !important;
  }
}

/* Help Center Mobile */
@media (max-width: 768px) {
  .help-search {
    padding: 1.5rem 1rem !important;
  }
  
  .search-box {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .search-box input {
    font-size: 16px !important;
    padding: 0.75rem !important;
  }
  
  .category-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .category-card {
    padding: 1.25rem !important;
  }
  
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .faq-item {
    padding: 1rem !important;
  }
  
  .faq-question {
    font-size: 0.9375rem !important;
    padding-right: 2rem !important;
  }
  
  .faq-answer {
    font-size: 0.875rem !important;
    padding-top: 0.75rem !important;
  }
}

/* About Page Mobile */
@media (max-width: 768px) {
  .about-hero {
    padding: 2rem 1rem !important;
  }
  
  .about-hero h1 {
    font-size: 1.75rem !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .stat-card {
    padding: 1.25rem !important;
  }
  
  .stat-number {
    font-size: 1.75rem !important;
  }
  
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Templates Page Mobile */
@media (max-width: 768px) {
  .templates-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  
  .template-card {
    padding: 1rem !important;
  }
  
  .template-preview {
    height: 200px !important;
  }
  
  .template-info {
    padding: 1rem !important;
  }
}

/* ===================================
   ENHANCED MOBILE BREAKPOINTS
   =================================== */

/* Modern Large Phones: iPhone 14 Pro Max, Galaxy S23 Ultra (430px) */
@media (max-width: 430px) {
  .doc-container {
    padding: 0.875rem;
  }
  
  .doc-header h1 {
    font-size: 1.4rem;
  }
  
  .contact-form,
  .coming-soon-box {
    padding: 1rem !important;
  }
  
  .btn,
  button {
    padding: 0.7rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

/* Standard Modern Phones: iPhone 14/15, Pixel 7 (390px-414px) */
@media (max-width: 414px) {
  body {
    font-size: 14px;
  }
  
  .doc-container {
    padding: 0.75rem;
  }
  
  .doc-header h1 {
    font-size: 1.35rem;
  }
  
  .doc-section h2 {
    font-size: 1.2rem;
  }
  
  .doc-section h3 {
    font-size: 1.05rem;
  }
  
  .contact-card,
  .feature-preview,
  .category-card {
    padding: 1rem !important;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 0.65rem !important;
  }
  
  .back-link {
    font-size: 0.8125rem;
  }
}

/* Compact Phones: iPhone SE, Galaxy A series (375px) */
@media (max-width: 375px) {
  body {
    font-size: 13.5px;
  }
  
  .doc-container {
    margin: 0.75rem auto;
    padding: 0.65rem;
  }
  
  .doc-header {
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
  }
  
  .doc-header h1 {
    font-size: 1.25rem;
  }
  
  .doc-section {
    margin-bottom: 1.25rem;
  }
  
  .doc-section h2 {
    font-size: 1.15rem;
    margin-top: 1.25rem;
  }
  
  .doc-section h3 {
    font-size: 1rem;
  }
  
  .doc-section p {
    font-size: 0.9rem;
  }
  
  .contact-icon {
    font-size: 1.75rem !important;
  }
  
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  .btn,
  button {
    padding: 0.65rem 0.875rem !important;
    font-size: 0.875rem !important;
  }
}

/* Small Compact Phones: Older iPhones (360px) */
@media (max-width: 360px) {
  body {
    font-size: 13px;
  }
  
  .doc-container {
    padding: 0.5rem;
  }
  
  .doc-header h1 {
    font-size: 1.2rem;
  }
  
  .doc-section h2 {
    font-size: 1.1rem;
  }
  
  .doc-section p {
    font-size: 0.875rem;
  }
  
  .contact-form,
  .coming-soon-box {
    padding: 0.875rem !important;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 0.6rem !important;
    font-size: 15px !important;
  }
  
  .btn,
  button {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }
}

/* ===================================
   TOUCH OPTIMIZATIONS
   =================================== */

/* Touch-specific improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
  /* Enhanced touch targets for documentation links */
  .doc-section a {
    padding: 0.25rem 0;
    display: inline-block;
  }
  
  .back-link {
    padding: 0.5rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Better button touch feedback */
  button,
  .btn,
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  button:active,
  .btn:active {
    transform: scale(0.98);
    transition: transform 100ms ease;
  }
  
  /* Smooth scrolling for documentation */
  .doc-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Better input handling */
  input,
  textarea,
  select {
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Prevent double-tap zoom */
  * {
    touch-action: manipulation;
  }
  
  /* Allow normal scrolling */
  body,
  .doc-container,
  textarea {
    touch-action: pan-y;
  }
}

/* ===================================
   LANDSCAPE MODE OPTIMIZATION
   =================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .doc-container {
    margin: 0.5rem auto;
    padding: 1rem;
  }
  
  .doc-header {
    margin-bottom: 1rem;
  }
  
  .contact-grid,
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .coming-soon-box {
    padding: 1.5rem 1rem !important;
  }
  
  .form-group {
    margin-bottom: 0.75rem !important;
  }
}

/* ===================================
   DEVICE-SPECIFIC FIXES
   =================================== */

/* iOS Safari Specific Fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix iOS Safari viewport height issue */
  body {
    min-height: -webkit-fill-available;
  }
  
  /* Better input styling for iOS */
  input,
  textarea,
  select {
    -webkit-appearance: none;
    border-radius: 8px;
  }
  
  /* Fix iOS sticky positioning */
  .doc-header {
    position: -webkit-sticky;
    position: sticky;
  }
  
  /* Prevent iOS bounce scrolling on specific elements */
  .doc-container {
    overscroll-behavior-y: contain;
  }
}

/* Android Chrome Optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Smooth scrolling on Android */
  .doc-container {
    scroll-behavior: smooth;
  }
  
  /* Better form rendering */
  input,
  select,
  textarea {
    font-family: inherit;
  }
}

/* High DPI / Retina Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Crisp borders for retina displays */
  .doc-section,
  .contact-card,
  .feature-preview,
  .category-card {
    border-width: 0.5px;
  }
  
  /* Sharper text rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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

/* Ensure readable text sizes on mobile */
@media (max-width: 768px) {
  /* Minimum readable text size */
  body,
  p,
  li,
  td,
  th {
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* Better focus visibility on mobile */
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
  
  /* Ensure sufficient color contrast */
  a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
}

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

@media (max-width: 768px) {
  /* Optimize animations for mobile */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
  
  /* GPU acceleration for smooth scrolling */
  .doc-container,
  .contact-form,
  .modal-content {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* ===================================
   PRINT STYLES (Mobile browsers)
   =================================== */

@media print {
  /* Hide non-essential elements when printing from mobile */
  .back-link,
  .notify-form,
  button,
  .btn {
    display: none !important;
  }
  
  /* Optimize for print */
  .doc-container {
    max-width: 100%;
    padding: 0;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}