/* Mobile Enhancement Styles - Common mobile improvements for all pages */

/* Ensure proper mobile viewport behavior */
@viewport {
  width: device-width;
  initial-scale: 1;
}

/* Base mobile styles for all devices */
@media screen and (max-width: 768px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  
  /* Improve tap targets */
  a, button, input, select, textarea, .clickable {
    min-height: 44px;
    touch-action: manipulation;
  }
  
  /* Better mobile typography */
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  /* Responsive images */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }
  
  /* Flex container improvements */
  .flex-container {
    flex-direction: column;
  }
  
  /* Grid adjustments */
  .grid-container {
    grid-template-columns: 1fr;
  }
  
  /* Form improvements */
  input, textarea, select {
    width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Button styling */
  .btn, button, [class*="btn-"] {
    width: 100%;
    max-width: 320px;
    margin: 10px auto;
    display: block;
  }
  
  /* Table responsiveness */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Modal and popup adjustments */
  .modal, .popup, [class*="modal"], [class*="popup"] {
    width: 90%;
    max-width: 100%;
    margin: 20px auto;
  }
  
  /* Navigation spacing */
  nav {
    padding: 0;
  }
  
  /* Content padding */
  main, .main-content, [role="main"] {
    padding: 60px 0 20px;
  }
  
  /* Section spacing */
  section {
    padding: 30px 0 20px;
  }
  
  /* Heading sizes */
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
  h5, h6 { font-size: 16px; }
  
  /* List improvements */
  ul, ol {
    padding-left: 20px;
  }
  
  /* Card and container padding */
  .card, .container, [class*="card"], [class*="container"] {
    padding: 15px;
  }
  
  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
  
  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }
}

/* Small mobile devices */
@media screen and (max-width: 375px) {
  /* Even smaller typography adjustments */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  h4, h5, h6 { font-size: 16px; }
  
  /* Tighter spacing */
  section {
    padding: 20px 0 15px;
  }
  
  /* Smaller buttons */
  .btn, button, [class*="btn-"] {
    padding: 10px 15px;
    font-size: 14px;
  }
  
  /* Reduce padding */
  .card, .container, [class*="card"], [class*="container"] {
    padding: 10px;
  }
}

/* Landscape orientation adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  section {
    padding: 20px 0 15px;
  }
  
  /* Adjust navigation height */
  nav, .main-nav {
    height: 50px;
  }
  
  /* Reduce hero section height */
  .hero, .main-intro, [class*="hero"] {
    min-height: auto;
    padding: 30px 0;
  }
}

/* Touch device specific styles */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  a:hover, button:hover {
    opacity: 1;
  }
  
  /* Add active states for better feedback */
  a:active, button:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

/* High resolution display adjustments */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  /* Ensure crisp borders and text */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Print styles to ensure mobile print works well */
@media print {
  /* Hide unnecessary elements */
  nav, .navigation, .menu, .footer, .social-icons {
    display: none !important;
  }
  
  /* Ensure content fits page */
  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}