/* mobile.css - MOBILE ONLY overrides for official-dvdshrink.org.
   All rules are wrapped in @media (max-width:768px) so the desktop
   layout (>768px) is never affected. Loaded AFTER global.css. */

@media (max-width: 768px) {

  html, body { max-width: 100%; overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* main wrappers become fluid */
  #container,
  #top-menu,
  #banner,
  .content,
  .support-page,
  .footer,
  .footer-links,
  .footer-icons,
  .footer-media {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .content { padding: 0 8px !important; background: #fff !important; }
  #container { background: #fff !important; }

  /* logo centered and put back into normal flow (desktop has it absolute) */
  .logo {
    position: static !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    text-align: center;
    padding: 12px 0 4px !important;
  }
  .logo img { max-width: 60%; height: auto; }
  .head-media-left, .head-media-right,
  .top-nav-left, .top-nav-right { display: none !important; }

  /* navigation: clean centered wrap, sits directly under the logo */
  #top-menu {
    position: static !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 0 8px !important;
    border-top: 1px solid #e6ebf0;
  }
  .top-nav {
    width: auto !important;
    float: none !important;
    height: auto !important;
    background: none !important;
  }
  .top-nav ul {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 4px; padding: 0 !important; margin: 0 !important;
  }
  .top-nav ul li {
    float: none !important;
    display: inline-block;
    background: none !important;
    height: auto !important;
    line-height: normal !important;
  }
  .top-nav a {
    display: inline-block;
    background: none !important;
    color: #12395f !important;
    padding: 8px 12px !important;
    height: auto !important;
    line-height: normal !important;
    font-weight: 600;
    border-radius: 6px;
  }
  .top-nav a:hover { background: #eef3f8 !important; }

  /* banner / wowslider: it is a horizontal carousel with a 1000%-wide
     filmstrip, so we collapse it to a single full-width static image
     (the first slide) instead of trying to reflow the slider. */
  #wowslider-container1 {
    width: 100% !important; max-width: 100% !important; height: auto !important;
    position: relative !important; overflow: hidden !important;
  }
  #wowslider-container1 .ws_images {
    width: 100% !important; height: auto !important;
    position: relative !important; overflow: hidden !important;
  }
  /* the slider script injects empty engine/shadow divs that reserve height
     and show as a blank gap; hide them and keep only the image list */
  #wowslider-container1 .ws_images > div { display: none !important; }
  #wowslider-container1 .ws_images ul {
    width: 100% !important; height: auto !important;
    position: static !important; display: block !important; left: 0 !important;
    transform: none !important; margin: 0 !important; padding: 0 !important;
  }
  #wowslider-container1 .ws_images ul li {
    display: none !important; width: 100% !important; height: auto !important;
    position: static !important; float: none !important; left: 0 !important;
    margin: 0 !important;
  }
  #wowslider-container1 .ws_images ul li:first-child { display: block !important; }
  #wowslider-container1 .ws_images ul li:first-child img {
    width: 100% !important; height: auto !important; position: static !important; display: block !important;
  }
  #wowslider-container1 .ws_bullets,
  #wowslider-container1 .ws-title,
  #wowslider-container1 a.ws_next,
  #wowslider-container1 a.ws_prev,
  #wowslider-container1 .ws_shadow { display: none !important; }

  /* homepage feature boxes */
  .catbox {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin: 16px auto !important;
    text-align: center;
  }
  .box { width: auto !important; max-width: 100% !important; height: auto !important; }
  .catbox img, .box img, .content img { max-width: 100%; height: auto; }
  .btn img { margin: 8px auto 0 !important; }

  /* headings sizing */
  .content h1 { font-size: 24px; line-height: 1.25; }
  .content h2 { font-size: 20px; }

  /* footer stacks and centers */
  .footer-links, .footer-links p, .copyright { text-align: center; }
  .footer-icons, .footer-media,
  .security-icons, .social-media { width: auto !important; float: none !important; text-align: center; }
  /* Awards box: desktop fixes it to 946x95px which clips the wrapped
     logos on mobile; make it fluid and auto-height */
  .awards {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 16px 0 !important;
    padding: 10px 6px 14px !important;
    text-align: center;
    box-sizing: border-box;
  }
  .awards h2 { margin: 0 0 8px 0 !important; text-align: center; }
  .award-icons {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    text-align: center;
  }
  .award-icons a { display: inline-block; }
  .award-icons img { max-width: 40%; height: auto; margin: 6px !important; }

  /* any wide tables (footer social embeds etc.) become fluid */
  .footer table, .social-media table { width: 100% !important; max-width: 100% !important; }
  .footer table td, .social-media table td { display: block; width: auto !important; text-align: center; }

  /* generic safety: keep everything inside the viewport */
  table { max-width: 100% !important; }
}

/* extra-small phones */
@media (max-width: 430px) {
  .top-nav a { padding: 7px 9px !important; font-size: 13px; }
  .logo img { max-width: 74%; }
  .award-icons a img { max-width: 46%; }
}