/* Generic mobile-friendly overrides */
html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }

/* Make media scale */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* Avoid horizontal scroll on small screens */
body { margin: 0; overflow-x: hidden; }
main, .container, .wrapper, .content, .page, .section, .inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* Tap targets */
button, .btn, a.button, input[type=submit], input[type=button] { 
  min-height: 44px; 
  padding: 0.75rem 1rem;
}

/* Forms full-width on small screens */
@media (max-width: 768px) {
  form, .form, .form-group, input, select, textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Stack columns on mobile */
@media (max-width: 768px) {
  [class*="col-"], .column, .columns, .grid > * {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .row, .grid, .columns { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 1rem;
  }
}

/* Make tables scroll on small screens */
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; }
}

/* Navigation: stack items if horizontal menu gets cramped */
@media (max-width: 768px) {
  nav ul, .nav ul, .menu, .navbar ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Typography scaling */
@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }
  body, p, li, a, input, button { font-size: 1rem; line-height: 1.5; }
}