/* AFGE Council 222 — Mobile responsive fixes
   Scoped entirely inside max-width media queries so desktop/laptop
   viewing is completely unchanged. Loaded AFTER layout.css so these
   rules override the old fixed-width template on small screens only. */

@media (max-width: 800px) {
  html, body { overflow-x: hidden; }

  /* The old template locks everything to a fixed 960px box.
     Let it flex to the screen width instead. */
  #header, #container, #academiclinks, #footer,
  #topnav, #quicknav {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  #header { padding-top: 15px; }

  /* Top nav (Home / AFGE.org / AFLCIO.org / EBoard Only) — wrap instead of running off-screen */
  #topnav { padding-bottom: 15px; }
  #topnav li { display: inline-block; margin: 3px 4px; }

  /* Quicknav (About Us / Bargaining Cases / etc.) — wrap instead of floating off-screen */
  #quicknav { height: auto !important; padding-top: 15px; }
  #quicknav ul li {
    float: none;
    display: inline-block;
    margin: 0 12px 10px 0;
    padding-right: 12px;
  }

  /* Two-column main content + sidebar -> stack vertically */
  #content { width: 100% !important; float: none !important; box-sizing: border-box; }
  #column  { width: 100% !important; float: none !important; box-sizing: border-box; margin-top: 25px; }
  #column .holder, #column #featured, #column div.imgholder {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Hero / featured slider — scale to the screen instead of a fixed 940x340 box.
     IMPORTANT: do not override display or position on .featured_slide_Image —
     the page's own script toggles a "show" class to cycle the 3 slides
     (position:absolute, display:none by default, display:block only when
     .show is added). Overriding those properties would show all 3 slides
     at once as still images instead of rotating. */
  /* #featured_slide_Content is "display:inline" in the original stylesheet, so
     percentage/padding tricks don't apply to it directly. Anchor the aspect-ratio
     box on the outer #featured_slide_ (a real block element) instead, then force
     #featured_slide_Content and each slide to absolutely fill that box. */
  #featured_slide_ {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 0 !important;
    padding-bottom: 36.17%; /* preserves the original 940:340 aspect ratio at any width */
    border-width: 6px;
    box-sizing: border-box;
    overflow: hidden;
  }
  #featured_slide_Content {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  .featured_slide_Image {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  .featured_slide_Image img { width: 100% !important; height: 100% !important; object-fit: cover; }

  /* Footer link columns -> stack */
  #academiclinks .linkbox { width: 100% !important; float: none !important; margin: 0 0 20px 0 !important; }
  #footer .fl_right { width: 100% !important; box-sizing: border-box; }
  #footer address { float: none !important; display: block !important; margin-left: 0 !important; margin-top: 10px; }

  /* Safety net for any image or table that's still wider than the screen */
  img { max-width: 100%; height: auto; }
  table { max-width: 100%; }
}

@media (max-width: 480px) {
  #header h1 { font-size: 24px; }
}