/* responsive.css - breakpoints and mobile overrides.
   Loaded last so it can override app.css/dashboard.css/admin.css rules. */

/* iOS Safari auto-zooms the page when a focused input's font-size is
   under 16px. Force 16px on every text-entry field on mobile so tapping
   into a field never triggers that zoom. !important because dash-unified.css
   (loaded after this file on dashboard/admin pages) sets its own smaller
   font-size on these same selectors. */
@media (max-width: 768px) {
  input, select, textarea, .form-control { font-size: 16px !important; }
}

/* Extra small-screen safety net for the contact page and forms in general */
@media (max-width: 480px) {
  .contact-grid { gap: 22px; }
  .form-card { padding: 20px 16px; }
  .page-hero h1 { font-size: 26px; }
}

/* Keep the login/register card contained with side gutters instead of
   stretching edge-to-edge on narrow screens. */
@media (max-width: 600px) {
  .form-card {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 0;
  }

/* Sections carry 80px top/bottom padding on desktop (see .section in
   app.css). That's too much breathing room on small screens, especially
   right under the sticky header, so tighten it site-wide on mobile. */
@media (max-width: 600px) {
  .section {
    padding: 32px 0;
  }
}
}