/* ==========================================================================
   Responsive / mobile layer
   --------------------------------------------------------------------------
   Loaded BETWEEN cityviz.css and custom2.css, so the client stylesheet keeps
   the last word. Every selector is therefore prefixed with `.content` (or
   `body` for elements outside div.content) so these rules win on SPECIFICITY
   rather than on source order.

   The prefix does double duty: `.content` is present on the main app
   containers but absent from `.content-embed` / `.content-headless`, so the
   embed widget's own media-query ladder in cityviz.css stays untouched.

   Breakpoints are Bootstrap 5's (the app runs bslib + BS 5.3.1), so padding
   steps land exactly where the grid steps:
     1199.98  collapsed navbar boundary (navbar-expand-xl)
      991.98  lg
      767.98  md
      575.98  sm  (below this col-sm-* has already stacked)

   Deliberately NOT here: `html, body { overflow-x: hidden }`. It would mask
   overflow instead of fixing it and would break the position:sticky used by
   .scrolly-graph.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page container padding ladder
   cityviz.css:48 sets a flat `padding: 0 50px`. Inside .container-fluid's
   12px gutter that costs 124px on a 375px phone — a third of the screen.
   -------------------------------------------------------------------------- */

.content .main-content {
  overflow-wrap: break-word; /* long URLs / place names can't force overflow */
}

@media (max-width: 1199.98px) {
  .content .main-content { padding: 0 40px; }
}

@media (max-width: 991.98px) {
  .content .main-content { padding: 0 32px; }
}

@media (max-width: 767.98px) {
  .content .main-content { padding: 0 20px; }
}

@media (max-width: 575.98px) {
  .content .main-content { padding: 0 12px; }
}

/* The Overview text column carries `.overview` (mod_home.R:36), which adds a
   SECOND fixed `padding: 0 50px` (cityviz.css:765) inside .main-content's. On a
   375px phone that costs 100px of a 351px column — 27% of the viewport.

   12px rather than 0: below 576px `col-sm-12` does not apply, so the column has
   no grid gutter and the row's -12px margin cancels .main-content's padding.
   Zero here would put text 12px from the screen edge — tighter than any tier of
   the ladder above. 12px lands it at 24px, matching the <=575.98 tier.

   Left alone from 768px up: at 992px the column gives the text 28% of the
   viewport versus 32% at 1440px, so the padding is not disproportionate there —
   the col-lg-5 ratio is what's tight, and that is a layout change nobody asked
   for. custom2.css does not style .overview, so no client rule is overridden. */
@media (max-width: 767.98px) {
  .content .overview {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* --------------------------------------------------------------------------
   2. Collapsed navbar
   The navbar is navbar-expand-xl, so the hamburger appears below 1200px —
   these fixes key off that boundary, not the content tiers.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  /* custom2.css:189-193 boxes the submenu into 220px; when the navbar is
     collapsed the menu is full-width, so the dropdown should be too. */
  .content .navbar-expand-xl .dropdown-menu {
    width: 100%;
  }

  /* custom2.css:101-119 draws dividers for a horizontal bar (border-right,
     border-left on :first-child) but BS5 stacks the menu vertically when
     collapsed. Same #ccc, rotated 90 degrees. */
  .content .navbar-nav {
    float: none;
  }

  .content .navbar-nav > li {
    border-right: none;
    border-bottom: 1px solid #ccc;
  }

  .content .navbar-nav > li:first-child {
    border-left: none;
    border-top: 1px solid #ccc;
  }
}


/* --------------------------------------------------------------------------
   3. navlistPanel sidebar -> horizontal pill strip
   navlistPanel renders .row > .col-sm-2 > ul.nav.nav-pills.nav-stacked
   (widget pages use widths = c(1, 11), i.e. col-sm-1 => 48px at 576px).
   Between 576 and 992px that column is unusably narrow; below 576px it
   stacks full-width but inherits 85px of dead space from cityviz.css:356.

   :has() is supported by every current browser (Chrome 105+, Safari 15.4+,
   Firefox 121+) and degrades to a no-op — not a breakage — on older ones.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .content .row:has(> [class*="col-sm-"] > .nav.nav-pills.nav-stacked) > [class*="col-sm-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .content .nav.nav-pills.nav-stacked {
    margin-top: 15px; /* cityviz.css:356 sets 85px for the sidebar layout */
    margin-bottom: 15px;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .content .nav.nav-pills.nav-stacked > li {
    flex: 0 0 auto;
  }

  .content .nav.nav-pills.nav-stacked > li > a {
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   4. Touch targets
   custom2.css:236-250 gives pills 13px text + 10px padding ~= 33px tall,
   under the 44px guideline. Only padding/height change — the client's
   #efefef background, #4D4D4D text, #ccc border and bold weight all survive.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .content .nav-pills > li > a {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   5. Ticker and footer spacer
   .ticker-wrap is a fixed 64px bar at z-index 10000 pinned to the bottom of
   the viewport, and its pause-on-hover is unreachable on touch — an
   unstoppable marquee eating 13% of a phone screen.

   `body` prefix, not `.content`: the ticker and footer come from
   cityviz_footer(), a SIBLING of div.content (cityviz_utils_ui.R:1234).
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  body .ticker-wrap {
    display: none;
  }

  /* The push/negative-margin sticky-footer trick is already internally
     inconsistent (.push is 140px; .content margin-bottom is -50px in
     cityviz.css and -80px in custom2.css) and the footer grows taller on
     mobile as its columns stack. Let the footer flow instead of re-tuning
     a constant that cannot be right at every width. */
  body .content {
    margin-bottom: 0;
  }

  .content .push {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   6. Typography
   custom2.css sets h1 40px/45px and h2 35px/40px, which dominate a 375px
   screen. Sizes only — Titillium Web, #444444 and weight 700 are untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .content h1 { font-size: 28px; line-height: 34px; }
  .content h2 { font-size: 24px; line-height: 30px; }
  .content h3 { font-size: 20px; line-height: 26px; }
  .content h4 { font-size: 17px; line-height: 22px; }

  .content .bizkit-valuebox-value { font-size: 28px; }
}


/* --------------------------------------------------------------------------
   7. Box padding
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .content .bizkit-valuebox {
    padding: 16px;
    margin: 16px 0;
  }

  .content section.section-report-studio {
    padding: 16px 16px 8px;
    margin: 16px 0;
  }

  .content .footnotes {
    padding: 16px;
    border-width: 6px;
  }

  .content figcaption {
    margin: 10px 0 24px;
  }

  /* `body` prefix: Bootstrap moves modals to the end of <body>. */
  body .modal-dialog {
    margin: 20px 10px;
  }
}


/* --------------------------------------------------------------------------
   8. Map / explore panels
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  /* cityviz.css:2446 — min-width 250px / max-width 305px */
  .content #panel-filters {
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 10px 12px;
  }

  /* cityviz.css:2913 — min-width 360px leaves ~7px on a 375px screen, and
     the translate(-50%, 0) then pushes it off-canvas. Drop the floor rather
     than restate width, so the existing centring stays valid. */
  .content .map-panel-footer {
    min-width: 0;
    max-width: 92vw;
  }

  .content .panel-footer {
    min-width: 0;
    max-width: 92vw;
  }

  /* cityviz.css:3134 — a hard 340px flex-shrink:0 sidebar next to the map
     leaves ~25px for the map itself at 375px. The wrapper's `display:flex`
     is an INLINE style (mod_widget_custom_map.R:42) so it cannot be stacked
     from CSS without !important; make the sidebar proportional and
     shrinkable instead, which needs no override war. */
  .content .cm-listings-sidebar {
    width: 45%;
    min-width: 0;
    flex-shrink: 1;
  }
}


/* --------------------------------------------------------------------------
   9. Story / scrollytelling
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .content .story-text {
    padding: 20px 16px 0;
  }

  .content .scrolly-graph {
    padding-left: 0;
    padding-top: 30px;
  }

  .content .scrolly-graph figcaption {
    margin-bottom: 24px;
  }
}


/* --------------------------------------------------------------------------
   10. Tables
   Only 2 of the app's DataTables set scrollX, so wide tables force page
   scroll. DT 0.33 -> DataTables 1.13 -> .dataTables_wrapper.

   The scroll goes on the TABLE, not on .dataTables_wrapper. Per CSS spec, an
   overflow-x other than `visible` forces overflow-y to compute to `auto`, so
   putting it on the wrapper turns the whole wrapper into a scroll container
   and CLIPS the DT Buttons export dropdown — verified in a browser, and the
   admin report pages use dom = 'Bfrtip' with extensions = 'Buttons'.
   Scrolling the table alone leaves the search box, length select and Buttons
   collection outside the clip, and column alignment is preserved because the
   browser generates an anonymous table box inside the block.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .content table.dataTable,
  .content .explore-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Tables that already opt into DT's own scrollX get .dataTables_scrollBody /
     .dataTables_scrollHead wrappers with measured column widths
     (mod_ei_dtedit.R:58, mod_supply_chain_map.R:934). Don't double up — it
     would desynchronise the header and body column widths. */
  .content .dataTables_scrollBody table.dataTable,
  .content .dataTables_scrollHead table.dataTable {
    display: table;
    overflow-x: visible;
  }
}


/* --------------------------------------------------------------------------
   11. Grids and fixed-height containers
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* cityviz.css:1257 — 4rem gutters are most of a phone screen */
  .content .resources-grid {
    grid-gap: 1.5rem;
  }

  .content .resources-grid .media-left {
    padding-right: 12px;
  }

}

/* cityviz.css:1801-1808 — the existing query that collapses the tiles to full
   width is `max-width: 768px`, so this pairs with it at exactly 768px rather
   than 767.98px, leaving no seam where tiles stack inside a fixed 850px box. */
@media only screen and (max-width: 768px) {
  .content .widget-tiles-grid-container {
    height: auto;
    grid-template-rows: auto;
  }
}


/* --------------------------------------------------------------------------
   12. Overview quick-facts column (xl band only)

   The value boxes sit in a col-xl-2 (mod_home.R:26). Chrome costs a FIXED 96px
   of that column regardless of viewport: 24px grid gutter + 8px card-body +
   64px of .value-box-area padding (cityviz.css:725, 0.5rem 2rem). At 1200px
   the column is 183px, so only 87px is left for text and the longer values
   wrap onto two lines.

   mod_home.R now uses col-lg-3 below 1200px, which covers 992-1199. This
   covers 1200-1399, where col-xl-2 is still tight. From 1400px up the column
   is >=210px and the client's 2rem padding is left exactly as-is.

   Same selector shape as cityviz.css:725 (0,4,0) — responsive.css loads after
   cityviz.css so this wins on order, and custom2.css never touches
   .quick-facts-col, so no client rule is overridden here.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .content .quick-facts-col .bslib-value-box .value-box-area {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}