/*
 * Small-screen layout for the static archive (added 2026).
 * Loaded with media="screen and (max-width: 979px)", so the original 960px
 * desktop layout is untouched at desktop widths.
 */

/* Tablets and narrow windows: same three columns, but fluid instead of 960px. */
.page-width {
  width: auto !important;
  max-width: 960px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
img,
iframe,
embed,
object,
video {
  max-width: 100%;
}
img {
  height: auto;
}
/* The fixed "Feedback" tab sits on top of the left sidebar once there is no side margin. */
#block-feedback-feedback {
  display: none;
}

/* Phones: one column — the post first, then the right and left sidebars. */
@media (max-width: 699px) {
  html,
  body {
    overflow-x: hidden;
  }
  body {
    -webkit-text-size-adjust: 100%;
  }
  #content-inner .box {
    display: flex;
    flex-direction: column;
  }
  #main {
    order: 1;
  }
  #sidebar-b {
    order: 2;
  }
  #sidebar-a {
    order: 3;
  }
  /* The theme script equalises column heights with inline styles; undo that when stacked. */
  #main,
  #sidebar-a,
  #sidebar-b {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #sidebar-a,
  #sidebar-b {
    margin-top: 2em !important;
  }
  /* Menu: let the items wrap instead of running off screen. */
  #navigation .menu {
    float: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  #navigation .menu li {
    float: none;
    margin: 0 1em 0.5em 0;
  }
  #header-inner .box,
  #header-inner .col-c {
    float: none;
    width: auto;
  }
  #header-inner img {
    max-width: 70%;
  }
  #copyright p {
    line-height: 1.8;
  }
}