/* Анимированное подчёркивание ссылок в шапке, мобильном меню и подвале.
   Селекторы усилены и помечены !important, потому что вся вёрстка страниц
   использует инлайновые стили (атрибут style-hover в разметке не работает
   в браузере — это артефакт конструктора). */

html body header nav[data-nav-links] > a,
html body header nav[data-nav-links] > button,
html body header a[href^="tel:"],
html body [data-mobile-menu] > a,
html body [data-mobile-menu] > button:not([data-menu-extra]),
html body footer a,
html body footer nav button {
  position: relative !important;
  text-decoration: none !important;
  transition:
    color .28s cubic-bezier(.22, .7, .3, 1),
    transform .28s cubic-bezier(.22, .7, .3, 1);
}

html body header nav[data-nav-links] > a::after,
html body header nav[data-nav-links] > button::after,
html body header a[href^="tel:"]::after,
html body [data-mobile-menu] > a::after,
html body [data-mobile-menu] > button:not([data-menu-extra])::after,
html body footer a::after,
html body footer nav button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 45%, var(--accent2)) 100%
  );
  transform: scaleX(0);
  transform-origin: right center;
  transition:
    transform .38s cubic-bezier(.22, .7, .3, 1),
    opacity .38s ease,
    box-shadow .38s ease;
  pointer-events: none;
}

/* Линия «выезжает» слева при наведении и «уезжает» вправо при уходе курсора. */
html body header nav[data-nav-links] > a:hover::after,
html body header nav[data-nav-links] > a:focus-visible::after,
html body header nav[data-nav-links] > button:hover::after,
html body header nav[data-nav-links] > button:focus-visible::after,
html body header a[href^="tel:"]:hover::after,
html body header a[href^="tel:"]:focus-visible::after,
html body [data-mobile-menu] > a:hover::after,
html body [data-mobile-menu] > a:focus-visible::after,
html body [data-mobile-menu] > button:not([data-menu-extra]):hover::after,
html body [data-mobile-menu] > button:not([data-menu-extra]):focus-visible::after,
html body footer a:hover::after,
html body footer a:focus-visible::after,
html body footer nav button:hover::after,
html body footer nav button:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
  box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ---------- Шапка ---------- */

html body header nav[data-nav-links] > a::after,
html body header nav[data-nav-links] > button::after {
  left: 2px;
  right: 2px;
  bottom: 3px;
}

html body header nav[data-nav-links] > a:hover,
html body header nav[data-nav-links] > a:focus-visible,
html body header nav[data-nav-links] > button:hover,
html body header nav[data-nav-links] > button:focus-visible {
  color: var(--text) !important;
  transform: translateY(-1px);
}

html body header a[href^="tel:"]::after {
  bottom: -3px;
}

html body header a[href^="tel:"]:hover,
html body header a[href^="tel:"]:focus-visible {
  color: var(--accent) !important;
}

/* ---------- Мобильное меню ---------- */

/* Линия ложится поверх собственной нижней границы пункта меню. */
html body [data-mobile-menu] > a::after,
html body [data-mobile-menu] > button:not([data-menu-extra])::after {
  bottom: -1px;
  height: 2px;
}

html body [data-mobile-menu] > a:hover,
html body [data-mobile-menu] > a:focus-visible,
html body [data-mobile-menu] > button:not([data-menu-extra]):hover,
html body [data-mobile-menu] > button:not([data-menu-extra]):focus-visible {
  color: var(--accent) !important;
  transform: translateX(4px);
}

/* ---------- Подвал ---------- */

html body footer a::after,
html body footer nav button::after {
  bottom: -3px;
}

/* Ссылки в колонках подвала — по ширине текста, а не на всю колонку,
   иначе линия подчёркивания растянется до края сетки. Нижнюю строку
   подвала не трогаем: там строка flex с align-items:center. */
html body footer nav a,
html body footer nav button,
html body footer a[href^="tel:"],
html body footer a[href^="mailto:"] {
  align-self: flex-start !important;
}

html body footer a:hover,
html body footer a:focus-visible,
html body footer nav button:hover,
html body footer nav button:focus-visible {
  color: var(--accent) !important;
}

/* ---------- Доступность ---------- */

@media (prefers-reduced-motion: reduce) {
  html body header nav[data-nav-links] > a,
  html body header nav[data-nav-links] > button,
  html body header a[href^="tel:"],
  html body [data-mobile-menu] > a,
  html body [data-mobile-menu] > button:not([data-menu-extra]),
  html body footer a,
  html body footer nav button,
  html body header nav[data-nav-links] > a::after,
  html body header nav[data-nav-links] > button::after,
  html body header a[href^="tel:"]::after,
  html body [data-mobile-menu] > a::after,
  html body [data-mobile-menu] > button:not([data-menu-extra])::after,
  html body footer a::after,
  html body footer nav button::after {
    transition: none !important;
  }

  html body header nav[data-nav-links] > a:hover,
  html body header nav[data-nav-links] > button:hover,
  html body [data-mobile-menu] > a:hover,
  html body [data-mobile-menu] > button:not([data-menu-extra]):hover {
    transform: none !important;
  }
}