/*--------------------------------------------*/
/* Главное горизонтальное меню (+ выпадающее) */
/*--------------------------------------------*/

/* --- 1. ОБЩИЕ СБРОСЫ И ШРИФТЫ --- */
html body #main_nav, html body #h_menu, html body #h_menu ul { 
  display: block; width: 100%; clear: both; box-sizing: border-box; 
}
html body #h_menu, html body #h_menu ul.level_1 li a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- 2. ДЕСКТОП: ГЛАВНАЯ СИНЯЯ ПОЛОСА --- */
html body #h_menu {
  max-width: 100%; margin: 0; padding: 6px 15px;
  background: #4A76A8; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: flex-start;
}
html body #h_menu ul.level_0 {
  list-style: none; padding: 0; margin: 0; justify-content: center;
  display: inline-flex; align-items: center; gap: 6px;
}
html body #h_menu ul.level_0 > li { display: block; position: relative; }

/* Принудительно уравниваем параметры ссылок и активного span */
html body #h_menu ul.level_0 > li > a,
html body #h_menu ul.level_0 > li > span.menu_active {
  display: block; 
  padding: 8px 16px; 
  color: #fff; 
  text-decoration: none;
  font-weight: 700; 
  font-size: 16px; 
  border-radius: 4px; 
  line-height: 1;
  transition: background .2s, color .2s, transform .2s;
  box-sizing: border-box;
}

/* Выделение обычных разделов на ПК при наведении с легким увеличением */
html body #h_menu ul.level_0 > li:not(.custom-home-item):hover > a, 
html body #h_menu ul.level_0 > li.is-open > a {
  background: #fff; 
  color: #4A76A8; 
  transform: translateY(-2px) scale(1.1); /* Приподнимаем и увеличиваем на 5% */
  box-shadow: 0 6px 12px rgba(0,0,0,.15);   /* Делаем тень чуть мягче и глубже */
}
html body #h_menu ul.level_0 li.parent > a::after,
html body #h_menu ul.level_0 li.parent.active > span::after { content: " ▼"; font-size: 9px; display: inline-block; margin-left: 6px; opacity: .8; }

/* 
  УСИЛЕННОЕ ПОСТОЯННОЕ ВЫДЕЛЕНИЕ АКТИВНОГО РАЗДЕЛA
  Уничтожаем темно-синий фон CMS и блокируем сдвиги
*/
html body #h_menu ul.level_0 > li.active,
html body #h_menu ul.level_0 > li.parent_active {
  background: transparent;
  box-shadow: none;
  transform: none;
}
html body #h_menu ul.level_0 > li.active > span.menu_active,
html body #h_menu ul.level_0 > li.parent_active > span.menu_active,
html body #h_menu .menu_active {
  background: #fff;
  color: #4A76A8;
  transform: none;
  box-shadow: none;
  display: block;
}

/* --- 3. ИКОНКА ДОМИКА --- */
html body #h_menu ul.level_0 li.custom-home-item a,
html body #h_menu ul.level_0 li.custom-home-item span.menu_active { 
  display: inline-flex;       /* Гарантирует идеальное центрирование иконки */
  align-items: center;
  justify-content: center;
  padding: 8px 12px; 
  background: transparent; 
  color: #fff; 
}

/* Стили для самой иконки */
html body #h_menu ul.level_0 li.custom-home-item a .glyphicon,
html body #h_menu ul.level_0 li.custom-home-item span.menu_active .glyphicon {
  display: inline-block; 
  vertical-align: middle; 
  position: relative; 
  top: 0;                     /* Сбросили -1px, так как flex-box выровняет ровно */
  font-size: 16px;
  transition: transform .2s cubic-bezier(.25,.8,.25,1);
}

/* Эффект увеличения при наведении только на кликабельную ссылку */
html body #h_menu ul.level_0 li.custom-home-item a:hover .glyphicon { 
  transform: scale(1.25); 
}

/* --- 4. ДЕСКТОП: ВЫПАДАЮЩЕЕ МЕНЮ --- */
html body #h_menu ul.level_1 {
  position: absolute; 
  top: 100%; 
  left: 0; 
  min-width: 220px; 
  z-index: 9999;
  margin: 0; 
  padding: 6px 0; 
  list-style: none; 
  background: #fff;
  border: 1px solid #e2e8f0; 
  border-radius: 6px; 
  box-shadow: 0 10px 25px rgba(0,0,0,.15); 
  
  /* --- НАЧАЛО ИЗМЕНЕНИЙ ДЛЯ АНИМАЦИИ --- */
  opacity: 0;                      /* Изначально полностью прозрачное */
  visibility: hidden;              /* Скрыто от кликов и мышки */
  transform: translateY(10px);     /* Сдвинуто на 10px вниз */
  transition: opacity .25s ease, transform .25s ease, visibility .25s; /* Плавность */
  /* --- КОНЕЦ ИЗМЕНЕНИЙ ДЛЯ АНИМАЦИИ --- */
}
html body #h_menu ul.level_1::before { content: ""; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; background: transparent; }

/* Показываем подменю при наведении (Новые правила вместо display: block) */
html body #h_menu ul.level_0 li.parent:hover > ul.level_1,
html body #h_menu ul.level_0 li.parent.active:hover > ul.level_1 { 
  opacity: 1;                      /* Становится видимым */
  visibility: visible;             /* Становится доступным для мышки */
  transform: translateY(0);        /* Плавно возвращается на свое место */
}

/* Очистка пунктов выпадающего списка от влияния активного родителя */
html body #h_menu ul.level_1 li {
  display: block;
  width: 100%;
  background: transparent;
  box-shadow: none;
  transform: none;
}
html body #h_menu ul.level_1 li a {
  display: block; 
  padding: 10px 20px; 
  color: #333; 
  text-decoration: none;
  font-size: 16px; 
  line-height: 1.4;
  transition: all .2s; 
  border-left: 3px solid transparent;
  background: transparent;
}
html body #h_menu ul.level_1 li a:hover { 
  background: #f4f7f9; 
  color: #4A76A8; 
  padding-left: 24px; 
  border-left-color: #4A76A8; 
}

/* --- 5. МОБИЛЬНАЯ ВЕРСИЯ (Экран <= 768px) --- */
@media (max-width: 768px) {
  html body #main_nav .menu__icon { display: block; width: 30px; height: 22px; position: relative; cursor: pointer; margin: 15px auto 15px 15px; z-index: 10000; }
  html body .menu__icon span { display: block; position: absolute; height: 3px; width: 100%; background: #4A76A8; border-radius: 9px; left: 0; transition: .25s ease-in-out; }
  html body .menu__icon span:nth-child(1) { top: 0; } html body .menu__icon span:nth-child(2), html body .menu__icon span:nth-child(3) { top: 9px; } html body .menu__icon span:nth-child(4) { top: 18px; }
  
  html body .menu__icon.is-active span:nth-child(1) { top: 9px; width: 0%; left: 50%; }
  html body .menu__icon.is-active span:nth-child(2) { transform: rotate(45deg); }
  html body .menu__icon.is-active span:nth-child(3) { transform: rotate(-45deg); }
  html body .menu__icon.is-active span:nth-child(4) { top: 9px; width: 0%; left: 50%; }

  html body #h_menu { display: none; flex-direction: column; align-items: flex-start; padding: 10px 0; border-radius: 0 0 6px 6px; box-shadow: 0 8px 16px rgba(0,0,0,.1); }
  html body #h_menu.is-active { display: flex; }
  html body #h_menu ul.level_0 { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  html body #h_menu ul.level_0 > li, html body #h_menu ul.level_0 > li > a, html body #h_menu ul.level_0 > li > span.menu_active { width: 100%; }
  html body #h_menu ul.level_0 > li > a, html body #h_menu ul.level_0 > li > span.menu_active { padding: 12px 20px; border-radius: 0; }
  
  html body #h_menu ul.level_0 > li:not(.custom-home-item):hover > a { transform: none; box-shadow: none; background: transparent; color: #fff; }
  html body #h_menu ul.level_0 > li.is-open > a, html body #h_menu ul.level_0 > li.active > span.menu_active { background: rgba(255,255,255,.15); }
  html body #h_menu ul.level_0 li.parent.is-open > a::after, html body #h_menu ul.level_0 li.parent.active.is-open > span::after { content: " ▲"; }

  html body #h_menu ul.level_1 { position: static; background: rgba(0,0,0,.08); box-shadow: none; border: none; border-radius: 0; padding: 0; display: none; opacity: 1; visibility: visible; transform: none; }
  html body #h_menu ul.level_1::before { display: none; }
  html body #h_menu ul.level_0 li.parent.is-open ul.level_1, html body #h_menu ul.level_0 li.parent.active.is-open ul.level_1 { display: block; }
  html body #h_menu ul.level_1 li a { padding: 10px 20px 10px 35px; color: #fff; border: none; }
  html body #h_menu ul.level_1 li a:hover { background: rgba(255,255,255,.1); padding-left: 35px; }
}

/* --- 6. ПОЛНЫЙ ЖЕСТКИЙ СБРОС ДЛЯ ДВИЖКА САЙТА --- */
html body #h_menu li.parent_active, html body #h_menu li.active, html body .home-icon-active { 
  background: transparent; 
  box-shadow: none;
  transform: none;
}
/* html body #h_menu li a { color: inherit; } */