/* misual.life — responsive layer.
   Everything lives inside media queries, so the 950px desktop layout is
   completely untouched. Added 2026. */

@media (max-width: 1000px) {

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 100%; }                 /* theme base is 75% (12px) */

  #mainWrapper, #wrapper, #mainNav, #container, #footer {
    width: auto !important;
    max-width: 100%;
    float: none !important;
    box-sizing: border-box;
  }
  #mainWrapper, #wrapper { margin: 0; }

  /* Header: the logo is a 950px <img> with an <map> whose coordinates are
     absolute, so they point at the wrong place once the image scales. The
     theme already has an <h1><a href="/"> behind it — stretch that over the
     whole header and let it take the taps instead. */
  #header { position: relative; }
  #header img { width: 100%; height: auto; display: block; border: 0; }
  #header h1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; }
  #header h1 a { display: block; width: 100%; height: 100%; }

  /* Nav wraps onto as many rows as it needs, with real tap targets */
  #mainNav { height: auto; padding: 2px 0 6px; }
  #mainNav ul { display: flex; flex-wrap: wrap; margin: 0; padding-top: 4px; }
  #mainNav ul li { display: block; padding: 0; }
  #mainNav ul li a { display: block; padding: 9px 12px; font-size: .88em; }

  #container { padding: 10px; line-height: 1.6; }

  /* The two columns stack */
  #content, #sidebar {
    width: auto !important;
    float: none !important;
    display: block !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box;
    overflow: visible;
  }
  #content { padding: 14px; }
  #sidebar { padding: 10px; }

  /* Media must never overflow. Post images carry inline pixel sizes written by
     the theme's script.js, hence !important. */
  #content img, #sidebar img, .entry img, .comment img,
  iframe, embed, object, video {
    max-width: 100% !important;
    height: auto !important;
  }
  .avatar { max-width: 44px !important; }

  .entry { text-align: left; }               /* justified text breaks up badly when narrow */
  .entry, .entry p, .entry a, .commentlist p, .commentlist a {
    word-wrap: break-word; overflow-wrap: break-word;
  }
  pre { white-space: pre-wrap; word-wrap: break-word; }
  .entry table, .commentlist table { display: block; overflow-x: auto; max-width: 100%; }

  /* Sidebar internals were all fixed-width boxes */
  .ads { float: none; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 8px; }
  .ad1, .ad2, .ad3 { float: none; display: block; margin: 0; width: auto; height: auto; max-width: 48%; }
  .ads img { display: block; width: 100%; height: auto; }
  #tabBox { float: none; width: auto; }
  .tabbed_area { width: auto; }
  #sidebarCol { display: flex; flex-wrap: wrap; gap: 10px; }
  #sidebarLeft, #sidebarRight {
    width: auto !important; float: none !important; margin: 0 !important;
    flex: 1 1 240px; box-sizing: border-box;
  }
  #sidebarCol ul { margin: 5px 8px 10px 10px; }
  .widget { max-width: none; }
  .widget_calendar, .widget_calendar #calendar_wrap { width: auto; }

  input[type=text], input[type=search], input[type=email], input[type=url], textarea, select {
    max-width: 100%; box-sizing: border-box; font-size: 16px;  /* 16px stops iOS zooming on focus */
  }
  #s { width: 100%; }
  #comment { width: 100%; }
  #wpcf fieldset { width: auto; max-width: 100%; box-sizing: border-box; }
  #wpcf label { float: none; display: block; text-align: left; width: auto; padding: 0 0 2px; }
  #wpcf .field, #wpcf textarea, #wpcf .challenge { width: 100%; box-sizing: border-box; }

  /* The footer background is a fixed 950px image */
  #footer { background: #003252 none; height: auto; padding: 12px 0; }
  #footer ul { padding-top: 0; }
  #footer ul li { padding: 0 8px; line-height: 2; }

  /* "Register / Login" was absolutely positioned at 13% from the right */
  #am { position: static; text-align: right; padding: 6px 10px 0; }

  ul.tabs li a { display: inline-block; padding: 8px 10px; }
  .commentlist li { padding: 0 4px; }
  #content .navigation a { display: inline-block; padding: 6px 0; }
  .wp-paginate a, .wp-paginate .current { display: inline-block; padding: 8px 12px; margin-bottom: 6px; }
  ol.wp-paginate li { line-height: 2.4em; }
}

@media (max-width: 560px) {
  body { font-size: 106%; }
  #container { padding: 6px; }
  #content { padding: 10px; }
  #sidebar { padding: 8px; }
  h2 { font-size: 1.45em; }
  .post h2 { line-height: 1.25; }
  #mainNav ul li a { padding: 7px 9px; font-size: .78em; }
  #mainNav { padding: 0 0 4px; }
  #sidebarCol { display: block; }
  #sidebarLeft, #sidebarRight { margin: 0 0 10px 0 !important; }
  .ad1, .ad2, .ad3 { max-width: 100%; }
  blockquote { margin: 1em .5em; }
  ul, ol { margin-left: 1.1em; }
  .entry h3 { font-size: 1em; }
}