/* Bokonon — light-touch mobile-friendly overrides.
   Loaded site-wide via /boko-mobile.css and placed AFTER each page's
   inline <style>, so these rules win. The desktop look is left alone;
   everything below only changes things on narrow (phone) screens, except
   the image rule which is harmless everywhere. */

/* Never let an image blow out the viewport. */
img { max-width: 100%; height: auto; }

@media (max-width: 700px) {

  html { -webkit-text-size-adjust: 100%; }   /* stop iOS auto-resizing text */

  /* The whole site pins the menu as an absolute left sidebar and pads the
     body 11em to make room for it. On a phone that hides the content, so we
     drop the padding and let the menu flow normally at the top. */
  body {
    padding-left: 0.7em !important;
    padding-right: 0.7em !important;
    font-size: 17px;
    line-height: 1.5;
  }

  h1 { font-size: 1.4em; }

  /* Sidebar -> a wrapping row of tappable buttons at the top. */
  ul.navbar {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0 0 1em 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
  }
  ul.navbar li {
    margin: 0 !important;
    padding: 0 !important;
    border-right: none !important;   /* was a 1em black slab — too heavy on mobile */
    border-radius: 4px;
    background: #fff;
  }
  ul.navbar li a {
    display: block;
    padding: 0.6em 0.9em;            /* finger-sized tap target */
  }

  /* Homepage band grid is a fixed 2-column <table>; stack it. */
  table { width: 100% !important; }
  table td { display: block; width: 100% !important; text-align: center; }

  /* Search box on the homepage / results. 16px keeps iOS from zooming in. */
  input[type="text"]   { width: 70%; font-size: 16px; padding: 0.4em; }
  input[type="submit"] { font-size: 16px; padding: 0.4em 0.8em; }

  /* Keep the SoundManager player inside the screen. */
  .sm2-bar-ui { max-width: 100% !important; }
}