/* text-fit 1.0.0 (seo-audit-kit, Sebastian's ruling of 11 Nov 2026, sixth round): the WA text rules and the hero
   cap, so no page scrolls sideways on a 390 px phone. Copied from wohnsitzausland.com src/styles/global.css
   (.prose-wa) and passportsovereign.com (commits 3cd761e, 7607b23).

   Every selector sits in :where(), so these rules weigh nothing: the site's own rules win wherever they set the
   same property. When a site rule does switch them off (hyphens: manual, overflow-wrap: normal, a fixed
   min-width), copy the declarations onto the site's own selectors instead (README). No colour, font, size or
   spacing is touched: this file changes how long words break, never the design.

   Rule 0 is not CSS: <html lang> must be the page's language on every page (de, en, fr, it, es, pt), or the
   browser cannot hyphenate. The sideways check reports a page without lang or with the wrong one. */

/* 1. Body text: a long word or URL breaks at the column edge instead of widening the page (WA .prose-wa).
      overflow-wrap is inherited, so one rule on body reaches every text block. */
:where(body) {
  overflow-wrap: break-word;
}

/* 2. Headings hyphenate in the page language (WA .prose-wa h1-h4, .wa-hero__title). Words under 10 characters
      stay whole, at least 6 characters before and 4 after the break (WA B-5: no "Steu-erfragen").
      overflow-wrap stays as the emergency brake where the browser has no hyphenation for the language. */
:where(h1, h2, h3, h4) {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 6 4;
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 4;
}

/* 3. Hero cap (passportsovereign 7607b23): the text blocks of a hero are never wider than the hero. In a flex
      or grid hero a long word otherwise sets the item's minimum width and pushes it past the screen; capped,
      rule 1 breaks the word instead. Media keep their own sizing. */
:where([class*="hero"]) > :where(:not(img, picture, video, svg, canvas, iframe)),
:where([class*="hero"]) :where(h1, h2, p) {
  max-width: 100%;
}