/*
  Narrow-screen rules for page CONTENT: tables pasted from Word with fixed widths, inline
  sizes, pictures, form fields, the printable form's answer lines. FastPage adds this file
  to every page ($fPresponsive in config/fpengine.inc.php) after layout.css, which owns
  the frame (header, menu, panel, columns). Desktop (over 860px) is untouched: every rule
  is inside a media query.

  Content tables carry width attributes and inline style="WIDTH: 650px"; author CSS
  outranks the attribute, and !important outranks the inline style.
*/

@media (max-width: 860px) {
  /* pictures shrink to fit, keeping their shape */
  .civictrust img, .form img { max-width: 100% !important; height: auto !important; }

  /* content tables fit the panel; their columns keep the proportions they have */
  .civictrust table { width: 100% !important; }
}

@media (max-width: 740px) {
  /* trust.css sets 12px on BODY, P and TABLE, and Word paste adds more: one readable size */
  .civictrust, .civictrust p, .civictrust table, .civictrust td { font-size: 15px !important; line-height: 1.45; }
  .civictrust p[align="justify"], .civictrust td[align="justify"] { text-align: left !important; }

  /* every table in the content stacks into one column */
  .civictrust table, .civictrust tbody, .civictrust tr, .civictrust td {
    display: block; width: auto !important; height: auto !important; white-space: normal !important;
  }
  .civictrust td { box-sizing: border-box; }
  .civictrust td:empty { display: none; }

  /* breathing room at the screen edge */
  .page-body p, .page-body ul, .page-body ol, .page-body h1, .page-body h2, .page-body h3 { margin-left: 4px; margin-right: 4px; }
  .civictrust img { margin-left: auto; margin-right: auto; }
  p[align="right"]:has(> img), p[align="center"]:has(> img) { text-align: center; }

  /* form fields fit the screen */
  .civictrust input:not([type]), .civictrust input[type="text"], .civictrust select, .civictrust textarea {
    max-width: 100%; box-sizing: border-box; font-size: 16px;
  }

  /* pasted Word text carries 10pt/11px sizes inline; bring those up to the body size */
  .civictrust span[style*="10pt"], .civictrust span[style*="10.0pt"], .civictrust span[style*="9pt"],
  .civictrust span[style*="11px"], .civictrust span[style*="10px"],
  .civictrust font[size="1"], .civictrust font[size="2"] { font-size: 15px !important; }

  /* the printable form's ____ answer lines are cut at the screen edge, not wrapped */
  .form p { overflow: hidden; }
}