/* Typography fitting for the translated builds (loaded on every site except
   English). The Webflow layout is tuned to English word lengths; German,
   Vietnamese, Indonesian and Arabic run 20–60% longer and produce single words
   far wider than English ever does ("Zuverlässigkeit", "Elektroaltgeräte").

   Two things break as a result:
     1. Grid and flex children default to `min-width: auto`, so a column will
        not shrink below its longest word — the text overflows the column and
        paints over its neighbour instead of wrapping.
     2. The desktop navbar runs out of horizontal room once eight longer labels
        sit next to the logo, the language picker and the Contact button.

   This sheet fixes both without touching the English design. */

/* ---- 1. let long words wrap instead of overflowing --------------------- */

h1, h2, h3, h4, h5, h6,
p, li, td, th, a, button,
.header-lg, .header-md, .header-sm, .header-xs,
.body-base, .body-xs,
.explorer-title, .detail-title, .cat-content-title, .cat-card-title,
.category-card-name, .product-card-name, .dl-cat-title, .dl-subcat-title,
.mega-heading, .mega-link, .mega-fcard-name, .mega-feature-title,
.vt-footer-heading, .vt-footer-tagline, .cat-side-label {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Grid/flex children must be allowed to shrink, or the rule above never gets
   a chance to apply. */
.grid-12-column > *,
.grid-2-column > *,
.grid-3-column > *,
.vertical-flex,
.vertical-flex > *,
.title-text-wrapper,
.text-image-wrapper,
.cat-content,
.cat-card-body,
.product-info,
.mega-cat-block,
.mega-fcard-text,
.mega-feature-text,
.dl-row-name,
.vt-footer-col {
  min-width: 0;
}

/* Headings carry tight negative tracking tuned for English; at these sizes a
   long compound word still just barely overruns. Ease the tracking off and
   trim the display sizes a little so the wrap lands naturally. */
h1 {
  font-size: clamp(2.75rem, 6vw, 4rem);
  letter-spacing: -1.5px;
}

h2 {
  font-size: clamp(2.25rem, 4.4vw, 3.125rem);
  letter-spacing: -1px;
}

h3 {
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  letter-spacing: -.5px;
}

.explorer-title,
.detail-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---- 2. desktop navbar --------------------------------------------------
   Eight translated labels plus the language picker no longer fit at the
   original 24px link padding. Tighten the links only — the logo, picker and
   Contact button keep their sizing. Below 992px the menu becomes the mobile
   drawer, where none of this applies. */
@media screen and (min-width: 992px) {
  .nav-menu-wrapper {
    grid-column-gap: 0;
    column-gap: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  .nav-link {
    padding-left: 11px;
    padding-right: 11px;
    font-size: .8125rem;
    white-space: nowrap;
  }

  .nav-link-container {
    grid-column-gap: 14px;
    column-gap: 14px;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
  }

  .nav-logo-wrapper {
    flex: 0 0 auto;
  }

  .nav-logo {
    width: 180px;
  }

  .nav-button-wrapper {
    flex: 0 0 auto;
  }

  .nav-button-link {
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
  }
}

/* Narrow desktops: drop the link padding further before anything can clip. */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .nav-link {
    padding-left: 7px;
    padding-right: 7px;
    font-size: .75rem;
  }

  .nav-logo {
    width: 150px;
  }
}

/* ---- 3. buttons and cards ----------------------------------------------
   Translated call-to-action labels are longer than the English ones the pill
   buttons were sized for. */
.primary-button,
.dropdown-card-button,
.cat-side-download,
.dl-btn {
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
}

.dropdown-card-button {
  height: auto;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.25;
}

/* The stat counters must never wrap — they're numbers with a suffix. */
.stat-counter,
.stat-counter + * {
  overflow-wrap: normal;
  hyphens: manual;
}
