/* _mobile_touch.css - phone / touch fixes for neumangroupre.com
   Dan, 2026-09-03. Injected into every page by nginx sub_filter (neuman-site).
   NOT hand-edited into any .html - WORKLOG rule 1: every web/*.html is generated.
   Scope: narrow screens or touch pointers only. Desktop is untouched.
   Why: a 390px DevTools pass found no layout overflow, but the listing-card
   controls were 13-38px tall (thumb target is 44px).
   2026-09-06: the feedback/bug tab rules were dropped here - the widget itself
   was removed sitewide, so there is nothing left to reposition. */

@media (max-width: 640px), (pointer: coarse) {

  /* ---- listing card controls: were 13-38px, below the 44px thumb target ---- */
  .lcard-nav { width: 44px !important; height: 44px !important; font-size: 1.7rem; opacity: .92 !important; }
  .nm-save-ov { width: 44px !important; height: 44px !important; }
  .nm-mapbtn { padding: 13px 16px !important; font-size: .68rem !important; }

  /* compare checkbox was 13px; give the whole label a real hit area */
  .cmp-check { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; }
  .cmpcb { width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: 0 0 auto; }

  /* filter chips + price boxes were 20-29px */
  .npr-chip { min-height: 40px; padding: 0 14px; }
  .npr-nmin, .npr-nmax { min-height: 44px; }
  select,
  input[type=text], input[type=number], input[type=search],
  input[type=email], input[type=tel], input[type=date] { min-height: 44px; }

  /* ---- second pass, same DevTools run: the real class names on the price
         slider are npr-lo/npr-hi (not npr-nmin/nmax), plus the modal close,
         the For Sale / For Rent segment, the chat bubble and the footer
         link list were all still under 44px. ---- */
  .npr-lo, .npr-hi { min-height: 44px !important; }
  .lmodal-close { width: 44px !important; height: 44px !important; }
  .seg button { min-height: 44px !important; }
  .ava-bubble { min-height: 44px !important; }
  .dic-toggle { min-height: 40px !important; padding: 8px 4px !important; }
  /* footer / inline nav links were 15px tall - pad the row, do not resize text */
  footer a, .foot a, .foot-top a, .sitemap a { display: inline-block; padding: 12px 0 !important; }
  /* ---- third pass: the hamburger is THE mobile control, and the tel: links
         in the top bar were 17-18px. Both are things a thumb must hit. ---- */
  .nav-burger { min-width: 44px !important; min-height: 44px !important; }
  a[href^="tel:"] { display: inline-block; padding-top: 12px !important; padding-bottom: 12px !important; }
  /* ---- /compare and /how-we-build still run the OLD nav: no hamburger, all
         eight links wrapped inline at 18px tall. Those pages use a bare <nav>;
         the current pages use <header class=nav> with a burger, so scoping to
         nav > a leaves the new drawer alone. ---- */
  body > nav a, nav.oldnav a { display: inline-block; padding-top: 13px !important; padding-bottom: 13px !important; }
  /* ================= LISTING DETAIL PAGE (listing-tabs.html) =================
     Dan caught this on his phone 2026-09-03: the page scrolled sideways for
     ~3,500px. Cause: .lt-rail-th (the 27-photo thumbnail strip) already has
     overflow-x:auto, but it sits in a CSS grid (.lt-cols) and grid items
     default to min-width:auto - so the track refuses to shrink below its
     content and the scroller never engages. The strip then stretched the hero
     image, the cards and the share row to 3,844px. min-width:0 is the fix. */
  .lt-cols, .lt-cols3, .lt-ins { min-width: 0; }
  .lt-cols > *, .lt-cols3 > *, .lt-ins > * { min-width: 0; max-width: 100%; }
  .lt-rail, .lt-rail-th, .lt-tabs, .lt-stage, .lt-card, .lt-panel { max-width: 100%; min-width: 0; }
  .lt-rail-th { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* BEDS / BATHS / SQ FT: 3 boxes x min-width:122px overflowed a 374px screen */
  /* the stat row carries up to 7 boxes (beds/baths/sqft/built/DOM/HOA/type).
     min-width:0 alone squeezed all 7 onto one line and truncated the values,
     so wrap them 3-per-row instead. */
  .lt-stats { flex-wrap: wrap !important; }
  .lt-stat { flex: 1 1 33.33% !important; min-width: 0 !important;
             box-sizing: border-box; border-bottom: 1px solid #e3ded4; }
  /* nothing on a phone may be wider than the phone */
  img, video, iframe, table, pre { max-width: 100%; }
  .lt-rail-th img { height: auto; }
  /* ---- /j/census.html: the search row is a flex row whose input (237px) plus
         button (106px) do not fit 370px and would not wrap, pushing the page
         35px sideways. Let it wrap and let the input shrink. ---- */
  .cz-search { flex-wrap: wrap !important; max-width: 100%; }
  .cz-search > * { min-width: 0; max-width: 100%; }
  .cz-search input { flex: 1 1 100% !important; }
  .cz-search button { flex: 0 0 auto !important; }
  /* ---- /j/census.html hero: the h1 reads NEIGHBORHOOD CENSUS DATA in a big
         letter-spaced uppercase face. "NEIGHBORHOOD" alone measured 381px
         inside a 322px box and will not break, so the page scrolled 35px
         sideways. The map was innocent - it clips itself correctly. ---- */
  h1, h2, h3, .cz-hero { overflow-wrap: break-word; word-break: break-word; }
  .cz-hero { max-width: 100%; }
  .cz-hero h1 { font-size: clamp(1.05rem, 6.4vw, 2rem) !important; letter-spacing: .05em !important; }
}
/* =====================================================================
   CLOSING THE MOBILE MENU  (Dan, 2026-09-03)
   The drawer is .nav-links{position:fixed;inset:0 0 0 auto} and it paints
   OVER the header, so the hamburger it slid out from ended up buried under
   the panel. The toggle logic always worked - there was simply nothing left
   on screen to tap. Lifting the button above the panel is the whole fix; the
   bars are already light (var(--paper)) so they read against the dark drawer.
   Matches the drawer own 1080px breakpoint, not the 640px one above.
   ===================================================================== */
@media (max-width: 1080px) {
  .shell .nav-burger { position: relative; z-index: 2; }
}