/* ==========================================================================
   mobile.css  --  Footypicks responsive layer
   --------------------------------------------------------------------------
   EVERY rule in this file lives inside a `max-width` media query, so the
   desktop layout is never touched. Phones/tablets (<= 768px wide) get a
   stacked, finger-friendly version of the existing HTML with NO markup
   changes required.

   Requires one thing in the <head>: the viewport meta tag (added to
   html_meta.php). Without it mobile browsers report a ~980px viewport and
   none of these rules take effect.

   Strategy: the whole site sits inside ONE fixed 790px layout <table> that
   is a direct child of <body>. We target ONLY that outer table
   (`body > table`) and turn its top-level cells into stacked blocks. All the
   inner data tables (fixtures, ladders, pick forms) are left as real tables
   and simply scroll sideways inside their now-full-width container.
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* ----- Page basics ------------------------------------------------------ */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;              /* allow panning when a deep table is wider */
    -webkit-text-size-adjust: 100%; /* stop iOS auto-inflating text            */
  }

  body, p, td, th, div { font-size: 14px; line-height: 1.4; }
  h3 { font-size: 20px; }
  h5 { font-size: 16px; }

  * { box-sizing: border-box; }

  img            { max-width: 100%; height: auto; }
  iframe, embed,
  object         { max-width: 100%; }

  /* ----- Break the fixed 790px layout table into a vertical stack --------- */
  body > table              { width: 100% !important; height: auto !important; }
  body > table > tbody      { display: block; width: 100%; }
  body > table > tbody > tr { display: block; width: 100%; }

  body > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide the empty 140px spacer cell that sits beside the ad banner row. */
  body > table > tbody > tr:nth-child(2) > td:first-child { display: none; }

  /* Logo + footer divider images stretch to the screen instead of 790px. */
  img[src*="logo"] { width: 100%; height: auto; display: block; }
  img[src*="line"] { width: 100%; height: auto; }

  /* ----- Forms & touch targets ------------------------------------------- */
  /* 16px beats the inline `font-size: xx-small` on the login boxes (so iOS
     won't zoom on focus) and makes everything easier to tap.               */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  button {
    min-height: 44px;
    padding: 10px 16px;
  }
  select { min-height: 42px; }

  /* ----- Data tables ------------------------------------------------------ */
  /* Wide tables keep their natural width and scroll horizontally on mobile. */
  table.border1_all,
  table.gridlines {
    display: block;
    width: max-content;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.gridlines td,
  table.gridlines th { font-size: 13px; }

  /* ----- Mobile stacked table helper ------------------------------------ */
  /* Usage:
     <table class="mobile-stack-table">
       <tr>
         <td data-label="Kick Off">7:30 pm</td>
         <td data-label="Home">Arsenal</td>
       </tr>
     </table>

     On mobile, each row becomes a vertical card and each cell becomes a
     two-column label/value line. Desktop output is untouched because the
     whole helper only exists inside this media query. */
  table.mobile-stack-table {
    width: 100% !important;
    max-width: 100%;
  }

  table.mobile-stack-table thead {
    display: none;
  }

  table.mobile-stack-table,
  table.mobile-stack-table tbody,
  table.mobile-stack-table tr,
  table.mobile-stack-table td,
  table.mobile-stack-table th {
    display: block;
    width: 100% !important;
  }

  table.mobile-stack-table tr {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid #cccccc;
    background: #ffffff;
  }

  table.mobile-stack-table td,
  table.mobile-stack-table th {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 !important;
    border: 0 !important;
    text-align: right !important;
    white-space: normal;
  }

  table.mobile-stack-table td::before,
  table.mobile-stack-table th::before {
    content: attr(data-label);
    flex: 0 0 42%;
    margin-right: auto;
    color: #004a6f;
    font-weight: bold;
    text-align: left;
  }

  table.mobile-stack-table td[data-label=""]::before,
  table.mobile-stack-table th[data-label=""]::before,
  table.mobile-stack-table td:not([data-label])::before,
  table.mobile-stack-table th:not([data-label])::before {
    content: none;
  }

  table.mobile-stack-table td > *,
  table.mobile-stack-table th > * {
    margin-left: auto;
    max-width: 58%;
  }

  table.mobile-stack-table td[colspan],
  table.mobile-stack-table th[colspan] {
    display: block;
    text-align: center !important;
  }

  table.mobile-stack-table td[colspan]::before,
  table.mobile-stack-table th[colspan]::before {
    content: none;
  }

  /* The rotated pick-grid headers are unreadable on a phone -- straighten
     them back out so the columns are legible. */
  th.rotate          { height: auto; white-space: normal; background: none; }
  th.rotate > div    { transform: none; width: auto; }
  th.rotate > div > span { border-bottom: 0; padding: 2px 4px; font-size: 12px; }
}