/* ── Late-loading override sheet ───────────────────────────────────────────
   Loads AFTER the per-page inline <style> block (stylesheet index 8 vs 7),
   so equal-specificity rules win without !important. Verified via CSSOM.
   NOTE: filename is historical - this sheet now carries all overrides, not
   just the left-column collapse. Rename deferred: it would mean editing the
   <link> on 81 pages and spending desktop-proof budget on a filename.
   ─────────────────────────────────────────────────────────────────────── */

/* 1. Left column collapse - pages where the contextual menu has no items. */
.no-left #leftcol { display: none !important; }
.no-left .colmid,
.no-left .colright { left: 0 !important; margin-left: 0 !important;
                     background-image: none !important; }
.no-left #maincol2 { width: auto !important; }

/* 2. Responsive. The desktop layout is a fixed 959px wrapper over a
   negative-margin float system (.colmid/.colright at left:202px, width:200%,
   with a load-bearing 202px gutter). Below the wrapper width we unwind that
   system into normal flow rather than trying to reflow it: the offsets are
   structural, so overriding them piecemeal fights the layout.
   Every rule here is inside a max-width query, so desktop is untouched. */
@media (max-width: 959px) {
  /* Section containers. #header carries a 959px width from a legacy selector
     that CSSOM introspection cannot enumerate (matches() throws on the old
     IE-hack selectors in this template), so it is targeted explicitly. */
  #header, #page-bg, #main-body, #main-body-surround, #bottom, #footer,
  div.wrapper, #main-body-bg { width: auto; max-width: 100%; }
  .colmask   { overflow: visible; }
  /* Unwind the negative-margin float system. !important is used only inside
     this max-width query - template.css declares .colright twice and the
     second (left:202px; width:200%) wins on source order, so equal-specificity
     overrides lose. Desktop is unaffected: the query never matches there. */
  /* Keep position:relative - it establishes the stacking context that paints
     these columns above #main-body-bg. Forcing static made the content
     measure correctly but render invisible behind the container background. */
  .colmid, div.colmid,
  .colright, div.colright { position: relative !important; left: 0 !important;
               margin-left: 0 !important; width: 100% !important;
               float: none !important; background-image: none !important; }
  .col1wrap, .col1pad, .col2wrap, .col2pad { width: auto !important; margin: 0 !important;
                                             left: 0 !important; right: auto !important; }
  /* The offsets are PAIRED: .colright pushes right by the gutter and .col1
     pulls back by the same amount. Zeroing only one half threw the content
     off-canvas (measured at x = -602). Both halves must be neutralised. */
  .col1, .col2, .col3,
  div.col1, div.col2, div.col3 { left: 0 !important; right: auto !important;
                                 margin-left: 0 !important; margin-right: 0 !important;
                                 width: auto !important; float: none !important; }
  #leftcol,
  #maincol2  { float: none; width: auto; }
  #maincol2  { margin: 0; }
  #horiz-menu, #horiz-menu ul { width: auto; }
  /* RokSlideshow writes inline pixel dimensions (961x344) from its JS init,
     so these need !important to be constrained. Scoped to the query. */
  #showcase, #showcase2, .showcase-surround { width: auto !important; max-width: 100% !important; }
  #slidewrap, #slideshow { width: auto !important; max-width: 100% !important;
                           height: auto !important; overflow: hidden !important; }
  #slideshow img, #slideshow div { max-width: 100% !important; height: auto !important; }
  img, table, iframe, object, embed { max-width: 100%; height: auto; }
  /* Baked news ticker carries fixed pixel widths from the old module config. */
  #news-highlight-1, #news-highlight-1 .gk_news_highlighter,
  .gk_news_highlighter_wrapper, .gk_news_highlighter_item,
  .gk_news_highlighter_interface { width: auto !important; max-width: 100% !important; }
  table { display: block; overflow-x: auto; }
}

/* 3. Narrow phones: stack the contextual menu above content, drop gutters. */
@media (max-width: 600px) {
  #leftcol   { width: auto; padding: 0; }
  div.wrapper { padding: 8px; }
  #horiz-menu li { float: none; display: block; }
}