/* Phone/tablet layout for the iWeb-built KenTanza Vinyl pages.
   Only active on narrow screens (html gets the class "kv-m" from mobile.js);
   wide screens keep the original 700px layout untouched. */
@media (max-width: 720px) {
  html.kv-m, html.kv-m body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html.kv-m body { margin: 0 !important; }
  html.kv-m body > div { text-align: left !important; }

  html.kv-m #body_content {
    width: auto !important; max-width: 100% !important; height: auto !important;
    margin: 0 !important; padding: 10px 12px 28px !important; overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* turn the absolutely positioned canvas into a normal top-to-bottom flow */
  html.kv-m #body_content div {
    position: static !important; float: none !important;
    left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box;
  }
  html.kv-m #body_content div.bumper,
  html.kv-m #body_content div.spacer { display: none !important; }
  html.kv-m #body_content .text-content { padding: 0 !important; }
  html.kv-m #body_content div[id^="id"],
  html.kv-m #body_layer > div,
  html.kv-m #body_layer div.flowDefining,
  html.kv-m #body_layer div[class*="flow"] { margin-top: 0 !important; margin-bottom: 12px !important; }

  /* iWeb builds picture frames from many tiny image pieces; on phones use a simple border instead */
  html.kv-m #body_content img[src*="stroke"] { display: none !important; }
  html.kv-m #body_content div.tinyText img { border: 3px solid #b3b3b3 !important; box-sizing: border-box; }

  /* pictures scale down to the screen */
  html.kv-m #body_content img { max-width: 100% !important; height: auto !important; position: static !important; left: auto !important; top: auto !important; margin-left: 0 !important; margin-top: 0 !important; }
  html.kv-m #body_content div.tinyText { margin-bottom: 12px !important; line-height: normal !important; }
  html.kv-m #body_content div[data-kv-empty] { display: none !important; }

  /* readable text */
  html.kv-m #body_content p {
    font-size: 16px !important; line-height: 1.45 !important;
    white-space: pre-wrap !important; overflow-wrap: anywhere; word-wrap: break-word;
    margin: 0 0 4px 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  }
  html.kv-m #body_content p span { font-size: inherit !important; line-height: inherit !important; }
  html.kv-m #body_content p a { padding: 2px 0; }

  /* page title sizes */
  html.kv-m #body_content p.Header, html.kv-m #body_content p.paragraph_style { font-size: 26px !important; line-height: 1.2 !important; }

  /* menu at the top: big, easy to tap, wraps */
  html.kv-m #header_layer { margin-bottom: 8px !important; }
  html.kv-m #header_layer p { font-size: 20px !important; line-height: 1 !important; white-space: normal !important; display: flex !important; flex-wrap: wrap; column-gap: 0; row-gap: 2px; margin: 0 !important; }
  html.kv-m #header_layer p a { display: block; font-size: 20px; line-height: 40px !important; margin: 0 20px 0 0; }

  /* embedded video/players */
  html.kv-m #body_content iframe, html.kv-m #body_content object, html.kv-m #body_content embed { max-width: 100% !important; }
  html.kv-m table { max-width: 100% !important; }
}