/* ==========================================================================
   responsive.css  (titanicswitch.com)
   Load LAST, after reset.css, layout.css, style.css and lightbox.css.

   Layout rules are inside media queries, so anything wider than 980px keeps
   the exact current look (the one exception is the button fallback colour
   below, which only shows while an image is still loading).

   Advertising: no rule targets Ezoic containers, ins elements or ad iframes,
   and no ancestor gets new overflow rules.
   ========================================================================== */

/* ---------- All widths: button fallback colour ----------
   style.css paints buttons blue (#1d77e9) until button_1.gif has loaded, which
   causes a brief blue flash before the red gradient appears. This only changes
   the colour shown while the image loads, so the loaded look is identical. */
.button1 { background-color: #a02529; }

/* ---------- 980px and below: remove the fixed page width ---------- */
@media (max-width: 980px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0 !important; }              /* style.css sets min-width:980px */
  .main { width: auto !important; max-width: 960px; }   /* style.css sets width:960px */
  header { background-size: auto; background-color: #000; min-height: 230px; height: auto; }   /* can grow if the menu ever wraps; the image's lower strip is black, so it blends in */
}

/* ---------- 940px and below: single column ----------
   layout.css uses fixed 287px + 557px columns (923px in total), so the layout
   switches to one column at the point where they would stop fitting. */
@media (max-width: 940px) {
  /* Reading text: 13px is too small on a phone */
  body { font-size: 16px; line-height: 1.5; }
  .box2 { font-size: 14px; }
  .box2 strong { font-size: 15px; }
  .ref { font-size: 11px; }
  footer { font-size: 14px; }
  .button1 { font-size: 14px; }
  #content .wrapper.pad1 { display: flex; flex-direction: column; box-sizing: border-box; padding-left: 18px; padding-right: 18px; }   /* side margins for text */
  #content .col2 { order: 1; }
  #content .col1 { order: 2; margin-top: 24px; }
  #content .col1,
  #content .col2 {
    float: none !important;
    width: auto !important;
    padding-left: 0 !important;
  }

  /* Images, floated figures, video */
  #content img { max-width: 100%; height: auto; }
  #content figure.left,
  #content figure.right {
    float: none !important;
    margin: 1em auto !important;
    text-align: center;
  }
  #content iframe[src*="youtube"],
  #content iframe[src*="youtu.be"],
  #content iframe[src*="vimeo"] {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Quoted testimony: style.css pads 50pt each side, far too much for a phone */
  #content .indented { padding-left: 24px !important; padding-right: 24px !important; }

  /* Two image tiles per row on the home page */
  #content .col2 .cols {
    float: left;
    width: 48% !important;
    margin: 0 0 16px 0;
    padding-left: 0 !important;
    clear: left;
  }
  #content .col2 .cols.pad_left1 { float: right; clear: none; }
  #content .col2 .cols { text-align: center; }   /* images and buttons centred together, no gap */

  /* Footer */
  footer { padding: 24px 18px 28px; }
  footer #icons { float: none; padding: 0 0 16px; }
  footer #icons form > div { width: auto !important; max-width: 100%; box-sizing: border-box; }
  footer #icons input[type="text"] { max-width: 55%; box-sizing: border-box; }
  footer .links { float: none; width: auto; padding-left: 0; }

  /* Buy Me a Coffee: the widget's pop-up message is built with a plain white
     background, so on small screens it disappears against the white page.
     It has no id or class, so it is found by its inline styles. */
  body > div[style*="z-index: 9999;"][style*="rgb(255, 255, 255)"]:not(#bmc-wbtn),
  body > div[style*="z-index: 9999;"][style*="#ffffff"]:not(#bmc-wbtn) {
    background: #f6dcdc !important;
    border: 1px solid #d9a0a0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28) !important;
  }

  /* Lightbox: keep enlarged images on screen */
  #outerImageContainer,
  #imageDataContainer { max-width: 100% !important; box-sizing: border-box; }
  #lightbox img { max-width: 100% !important; height: auto !important; }
}

/* ---------- Main menu: sized to the screen so all five items stay on one row ---------- */
@media (max-width: 820px) {
  #menu { padding-left: 1.6vw; }
  /* text grows with the screen, up to the desktop size of 26px */
  #menu li a { font-size: 18px; font-size: min(26px, calc(4.8vw - 1px)); }
  #menu li a span span { padding: 0 1.8vw; margin: 0 .5vw; }
}

/* ---------- 760px and below: header keeps its 230px banner ----------
   The Home / Sitemap / Contact links and the translate box move into the red
   area at the top right, so the banner artwork is never stretched. */
@media (max-width: 760px) {
  header .wrapper { position: relative; }
  #slogan { padding-top: 103px; max-width: calc(100% - 165px); box-sizing: border-box; }   /* wraps beside the logo instead of dropping below it */
  #top_nav {
    position: absolute;
    top: 6px;
    right: 6px;
    float: none;
    padding: 0;
    text-align: center;
  }
  #top_nav li { padding-left: 0; width: 56px; }
  #top_nav li a { font-size: 14px; }
  #top_nav br { display: none; }
  #top_nav figure.right { float: none; clear: both; margin: 4px 0 0; }
}

@media (max-width: 700px) {

}

/* ---------- 560px and below: phones ---------- */
@media (max-width: 560px) {
  h3 { font-size: 26px; }
  h3 span { font-size: 17px; }
  h2 { padding-left: 20px; padding-right: 20px; }
  #content .indented { padding-left: 12px !important; padding-right: 12px !important; }
  .button1 { max-width: 100%; box-sizing: border-box; height: auto; min-height: 30px; }

  /* image tiles go to one per row */
  #content .col2 .cols,
  #content .col2 .cols.pad_left1 { float: none !important; width: auto !important; clear: both; }
}

@media (max-width: 480px) {
  .main { padding: 6px; }
  header h1 { padding-left: 10px; }
  #slogan { font-size: 17px; padding-left: 10px; padding-top: 88px; max-width: calc(100% - 134px); }
}