/* ══════════════════════════════════════════════════════════════
   menu-lang.css — езиковите флагчета в менюто

   ПРЕДИ: две цветни кръгчета „🔴AT" и „🔵EN" — емоджита, които не се
   рисуват еднакво на всички системи.

   СЕГА: четири истински флага в един блок:
     🇬🇧 английски  → ../          (връзка — сочи към текущата версия)
     🇦🇹 немски     → без връзка   (езиковата версия още не е готова)
     🇮🇹 италиански → без връзка
     🇷🇺 руски      → без връзка

   Трите неактивни флагчета са <span class="ke-flag">, не <a>: не се
   натискат, нямат hover и не показват показалец. Като се направят
   преводите, връщаме <a href> и махаме класа .ke-flag.

   Флаговете са в еднаква рамка 24×16. Пропорциите им се различават
   (UK е 2:1, Италия 3:2), затова `object-fit: contain` ги смалява
   пропорционално — еднакво високи, но нито един разтегнат.
   ══════════════════════════════════════════════════════════════ */

/* ─── БЛОКЪТ ─── */
body.ke-modern-site #MainMenuId .ke-lang-block {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}

/* ─── ВСЯКО ФЛАГЧЕ — връзка или обикновена картинка ─── */
body.ke-modern-site #MainMenuId .ke-lang-block a,
body.ke-modern-site #MainMenuId .ke-lang-block .ke-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease;
}

body.ke-modern-site #MainMenuId .ke-lang-block img {
  display: block;
  width: 24px !important;
  height: 16px !important;
  max-width: 24px !important;
  max-height: 16px !important;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .30);
  object-fit: contain;
  object-position: center;
}

/* ─── АКТИВНИЯТ ЕЗИК — със златна рамка ─── */
body.ke-modern-site #MainMenuId .ke-lang-block a.is-active img {
  box-shadow: 0 0 0 2px #ffd27e;
}

/* ─── ПРИ ПОСОЧВАНЕ — само връзките реагират ─── */
body.ke-modern-site #MainMenuId .ke-lang-block a:hover {
  transform: translate3d(0, -2px, 0);
}

/* ══════════════════════════════════════════════════════════════
   ФЛАГЧЕТА БЕЗ ВРЪЗКА

   Докато не са готови езиковите версии, немското, италианското и
   руското флагче са само картинки — не водят никъде.

   Затова: без показалец, без реакция на мишка и на докосване, и
   леко по-бледи, за да се вижда, че не са активни.
   ══════════════════════════════════════════════════════════════ */
body.ke-modern-site #MainMenuId .ke-lang-block .ke-flag {
  cursor: default;
  pointer-events: none;
}

body.ke-modern-site #MainMenuId .ke-lang-block .ke-flag img {
  opacity: .75;
}

body.ke-modern-site #MainMenuId .ke-lang-block .ke-flag:hover {
  transform: none;
}

/* ─── ПО-МАЛКИ НА ТЕСЕН ЕКРАН ─── */
@media (max-width: 1100px) {
  body.ke-modern-site #MainMenuId .ke-lang-block {
    margin-left: 10px;
    padding-left: 8px;
    gap: 3px;
  }
  body.ke-modern-site #MainMenuId .ke-lang-block a,
  body.ke-modern-site #MainMenuId .ke-lang-block .ke-flag,
  body.ke-modern-site #MainMenuId .ke-lang-block img {
    width: 20px !important;
    height: 14px !important;
    max-width: 20px !important;
    max-height: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ke-modern-site #MainMenuId .ke-lang-block a:hover { transform: none; }
}