/* ================================================
   Responsive overrides for e-n-do.com
   Include AFTER contents.css and dropdown.css
   ================================================ */

/* --- Large screens / fluid wrapper --- */
@media (max-width: 1100px) {
  #wrapper {
    width: 100%;
    max-width: 1070px;
    box-sizing: border-box;
    padding: 0 10px;
  }
  #headerLogo,
  #headerLogo img {
    width: 100%;
    height: auto;
  }
  #headerImg,
  #headerImg img {
    width: 100%;
    height: auto;
  }
}

/* --- Tablet / small laptop --- */
@media (max-width: 768px) {
  #container {
    display: flex;
    flex-direction: column;
  }
  #newsideNavi {
    width: 100%;
    order: 2;
    margin-top: 20px;
    float: none;
  }
  #contents {
    width: 100%;
    float: none;
  }

  /* Header nav: wrap into grid */
  #headerNavi {
    display: flex;
    flex-wrap: wrap;
  }
  #headerNavi ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  #headerNavi li {
    width: 33.333%;
    box-sizing: border-box;
    text-align: center;
  }
  #headerNavi li a {
    display: block;
    padding: 8px 4px;
    font-size: 13px;
  }

  /* Tables: horizontal scroll */
  .article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Product / tool grids: stack vertically */
  .tool-grid,
  .product-grid {
    flex-direction: column;
    align-items: center;
  }
  .tool-grid > *,
  .product-grid > * {
    width: 100%;
    max-width: 480px;
  }

  /* Sidebar banners: center */
  .side-banner {
    text-align: center;
  }
  .side-banner img {
    max-width: 100%;
    height: auto;
  }

  /* Side menu: horizontal on tablet */
  .side-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .side-menu li {
    width: calc(50% - 4px);
  }
}

/* --- Mobile phone --- */
@media (max-width: 480px) {
  body {
    padding: 0 8px;
  }

  #headerNavi li {
    width: 50%;
  }

  .article-body h2 {
    font-size: 18px;
  }
  .article-body h3 {
    font-size: 16px;
  }
  .article-body p,
  .article-body li {
    font-size: 14px;
    line-height: 1.7;
  }

  /* Embedded videos */
  .article-body iframe {
    width: 100%;
    height: 200px;
  }

  /* Images: full width */
  .article-body img {
    max-width: 100%;
    height: auto;
  }

  /* Side menu: single column on phone */
  .side-menu li {
    width: 100%;
  }

  /* Footer nav: stack */
  #footer2 ul {
    display: flex;
    flex-wrap: wrap;
  }
  #footer2 li {
    width: 50%;
    box-sizing: border-box;
    padding: 4px 0;
  }
}