/*
  mobile.css: responsive layer for www.binary-systems.com (Binary Systems, Inc.)
  Load AFTER bsimac.css, reset.css, text.css and 960.css.
  Every rule is inside a max-width media query, so at 1000 px and wider the
  site renders exactly as before. No JavaScript, fonts or third-party requests.

  Breakpoints
    <= 999 px  fluid container, scaled nav bar, tablet slideshow, fluid images
    <= 900 px  14 px text on tablets
    <= 720 px  CSS-only hamburger menu; slideshow stacks (headline + tagline above a
               full-width slide image); footer shows only the copyright line (without "All rights reserved.")
    <= 600 px  phones: 16 px text, stacked tables
    <= 400 px  small phones: tighter spacing
*/

/* ---------- <= 999 px: tablets and narrow windows ---------- */
@media screen and (max-width: 999px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-wrap: break-word; }

  .container_12, #container, #page-wrap { width: auto; }
  .container_12 { padding: 0 16px; }

  /* 960 grid columns go fluid */
  .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3,
  .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6,
  .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9,
  .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 {
    width: auto; max-width: 100%; float: none; display: block;
    margin-left: 0; margin-right: 0;
  }
  [class*="prefix_"], [class*="suffix_"], [class*="push_"], [class*="pull_"] {
    padding-left: 0; padding-right: 0; left: 0; right: 0;
  }

  /* Header logo: scale to fit, centered; crisp @2x where the browser supports it */
  #header { text-align: center; }
  #header img {
    display: block; margin: 0 auto 18px; width: 410px; max-width: 100%; height: auto;
    content: image-set(url(../images/binary_systems_si_animated.gif) 1x,
                       url(../images/binary_systems_si_animated@2x.gif) 2x);
  }

  /* Nav bar: same art, stretched to the container; 7 equal buttons */
  #nav { width: auto; background-size: 100% 100%; overflow: hidden; }
  #nav li { margin: 0; }
  #nav li a { width: 14.2857%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  /* Images, media and tables never exceed their container */
  .container_12 img, .container_12 video, .container_12 iframe, .container_12 object, .container_12 embed {
    max-width: 100%; height: auto;
  }
  .container_12 table { max-width: 100%; }
  .container_12 pre { overflow-x: auto; max-width: 100%; }

  /* Search box: border-box so width:100% plus padding stays inside */
  .container_12 form input[type="search"] { box-sizing: border-box; max-width: 100%; font-size: 16px; }

  /* Slideshow (tablet): keep the JS's fixed 960 px stride, show text left and
     the slide image right inside the visible width */
  #slider { container-type: inline-size; margin: 30px -16px; }
  .slide img { left: calc(100cqw - 434px - 70px); right: auto; }   /* clear of the Stop button */
  .slide h1, .slide h5 { max-width: calc(100cqw - 434px - 116px); }
}

/* ---------- <= 900 px: slightly larger text on tablets ---------- */
@media screen and (max-width: 900px) {
  body { font-size: 14px; line-height: 1.5; }
  .container_12 p, .container_12 li, .container_12 td { line-height: 1.5; }
}

/* ---------- <= 720 px: phones and small tablets: hamburger menu, stacked slideshow, short footer ---------- */
@media screen and (max-width: 720px) {
  /* The slider JS measures one slide (width + padding) once and moves #mover by
     that amount every 5 s. Keeping width + padding = 960 px keeps its arithmetic
     exact; the content is simply laid out in the left part of each 960 px panel,
     which is the part the viewport shows. */
  #slider { height: auto; margin: 16px -16px 24px; background-size: cover; }
  .slide { width: 928px; padding: 18px 16px 20px; }
  .slide h1, .slide h5, .slide p, .slide a {
    max-width: calc(100vw - 32px); max-width: calc(100cqw - 32px);
  }
  .slide h1 { font-size: 26px; line-height: 1.2; margin-bottom: 6px; padding-right: 64px; box-sizing: border-box; }
  .slide h5 { font-size: 17px; line-height: 1.35; margin-bottom: 12px; }
  .slide p:empty { display: none; }
  .slide a { display: block; }
  .slide img {
    position: static;          /* the JS's top: animation then has no visual jump */
    display: block;
    width: calc(100vw - 32px); width: calc(100cqw - 32px);
    max-width: 434px; height: auto;
  }
  #slider-stopper {
    top: 12px; right: 12px; min-width: 44px; min-height: 44px; box-sizing: border-box;
    padding: 0 10px; line-height: 44px; font-size: 12px; text-align: center;
  }

  /* ---- Hamburger menu (CSS only, no JS) ----
     Markup, added once in each page header right before <ul id="nav">:
       <input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Menu" aria-controls="nav" autocomplete="off" hidden /><label for="nav-toggle" class="nav-toggle-btn" aria-hidden="true" hidden><span></span></label>
     Both carry the hidden attribute, so above 720 px (or if this file fails to
     load) they don't render and the classic nav bar shows. Here the checkbox is
     the real, keyboard-focusable control (Space toggles, state = checked) and
     the label is the visible 48 px 3-bar button. */
  #header { position: relative; }
  .nav-toggle {
    display: block; position: absolute; top: auto; left: 0;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .nav-toggle-btn {
    display: flex; align-items: center; gap: 14px; box-sizing: border-box;
    width: 100%; min-height: 48px; padding: 0 16px; border-radius: 6px;
    background: linear-gradient(to bottom, #9d9d9d 0%, #646464 30%, #262626 62%, #000 100%);
    color: #CCC; font-size: 16px; line-height: 1; cursor: pointer;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle-btn::after { content: "Menu"; }
  .nav-toggle:checked + .nav-toggle-btn::after { content: "Close"; }
  .nav-toggle-btn:hover, .nav-toggle:focus-visible + .nav-toggle-btn { color: #FFF; }
  .nav-toggle:focus-visible + .nav-toggle-btn { outline: 3px solid #6cf; outline-offset: 2px; }
  .nav-toggle-btn span, .nav-toggle-btn span::before, .nav-toggle-btn span::after {
    display: block; width: 24px; height: 3px; border-radius: 2px; background: currentColor;
    transition: transform .2s ease, background-color .2s ease;
  }
  .nav-toggle-btn span { position: relative; }
  .nav-toggle-btn span::before, .nav-toggle-btn span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-btn span::before { top: -8px; }
  .nav-toggle-btn span::after { top: 8px; }
  .nav-toggle:checked + .nav-toggle-btn { border-radius: 6px 6px 0 0; }
  .nav-toggle:checked + .nav-toggle-btn span { background-color: transparent; }
  .nav-toggle:checked + .nav-toggle-btn span::before { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-btn span::after { transform: translateY(-8px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) {
    .nav-toggle-btn span, .nav-toggle-btn span::before, .nav-toggle-btn span::after { transition: none; }
  }

  /* Closed: links hidden. Open: full-width stacked list of 48 px rows.
     Picking a link loads its page, which starts with the menu closed. */
  .nav-toggle-btn ~ #nav { display: none; }
  .nav-toggle:checked ~ #nav {
    display: block; width: auto; height: auto; overflow: hidden;
    background: #000; border-radius: 0 0 6px 6px;
  }
  .nav-toggle:checked ~ #nav li { display: block; margin: 0; }
  .nav-toggle:checked ~ #nav li a {
    float: none; display: flex; align-items: center; box-sizing: border-box;
    width: auto; height: auto; min-height: 48px; padding: 0 16px 0 54px;
    border-top: 1px solid #3a3a3a; background: #1a1a1a;
    color: #CCC; font-size: 16px; line-height: 1.25; white-space: normal; text-align: left;
  }
  .nav-toggle:checked ~ #nav li a:hover, .nav-toggle:checked ~ #nav li a:active { color: #FFF; background: #333; }
  .nav-toggle:checked ~ #nav li a:focus-visible { color: #FFF; outline: 3px solid #6cf; outline-offset: -3px; }

  /* ---- Footer: hide the menu links and " | " separators; keep the copyright line ---- */
  #footer { font-size: 0; line-height: 0; padding: 12px 0 16px; }
  #footer > a { display: none; }
  #footer ul { margin: 0; font-size: 16px; line-height: 1.6; }
  #footer li { margin: 0; font-size: 16px; }
  #footer li a { display: inline-block; padding: 11px 0; line-height: 22px; }  /* 44 px tap target */
  #footer .bsi-rights { display: none; }   /* phones: "All rights reserved." hidden; tablets/desktop keep it */
}

/* ---------- <= 600 px: phones ---------- */
@media screen and (max-width: 600px) {
  body { font-size: 16px; line-height: 1.6; }
  .container_12 { padding: 0 14px; }
  #slider { margin-left: -14px; margin-right: -14px; }

  #header { margin: 14px auto 10px; }
  #header img { margin-bottom: 14px; }

  /* Body text: 16 px minimum, comfortable line height */
  .container_12 p, .container_12 li, .container_12 td, .container_12 th,
  .container_12 dd, .container_12 dt, .container_12 address, .container_12 font,
  .container_12 span, .container_12 div { line-height: 1.6; }
  .container_12 p, .container_12 li, .container_12 td, .container_12 th,
  .container_12 dd, .container_12 dt, .container_12 address, .container_12 blockquote {
    font-size: 16px;
  }
  .container_12 font, .container_12 span { font-size: inherit; }
  .container_12 p[style*="font-size"], .container_12 span[style*="font-size"],
  .container_12 td[style*="font-size"], .container_12 font[style*="font-size"],
  .container_12 li[style*="font-size"], .container_12 div[style*="font-size"] { font-size: 16px !important; }
  .container_12 h1 { font-size: 24px; line-height: 1.25; }
  .container_12 h2 { font-size: 22px; line-height: 1.25; }
  .container_12 h3 { font-size: 21px; line-height: 1.3; }
  .container_12 h4, .container_12 h5 { line-height: 1.35; }

  /* Layout tables stack into one column */
  .container_12 table, .container_12 tbody, .container_12 thead, .container_12 tfoot,
  .container_12 tr, .container_12 td, .container_12 th {
    display: block; width: auto !important; height: auto !important; max-width: 100%;
  }
  .container_12 table { margin-left: 0; margin-right: 0; }
  .container_12 td, .container_12 th { padding-left: 0 !important; padding-right: 0 !important; }
  .container_12 table table { width: 100% !important; }
  /* Spacer cells: in these legacy layout tables every cell without child
     elements holds only &nbsp; (checked on all pages), so drop them when stacked */
  .container_12 td:not(:has(*)) { display: none; }
  /* Data tables that opt in keep their grid and scroll inside themselves */
  .container_12 table.data { display: block; overflow-x: auto; }
  .container_12 table.data tr { display: table-row; }
  .container_12 table.data td, .container_12 table.data th { display: table-cell; }

  /* Floated images stop squeezing text */
  .container_12 img[align="right"], .container_12 img[align="left"] { float: none; display: block; margin: 8px auto; }
  .container_12 center img, .container_12 td img { display: inline-block; }
  .container_12 p[style*="text-indent"] { text-indent: 0 !important; }

  .container_12 form input[type="search"] { min-height: 44px; }

}

/* ---------- <= 400 px: small phones ---------- */
@media screen and (max-width: 400px) {
  .container_12 { padding: 0 12px; }
  #slider { margin-left: -12px; margin-right: -12px; }
  .slide h1 { font-size: 24px; }
  .slide h5 { font-size: 16px; }
}