/*
 * Narrow-screen layout.
 *
 * The 2009 theme is a fixed 819px design: #page, #inner_page and the footer
 * all carry that width in pixels, the sidebar sits in a 210px gap held open by
 * .narrowcolumn's right padding, and the header is a 819x227 background image.
 * On a phone that means a page twice the width of the screen.
 *
 * Everything here lives inside one media query, so the desktop rendering is
 * untouched -- byte for byte the same as the archive. Below the breakpoint the
 * page becomes a single column: content first, menu after it.
 *
 * Loaded after the theme's own stylesheet, hence the plain overrides; !important
 * is used only where the theme's value is an inline style attribute, which a
 * stylesheet cannot otherwise beat.
 */

@media (max-width: 860px) {
  /* The fixed-width shell. */
  #page,
  #inner_page,
  .bottom_of_page {
    width: auto !important;
    max-width: 100%;
    float: none !important;
  }

  /* On the desktop the page floats on a grey background, and #page's 15px top
     margin is part of that framing. Full-bleed it just shows as a pale band
     above the header. */
  #page {
    margin-top: 0 !important;
  }

  /* The header is a background image wider than the screen; scale it down and
     let its height follow, so the logo stays whole instead of being cropped. */
  .header,
  .header > div {
    height: auto !important;
  }

  body > div:first-child > div {
    width: auto !important;
    height: 0 !important;
    padding-bottom: 27.7%; /* 227/819, the header image's aspect ratio */
    background-size: 100% auto !important;
  }

  .header > div {
    padding-bottom: 27.7%;
  }

  /* The "Download Now!" badge is not an image but a 98x99 hotspot sitting over
     the header's background picture. Once that picture scales with the screen
     the hotspot has to scale with it, or it covers a stretch of header far
     wider than the badge a visitor can see. Sizes are shares of the 819px
     header: a 30px margin is 3.663%, the 108px wrapper 13.187%.

     The wrapper has to be sized too: it floats, so it shrink-wraps the link,
     and a percentage width on the link would otherwise resolve against
     nothing. */
  body > div:first-child > div > div {
    margin-left: 3.663% !important;
    width: 13.187%; /* 108px: the link plus its 5px margins */
  }

  body > div:first-child a {
    width: 90.74% !important; /* 98 of those 108 */
    height: auto !important;
    aspect-ratio: 98 / 99;
    margin: 4.63% !important;
  }

  /* One column: content full width, no gap held open for the sidebar.
     The sidebar is first in the source (the theme floats it beside the
     content), so the column order is set explicitly rather than by source
     order -- the menu belongs after what the visitor came to read. */
  #inner_page {
    display: flex;
    flex-direction: column;
  }

  #content {
    order: 1;
  }

  #sidebar {
    order: 2;
    float: none !important;
  }

  .narrowcolumn {
    padding: 0 12px 15px !important;
    margin: 15px 0 0 !important;
  }

  #sidebar {
    display: block !important;
    width: auto !important;
    margin: 0 12px 20px;
  }

  #sidebar > div {
    width: auto !important;
    background-image: none !important;
  }

  #footer {
    width: auto !important;
    padding: 0 12px;
  }

  /* The "Tags: …" line, relocated here by BaseLayout's script. */
  #inner_page > div:has(> a.st-tags) {
    order: 3;
    margin: 0 12px 16px;
  }

  /* Page bodies carry inline float/width from WordPress -- the demo pages' blue
     notice box, the app pages' screenshot columns. Let them stack. */
  .entry div[style*='float: right'],
  .entry div[style*='float:right'],
  .entry div[style*='float: left'],
  .entry div[style*='float:left'] {
    float: none !important;
    width: auto !important;
    max-width: 100%;
  }

  /* On the demo pages the blue notice is a right-floated box that comes first
     in the source. Stacked, it would push the app and its emulator below a
     paragraph of caveats, so it is moved after them. */
  .entry:has(.midlet-player) {
    display: flex;
    flex-direction: column;
  }

  .entry:has(.midlet-player) > div[style*='float: right'] {
    order: 2;
  }

  .entry img,
  .entry object,
  .entry embed,
  .entry iframe,
  .entry table {
    max-width: 100%;
    height: auto;
  }

  /* Page bodies pin widths in pixels all over the place (the /search hub wraps
     its columns in a 559px div). max-width beats an inline width, so capping
     the blocks is enough -- no need to touch the markup. */
  #content .entry div,
  #content .entry p {
    max-width: 100%;
  }

  /* The /search hub lays its two result columns out in a table with a 559px
     cell. Tables here are used for layout, not data, so the cells can simply
     stack -- no side-scrolling box needed. */
  #content table,
  #content tbody,
  #content tr,
  #content td {
    display: block !important;
    width: auto !important;
    max-width: 100%;
  }

  /* The NextGEN gallery sizes its thumbnail grid in pixels. */
  .ngg-galleryoverview,
  .ngg-gallery-thumbnail-box,
  .ngg-gallery-thumbnail,
  .ngg-gallery-thumbnail img {
    width: auto !important;
    max-width: 100%;
    height: auto;
  }

  /* The emulator is a fixed 292x618 box. It fits a phone screen, but center it
     rather than leaving it against the left edge of a full-width column. */
  .midlet-player,
  .cheerpj-credit {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}