/* ============================================================
   Адаптив шапки для средних экранов.

   Почему ломалось: .header_content жёстко задаёт gap:92.5px и
   padding-left:92.5px, а .collapsible-menu не умеет сжиматься.
   Готовый адаптив в mystyles_phone.css заканчивается на 991.99px,
   следующий начинается с 1023.99px и описывает элементы старой
   шапки (.button_long, .button_balance) — текущие .header_content
   и .collapsible-menu там не упоминаются. В итоге от ~992px до
   ~1400px меню не помещалось и наезжало на аватар.

   Здесь ничего не ломается на широких экранах: clamp() возвращает
   ровно прежние значения (92.5px / 25px / 14px), как только ширины
   хватает. Отключается удалением одной строки в head.tpl.
   ============================================================ */

@media (min-width: 992px) {

  .header_content{
    gap: clamp(14px, 4.2vw, 92.5px);
    padding-left: clamp(0px, 4.2vw, 92.5px);
    /* Аватар (.miniprofile_menu) — position:absolute; right:15px, он выдернут
       из потока, и меню про него ничего не знает. Резервируем под него место
       отступом, иначе при сужении пункты уезжают ему под низ. */
    padding-right: 108px;
    min-width: 0;
  }

  .header_logo{flex: 0 0 auto}
  .header_logo img{height: clamp(34px, 3.4vw, 50px)}

  /* На сервере меню лежит не прямо в .header_content, а внутри .header_tabs.
     Тот сжимается (flex-shrink), а список внутри — нет, поэтому пункты
     вылезали за его границу и накрывали аватар справа. */
  .header_tabs{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header_tabs > .header_menu{flex: 1 1 auto; min-width: 0}
  .header_tabs > *:not(.header_menu){flex: 0 0 auto}

  .header_menu{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
  }
  .header_btns{min-width: 0; max-width: 100%}


  /* подменю у пунктов позиционируются абсолютно, поэтому никакого
     overflow здесь быть не должно — только сжатие */
  .wapper .header .collapsible-menu{
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(2px, 0.6vw, 10px);
    min-width: 0;
  }

  .wapper .header .collapsible-menu > li{min-width: 0}

  .wapper .header .collapsible-menu > li > a{
    padding: 10px clamp(9px, 1.5vw, 25px);
    font-size: clamp(11.5px, 1.05vw, 14px);
    letter-spacing: clamp(0px, 0.03vw, 0.4px);
    white-space: nowrap;
    max-width: 100%;
  }

}