/* ============================================================
   blx-mobile.css — BLXchange shared phone/tablet layer
   Loaded LAST (right before </head>, after each public page's
   inline <style>) so these rules win the cascade at equal
   specificity. Hand-authored breakpoints (NLM method): each rule
   fixes a real small-screen problem on the public pages. The
   app/admin shell is handled separately by form.css (@768).
   ============================================================ */

/* EN|ES language toggle on public pages (injected by blx-footer.js; language.js
   wires .lang-btn clicks and toggles .active). Styled here so it looks the same on
   every public page, incl. ones with no inline .lang-toggle CSS. */
.lang-toggle { display: inline-flex; border: 2px solid #32FF02; border-radius: 20px; overflow: hidden; vertical-align: middle; margin-left: 12px; }
.lang-toggle a { display: inline-block; padding: 5px 12px; font-size: 12.5px; font-weight: 800; text-decoration: none; color: #0B2A45; background: #fff; line-height: 1.3; cursor: pointer; }
.lang-toggle a.active, .lang-toggle a.on { background: #32FF02; color: #0B2A45; }

/* ---- tablet: drop 4-up grids to 2-up, trim the big hero ---- */
@media (max-width: 720px){
  .cards, .steps, .feats, .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 34px; }
}

/* ---- phone ---- */
@media (max-width: 600px){
  /* header: brand on row 1, nav wraps full-width underneath instead of overflowing */
  header { flex-wrap: wrap; padding: 12px 16px; }
  .nav { width: 100%; display: flex; flex-wrap: wrap; gap: 14px 16px;
         justify-content: center; margin-top: 10px; }
  .nav a { margin-left: 0; font-size: 14px; }
  .nav a.cta { padding: 8px 14px; }

  /* hero: 44px/74px is an oversized band on a phone */
  .hero { padding: 46px 16px 38px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .hero .btns { gap: 10px; }
  .strip { gap: 14px 18px; margin-top: 22px; }

  /* buttons comfortable but not oversized */
  .btn { padding: 12px 20px; font-size: 15px; }

  /* sections + headings */
  section { padding: 40px 16px; }
  h2 { font-size: 23px; }
  .lead { font-size: 15px; margin-bottom: 26px; }

  /* every multi-column grid collapses to one column */
  .cards, .steps, .feats, .grid, .grid-4, .grid-3, .grid-2,
  .biz-grid, .deal-grid, .card-grid, .ad-grid { grid-template-columns: 1fr; }

  /* filters / selects: full-width instead of stranding on margin-left:auto */
  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters select, .filters input, select.catsel { width: 100%; margin-left: 0; }

  /* generic containers + rows */
  .wrap, .container { padding-left: 16px; padding-right: 16px; }
  .row { flex-wrap: wrap; }
  .cta-band { padding: 40px 16px; }

  /* tables inside cards: let them scroll rather than force horizontal page scroll */
  .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* listbusiness hours editor: day + closed on row 1, the two time fields wrap
     to row 2 and share the width (the inline width:130px overflows a phone) */
  #hours-ed > div { flex-wrap: wrap; }
  #hours-ed > div > span { width: auto !important; min-width: 72px; }
  #hours-ed input[type="time"] { width: auto !important; flex: 1 1 40%; min-width: 0; }
}