/* ═════════════════════════════════════════════════════════════════════
   Afrovarsity: form control sizing on touch devices
   ═════════════════════════════════════════════════════════════════════
   THE PROBLEM THIS SOLVES

   iOS Safari zooms the entire page in when a text field takes focus and
   that field's font-size is below 16px, and it does NOT zoom back out
   when the field is blurred. The page stays magnified until the user
   pinches out by hand. On the login and sign-up screens, where the email
   field is autofocused, this fires the instant the page loads.

   This is documented platform behaviour rather than a bug in our pages:
   Safari treats sub-16px text as too small to type into and magnifies to
   compensate. The only clean way to stop it is to meet the threshold.

   WHY NOT JUST DISABLE ZOOMING

   Adding `maximum-scale=1` or `user-scalable=no` to the viewport meta tag
   also stops it, and is what most search results suggest. It works by
   preventing every user from pinch-zooming anything on the page, which
   badly hurts anyone with low vision. The site therefore keeps zoom
   enabled and sizes its controls properly instead.

   SCOPE AND THE !important

   The rule applies only to small screens and touch devices, so the
   designed desktop sizing is untouched.

   `!important` is deliberate. Almost every page styles its own inputs
   through a class, .inp, .filter-input, .sort-select, .mini-form .inp,
   .band input, each of which outranks a bare `input` selector on
   specificity, and most of those live in inline <style> blocks that load
   after this file. Without the flag the guard would silently lose on
   roughly twenty pages. This is a device compatibility floor, not a
   design decision, so please don't "tidy" the flag away.

   Controls that cannot receive typed text (buttons, checkboxes, radios,
   ranges, colour and file pickers) are excluded: they never trigger the
   zoom, and forcing 16px on them would change their appearance for no
   benefit.
   ═════════════════════════════════════════════════════════════════════ */

/* Two conditions, because neither alone is sufficient:
     max-width, catches phones, and any narrow window
     hover/pointer, catches iPads, which are wide but still zoom  */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {

  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}