/* ==========================================================================
   qbod.fit — mobile polish
   Added 2026-08-13 after reviewing the site on a Pixel-class Android device.

   ⚠️ DO NOT ASSUME THIS FILE LOADS LAST. features.html has a SECOND inline
   <style> block inside <body> (approx. lines 862-981) that comes AFTER this
   link, so every specificity TIE goes to the page, not to us. Rules that must
   beat it carry an extra element selector (table.compare-table, not
   .compare-table) to win on specificity rather than order.
   This wrong assumption is what made the first comparison-table fix a no-op.

   Scoped to <=768px so desktop is untouched.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- 1. Hero call-to-action was left-aligned inside a centred hero -------
     The markup carries style="...align-items: flex-start" inline. The
     stylesheet sets justify-content:center, but the group is a COLUMN flex,
     so the cross axis (align-items) is what actually positions the button —
     and the inline value won. Result: centred heading and paragraph with the
     button jammed against the left margin.
     !important is required: we are overriding an inline attribute.          */
  .hero-content .btn-group,
  .hero .btn-group {
    align-items: center !important;
    text-align: center;
  }

  /* --- 2. Hamburger tap target -------------------------------------------
     Was a bare glyph at 21x29. Apple and Android both ask for 44x44 minimum.
     Padding-free before, so this adds hit area without moving the icon.     */
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: -10px; /* keep the glyph optically where it already sat */
  }

  /* --- 3. Footer social icons were 36x36 ---------------------------------
     The in-menu set is already 44x44; the footer set was not. Match them.   */
  .footer-social .social-icon {
    width: 44px;
    height: 44px;
  }

  /* --- 4. Menu overlay was 97% opaque ------------------------------------
     At 0.97 the hero headline ghosted through the open menu and read as a
     rendering fault rather than a design choice. Make it solid.            */
  .mobile-menu {
    background: #050505;
  }

  /* --- 5. Primary pills were running desktop sizing ----------------------
     18px text with 18px/36px padding produced 65px-tall buttons on a 390px
     screen. This trims to roughly 56px, which still clears the 44px minimum
     comfortably. Purely cosmetic — delete this block to revert.            */
  .btn-primary,
  .btn-group .btn-primary {
    font-size: 17px;
    padding: 16px 28px;
  }
}

/* ==========================================================================
   Mobile comparison table  (added 2026-08-13)
   14 columns cannot work at 390px. On phones we show Feature | QBod | one
   rival, chosen from a <select> that compare-mobile.js builds from the table
   header. Desktop keeps the full grid.
   ========================================================================== */

/* The picker is a mobile-only control. */
.compare-rival-picker { display: none; }

@media (max-width: 768px) {

  .compare-rival-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    font-size: 14px;
    color: #C2CCD6;
  }
  .compare-rival-select {
    flex: 1 1 160px;
    min-height: 44px;              /* tap target */
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: #101416;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
  }
  .compare-rival-select:focus-visible {
    outline: 2px solid var(--primary-teal, #26D0CE);
    outline-offset: 2px;
  }

  /* Hide every rival column, then reveal only the selected one. */
  .compare-table th:nth-child(n+3),
  .compare-table td:nth-child(n+3) { display: none; }

  .compare-table[data-rival="3"] th:nth-child(3),
  .compare-table[data-rival="3"] td:nth-child(3) { display: table-cell; }
  .compare-table[data-rival="4"] th:nth-child(4),
  .compare-table[data-rival="4"] td:nth-child(4) { display: table-cell; }
  .compare-table[data-rival="5"] th:nth-child(5),
  .compare-table[data-rival="5"] td:nth-child(5) { display: table-cell; }
  .compare-table[data-rival="6"] th:nth-child(6),
  .compare-table[data-rival="6"] td:nth-child(6) { display: table-cell; }
  .compare-table[data-rival="7"] th:nth-child(7),
  .compare-table[data-rival="7"] td:nth-child(7) { display: table-cell; }
  .compare-table[data-rival="8"] th:nth-child(8),
  .compare-table[data-rival="8"] td:nth-child(8) { display: table-cell; }
  .compare-table[data-rival="9"] th:nth-child(9),
  .compare-table[data-rival="9"] td:nth-child(9) { display: table-cell; }
  .compare-table[data-rival="10"] th:nth-child(10),
  .compare-table[data-rival="10"] td:nth-child(10) { display: table-cell; }
  .compare-table[data-rival="11"] th:nth-child(11),
  .compare-table[data-rival="11"] td:nth-child(11) { display: table-cell; }
  .compare-table[data-rival="12"] th:nth-child(12),
  .compare-table[data-rival="12"] td:nth-child(12) { display: table-cell; }
  .compare-table[data-rival="13"] th:nth-child(13),
  .compare-table[data-rival="13"] td:nth-child(13) { display: table-cell; }
  .compare-table[data-rival="14"] th:nth-child(14),
  .compare-table[data-rival="14"] td:nth-child(14) { display: table-cell; }

  /* With only three columns there is room to breathe.
     Element selector prepended deliberately: the page's own in-body <style>
     sets .compare-table{min-width:600px} and .compare-table-wrap{overflow-x:auto}
     AFTER this file, so a plain class selector ties and loses. */
  div.compare-table-wrap { overflow-x: visible; }
  table.compare-table { width: 100%; min-width: 0; font-size: 14px; }
  .compare-table th:nth-child(1),
  .compare-table td:nth-child(1) { width: 52%; white-space: normal; }
  .compare-table th:nth-child(2),
  .compare-table td:nth-child(2),
  .compare-table th:nth-child(n+3),
  .compare-table td:nth-child(n+3) { width: 24%; text-align: center; }
  /* The page's own rule targets th/td directly, so match that specificity
     or the 11.5px stays. */
  table.compare-table th, table.compare-table td { padding: 11px 8px; font-size: 14px; }
  /* The page pins first-child to min-width:160px inside its OWN 768px query. */
  table.compare-table td:first-child,
  table.compare-table th:first-child {
    min-width: 0;
    max-width: none;
    position: static;   /* sticky is pointless once nothing scrolls sideways */
  }
}
