/* Mobile-first responsive overrides */
/* Complements Tailwind responsive utilities with global fixes */

/* Prevent horizontal scroll on all viewports */
html {
  overflow-x: hidden;
}

/* Ensure touch targets are minimum 44x44px on mobile */
@media (max-width: 767px) {
  a, button, input[type="submit"], input[type="button"],
  select, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Stack tables on small screens */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Readable body text */
  body {
    font-size: var(--font-size-base);
  }

  /* Full-width form inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px; /* Prevent iOS zoom on focus */
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .prose {
    max-width: 55ch;
  }
}

/* Desktop refinements */
@media (min-width: 1440px) {
  .prose {
    max-width: 65ch;
  }
}