/* ============================================================
   Tripsorb — mobile/tablet hardening (v0.53.0). ADDITIVE, mobile-scoped.
   The site is already responsive; these fix real on-device papercuts
   without touching the desktop layout. Safe to remove.
   ============================================================ */

/* Long URLs / emails / unbroken strings must never force side-scroll.
   `word-break: break-word` was REMOVED here in v0.219.64 and must not come back.
   It is a legacy alias that resolves to `overflow-wrap: anywhere`, and unlike
   `overflow-wrap: break-word` it collapses an element's MIN-CONTENT width to a single
   character. word-break is an inherited property and this selector starts at `body`, so
   every element on every page inherited it — site_footer.php loads this file everywhere.
   The effect: any flex item's automatic minimum size (min-width:auto, derived from
   min-content) collapsed, so any button/badge/chip sitting next to greedy text in a flex
   row could be crushed to ~1 character wide and its label wrapped one letter per line.
   Measured at 390px on the Account page: the theme toggle rendered 51x72 with "Light"
   broken across 5 lines; .btn measured 67x64 instead of 107x36.
   `overflow-wrap: break-word` alone fully preserves the intent above — verified in Chrome:
   a 398px unbroken email still wraps to 200px inside a 200px box with no page overflow. */
body, p, h1, h2, h3, h4, a, li, td, th, span { overflow-wrap: break-word; }

/* Embeds and wide media stay within the screen */
iframe, video, embed, object, pre, table { max-width: 100%; }

/* Phones (≤640px) */
@media (max-width: 640px) {
  /* iOS Safari zooms the page when focusing any field under 16px. Stop it. */
  input, select, textarea,
  .searchform .f input, .searchform .f select { font-size: 16px !important; }

  /* A little more usable width on small screens */
  .site .container { padding-left: 16px; padding-right: 16px; }

  /* Comfortable thumb targets in the mobile menu */
  .site .nav-mobile a.ml { padding-top: 15px; padding-bottom: 15px; }
  .site .nav-mobile .actions .btn { padding-top: 13px; padding-bottom: 13px; }

  /* Hero bands: keep readable height + cover fill on the new image heroes */
  .lhero.has-hero { background-size: cover; }

  /* Buttons wrap gracefully instead of overflowing a row */
  .btn { white-space: normal; }
}

/* Tablets (portrait) — ensure any wide table inside content can scroll */
@media (max-width: 820px) {
  .cmx-scroll, .table-wrap { -webkit-overflow-scrolling: touch; }
}