/* ==========================================================================
   CoreSpec 3D — i18n language menu + translation-safe layout
   Non-English copy (ES, DE, …) runs longer than English. Rules scoped to
   .i18n-translated let text-bearing containers grow/wrap instead of breaking.
   English (.i18n-translated absent) is never affected.
   ========================================================================== */

/* ---- Language menu (dropdown) ----------------------------------------- */
.lang-menu { position: relative; display: inline-flex; font-family: 'Fustat', Arial, sans-serif; user-select: none; }
.lang-menu__btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  color: var(--color-black-50, #6E6E73); transition: color 150ms ease;
}
.lang-menu__btn:hover { color: var(--color-black, #0d0a02); }
.lang-menu__btn svg:last-child { transition: transform 200ms ease; }
/* Flags */
.lang-menu__flag { display: inline-flex; }
.lang-menu__flag .flag {
  width: 18px; height: 13px; border-radius: 2px; display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}
.lang-menu__opt { display: flex; align-items: center; gap: 9px; }
.lang-menu__opt .flag { width: 20px; height: 14px; flex-shrink: 0; }
.lang-menu__btn { gap: 5px; }
.lang-menu.open .lang-menu__btn { color: var(--color-black, #0d0a02); }
.lang-menu.open .lang-menu__btn svg { transform: rotate(180deg); }

.lang-menu__list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 400;
  min-width: 150px; margin: 0; padding: 6px; list-style: none;
  background: var(--color-white, #fff); border: 1px solid rgba(13,10,2,0.1);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(13,10,2,0.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0ms linear 160ms;
}
.lang-menu.open .lang-menu__list { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 160ms ease; }
.lang-menu__opt {
  padding: 8px 12px; font-size: 14px; color: var(--color-black-75, #2F2F2F);
  border-radius: 5px; cursor: pointer; white-space: nowrap; transition: background 120ms ease;
}
.lang-menu__opt:hover { background: var(--color-grey, #F3F1EA); }
.lang-menu__opt.is-active { color: var(--color-black, #0d0a02); font-weight: 600; }
.lang-menu__opt.is-active::after { content: "✓"; float: right; color: var(--color-amber, #FEBF1C); margin-left: 12px; }

/* Over the dark homepage hero, make the trigger legible */
.nav--transparent .lang-menu__btn { color: rgba(255,255,255,0.72); }
.nav--transparent .lang-menu__btn:hover, .nav--transparent.open .lang-menu__btn { color: #fff; }

/* Fallback floating menu (only if no .nav__right found) */
.lang-menu--float { position: fixed; top: 14px; right: 16px; z-index: 300; background: rgba(251,250,245,0.95); padding: 4px 8px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
/* Mobile overlay + footer copies open upward-safe */
.lang-menu--overlay { margin-top: 8px; }
.lang-menu--overlay .lang-menu__btn, .lang-menu--footer .lang-menu__btn { color: var(--color-black-50, #6E6E73); }
.lang-menu--footer .lang-menu__list, .lang-menu--overlay .lang-menu__list { right: auto; left: 0; }
@media (max-width: 900px) { .nav__right .lang-menu { order: -1; } }

/* ---- Legal "English is authoritative" notice (translated pages only) --- */
.legal-es-notice {
  background: var(--color-grey, #F3F1EA); border-left: 3px solid var(--color-amber, #FEBF1C);
  padding: 12px 16px; margin: 0 0 32px; font-size: 13px; line-height: 1.6;
  color: var(--color-black-50, #6E6E73); border-radius: 4px;
}

/* ==========================================================================
   TRANSLATION-SAFE RULES — apply to any non-English language
   ========================================================================== */
.i18n-translated .btn { height: auto; line-height: 1.25; text-align: center; }
/* Nav CTAs ("Sign in" / "Contact" and their translations) must stay on one line
   and keep their natural width — otherwise a slightly tight nav shrinks them and
   the text wraps to two lines. Applies to every language, English included. */
.nav__right .btn { white-space: nowrap; flex-shrink: 0; }
.i18n-translated .btn--full,
.i18n-translated .tier-card .btn,
.i18n-translated .pricing-card .btn,
.i18n-translated .about-cta__btns .btn { white-space: normal; }

.i18n-translated .nav__links { gap: 22px; }
.i18n-translated .nav__links a { white-space: normal; }

/* Longer translated nav labels (e.g. FR "Choisissez un niveau", "Se connecter")
   need the width the 200px English spacer holds. Reclaim it for translated langs
   so the right-hand cluster (Contact / Sign in / lang menu) never overflows. */
.i18n-translated .nav__left { gap: 32px; }
.i18n-translated .nav__spacer { width: 24px; }

.i18n-translated .tier-card__title,
.i18n-translated .track-card h2,
.i18n-translated .feature-item__copy h3,
.i18n-translated .pricing-card__name { overflow-wrap: break-word; hyphens: auto; }

.i18n-translated .eyebrow,
.i18n-translated .tagline { white-space: normal; overflow-wrap: break-word; }

.i18n-translated .hero__headline,
.i18n-translated .tiers__title,
.i18n-translated .partners-hero h1 { overflow-wrap: break-word; }

.i18n-translated .hero__actions,
.i18n-translated .about-cta__btns,
.i18n-translated .cta-banner__actions { flex-wrap: wrap; }

/* German compounds are long — allow breaking anywhere as a last resort */
.lang-de .tier-card__title,
.lang-de .track-card h2,
.lang-de .feature-item__copy h3 { word-break: break-word; }

/* The nav logo must never absorb menu/link width and compress */
.nav__logo { flex: 0 0 auto !important; }
.nav__logo img { flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0; object-fit: contain; }

/* ---- RTL support (Arabic, next pass) ---------------------------------- */
[dir="rtl"] .lang-menu__list { right: auto; left: 0; }
[dir="rtl"] .lang-menu__opt.is-active::after { float: left; margin-left: 0; margin-right: 12px; }
/* Native RTL already reverses the flex row — an explicit row-reverse double-flips
   it and lands the logo in the middle of the nav. Keep the natural order so the
   logo sits at the start (far right) in RTL. */
[dir="rtl"] .detail__list li::before,
[dir="rtl"] .mission__list li::before { margin-left: 8px; margin-right: 0; }