/*
 * Long-compound line breaking for the translated locales.
 *
 * LOADED ONLY ON NON-DEFAULT LANGUAGE ROUTES (see locale-typography.php), so
 * the accepted English deliverable's rendering is byte-for-byte unchanged.
 *
 * THE DEFECT. German and Spanish build single tokens far longer than any
 * English equivalent — "SNACKGEWOHNHEITEN" is 17 characters set as one word
 * where English has three ("HEALTHY SNACKING HABITS"). The frozen theme sets
 * the masthead title with `overflow-wrap: normal`, `word-break: normal` and
 * `hyphens: manual`, which is correct for English and means the German token
 * cannot break ANYWHERE. Its min-content width therefore became the page's
 * minimum width: 565px inside a 390px viewport at 44px type, and 1200px at
 * 100.8px type, which widened the enclosing plate past the viewport and gave
 * the whole document a horizontal scrollbar at 1440, 768 AND 390.
 *
 * THE FIX, AND WHY IT IS THIS ONE. `hyphens: auto` is first because it is the
 * typographically CORRECT answer, not merely a containment trick: with
 * `<html lang="de-DE">` already set, the browser applies German hyphenation
 * patterns and breaks the compound at a real morpheme boundary with a visible
 * hyphen, which is exactly what German typesetting does. `overflow-wrap:
 * break-word` follows only as a safety net for engines that ship no pattern
 * set for the locale — on its own it would break mid-morpheme with no hyphen,
 * which is wrong in German, so it must never be the only rule.
 *
 * `word-break: break-all` is deliberately NOT used: it breaks every word
 * opportunistically rather than only over-long ones, and would visibly
 * degrade the campaign typography that is this design's primary visual
 * element.
 */

[lang]:not([lang^="en"]) .eu-masthead__title,
[lang]:not([lang^="en"]) .eu-eyebrow,
[lang]:not([lang^="en"]) .eu-plate__inner > h1,
[lang]:not([lang^="en"]) .eu-plate__inner > h2,
[lang]:not([lang^="en"]) .eu-h1,
[lang]:not([lang^="en"]) .eu-h2,
[lang]:not([lang^="en"]) .eu-section__title {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/*
 * The plate is the element that was actually being widened. Capping it at the
 * available inline size stops a single stubborn descendant from ever making
 * the DOCUMENT wider than the viewport again, which is the failure that
 * produces a horizontal scrollbar on a phone. `min-width: 0` is the companion
 * that lets a flex/grid child actually shrink to it — without it, max-width
 * on the child is silently ignored inside a flex container.
 */
[lang]:not([lang^="en"]) .eu-plate__inner,
[lang]:not([lang^="en"]) .eu-plate__media {
	max-width: 100%;
	min-width: 0;
}