/* Mobile layer for scienceandscientist.org's original pages (added by __m/serve.php).
   Desktop is untouched: every rule sits inside a phone/tablet media query.
   Layouts are told apart by body[data-tpl]:
     home    home page and The Harmonizer (Bootstrap 2)
     conf    conferences 2019-2022 and Systems 2020
     conf18  conference 2018
     oldnav  old root pages that include the site menu without its stylesheet
     plain   everything else (2013 conference, report, VSDS 2024, old newsletter pages) */

/* home page and The Harmonizer: the site's Bootstrap shows the menu button and hides the menu up to 979px
   (tablets, phones turned sideways); mobile.js opens it with .m-open. Desktop (980px+) has no button. */
@media (max-width: 979px) {
  body[data-tpl="home"] .nav-collapse.m-open { height: auto !important; overflow: visible; }
}

@media (max-width: 767px) {
  /* ---------- all pages ---------- */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-wrap: break-word; }
  img, video, embed, object { max-width: 100% !important; height: auto; }   /* !important: some pasted email images carry inline sizes */
  iframe { max-width: 100%; }
  /* YouTube/Vimeo embeds keep their 16:9 shape at the narrower width */
  iframe[src*="youtube"], iframe[src*="vimeo"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
  input, select, textarea { max-width: 100%; box-sizing: border-box; font-size: 16px; } /* 16px stops iOS zooming in */
  pre { white-space: pre-wrap; }

  /* tables wider than the screen, marked by mobile.js: layout tables stack, data tables scroll in their own box */
  table.m-stack, table.m-stack > tbody, table.m-stack > thead, table.m-stack > tfoot,
  table.m-stack > * > tr, table.m-stack > * > tr > td, table.m-stack > * > tr > th {
    display: block; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; box-sizing: border-box;
  }
  table.m-stack { margin-left: 0 !important; margin-right: 0 !important; }
  table.m-stack > * > tr > td:empty { display: none; }
  .m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  [width] { max-width: 100%; }
  p, div, span, font, b, big { max-width: 100%; }
  p[class^="Mso"], div[class^="Word"] { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* menu button made by mobile.js */
  .m-menu-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    margin: 0; padding: 12px 16px; border: 0; border-radius: 0; cursor: pointer;
    font: 600 16px/1.2 Arial, Helvetica, sans-serif; color: #fff; background: #555; text-align: left;
  }
  .m-menu-btn::before { content: ""; width: 20px; height: 14px; flex: none;
    background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
                linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
                linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .m-menu-btn[aria-expanded="true"]::before {
    background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%),
                linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
  .m-menu-panel[hidden] { display: none !important; }

  /* ---------- home: home page and The Harmonizer (Bootstrap 2 with its own partial responsive rules) ---------- */
  body[data-tpl="home"] .suubanner table { width: 100% !important; height: auto !important; }
  body[data-tpl="home"] .suubanner h4 { margin: 10px 12px; font-size: 14px; line-height: 1.35; }
  /* Bootstrap's collapse script isn't loaded on every page, so mobile.js opens the menu instead */
  body[data-tpl="home"] .navbar-inner { padding: 0 12px; }
  body[data-tpl="home"] .btn-navbar { display: block; margin: 7px 0; }
  body[data-tpl="home"] .nav-collapse { clear: both; }
  body[data-tpl="home"] .nav-collapse.m-open { height: auto !important; overflow: visible; }
  body[data-tpl="home"] .nav-collapse .nav > li > a { padding: 10px 4px; }
  body[data-tpl="home"] .navbar-text.pull-right { float: none; margin: 4px 4px 12px; }
  body[data-tpl="home"] .spacecontainer { padding-left: 12px; padding-right: 12px; }
  body[data-tpl="home"] .pageheading { margin: 0 0 12px; }
  /* main text first, the conference list and sign-up below it */
  body[data-tpl="home"] .spacecontainer > .row-fluid:last-of-type,
  body[data-tpl="home"] .spacecontainer > .row-fluid:nth-of-type(2) { display: flex; flex-direction: column; }
  body[data-tpl="home"] .row-fluid > .span9 { order: -1; }
  body[data-tpl="home"] .row-fluid > .span3 { margin-top: 24px; text-align: center; }
  body[data-tpl="home"] .sidebar-nav { text-align: left; }
  body[data-tpl="home"] .span3 table[width] { width: 100%; max-width: 300px; }
  body[data-tpl="home"] img[align="right"] { max-width: 42% !important; margin: 0 0 8px 10px; }
  body[data-tpl="home"] footer, body[data-tpl="home"] footer p { text-align: center !important; }
  body[data-tpl="home"] footer .social table { width: 100% !important; }
  body[data-tpl="home"] table { max-width: 100%; }

  /* ---------- conf: conferences 2019-2022 and Systems 2020 ---------- */
  body[data-tpl="conf"] #constrain, body[data-tpl="conf"] .constrain { width: auto !important; min-width: 0 !important; padding: 0 !important; }
  body[data-tpl="conf"] #top .publications ul { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 12px; }
  body[data-tpl="conf"] #top .publications li { float: none; margin: 0; padding: 0; background: none; }
  body[data-tpl="conf"] #top .publications .jumplink { display: none; }
  /* the banner is the 968x126 background image of .login-nav: scale it to the screen width */
  body[data-tpl="conf"] #hdr .login-nav { width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important;
    aspect-ratio: 968 / 126; background-size: 100% auto !important; background-repeat: no-repeat !important; }
  body[data-tpl="conf"] #hdr .login-nav img.journal-header-image { width: 100%; }
  body[data-tpl="conf"] #content-journalnav { float: none; width: auto; }
  body[data-tpl="conf"] #content { float: none; width: auto !important; margin: 0 !important; padding: 0 12px 16px; }
  body[data-tpl="conf"] .details { padding: 0; }
  body[data-tpl="conf"] .main-img-caption { float: none !important; width: auto !important; padding: 0 !important; margin: 0 0 12px !important; }
  body[data-tpl="conf"] #content table { width: 100% !important; }
  body[data-tpl="conf"] #content td { display: block; width: auto !important; }
  body[data-tpl="conf"] #content img[align], body[data-tpl="conf"] #content img[style*="float"] { float: none !important; display: block; margin: 0 auto 12px !important; }
  body[data-tpl="conf"] #journalnav { float: none; width: auto !important; margin: 0; padding: 16px 12px; text-align: center; }
  body[data-tpl="conf"] #journalnav center { max-width: 420px; margin: 0 auto; }
  /* the left-hand menu, moved by mobile.js into a "Menu" panel under the header */
  body[data-tpl="conf"] .m-menu-panel .journal-nav { display: block; width: auto; margin: 0; padding: 0; }
  body[data-tpl="conf"] .m-menu-panel ul { margin: 0; padding: 0; width: auto !important; }
  body[data-tpl="conf"] .m-menu-panel li { float: none; width: auto !important; margin: 0; list-style: none; border-top: 1px solid #fff; }
  body[data-tpl="conf"] .m-menu-panel li a { display: block; padding: 11px 16px !important; font-size: 15px; }
  body[data-tpl="conf"] .m-menu-btn { background: #333; }
  body[data-tpl="conf"] #ftr { padding: 16px 12px; }
  body[data-tpl="conf"] #ftr .footer-inner, body[data-tpl="conf"] #ftr .baseline-wrapper { width: auto !important; padding: 0 !important; }
  body[data-tpl="conf"] #ftr .footer-links { float: none; width: auto; padding: 0 0 12px; }
  body[data-tpl="conf"] #ftr img.logo[style*="float"] { float: none !important; display: block; margin: 8px 0; }
  body[data-tpl="conf"] #footer-copyright { width: auto; }

  /* ---------- conf18: conference 2018 ---------- */
  body[data-tpl="conf18"] > div { width: auto !important; }
  body[data-tpl="conf18"] h1 { margin: 0; }
  body[data-tpl="conf18"] #cssmenu { width: auto !important; }
  body[data-tpl="conf18"] #cssmenu > ul { display: none; }
  body[data-tpl="conf18"] #cssmenu.m-open > ul { display: block; }
  body[data-tpl="conf18"] #cssmenu ul, body[data-tpl="conf18"] #cssmenu li { float: none !important; width: auto !important; position: static !important; }
  body[data-tpl="conf18"] #cssmenu li ul { display: block !important; visibility: visible !important; opacity: 1 !important; padding-left: 14px; }
  body[data-tpl="conf18"] #cssmenu a { display: block; padding: 10px 14px !important; }
  body[data-tpl="conf18"] table { width: 100% !important; }
  body[data-tpl="conf18"] td { display: block; width: auto !important; box-sizing: border-box; }
  body[data-tpl="conf18"] p, body[data-tpl="conf18"] div { text-align: left !important; }

  /* ---------- oldnav: old root pages (site menu markup without a stylesheet) ---------- */
  body[data-tpl="oldnav"] { padding: 0 12px !important; }
  body[data-tpl="oldnav"] .suubanner table { width: 100% !important; }
  body[data-tpl="oldnav"] .btn-navbar, body[data-tpl="oldnav"] .icon-bar { display: none; }
  body[data-tpl="oldnav"] .nav-collapse ul { padding-left: 18px; }
  body[data-tpl="oldnav"] .pageheading img { width: 100%; }
  body[data-tpl="oldnav"] table, body[data-tpl="oldnav"] td { width: auto !important; }
  body[data-tpl="oldnav"] td { display: block; padding: 8px 0 !important; }
  body[data-tpl="oldnav"] td[style*="padding:15px"], body[data-tpl="oldnav"] td[valign] { padding: 8px 0 !important; }

  /* ---------- plain: everything else; old fixed-width table pages ---------- */
  body[data-tpl="plain"] { margin: 0 !important; padding: 0 10px !important; min-width: 0 !important; }
  body[data-tpl="plain"] table[width], body[data-tpl="plain"] table[style*="width"] { width: 100% !important; }
  body[data-tpl="plain"] td[width], body[data-tpl="plain"] td[style*="width"] { width: auto !important; }
  body[data-tpl="plain"] div[style*="width"], body[data-tpl="plain"] div[id*="wrap"], body[data-tpl="plain"] div[id*="container"],
  body[data-tpl="plain"] div[class*="wrap"], body[data-tpl="plain"] div[class*="container"] { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
}