/* ftresponsive.css - fluid page chrome for the forktrucks.com template.
   Step 1 of the responsive rebuild (8 September 2026; nav-on-phone fix the same evening). Loaded after ftstyles.css.
   Desktop is unchanged: the page is capped at the same 1000px and the left
   column keeps its 185px. Below 800px the left column drops beneath the
   content and the navigation bar wraps. The legacy-content rules at the end
   keep tables and images inside the MAIN region within the screen width. */

.ft-inner  { max-width: 1000px; margin: 0 auto; }

/* header: logo left, the two banners right */
.ft-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 70px; padding: 4px 20px 4px 0; box-sizing: border-box; }
.ft-logo img { display: block; max-width: 100%; height: auto; }
.ft-banners { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.ft-banners img { display: block; max-width: 100%; height: auto; }

/* blue bar with the five quick links */
.ft-bar { background: #000099 url(/images/topbarback2.gif); }
.ft-bar .ft-inner { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; padding: 3px 20px 3px 10px; box-sizing: border-box; }
.ft-bar a { white-space: nowrap; }
.ft-rule { height: 2px; background: #0000A0; }

/* two columns */
.ft-body { display: flex; align-items: flex-start; padding-top: 15px; }
.ft-left { flex: 0 0 185px; width: 185px; }
.ft-main { flex: 1 1 auto; min-width: 0; padding: 0 8px 0 4px; }

/* footer */
.ft-foot { padding: 10px 0 10px 185px; box-sizing: border-box; }
.ft-foot p { margin: 0 0 12px; }
.ft-foot-bar { border-top: 1px solid #CCCCCC; display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 4px; }
.ft-foot-bar .ft-back { flex: 0 0 18%; text-align: center; }

/* legacy content inside MAIN: never wider than the screen */
.ft-main table { max-width: 100%; }
.ft-main img { max-width: 100%; height: auto; }
.ft-main table[width="795"] { width: 100%; }
.ft-main select { max-width: 100%; }
@media (max-width: 800px) {
  .ft-header { justify-content: center; padding: 4px 8px; }
  .ft-banners { margin-left: 0; }
  .ft-body { flex-direction: column; }
  .ft-main { order: 1; padding: 0 6px; width: 100%; box-sizing: border-box; }
  .ft-left { order: 2; width: auto; flex: none; margin: 15px auto 0; }
  .ft-foot { padding-left: 6px; padding-right: 6px; }
  /* legacy index tables: nowrap cells (e.g. the welcome page's grey boxes) were
     forcing the content column to ~600px on a phone - let them wrap */
  .ft-main td[nowrap], .ft-main th[nowrap], .ft-main [nowrap="nowrap"] { white-space: normal !important; }
  /* a <select> is as wide as its longest option, and a percentage max-width does not
     count when a table works out its minimum width - a vw cap does. The welcome page's
     jump menus sat beside a 100px icon column and together forced ~560px. */
  .ft-main select { max-width: 60vw; }
  /* long unbroken strings (web addresses printed as link text, e.g. the members'
     stock-list links) cannot wrap and force the column wide - allow a break anywhere */
  .ft-main a, .ft-main td, .ft-main p, .ft-main span { overflow-wrap: anywhere; }  /* navigation bar on phones: one heading per row, and an opened panel sits
     inline beneath its heading instead of floating. The nav bar prints its own
     <style> in the body AFTER this file, so these selectors carry extra
     specificity (nav.ftnav ...) to beat it - a bare .ftnav-panel rule loses. */
  nav.ftnav .ftnav-bar { flex-wrap: wrap; }
  nav.ftnav .ftnav-item { flex: 1 1 100%; }
  nav.ftnav .ftnav-head { white-space: normal; }
  nav.ftnav .ftnav-item .ftnav-panel { position: static; left: auto; right: auto; width: 100%; box-sizing: border-box; box-shadow: none; flex-wrap: wrap; }
  nav.ftnav .ftnav-col { min-width: 0; flex: 1 1 45%; padding: 0 6px; }
  nav.ftnav .ftnav-col li a { white-space: normal; }
}