/* Shared homepage/site-header language picker. Keep legacy visual tokens intact. */
.lp-lang-wrap {
  position: relative;
  display: inline-flex;
}

.lp-lang {
  font: 500 13px/1 var(--wb-font-sans);
  color: var(--wb-ink-500);
  padding: 6px 8px 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: none;
  transition: color var(--wb-dur-fast), background var(--wb-dur-fast);
}
.lp-lang-cur {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  line-height: 1;
}
.lp-lang-cur .code { font: 700 11px/1 var(--wb-font-sans); letter-spacing: 0.08em; color: var(--wb-navy-900); }
.lp-lang-cur .native { font: 500 11px/1 var(--wb-font-sans); color: var(--wb-ink-500); }
.lp-lang-flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(11, 31, 59, 0.10);
  display: block;
}
.lp-lang:hover, .lp-lang.is-open { color: var(--wb-navy-900); background: var(--wb-navy-50); }
.lp-lang svg { transition: transform var(--wb-dur-fast); opacity: 0.55; }
.lp-lang.is-open svg { transform: rotate(180deg); }

.lp-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--wb-border);
  border-radius: 10px;
  box-shadow:
    0 1px 1px rgba(11, 31, 59, 0.04),
    0 16px 40px -12px rgba(11, 31, 59, 0.20);
  z-index: 90;
  animation: lpLangFade 160ms var(--wb-ease-out);
}
@keyframes lpLangFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wb-navy-900);
  transition: background var(--wb-dur-fast);
}
.lp-lang-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.lp-lang-item .lp-lang-code {
  font: 700 11px/1 var(--wb-font-sans);
  letter-spacing: 0.10em;
  color: var(--wb-navy-900);
}
.lp-lang-item .lp-lang-native {
  font: 500 13px/1 var(--wb-font-sans);
  color: var(--wb-ink-600);
}
.lp-lang-item .lp-lang-flag {
  width: 26px;
  height: 18px;
}
.lp-lang-item:hover { background: var(--wb-navy-50); }
.lp-lang-item.is-selected {
  background: rgba(22, 69, 122, 0.06);
  color: var(--wb-navy-900);
}
.lp-lang-item.is-selected .lp-lang-native { color: var(--wb-navy-900); font-weight: 600; }

/* Options can be links on server-rendered article routes. */
.lp-lang-item { text-decoration: none; }
.lp-lang:focus-visible, .lp-lang-item:focus-visible {
  outline: 3px solid var(--wb-focus-ring, #3b78b8);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .lp-lang {
    display: inline-flex;
    min-width: 0;
    height: 38px;
    padding: 6px 7px 6px 9px;
    gap: 6px;
    border: 1px solid var(--wb-border);
    background: rgba(255, 255, 255, 0.86);
  }
  .lp-lang-cur .native { display: none; }
  .lp-lang-cur .code { font-size: 10px; letter-spacing: 0.06em; }
  .lp-lang-flag {
    width: 21px;
    height: 15px;
  }
  .lp-lang-menu {
    position: fixed;
    top: 62px;
    right: var(--gutter, 24px);
    left: var(--gutter, 24px);
    min-width: 0;
    max-height: min(360px, calc(100vh - 84px));
    overflow-y: auto;
  }
  .lp-lang-item {
    min-height: 44px;
    padding: 10px 12px;
  }
}