/* Mobile overlay for mahaprabhu.net's HTML pages.
   Loaded after the legacy styles by __m/serve.php; never edit legacy files.
   Everything is inside a max-width media query, so desktop pages look exactly as before.
   It only rearranges the pages' own colours, images and fonts.
   !important is only used where the legacy markup uses HTML attributes (width=, nowrap, <font size>). */

@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  img { max-width: 100% !important; height: auto !important; }
  iframe, object, embed, video { max-width: 100% !important; }
  pre { white-space: pre-wrap; }
  td, th { white-space: normal !important; }
  textarea, input[type="text"], input[type="email"], select { max-width: 100%; box-sizing: border-box; }
  fieldset { min-width: 0; max-width: 100%; box-sizing: border-box; }

  /* Legacy small print (<font size=1>, size=-2 ...): smaller than body text, but readable on a phone */
  font[size="1"], font[size="-2"], font[size="-1"], font[size="2"], small { font-size: .95rem !important; }

  /* ---------- Article pages (86): TOP row with photo + title, SIDE BAR column, then the text ---------- */
  body[data-tpl="article"] { font-size: 16px; line-height: 1.6; }
  body[data-tpl="article"] > table,
  body[data-tpl="article"] > table > tbody,
  body[data-tpl="article"] > table > tbody > tr,
  body[data-tpl="article"] > table > tbody > tr > td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
  }
  body[data-tpl="article"] > table > tbody > tr > td { padding: 8px 14px !important; }
  /* Masthead: photo beside the title */
  body[data-tpl="article"] > table > tbody > tr:first-child table { width: 100% !important; }
  body[data-tpl="article"] > table > tbody > tr:first-child table > tbody > tr { display: flex; align-items: center; gap: 10px; }
  body[data-tpl="article"] > table > tbody > tr:first-child table td { width: auto !important; padding: 0; }
  body[data-tpl="article"] > table > tbody > tr:first-child table td:first-child { flex: 0 0 84px; }
  body[data-tpl="article"] > table > tbody > tr:first-child table td:first-child img { width: 76px !important; }
  body[data-tpl="article"] h1, body[data-tpl="article"] h2 { font-size: 1.35rem; line-height: 1.25; margin: .3em 0; }
  /* Side bar: the page's own links (HOME, translate, ...), kept compact above the text */
  body[data-tpl="article"] > table > tbody > tr > td[width="140"] {
    border-bottom: 1px solid currentColor;
    padding-bottom: 10px !important;
  }
  body[data-tpl="article"] > table > tbody > tr > td[width="140"] p { margin: 4px 0; text-align: left !important; }
  body[data-tpl="article"] > table > tbody > tr > td[width="140"] center { text-align: left; }
  body[data-tpl="article"] > table > tbody > tr > td[width="140"] a { display: inline-block; padding: 6px 0; }
  /* The text */
  body[data-tpl="article"] p, body[data-tpl="article"] li, body[data-tpl="article"] blockquote {
    text-align: left !important;
  }
  body[data-tpl="article"] blockquote { margin-left: 12px; margin-right: 0; }
  /* Tables inside the text (e.g. the bordered verse tables of Golden Volcano, width="760"):
     full width, with their columns stacked */
  body[data-tpl="article"] > table > tbody > tr > td table:not([width$="%"]) { width: 100% !important; }
  body[data-tpl="article"] > table > tbody > tr:not(:first-child) > td table,
  body[data-tpl="article"] > table > tbody > tr:not(:first-child) > td table > tbody,
  body[data-tpl="article"] > table > tbody > tr:not(:first-child) > td table > tbody > tr,
  body[data-tpl="article"] > table > tbody > tr:not(:first-child) > td table > tbody > tr > td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
  }

  /* ---------- Home page (index.html): logo + title, vertical menu, altar ---------- */
  body[data-tpl="home"] { font-size: 15px; }
  body[data-tpl="home"] #outerTable,
  body[data-tpl="home"] #outerTable > tbody,
  body[data-tpl="home"] #outerTable > tbody > tr,
  body[data-tpl="home"] #outerTable > tbody > tr > td { display: block; width: auto !important; }
  body[data-tpl="home"] #mastHead, body[data-tpl="home"] #mastHead > tbody,
  body[data-tpl="home"] #mastHead > tbody > tr, body[data-tpl="home"] #mastHead td { display: block; width: auto !important; }
  body[data-tpl="home"] #logo { padding: 24px 16px 0; text-align: center; }
  body[data-tpl="home"] #title { padding: 16px 12px 8px; text-align: center; }
  body[data-tpl="home"] #title img { width: 100% !important; max-width: 388px; }

  /* Menu: centred, sub-lists open by tap (mobile.js) instead of hovering out to the right */
  body[data-tpl="home"] #vMenu_spacer { padding: 48px 0 52px; }
  body[data-tpl="home"] #vMenu { width: 100%; max-width: 330px; margin: 0 auto; padding: 0 14px; box-sizing: border-box; }
  body[data-tpl="home"] #vMenu #topScroll, body[data-tpl="home"] #vMenu #btmScroll {
    left: 50%; transform: translateX(-50%); width: 210px;
  }
  body[data-tpl="home"] #vMenu ul.category > li {
    height: auto;
    min-height: 40px;
    line-height: 40px;
    font-size: 1rem;
  }
  body[data-tpl="home"] #vMenu li:hover .items { display: none; }
  body[data-tpl="home"] #vMenu ul.items {
    position: static;
    margin: 0 0 8px 18px;
    box-shadow: none;
    line-height: 1.3;
  }
  body[data-tpl="home"] #vMenu li.m-open .items { display: block; }
  body[data-tpl="home"] #vMenu ul.items li { float: none; width: auto; }
  body[data-tpl="home"] #vMenu ul.items li:hover { float: none; }
  /* folder arrow: the sprite is drawn for a 30px row; keep the icon box that size in the taller rows */
  body[data-tpl="home"] #vMenu li > span, body[data-tpl="home"] #vMenu li > a > span {
    height: 16px; vertical-align: -2px;
  }

  /* Altar and the two quotes beside it: stacked, altar first */
  body[data-tpl="home"] #mainBody { padding: 0 12px 24px; }
  body[data-tpl="home"] #mainBody table { min-width: 0 !important; width: 100% !important; }
  body[data-tpl="home"] #mainBody table > tbody > tr { display: flex; flex-wrap: wrap; justify-content: center; }
  body[data-tpl="home"] #mainBody table > tbody > tr > td { display: block; }
  body[data-tpl="home"] #mainBodyLeft, body[data-tpl="home"] #mainBodyRight {
    width: 100% !important;
    padding: 10px 6px !important;
    order: 2;
  }
  body[data-tpl="home"] #mainBodyRight { order: 3; }
  body[data-tpl="home"] #topText { font-size: 1rem; padding: 0 4px 12px; }
  body[data-tpl="home"] #follower { display: none !important; }

  /* ---------- Other pages (contact, error, Holyname, ...) ---------- */
  body[data-tpl="plain"] { font-size: 16px; line-height: 1.6; }
  body[data-tpl="plain"] table, body[data-tpl="plain"] tbody,
  body[data-tpl="plain"] tr, body[data-tpl="plain"] td { display: block; width: auto !important; box-sizing: border-box; }
  body[data-tpl="plain"] td { padding: 6px 14px !important; }
  body[data-tpl="plain"] p, body[data-tpl="plain"] li { text-align: left !important; }
  body[data-tpl="plain"] form p[style*="margin-left"] { margin-left: 0 !important; }
  body[data-tpl="plain"] form textarea { width: 100%; }
}