/* Unhopped mobile refinements — ALL rules are inside media queries.
   Desktop (>1024px) is completely unaffected by this file. */

/* ---------- Phones & small tablets ---------- */
@media (max-width: 1024px) {
  /* Restore navigation on mobile: horizontally scrollable pill row
     (base style hides .nav-links entirely below 1024px) */
  .nav-links{
    display:flex !important;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:calc(100vw - 140px);
    margin:0; padding:0 2px;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links li{flex:0 0 auto}
  .nav-links a{white-space:nowrap;font-size:13px}
  .nav-tool{padding:6px 10px !important}
  .nav-cta{padding:7px 14px !important}
  .nav-logo{font-size:20px}
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  /* 1. Prevent any horizontal page scroll */
  html,body{overflow-x:hidden}
  main{overflow-wrap:break-word;word-wrap:break-word}
  img{max-width:100%}

  /* 2. Tables (blog comparison posts): scroll within their box
        instead of stretching the page */
  main table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

  /* 3. iOS input zoom fix: Safari zooms (and stays zoomed) when a
        focused field is under 16px */
  input,select,textarea{font-size:16px !important}

  /* 4. Enriched brewery sections: remove the double side padding
        (main already pads 24px on mobile) */
  main section[style*="max-width:860px"]{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* 5. Slim down chunky inline-padded boxes (short answers, CTAs,
        callouts, pairing inserts, newsletter band) */
  [style*="padding:28px 32px"]{padding:20px 18px !important}
  [style*="padding:24px 28px"]{padding:18px 16px !important}
  [style*="padding:22px 24px"]{padding:18px 16px !important}
  [style*="padding:26px 24px"]{padding:20px 16px !important}
  [style*="padding:40px"]{padding:24px 20px !important}

  /* 6. Inline-styled headings a notch smaller on phones */
  main h2[style*="font-size:32px"]{font-size:25px !important}
  main h2[style*="font-size:28px"]{font-size:23px !important}
  main h2[style*="font-size:26px"]{font-size:22px !important}

  /* 7. Homepage hero breathing room */
  .hero{padding:104px 22px 44px !important}

  /* 8. Long links / code snippets never widen the page */
  main code{white-space:pre-wrap;word-break:break-word}

  /* 9. Tool ergonomics: crate & finder controls go full-width,
        stat tiles two-up */
  input.cb-q{min-width:100% !important}
  select.cb-sel{width:100%}
  .cb-stat{min-width:calc(50% - 6px) !important}
  .bf-opt{padding:14px 16px}
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .cb-slots{grid-template-columns:repeat(4,1fr) !important}
  .nav-logo{font-size:18px}
}