/* ============================================================
   HELLSING — общие элементы верхнего меню.
   Подключается ко ВСЕМ шаблонам: лендинг и статические страницы
   грузят site.css, вход/регистрация и кабинет — cabinet.css,
   админка — admin.css. Держать эти правила в каждом из трёх файлов
   означало три копии, которые расходятся при первой же правке.
   ============================================================ */

/* ---------- Логотип (все страницы, кроме лендинга) ---------- */
.hd-logo{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;
  transition:filter .25s}
.hd-logo__emblem{width:36px;height:42px;object-fit:contain;flex:0 0 36px;
  filter:drop-shadow(0 3px 10px rgba(255,181,96,.26))}
.hd-logo__word{width:124px;aspect-ratio:900/175;height:auto;opacity:.94}
.hd-logo:hover .hd-logo__word{opacity:1}
.hd-logo:hover .hd-logo__emblem{filter:drop-shadow(0 3px 14px rgba(255,181,96,.5))}

/* ---------- Пункт меню без ссылки (форум ещё не подключён) ---------- */
.nav__soon{color:rgba(203,199,192,.42);cursor:default;white-space:nowrap}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
   ============================================================ */
.lang{position:relative;flex-shrink:0}

.lang__btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 13px;
  border:1px solid rgba(255,255,255,.1);background:rgba(12,13,15,.66);
  font-family:'Forum',Georgia,serif;font-size:15px;letter-spacing:.7px;
  color:rgba(203,199,192,.92);cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s,background .2s;
}
.lang__btn:hover,.lang[open] .lang__btn{
  border-color:rgba(255,181,96,.5);color:#f2ede8;background:rgba(18,15,12,.8);
}
.lang__flag{font-size:15px;line-height:1}
/* Стрелка разворачивается, когда список открыт — подсказка о состоянии */
.lang__arw{width:9px;height:9px;opacity:.6;transition:transform .2s}
.lang[open] .lang__arw{transform:rotate(180deg)}

.lang__list{
  position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:186px;
  border:1px solid rgba(255,255,255,.1);background:rgba(9,8,10,.97);
  box-shadow:0 18px 44px rgba(0,0,0,.62);
  backdrop-filter:blur(9px);
  padding:5px;
}
.lang__i{
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  font-size:14.5px;color:rgba(203,199,192,.86);white-space:nowrap;
  transition:background .16s,color .16s;
}
.lang__i:hover{background:rgba(255,255,255,.05);color:#f2ede8}
.lang__i.is-on{color:#ffb560;background:linear-gradient(90deg,rgba(115,71,11,.3),rgba(115,71,11,0))}
/* Код языка справа — колонка выравнивается, глазу легче сканировать */
.lang__code{margin-left:auto;font-size:11.5px;letter-spacing:1px;opacity:.55}

/* details/summary даёт открытие/закрытие без JS; убираем родной маркер */
.lang__btn::-webkit-details-marker{display:none}
.lang__btn::marker{content:''}

@media (max-width:820px){
  .hd-logo__word{width:104px}
  .hd-logo__emblem{width:30px;height:35px;flex:0 0 30px}
  .lang__list{right:auto;left:0}
}



/* ============================================================
   РАСКЛАДКА ШАПКИ — три колонки
   ============================================================
   Раньше меню центрировалось по странице через position:absolute.
   Это ломалось на длинных языках: украинское «СПІЛЬНОТА» наезжало
   на переключатель языка, потому что абсолютный элемент не занимает
   места и соседи о нём не знают.

   Сетка 1fr | auto | 1fr решает это структурно: боковые колонки
   равны, поэтому средняя стоит ровно по центру СТРАНИЦЫ (как в макете),
   но при этом колонки физически не могут пересечься — какой бы
   длины ни оказался перевод. */
.site-head .header__inner{
  display:grid;
  /* minmax(auto,1fr): колонки стремятся к равной ширине (меню по центру
     страницы), но НЕ ужимаются меньше своего содержимого — иначе на
     длинных языках кнопку кабинета срезало на 17px. */
  grid-template-columns:minmax(auto,1fr) auto minmax(auto,1fr);
  align-items:center;gap:24px;position:relative;min-height:52px;
}
.site-head .nav{
  position:static;transform:none;
  grid-column:2;justify-self:center;
}
.site-head .hd-logo{grid-column:1;justify-self:start}
.hd-actions{
  grid-column:3;justify-self:end;
  display:flex;align-items:center;gap:16px;flex-shrink:0;
}
.btn-login{flex-shrink:0}

/* Узкие экраны: меню уезжает на свою строку, иначе три колонки
   не помещаются и текст начинает переноситься по буквам. */
@media (max-width:1080px){
  .site-head .header__inner{grid-template-columns:1fr auto;row-gap:16px}
  .site-head .nav{grid-column:1 / -1;grid-row:2;flex-wrap:wrap;
    justify-content:center;gap:20px;font-size:15px}
  .hd-actions{grid-column:2;grid-row:1}
}

/* ---------- Шапка на телефоне ---------- */
@media (max-width:640px){
  /* Кнопка кабинета вылезала за экран на 22px */
  .btn-login{padding:11px 14px;font-size:14px;letter-spacing:.5px}
  .btn-login img{width:15px;height:15px}
  .site-head .nav{gap:14px;font-size:14px}
  .hd-actions{gap:10px}
  .lang__btn{padding:9px 10px;font-size:14px}
}

/* Список языков: right:0 держит его в пределах экрана. Прежнее left:0
   на узких экранах выталкивало список за правый край на 83px. */
@media (max-width:820px){
  .lang__list{right:0;left:auto;min-width:170px}
}