/* ---------- LANGUAGE SELECTOR (segmented pill) ---------- */
.lang-selector{
  display:inline-flex;
  align-items:center;
  gap:2px;
  height:42px;
  padding:3px;
  background:var(--gray-100);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.lang-option{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:100%;
  padding:0 14px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out;
}
.lang-option:hover{ color:var(--ink); background:var(--gray-200); }
.lang-option.is-active{
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.lang-option.is-active:hover{ background:var(--white); color:var(--ink); }

.lang-flag{
  width:20px;
  height:20px;
  border-radius:50%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  flex-shrink:0;
  display:block;
}
.lang-flag svg{ width:100%; height:100%; display:block; object-fit:cover; }

.lang-name{ line-height:1; }

/* Compact variant: flags only, no visible label — used inside the fixed nav
   where horizontal space is limited. Full language name stays available to
   assistive tech via aria-label/title, and reappears in any non-compact
   instance of this component (e.g. a footer switcher). */
.lang-selector.compact{ height:38px; padding:3px; gap:0; }
.lang-selector.compact .lang-option{ padding:0 9px; gap:0; }
.lang-selector.compact .lang-name{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:860px){
  .lang-selector{
    height:auto;
    flex-wrap:wrap;
    border-radius:16px;
    gap:4px;
  }
  .lang-option{ height:38px; }
  .lang-selector.compact{ flex-wrap:nowrap; }
}