/* ══════════════════════════════════════════════════════════════
   menu-weight.css — менюто: тегло, златен hover и четливост

   ─── 1. ТЕГЛО ───
   Етикетите бяха с тегло 300 при 15px. Думите са къси и с главни
   букви, а тънката черта при тях изглежда немощна върху снимка.
   Сега са 500 — плътно, но не крещи. При посочване 600.

   ─── 2. HOVER ЦВЯТ ───
   Шаблонът носи вграден стил в самата страница:
     .MainMenuLinks a:hover { color: #FF9CE3 }   (розово-лилаво)
   То не е в CSS файл, затова се налага override с !important.
   Новото е златното на сайта (#ffd27e) — контраст 8.22:1 на
   тъмнозелено, срещу 6.18:1 за розовото. При посочване текстът
   СВЕТВА вместо да избледнее.

   ─── 3. ЧЕТЛИВОСТ ВЪРХУ СВЕТЛИ ХЕРОТА ───
   Измерена яркост на горната лента на херотата:
     publishingcons 161 (светло) · gallery 141 · eventsorg 138
     itzoom 113 · publishing 109 · contacts 102 · about 95
     sdgstate 80 · itweb 53
   При плътност 0.24 (Home) бялото дава само 1.56:1 върху бяло —
   под минимума. Затова добавяме тъмен градиент ЗАД менюто, който
   избледнява надолу. Менюто остава визуално същото, но текстът
   получава тъмна основа и се чете на всеки кадър.
   ══════════════════════════════════════════════════════════════ */

/* ─── 1. тегло ─── */
body.ke-modern-site #MainMenuId .linkWrapper .linkSpan,
body.ke-modern-site .MainMenu .linkWrapper .linkSpan,
body.ke-modern-site .sublinks .linkSpan {
  font-weight: 500 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .38);
}

/* ─── 2. златен hover ─── */
body.ke-modern-site #MainMenuId .linkWrapper a:hover .linkSpan,
body.ke-modern-site .MainMenu .linkWrapper a:hover .linkSpan,
body.ke-modern-site .MainMenuLinks .linkWrapper a:hover .linkSpan,
body.ke-modern-site .MainMenuLinks a:hover,
body.ke-modern-site .MainMenuLinks span.hasLink:hover {
  color: #ffd27e !important;
  font-weight: 600 !important;
}

body.ke-modern-site #MainMenuId .linkWrapper a:hover .linkSpan,
body.ke-modern-site .MainMenuLinks .linkWrapper a:hover .linkSpan {
  text-decoration: underline;
  text-decoration-color: #ffd27e;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ─── 3. махаме всички черти на шаблона под връзките в менюто ───
   Шаблонът рисува три отделни черти:
     .linkSpan::before   bottom:-6px   (клас underlineBottom)
     .linkSpan::after    bottom:-12px  (същият клас)
     a::after            1px, червена #ff270d
   При посочване те се събират с моята златна text-decoration и се
   получава двойно (тройно) подчертаване. Затова ги изключваме и
   оставяме само една черта: златната, която се появява при hover. */
body.ke-modern-site .MainMenuLinks.underlineBottom .linkSpan::before,
body.ke-modern-site .MainMenuLinks.underlineBottom .linkSpan::after,
body.ke-modern-site #MainMenuId .linkSpan::before,
body.ke-modern-site #MainMenuId .linkSpan::after,
body.ke-modern-site #MainMenuId .linkWrapper a::before,
body.ke-modern-site #MainMenuId .linkWrapper a::after,
body.ke-modern-site .MainMenuLinks .linkWrapper a::before,
body.ke-modern-site .MainMenuLinks .linkWrapper a::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ─── 5. повдигане при посочване ───
   Леко нагоре, за да се усеща реакцията. И трите елемента в менюто
   имат transition: all, затова анимацията идва сама — не е нужен
   допълнителен transition.

   2px е достатъчно да се види, но не мести съседните връзки. */
body.ke-modern-site #MainMenuId .linkWrapper,
body.ke-modern-site .MainMenuLinks .linkWrapper {
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), opacity .22s ease;
  will-change: transform;
}

body.ke-modern-site #MainMenuId .linkWrapper:hover,
body.ke-modern-site .MainMenuLinks .linkWrapper:hover {
  transform: translate3d(0, -2px, 0);
}

/* при плътно меню при скрол — същото поведение */
body.ke-modern-site.ke-nav-scrolled #MainMenuId .linkWrapper:hover,
body.ke-modern-site.ke-nav-scrolled .MainMenuLinks .linkWrapper:hover {
  transform: translate3d(0, -2px, 0);
}

/* ако браузърът е с намалена анимация — без повдигане */
@media (prefers-reduced-motion: reduce) {
  body.ke-modern-site #MainMenuId .linkWrapper:hover,
  body.ke-modern-site .MainMenuLinks .linkWrapper:hover {
    transform: none;
  }
}