/**
 * Sitewide text-wrapping polish (T-uxfix, 2026-08-03).
 *
 * Owner report (iPhone 14, 390px): headings break in ugly places -- the worst
 * being the homepage section title, which split the city name itself:
 *   "Women-Led Tours in Ho Chi / Minh City"   (and "in Da / Nang").
 * Same family of problem across the site: headings whose last line holds a
 * single short word (an orphan/widow).
 *
 * Everything here is presentational only. If a browser does not understand a
 * property, or a Bricks element is rebuilt with a new auto-id, the worst case
 * is "the tweak does not apply" -- never missing or broken content.
 * Rule-ack: dom-selector-contract
 */

/* ---------------------------------------------------------------------------
 * 1. The city name in the homepage section title must never split mid-name.
 *
 * Markup (the span's text is swapped between "Ho Chi Minh City" and
 * "Da Nang" by assets/js/homepage-dn-tabs.js):
 *   <h2 class="brxe-uhyele brxe-heading section-title">
 *     Women-Led Tours in <span>Ho Chi Minh City</span></h2>
 *
 * Three selectors, each a SEPARATE rule on purpose -- an unknown selector
 * invalidates its whole selector list, so listing them together would let one
 * unsupported form silently kill the others.
 *
 *   1a is the primary hook and does NOT depend on any Bricks auto-id: the
 *      tabs script inserts #kt-city-tabs as the heading's immediate next
 *      sibling (`heading.parentNode.insertBefore(tabs, heading.nextSibling)`),
 *      and `kt-city-tabs` is a hand-set kt-* name, i.e. the stable hook the
 *      selector contract asks for. It therefore survives the heading being
 *      rebuilt in the builder with a new auto-id.
 *   1b is the auto-id form. Kept because :has() is unsupported on older
 *      engines, and because it applies during the first paint, before the
 *      async product fetch inserts the tabs.
 *   1c is the second, Da Nang-specific copy of the heading; brxe-dnhead1 is
 *      a hand-set CSS ID, not an auto-id, so it is stable.
 *
 * Not breakpoint-gated: measured on prod, the heading splits the city name at
 * BOTH 390px (span 267px, 2 lines) and 1440px (span 343px, 2 lines). Widest
 * the span ever renders is 343px (36px desktop size), and the narrowest box
 * the heading ever gets is 290px at a 320px viewport -- where the span is only
 * 235px (28px mobile size). So nowrap fits at every tested width.
 *
 * Deliberately NOT generalised to `.section-title > span`: other section
 * titles put long text in that span (e.g. "What our customers say", 353px at
 * the 28px mobile size) which would overflow a 320px screen.
 * ------------------------------------------------------------------------- */
.section-title:has(+ #kt-city-tabs) > span {
      white-space: nowrap;
}

h2.brxe-uhyele.section-title > span {
      white-space: nowrap;
}

#brxe-dnhead1.section-title > span {
      white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 2. Fewer single-word last lines in headings, on phones.
 *
 * `text-wrap: pretty` asks the engine to avoid a last line holding one short
 * word ("KissTour Travel / Guides", "Kiss Michelin Food / Tour"). Engines that
 * do not implement it ignore the declaration and wrap exactly as today, so the
 * worst case is "the tweak does not apply".
 *
 * `text-wrap: balance` was measured and REJECTED. Over 936 visible headings
 * (10 pages x 320/375/390/430, headless Chrome):
 *
 *     variant   cleanly fixed   orphan -> broken-noun   made things worse
 *     pretty         125                 20                    0
 *     balance        201                 20                   16
 *
 * balance's 16 regressions include splitting the city name in the homepage
 * hero H1 at 320px ("Ho Chi Minh City & Da / Nang on Two Wheels") -- i.e. it
 * reintroduces the exact bug this file exists to fix -- and it turns four
 * one-line headings into two lines ("One flat price, all-inclusive" on /visa/
 * at 320/375/390, "Are your tours kid-friendly?" on /saigon-food-tour/ at
 * 320). pretty caused no line-count change anywhere.
 *
 * Phone-only (<=767px) so desktop line breaks are provably untouched; desktop
 * was not measured for this rule.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

      h1,
      h2,
      h3,
      .brxe-heading,
      .section-title {
            text-wrap: pretty;
      }
}