/* ==========================================================================
   RITEKO — шапка сайта (все страницы)

   Шапка собрана шаблоном Elementor ID 30. Здесь только то, что
   не задаётся в конструкторе: поведение телефона на узких экранах
   и размеры зон нажатия.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Телефон в шапке

   Раньше виджет был скрыт флагами hidden-tablet / hidden-mobile —
   для B2B-сайта это потеря основного канала связи. Флаги сняты,
   а на узких экранах номер подаётся компактной кнопкой.
   -------------------------------------------------------------------------- */
.rtk-hd-phone p{margin:0;white-space:nowrap}

/* На десктопе высота строки не должна увеличивать шапку:
   прижимаем ссылку к высоте содержимого. */
.rtk-hd-phone a{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;
  text-decoration:none;
  transition:color .2s,background-color .2s;
}
/* Увеличенная зона нажатия — там, где нажимают пальцем */
@media (max-width:1024px){
  .rtk-hd-phone a{min-height:44px}
}
.rtk-hd-phone a:hover,
.rtk-hd-phone a:focus{color:#7FC0EE}

/* Планшет: номер остаётся текстом, но компактнее */
@media (max-width:1024px){
  .rtk-hd-phone a{font-size:15px}
}

/* Узкие экраны: номер в виде кнопки с рамкой.
   Текст сохраняется — он короткий и читается,
   а рамка делает элемент очевидно нажимаемым. */
@media (max-width:767px){
  .rtk-hd-phone{margin:0}
  .rtk-hd-phone a{
    font-size:14px;letter-spacing:-.01em;
    padding:0 14px;min-height:40px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:4px;
    background:rgba(255,255,255,.08);
  }
  .rtk-hd-phone a:hover,
  .rtk-hd-phone a:focus{
    background:rgba(255,255,255,.18);
    border-color:#fff;color:#fff;
  }
}

/* Очень узкие экраны: оставляем только значок телефона,
   чтобы шапка не переносилась на вторую строку. */
@media (max-width:400px){
  .rtk-hd-phone a{
    font-size:0;                        /* прячем цифры */
    width:40px;padding:0;
  }
  .rtk-hd-phone a::before{
    content:"";
    width:18px;height:18px;
    background-color:#fff;
    -webkit-mask:var(--rtk-tel) center/contain no-repeat;
    mask:var(--rtk-tel) center/contain no-repeat;
  }
}
:root{
  --rtk-tel:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.3 0 .7-.2 1l-2.3 2.1z"/></svg>');
}

/* --------------------------------------------------------------------------
   Кнопка мобильного меню: доводим до 44px.
   Только там, где она действительно используется — на узких
   экранах. На десктопе работает обычное меню.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .elementor-location-header .elementor-menu-toggle{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;
    background:transparent;
    border-radius:4px;
  }
  .elementor-location-header .elementor-menu-toggle:hover,
  .elementor-location-header .elementor-menu-toggle:focus{
    background:rgba(255,255,255,.12);color:#fff;
  }
  /* Значок — SVG с заливкой rgb(21,34,51) от Elementor:
     на тёмно-синей шапке он практически не виден.
     Перекрашиваем с запасом по специфичности. */
  .elementor-location-header div.elementor-menu-toggle svg.e-font-icon-svg,
  .elementor-location-header div.elementor-menu-toggle svg.e-font-icon-svg path,
  .elementor-location-header div.elementor-menu-toggle svg,
  .elementor-location-header div.elementor-menu-toggle svg path{
    fill:#fff;
  }
  .elementor-location-header div.elementor-menu-toggle i{color:#fff}
}

/* --------------------------------------------------------------------------
   Цвет значка меню

   SVG значка не имеет собственного fill — он наследует color
   кнопки через currentColor. Поэтому красить надо именно color
   у самого тоггла, и вне медиазапроса — иначе правило Elementor,
   объявленное позже, оказывается сильнее.
   -------------------------------------------------------------------------- */
.elementor-location-header .elementor-menu-toggle{color:#fff}
.elementor-location-header .elementor-menu-toggle svg{fill:currentColor}

/* Выпадающее мобильное меню на тёмном фоне шапки */
.elementor-location-header .elementor-nav-menu--dropdown{
  background-color:#0F3350;
}
.elementor-location-header .elementor-nav-menu--dropdown a{
  color:#E4EDF4;
}
.elementor-location-header .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.highlighted,
.elementor-location-header .elementor-nav-menu--dropdown a:focus{
  background-color:#1B5378;color:#fff;
}

/* --------------------------------------------------------------------------
   Раскладка шапки на узких экранах

   Контейнер логотипа растягивался на всю ширину строки (343px из 390),
   выталкивая кнопку меню на x=391 и телефон на x=718 — оба
   оказывались за правым краем экрана и были недоступны.
   Задаём явное распределение: логотип по содержимому,
   остальное — вправо.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .elementor-location-header [data-id="rtkhdmain"] > .e-con-inner,
  .elementor-location-header [data-id="rtkhdmain"]{
    flex-wrap:nowrap;
  }
  /* логотип — только своя ширина */
  .elementor-location-header [data-id="rtkhdlogo"]{
    flex:0 0 auto;width:auto;max-width:60%;
  }
  /* блок меню — по содержимому, прижат вправо */
  .elementor-location-header [data-id="rtkhdnavc"]{
    flex:0 0 auto;width:auto;margin-left:auto;
  }
  /* телефон — по содержимому, рядом с кнопкой меню */
  .elementor-location-header [data-id="rtkhdcta"]{
    flex:0 0 auto;width:auto;
    display:flex;align-items:center;gap:8px;
  }
}

/* Логотип: не даём ему растягиваться на узких экранах */
@media (max-width:767px){
  .elementor-location-header [data-id="rtkhdl01"],
  .elementor-location-header [data-id="rtkhdl01"] a{width:auto;display:inline-block}
  .elementor-location-header img{max-height:38px;width:auto}
}