/*
 * XMPP-HOM IT — site-wide text wrapping correction.
 * Prevents words from being split into one-letter fragments on narrow screens.
 * Loaded after the generated stylesheet and intentionally uses !important.
 */

:root {
  --site-mobile-title-min: 1.9rem;
  --site-mobile-title-fluid: 9.25vw;
  --site-mobile-title-max: 2.4rem;
}

body :where(
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd,
  a, span, strong, em, small,
  label, legend, button, summary,
  blockquote, figcaption,
  .eyebrow, .kicker, .lead, .lede, .intro,
  [class*="title"], [class*="heading"], [class*="caption"]
) {
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
}

/* Long technical values remain safely wrappable where this is actually needed. */
body :where(pre, code, kbd, samp, .mono, .url, [data-wrap-anywhere]) {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  hyphens: none !important;
}

/* Breadcrumbs: previous levels and separators never split inside a word. */
:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
),
:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) > :where(ol, ul) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  min-width: 0 !important;
  column-gap: .62rem !important;
  row-gap: .32rem !important;
}

:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) > :where(a, span, li),
:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) > :where(ol, ul) > li,
:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) a {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* The current, usually longest breadcrumb may wrap, but only between words. */
:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) > :last-child,
:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) > :where(ol, ul) > li:last-child {
  flex: 1 1 15rem !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) > :last-child :where(a, span),
:where(
  .breadcrumb,
  .breadcrumbs,
  [class*="breadcrumb"],
  nav[aria-label*="breadcrumb" i],
  nav[aria-label*="хлеб" i]
) > :where(ol, ul) > li:last-child :where(a, span) {
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Keep the site name intact. */
:where(.brand, .site-brand, [class*="site-brand"], [class*="brand-name"]) {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (max-width: 560px) {
  /* Large titles are reduced just enough for long Russian words to fit whole. */
  :where(main h1, article h1, .hero h1, [class*="hero"] h1, [class*="case"] h1) {
    max-inline-size: 100% !important;
    font-size: clamp(
      var(--site-mobile-title-min),
      var(--site-mobile-title-fluid),
      var(--site-mobile-title-max)
    ) !important;
    line-height: 1.07 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  :where(main h2, article h2, section h2) {
    max-inline-size: 100% !important;
    font-size: clamp(1.65rem, 7.8vw, 2.1rem) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  :where(main h3, article h3, section h3) {
    max-inline-size: 100% !important;
    font-size: clamp(1.3rem, 6.4vw, 1.65rem) !important;
    line-height: 1.16 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}