/* ============================================================
   mobile_2026.css — mobile navigation and layout collapse
   Loaded after Site.css. All rules scoped to max-width: 800px
   except the #navtoggle default, which hides the button on desktop.
   ============================================================ */

#navtoggle { display: none; }

@media screen and (max-width: 800px) {

  /* Collapse the table layout into stacked blocks */
  #layouttable,
  #layouttable > tbody,
  #layouttable > tbody > tr,
  #layouttable > tbody > tr > td {
    display: block !important;
    width: auto !important;
  }

  /* Sidebar clutter off on small screens */
  .left-column-adds,
  #rightmargin { display: none !important; }

  /* Stop fixed-width media blowing out the viewport */
  #body img,
  #mainad img,
  #nav img { max-width: 100%; height: auto; }

  .aditem { width: auto !important; float: none !important; }

  /* Hamburger button */
  #firstrow > td:first-child { position: relative; }
  #logo { padding-right: 60px; }

  #navtoggle {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1002;
  }
  #navtoggle span {
    display: block;
    height: 3px;
    margin: 3px 0;
    background: #333;
  }

  /* Off-canvas panel */
  #nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    padding: 20px 0;
    background: #fff;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1001;
  }
  body.nav-open #nav { transform: translateX(0); }

  #navbackdrop {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
  }
  body.nav-open #navbackdrop { display: block; }

  /* Menu items */
  #nav ul { list-style: none; margin: 0 !important; padding: 0 !important; }
  #nav li { position: relative; border-bottom: 1px solid #eee; }
  #nav a {
    display: block;
    padding: 13px 16px;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
  }
  #nav a.haschildren { padding-right: 50px; }

  #nav ul ul { display: none; background: #f7f7f7; }
  #nav li.open > ul { display: block; }
  #nav ul ul a { padding-left: 32px; font-size: 15px; }

  /* Submenu disclosure arrows (injected by script) */
  .subtoggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    background: none;
    border: 0;
    border-left: 1px solid #eee;
    font-size: 12px;
    color: #333;
    cursor: pointer;
  }
  #nav li.open > .subtoggle { transform: rotate(180deg); }
}