/* phone-fix.css: stop pages scrolling sideways on phones. Phone widths only;
   desktop and tablet layouts are untouched. Linked on every page by
   _tools/phone_fix.py (run from wire_new_pages.py). */
/* all widths: stop wide content widening the page. Grid items default to
   min-width:auto and grow to the widest table/pre/nowrap text inside them, so the
   page scrolls sideways even when that table sits in an overflow-x:auto wrapper.
   min-width:0 lets the column stay in its track and the wrapper scroll. */
.content-grid>*,.content-wrap>*,.content-wrapper>*,.article-wrap>*,.article-layout>*,
.article-grid>*,.content-layout>*,.main-wrap>*,.page-wrap>*,.article-body>*{min-width:0}
.table-wrap{overflow-x:auto}
/* tablet widths (768-1024): link rows wrap and bare tables scroll inside their own box
   instead of pushing the page sideways; desktop (above 1024) is untouched */
@media (max-width:1024px){
  nav,nav ul,nav .nav-links,.footer-links{flex-wrap:wrap;min-width:0;max-width:100%}
  nav>*,header [class*="inner"]>nav{min-width:0}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table,.table-wrapper table,.table-container table,.table-responsive table{display:table;max-width:none}
}
img,video,iframe{max-width:100%}
@media (max-width:760px){
  /* hidden off-canvas mobile menus sit past the right edge; clip them so the page
     can't be dragged sideways (clip, unlike hidden, keeps sticky headers working) */
  html{overflow-x:hidden;overflow-x:clip}
  /* wide data tables scroll inside their own box instead of widening the page */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap,.table-container,.table-responsive{max-width:100%;overflow-x:auto;min-width:0}
  .table-wrap table,.table-container table,.table-responsive table{display:table;max-width:none}
  /* grid/flex children default to min-width:auto and grow to their widest child */
  [class*="layout"]>*,[class*="container"]>*,[class*="wrap"]>*,[class*="inner"]>*,[class*="content"]>*,
  main>*,article>*,aside>*,section>*{min-width:0}
  pre,code{white-space:pre-wrap;word-break:break-word}
  form input,form select,form textarea,form button{max-width:100%;box-sizing:border-box}
  li{overflow-wrap:anywhere}
  .agent-card,.author-card,.agent-box{flex-wrap:wrap}
  .agent-info,.author-info{min-width:0}
}
/* card grids with no breakpoint stack to one column; stat grids keep 2-up */
@media (max-width:560px){
  [class*="-grid"]:not([class*="stat"]),[class$="grid"]:not([class*="stat"]),
  .mx-rgrid,.two-col,.three-col,.four-col,.col-2,.col-3,.cols-2,.cols-3,
  [style*="grid-template-columns"]:not([class*="stat"]){grid-template-columns:minmax(0,1fr)!important}
}

/* top menus that don't collapse on phones: the link row wraps onto more lines
   instead of pushing the page (and the menu button) off the right edge */
@media (max-width:760px){
  nav .nav-links{min-width:0;max-width:100%;flex-wrap:wrap;row-gap:6px}
  nav>*{min-width:0}
}
@media (max-width:520px){
  /* homepage top bar: social icons are in the footer; hiding them here keeps the menu button on screen */
  nav .nav-socials{display:none}
}
@media (max-width:760px){
  /* logo taglines set to nowrap ran past the right edge on narrow phones */
  nav [class*="logo"],nav [class*="brand"],header [class*="logo"],header [class*="brand"],
  nav [class*="logo"] *,nav [class*="brand"] *,header [class*="logo"] *,header [class*="brand"] *{white-space:normal;min-width:0}
}
@media (max-width:760px){
  /* top-bar link rows (flat div/a nav and ul/li dropdown nav) must wrap instead of running past the right edge */
  header nav,.nav-inner,.header-inner{flex-wrap:wrap;min-width:0}
  header nav{justify-content:flex-end}
  body>nav,body>nav>ul,nav>ul:first-child{flex-wrap:wrap;min-width:0}
  nav>ul>li>a,nav>ul>li>a.nav-logo{white-space:normal}
}
@media (max-width:760px){
  /* full-bleed bands built with negative side margins stick out past the phone viewport */
  .faq-section,.cta-section{margin-left:0;margin-right:0}
  /* stat tiles in grids may shrink below their big-number width */
  .stat-grid>.stat-card{min-width:0}
  .stat-row{flex-wrap:wrap}
  .stat-grid>.stat-card .stat-num,.stat-row>.stat-box .num,.stat-row>.stat-box .stat-num{overflow-wrap:anywhere}
  .emp-header{flex-wrap:wrap}
}