/* ============================================================
   i18n.css — i18n-specific styles
   - Language switcher
   - RTL overrides (Arabic, Hebrew)
   - Per-script font rules (CJK, Arabic, Hebrew)
   - Defensive layout (long-translation safety)
   ============================================================ */

/* ───────────────────── Language popup (first-visit nudge) ───────────────────── */
.lang-popup {
  position: fixed;
  z-index: 9000;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.lang-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-popup__card {
  position: relative;
  width: min(360px, calc(100vw - 2.5rem));
  background: #fff;
  color: var(--text-primary, #111);
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 30px 60px -20px rgba(20, 40, 30, 0.22), 0 8px 20px -8px rgba(20, 40, 30, 0.12);
  border: 1px solid rgba(20, 40, 30, 0.06);
  background-image: linear-gradient(90deg, var(--mint, #7CC4A3), var(--mint-dark, #2F8F6B));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top;
}

.lang-popup__close {
  position: absolute;
  inset-block-start: 0.65rem;
  inset-inline-end: 0.65rem;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-secondary, #555);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
  padding: 0;
}

.lang-popup__close:hover,
.lang-popup__close:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.lang-popup__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(124, 196, 163, 0.12);
  color: var(--mint-dark, #2F8F6B);
  margin-block-end: 0.85rem;
}

.lang-popup__eyebrow {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-dark, #2F8F6B);
  margin-block-end: 0.4rem;
}

.lang-popup__title {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  color: var(--text-primary, #111);
  letter-spacing: -0.01em;
}

.lang-popup__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--mint-dark, #2F8F6B);
}

.lang-popup__body {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary, #555);
  margin: 0 0 1rem;
}

.lang-popup__switcher-slot {
  margin-block-end: 0.6rem;
}

.lang-popup__switcher-slot .lang-switcher__trigger {
  width: 100%;
  max-width: none;
}

.lang-popup__dismiss {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.5rem 0;
  font: inherit;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.8rem;
  color: var(--text-secondary, #777);
  cursor: pointer;
  text-align: center;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.lang-popup__dismiss:hover,
.lang-popup__dismiss:focus-visible {
  opacity: 1;
  text-decoration: underline;
  outline: none;
}

@media (max-width: 640px) {
  .lang-popup {
    inset-block-end: 0.75rem;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, 12px);
  }
  .lang-popup.is-visible {
    transform: translate(-50%, 0);
  }
  .lang-popup__card {
    width: min(380px, calc(100vw - 1.5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-popup { transition: opacity 0.15s ease; transform: none; }
  .lang-popup.is-visible { transform: none; }
}

[dir="rtl"] .lang-popup {
  inset-inline-end: 1.25rem;
  inset-inline-start: auto;
}

/* ───────────────────── Language switcher (footer dropdown + search) ───────────────────── */
.footer__nav-section--lang {
  min-width: 220px;
}

.lang-switcher {
  position: relative;
  font-size: 0.875rem;
}

.lang-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  white-space: nowrap;
  width: 100%;
  max-width: 240px;
  text-align: start;
}

.lang-switcher__trigger:hover,
.lang-switcher__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.lang-switcher__trigger-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.lang-switcher__trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-switcher__chevron {
  transition: transform 0.18s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.lang-switcher[data-open="true"] .lang-switcher__chevron {
  transform: rotate(180deg);
}

.lang-switcher__panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);   /* opens UPWARD from footer */
  inset-inline-start: 0;
  width: min(320px, calc(100vw - 2rem));
  max-height: min(420px, 70vh);
  background: #fff;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}

.lang-switcher__panel[hidden] {
  display: none !important;
}

.lang-switcher__search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.55);
}

.lang-switcher__search {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  color: #111;
  padding: 0;
  min-width: 0;
}

.lang-switcher__search::-webkit-search-cancel-button {
  cursor: pointer;
}

.lang-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
}

.lang-switcher__item {
  margin: 0;
}

.lang-switcher__item[hidden] {
  display: none;
}

.lang-switcher__item a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  outline: none;
}

.lang-switcher__item a:hover,
.lang-switcher__item a:focus-visible {
  background: rgba(0, 0, 0, 0.05);
}

.lang-switcher__item.is-active a {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.04);
}

.lang-switcher__item img {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  object-fit: cover;
}

/* RTL: flip panel anchoring */
[dir="rtl"] .lang-switcher__panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Narrow viewports — full-width panel */
@media (max-width: 480px) {
  .lang-switcher__panel {
    width: calc(100vw - 1rem);
    inset-inline-start: 0;
  }
}

/* ───────────────────── Fluid responsive type ─────────────────────
   Ensures no overflow on German/Finnish/Russian (longer strings).
   Uses clamp() to scale headings smoothly with viewport.
   ============================================================ */

/* Allow flex/grid children to shrink below content width */
.container,
.wrap,
.wrap-narrow,
main,
section,
header,
footer,
.hero-content,
.hero-inner,
.shaped-wrap,
.shaped-copy,
.about-hero__content,
.contact-hero__content,
.tap-shell,
.cta-shell,
.metrics-inner,
.btn-row,
nav,
ul,
li {
  min-width: 0;
}

/* Buttons: allow wrap on overflow, never force horizontal scroll */
button,
.btn,
a.btn,
[role="button"] {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
  max-width: 100%;
}

/* Body text wraps gracefully + hyphenates per-language */
p, li, dd, dt, td, th, label, span {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

/* Headings — balance lines, never overflow */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
  max-width: 100%;
}

/* Hero headings stay centered */
.hero-heading,
.hero-h1,
.hero h1,
.hero-content h1,
.about-hero h1,
.contact-hero h1 {
  text-align: center;
  margin-inline: auto;
}

/* Headlines must allow wrapping. Site uses --font-h1 clamp() already — keep that. */
.hero-heading,
.hero-h1,
.hero h1,
.hero-content h1,
.about-hero h1,
.contact-hero h1,
h1, h2, h3, h4, h5, h6 {
  white-space: normal;
}

/* On long-lang locales, headline shrinks slightly to fit */
:lang(de) .hero-heading,
:lang(nl) .hero-heading,
:lang(fi) .hero-heading,
:lang(ru) .hero-heading,
:lang(de) .hero-h1,
:lang(nl) .hero-h1,
:lang(ru) .hero-h1 {
  font-size: clamp(2rem, 5.5vw + 0.5rem, 3.75rem);
}

/* btn-row should wrap on narrow viewports */
.btn-row,
.hero-btn-row,
.hero-actions,
.hero-store-buttons {
  flex-wrap: wrap;
}

/* Inputs */
input, textarea, select {
  min-width: 0;
  max-width: 100%;
}

/* Images never exceed container */
img {
  max-width: 100%;
}

/* Long-language tweaks — German/Finnish/Polish/Russian need extra space */
:lang(de) h1, :lang(de) h2,
:lang(fi) h1, :lang(fi) h2,
:lang(nl) h1, :lang(nl) h2,
:lang(ru) h1, :lang(ru) h2 {
  word-break: break-word;
}

/* CJK never break mid-character; rely on natural wrap */
:lang(ja) p, :lang(ja) li,
:lang(zh) p, :lang(zh) li,
:lang(ko) p, :lang(ko) li {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ───────────────────── RTL overrides ───────────────────── */
[dir="rtl"] .navbar__nav ul,
[dir="rtl"] .navbar__menu-list {
  flex-direction: row-reverse;
}

[dir="rtl"] .arrow-icon,
[dir="rtl"] .noise-graphic,
[dir="rtl"] .problem-icon {
  transform: scaleX(-1);
}

[dir="rtl"] .skip-link {
  inset-inline-start: 1rem;
  inset-inline-end: auto;
}

/* Reverse btn-row order so primary lands at correct edge */
[dir="rtl"] .btn-row {
  flex-direction: row-reverse;
}

/* Mirror SVG scroll-lines on Leda page */
[dir="rtl"] .motion-scroll-line {
  transform: scaleX(-1);
}

/* Footer flag spacing — flip margin */
[dir="rtl"] .footer__flag {
  margin-inline: 0 0.25rem;
}

/* ───────────────────── Per-script fonts ───────────────────── */
:lang(ar),
:lang(he) {
  font-family: 'Noto Sans Arabic', 'Noto Sans Hebrew', system-ui, sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
}

:lang(ja) {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  line-height: 1.75;
  word-break: keep-all;
}

:lang(zh) {
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  line-height: 1.75;
}

:lang(ko) {
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  line-height: 1.75;
  word-break: keep-all;
}

:lang(ru),
:lang(pl) {
  line-height: 1.65;
}