/* Stop mobile browsers zooming in when a field takes focus.
 *
 * THE BEHAVIOUR
 * -------------
 * iOS Safari (and some Android browsers) zoom the viewport in when the user
 * focuses a text field whose font-size is under 16px. On iOS it then does not
 * zoom back out when the field is blurred, so the user is left on a page that is
 * too big for the screen with no obvious way back — which is exactly the report
 * that prompted this file: tapping the search field, pressing OK, and staying
 * zoomed in.
 *
 * THE FIX, AND THE ONE WE DID NOT USE
 * -----------------------------------
 * 16px is the threshold, so every text-entry control gets at least that on small
 * screens. The widely-copied alternative is
 * `<meta name="viewport" content="... maximum-scale=1, user-scalable=no">`,
 * which suppresses the zoom by disabling pinch-zoom for the whole page. That
 * takes zoom away from everyone who relies on it to read, to fix a problem
 * caused by our own font sizes. Both base templates deliberately keep their
 * viewport tags zoomable; do not "fix" this there.
 *
 * WHY !important
 * --------------
 * Page stylesheets are authored inside {% block content %} (docs/CONVENTIONS.md)
 * and therefore load *after* this file, and several set a smaller size with a
 * more specific selector than anything that would be reasonable to write here —
 * `.pol-search-filters .ts-control` at 0.85rem, `.econ-shell .ts-wrapper
 * .ts-control` at 0.88rem, and Bootstrap's own `.form-control-sm` at 0.875rem.
 * Winning on specificity would mean guessing at every page's selectors forever.
 * The scope is one media query and one declaration, so the usual objection to
 * !important — that it makes the cascade unpredictable — does not really apply.
 *
 * THE BREAKPOINT
 * --------------
 * 768px, the width at which the app already switches to its mobile layout (the
 * sidebar goes off-canvas). Phones and portrait tablets are covered.
 *
 * Loaded from core_dependencies/styling_dependencies.html, so it reaches the
 * signed-in app and the public site alike — the statistics dataset pages build
 * Tom Selects too.
 */

@media (max-width: 768px) {
  /* Text entry only. Checkboxes, radios, ranges, colour swatches and the
     button-like inputs do not trigger the zoom and have their own sizing. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
  textarea,
  select,
  .form-control,
  .form-control-sm,
  .form-select,
  .form-select-sm,
  /* Tom Select replaces the <select> with its own markup. .ts-control is the
     visible box; the real focus target is the bare <input> inside it, and that
     input does not inherit a size from the wrapper in every browser — so both
     are named. This is what makes the preference multi-selects on Min sida, the
     filters on Djupdyk and Skatter, and the public dataset pages behave. */
  .ts-control,
  .ts-control > input,
  .ts-dropdown .ts-dropdown-content,
  .ts-dropdown-input {
    font-size: 16px !important;
  }
}