/* ============================================================
   PRIMEWOOD — i18n layout support (multilingual: EN / FR / NL / DE)
   ============================================================ */

/* ---------- Mobile-menu language switcher ---------- */
.lang--mobile{display:inline-flex;align-items:center;gap:9px;margin-top:28px;
  font-family:var(--mono);font-size:15px;letter-spacing:.12em}
.lang--mobile b{color:var(--ink);font-weight:600}
.lang--mobile span{color:var(--ink-3)}
.lang--mobile .sep{color:var(--line)}
.lang--mobile b[data-lang],.lang--mobile span[data-lang]{cursor:pointer;padding:2px 0}

/* ============================================================
   FORMAT PROTECTION — keep one-line elements on one line across
   all languages (FR/NL/DE labels run longer than EN).
   ============================================================ */

/* Primary nav: every item stays on a single line; gap flexes with width */
.nav{gap:clamp(18px,2.2vw,32px)}
.nav a{white-space:nowrap}

/* Pill-button label roll relies on single-line stacked spans —
   longer translations must not wrap (would clip or misalign the roll) */
.btn .btn__t{white-space:nowrap}
.btn .btn__t > span{white-space:nowrap}

/* Small mono/eyebrow labels & arrow links: keep on one line.
   NB: .eyebrow is intentionally excluded — the hero eyebrow is a long
   phrase that must wrap responsively; the short section eyebrows never
   wrap anyway, so they stay consistent across languages. */
.stat .l,
.usp__item .n,
.cat-opts__l,
.ci-cat,
.num,
.latin,
.discover{white-space:nowrap}

/* Stat figures never wrap (e.g. "FTL/LTL") */
.stat .n{white-space:nowrap}

/* Hero eyebrow: keep on ONE line in every language. Ample width in the
   hero, so trim tracking for the longer languages and shrink slightly on
   narrow screens rather than wrapping. */
.hero__eyebrow{white-space:nowrap}
html[lang="fr"] .hero__eyebrow,
html[lang="nl"] .hero__eyebrow,
html[lang="de"] .hero__eyebrow{letter-spacing:.14em}
@media (max-width:560px){
  .hero__eyebrow{font-size:10px;letter-spacing:.1em}
  .hero__eyebrow::before{width:16px}
}
@media (max-width:380px){
  .hero__eyebrow{font-size:9px;letter-spacing:.06em;gap:.5em}
}

/* The longer languages: tighten the nav a touch more at mid widths
   so the row keeps fitting between the brand and the CTA. */
@media (min-width:761px) and (max-width:1180px){
  html[lang="fr"] .nav,
  html[lang="nl"] .nav,
  html[lang="de"] .nav{gap:clamp(14px,1.6vw,22px)}
  html[lang="fr"] .nav a,
  html[lang="nl"] .nav a,
  html[lang="de"] .nav a{font-size:13.5px}
}