/* Mobile-first enhancements and overrides for better navigation and readability */

/* General typography and spacing tweaks */
@media (max-width: 991.98px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  /* Reduce padding on cards for small screens */
  .card .card-body, .card-body {
    padding: 0.75rem !important;
  }

  /* Make submit buttons full-width by default inside forms */
  form .btn[type="submit"],
  form button[type="submit"],
  .btn.w-100 {
    width: 100% !important;
  }

  /* Improve tap targets for radio/checkbox options */
  .form-check {
    padding: 0.5rem 0.25rem;
  }
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.2rem;
  }
  .form-check-label {
    display: inline-block;
    margin-left: 0.5rem;
    line-height: 1.3;
  }

  /* Hide large search input on extra small devices to save space */
  .navbar .input-group {
    display: none !important;
  }

  /* Ensure images never overflow the container */
  img,
  .img-fluid {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Flash messages: move to bottom on mobile so they don't cover nav */
  .flash-container {
    top: auto !important;
    bottom: 16px !important;
    right: 16px !important;
    left: 16px !important;
  }

  /* Content should use full width; side nav overlays on mobile */
  .main-content {
    margin-left: 0 !important;
  }
}

/* Small adjustments for very small screens */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.1rem; }
  h4, .h4, h5, .h5 { font-size: 1rem; }
}