/* ============================================================
   BEEST ENERGY — LANGUAGE MENU (top nav)
   Dropdown link showing the current language. Filled by controls.js.
   ============================================================ */

.lang { position: relative; flex: none; }

.lang__btn {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: .92rem; color: var(--text-muted);
  padding: .5em .9em; border-radius: 999px;
  border: 1px solid var(--line);
  background: none; cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.lang__btn:hover, .lang.open .lang__btn {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.lang__current { color: var(--text); white-space: nowrap; }
.lang__btn:hover .lang__current, .lang.open .lang__current { color: var(--accent); }
.lang__globe { width: 17px; height: 17px; color: var(--accent); flex: none; }
.lang__caret { width: 14px; height: 14px; flex: none; transition: transform .25s; }
.lang.open .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 2;
  min-width: 200px; padding: 8px;
  display: grid; gap: 4px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.lang.open .lang__menu { opacity: 1; pointer-events: auto; transform: none; }

.lang__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent; background: none;
  color: var(--text); cursor: pointer;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: .9rem;
  text-align: left; transition: background .2s, border-color .2s, color .2s;
}
.lang__opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.lang__opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.lang__opt b { font-size: 1.15rem; line-height: 1; font-weight: 400; }


/* nav brand logo */
.brand__logo { height: 40px; width: auto; display: block; }
@media (max-width: 760px) { .brand__logo { height: 34px; } }

@media (max-width: 420px) {
  .lang__btn { padding: .45em .7em; font-size: .85rem; gap: .35em; }
  .lang__globe { display: none; }
}

@media print { .lang__menu { display: none; } }