/* nav-services.css — «Services» выпадашка в главном меню + бейдж NEW.
   Стилистика наследует lang-switcher.css (тёплая крафтовая карточка, оранжевый #FF6005).
   Открытие по hover/focus, без JS.

   ВАЖНО: класс .apus-mega ставится ТОЛЬКО на десктопный <li> в includes/nav-*.html.
   Мобильный drawer (pages/*.post.html) использует штатный аккордеон Kadence
   (menu-item-has-children + .drawer-sub-toggle) и этих правил не получает —
   так же, как сделано у переключателя языков. */

:root {
  --apus-orange: #ff6005;
  --apus-orange-2: #ff8a3d;
  --apus-ink: #2a2118;
}

/* ── Бейдж «новая услуга» (работает и в десктопе, и в drawer) ── */
.apus-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 18px;
  padding: 0 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--apus-orange), var(--apus-orange-2));
  border-radius: 999px;
  box-shadow: 0 3px 8px -2px rgba(255, 96, 5, .55);
  white-space: nowrap;
}
.apus-badge-dot::after {
  content: "";
  display: block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: #fff;
  animation: apusPulse 1.8s ease-in-out infinite;
}
@keyframes apusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .apus-badge-dot::after { animation: none; }
}

.apus-mi-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--apus-ink);
  letter-spacing: .01em;
  /* тема ставит capitalize на пункты меню — описаниям и названиям услуг он не нужен */
  text-transform: none;
}
.apus-mi-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.8px;
  font-weight: 500;
  line-height: 1.4;
  color: #8c7b6d;
  white-space: normal;
  text-transform: none;
}

/* ── Мобильный drawer: заголовок без описания, бейдж мельче ── */
#mobile-menu .apus-mi-title { font-size: 16px; font-weight: 600; color: inherit; }
#mobile-menu .apus-mi-desc { display: none; }
#mobile-menu .apus-badge { height: 17px; font-size: 9px; }

/* ══════════════════ ДЕСКТОП (> breakpoint Kadence 1024) ══════════════════ */
@media (min-width: 1025px) {

  /* Больше пунктов в строку: поджимаем горизонтальные отступы */
  #primary-menu > li.menu-item > a {
    padding-left: 13px !important;
    padding-right: 13px !important;
    letter-spacing: .005em;
  }
  #primary-menu > li.apus-lang-switch > a {
    padding-left: 10px !important;
    padding-right: 4px !important;
  }

  /* Родительский пункт «Services» */
  .apus-mega { position: relative; }
  .apus-mega > a { display: inline-flex !important; align-items: center; gap: 6px; }
  .apus-mega > a .apus-caret {
    width: 9px; height: 9px; flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .55;
    transition: transform .22s ease, opacity .2s ease, color .2s ease;
  }
  .apus-mega:hover > a .apus-caret,
  .apus-mega:focus-within > a .apus-caret {
    opacity: 1;
    color: var(--apus-orange);
    transform: rotate(225deg) translateY(-3px);
  }

  /* Выпадающая карточка — две колонки.
     ВАЖНО: показом/скрытием (opacity, visibility, transform, clip, height, overflow)
     управляет сама тема Kadence — её правила
     `.header-navigation[class*="…fade"] ul ul.sub-menu` и `… ul li:hover>ul`
     имеют более высокую специфичность. Здесь задаём только вид и положение,
     анимацию fade-up оставляем теме, чтобы меню вело себя как остальные. */
  .apus-mega > .sub-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    top: 100%;
    left: 0;
    right: auto;
    width: 560px;
    max-width: calc(100vw - 40px);
    margin: 13px 0 0;
    padding: 18px 10px 10px;
    list-style: none;
    background: linear-gradient(180deg, #ffffff 0%, #fff7f1 100%);
    border: 1px solid rgba(255, 96, 5, .14);
    border-radius: 18px;
    box-shadow: 0 24px 50px -14px rgba(120, 40, 0, .32), 0 4px 12px rgba(120, 40, 0, .08);
    z-index: 999;
  }
  /* «мостик» под курсор, чтобы меню не закрывалось в зазоре */
  .apus-mega > .sub-menu::before {
    content: "";
    position: absolute;
    top: -13px; left: 0; right: 0;
    height: 16px;
  }
  /* оранжевый акцент сверху */
  .apus-mega > .sub-menu::after {
    content: "";
    position: absolute;
    top: 9px; left: 18px; right: 18px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--apus-orange), var(--apus-orange-2));
  }
  /* Тема раскрывает подменю для `ul li:hover > ul`, но её селектор не покрывает
     :focus-within (вход с клавиатуры) — дублируем раскрытие с !important,
     иначе скрывающее правило темы (специфичнее) оставит карточку в 1px. */
  .apus-mega:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    clip: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .apus-mega > .sub-menu > li { margin: 0; border: 0 !important; }

  .apus-mega > .sub-menu a {
    position: relative;
    display: block !important;
    padding: 12px 14px 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #3a322a;
    line-height: 1.3;
    border: 0 !important;
    overflow: hidden;
    transition: background .18s ease, transform .18s ease;
  }
  /* оранжевый «язычок» слева */
  .apus-mega > .sub-menu a::before {
    content: "";
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--apus-orange);
    transform: scaleY(0);
    transition: transform .2s ease;
  }
  .apus-mega > .sub-menu a:hover { background: #fff0e6; transform: translateX(3px); }
  .apus-mega > .sub-menu a:hover::before { transform: scaleY(1); }
  .apus-mega > .sub-menu a:hover .apus-mi-title { color: var(--apus-orange); }
}

/* Узкий десктоп — ещё плотнее, чтобы меню не перескакивало на две строки */
@media (min-width: 1025px) and (max-width: 1320px) {
  #primary-menu > li.menu-item > a {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 15px;
  }
  .apus-mega > .sub-menu { width: 500px; }
}