/* =====================================================================
   MOBILE CORRECTIONS — added 29 Jul 2026
   Fixes 14 pages that scrolled sideways on a phone, and tap targets
   below the 44px minimum. Everything here is inside a max-width query,
   so desktop layout is untouched.
   ===================================================================== */
@media (max-width: 768px) {

  /* --- 1. THE ROOT CAUSE ------------------------------------------
     Grid and flex children default to min-width:auto, which means they
     refuse to shrink below their content and push the track wider than
     its container. This one rule fixes marketplace, projects, checkout
     and agribusiness. */
  .mkt-layout > *, .db-layout > *, .checkout-layout > *, .auth-split > *,
  .grid-2 > *, .grid-3 > *, .grid-4 > *,
  [class*="grid-"] > *, [style*="display:grid"] > *, [style*="display: grid"] > * {
    min-width: 0;
  }
  [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0; }

  /* --- 2. Grids with hard-coded column widths collapse to one column */
  .mkt-layout, .db-layout, .checkout-layout, .auth-split,
  .grid-2, .grid-3, .grid-4, [class*="grid-"] {
    grid-template-columns: 1fr !important;
  }

  /* --- 3. Flex rows must wrap rather than run off the screen -------
     finance #roleToggle, farmer-ecosystem .mach-stats, projects
     .tab-filter, and the inline-styled flex rows. */
  .role-toggle, .mach-stats, .tab-filter, .sort-bar, .est-fields,
  .filter-row, .btn-row, .cta-row,
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* --- 4. Buttons and pills wrap their text instead of forcing width */
  .btn, .rt-btn, .tf, .pill, .chip, button, .btn-green, .btn-outline {
    white-space: normal;
    max-width: 100%;
  }

  /* --- 5. Wide tables scroll inside their own box, not the page ----
     about (695px), insights (676px), the two whitepapers, SLA,
     integration-policy and the finance rate table. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
  }
  table thead, table tbody, table tr { white-space: normal; }
  table th, table td { white-space: normal; word-break: normal; overflow-wrap: anywhere; }

  /* --- 6. Nothing may exceed the viewport ------------------------- */
  img, video, canvas, svg, iframe, pre, code { max-width: 100%; height: auto; }
  pre, code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
  h1, h2, h3, h4, p, span, a, li, td, th, div { overflow-wrap: break-word; }

  /* --- 7. Section wrappers stay inside the screen ----------------- */
  .container { max-width: 100%; }
  .form-section, .apply-form-wrap, .wp-table, .est-panel, .card, .panel {
    max-width: 100%; min-width: 0;
  }

  /* --- 8. TAP TARGETS -------------------------------------------
     Apple and Google both specify 44px. Applied to real controls only,
     so inline links inside body copy are not stretched apart. */
  a.btn, button, [role="button"], .btn, .rt-btn, .tf, .nav-link,
  input[type="checkbox"], input[type="radio"], input[type="submit"],
  select, .search-btn, .filter-option, summary {
    min-height: 44px;
  }
  a.btn, button, [role="button"], .btn, .rt-btn, .tf,
  input[type="submit"], select, .search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding-block: 10px;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; min-width: 22px;
  }
  /* a checkbox label is the real tap target — make the whole row tappable */
  label.filter-option, .filter-option {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding-block: 4px;
  }
  /* navigation and footer links need room without disturbing prose links */
  nav a, footer a, .subnav a, .logi-subnav a, .breadcrumb a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* --- 9. Named two-column layouts defined in page-level <style> blocks.
     These use explicit px/fr templates that cannot shrink. */
  .proj-layout, .cc-kpis, .hero-inner, .split-2, .two-col, .side-layout,
  .est-grid, .logi-grid, .wp-grid {
    grid-template-columns: 1fr !important;
  }
  .proj-layout > *, .cc-kpis > *, .hero-inner > * { min-width: 0; }

  /* --- 10. A grid or flex container marked flex-shrink:0 cannot shrink and
     pushes past the screen (finance.html's seller/buyer panel). Only
     containers are relaxed — icons and avatars keep their flex-shrink:0. */
  [style*="display:grid"][style*="flex-shrink:0"],
  [style*="display: grid"][style*="flex-shrink:0"],
  [style*="display:flex"][style*="flex-shrink:0"],
  [style*="display: flex"][style*="flex-shrink:0"] {
    flex-shrink: 1 !important;
    max-width: 100%;
  }

  /* --- 11. Safety net for off-canvas widgets (toast, WhatsApp button) that
     sit past the right edge until shown. overflow-x:clip rather than hidden,
     so position:sticky keeps working. */
  html { overflow-x: clip; }
  body { overflow-x: clip; }

  /* --- 12. TAP TARGETS, part two -----------------------------------
     WCAG 2.5.8 exempts links inline in a sentence, so footnote markers
     and prose links keep their typography. Everything that is a real
     control is brought to 44px. */

  /* announcement / top bar call to action (was 136x12 on every page) */
  .announce a, .topbar a, .announce-bar a, .promo-bar a,
  .announce span > a, .topbar span > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* floating WhatsApp widget and its close button (were 23x52 and 13x44) */
  #ah-wa-fab, a#ah-wa-fab {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ah-wa-x, span.ah-wa-x {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* checkboxes and radios to the 24px WCAG minimum; the 44px label row
     around them stays the real target */
  input[type="checkbox"], input[type="radio"] {
    width: 24px; height: 24px; min-width: 24px; min-height: 24px;
  }
  .po-radio, input.po-radio { width: 24px; height: 24px; min-width: 24px; }

  /* stacked link lists — footer, tables of contents, link columns.
     These are navigation, not prose, so giving them height is correct. */
  .foot a, .links a, .footer-links a, .wp-toc a, .ftime a,
  footer .col a, .footer-col a, .site-footer a {
    display: flex; align-items: center; min-height: 44px;
  }

  /* standalone call-to-action links that sit on their own line */
  .cta a, .card a.arrow, a.arrow-link, .more-link, a.more {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* --- 13. The general rule, stated once ---------------------------
     Any link that is NOT inline inside a sentence is a navigation or
     action target and gets 44px. Links inside p / li / td / th / sup /
     blockquote / label are inline prose and are exempt under WCAG 2.5.8,
     so their typography is untouched. */
  a:not(p a):not(li a):not(td a):not(th a):not(sup a):not(blockquote a):not(figcaption a):not(label a):not(.prose a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* the floating widget is injected with inline styles, so it needs weight */
  #ah-wa-fab, a#ah-wa-fab { min-width: 44px !important; min-height: 44px !important; }
  .ah-wa-x, span.ah-wa-x  { min-width: 44px !important; min-height: 44px !important;
                            display: inline-flex !important;
                            align-items: center; justify-content: center; }

  /* --- 14. Several pages re-declare footer and link-list styles in their
     own <style> block, which loads after this file and wins on source
     order. These corrections need weight to land. */
  .foot a, .links a, .footer-links a, .wp-toc a, .ftime a, .wp-callout a,
  footer a:not(p a):not(li a), .foot button, .back, a.back {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
  }
  a:not(p a):not(li a):not(td a):not(th a):not(sup a):not(blockquote a):not(figcaption a):not(label a):not(.prose a) {
    min-height: 44px !important;
  }
  label a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* =====================================================================
   TOUCH TARGETS — keyed to the INPUT DEVICE, not the screen width.
   A phone held sideways is 844px wide, which is above the layout
   breakpoint, but it is still a thumb. pointer:coarse catches every
   touch device at any width and leaves mouse users alone.
   ===================================================================== */
@media (pointer: coarse) {
  a:not(p a):not(li a):not(td a):not(th a):not(sup a):not(blockquote a):not(figcaption a):not(.prose a) {
    display: inline-flex; align-items: center; min-height: 44px !important;
  }
  button, [role="button"], .btn, .rt-btn, .tf, input[type="submit"],
  select, .search-btn, summary, .nav-link {
    min-height: 44px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 24px; height: 24px; min-width: 24px; min-height: 24px;
  }
  label.filter-option, .filter-option, label a {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
  }
  .foot a, .links a, .footer-links a, .wp-toc a, .ftime a, .wp-callout a,
  footer a:not(p a):not(li a), .foot button, .back, a.back {
    display: inline-flex !important; align-items: center; min-height: 44px !important;
  }
  #ah-wa-fab, a#ah-wa-fab { min-width: 44px !important; min-height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center; }
  .ah-wa-x, span.ah-wa-x { min-width: 44px !important; min-height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center; }
}