/* =========================================================
   MEGA DROPDOWN GRID (DESKTOP ONLY)
   Applies only to menu items:
   - /work_type/poem/
   - /work_type/prose/
   - /work_type/art/
   - /work_type/classic/
   Mobile keeps theme behavior.
   ========================================================= */

:root {
  --mega-max: 1000px;
  --mega-pad: 16px;
  --mega-gap: 8px;
  --mega-radius: 12px;
  --mega-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

/* ---------------------------------------------------------
   MOBILE / TABLET: do not change open/close mechanics
   (only prevent ugly overflow)
   --------------------------------------------------------- */
@media (max-width: 991px) {
  /* На мобилках часто меню — аккордеон. Не вмешиваемся.
     Только делаем так, чтобы длинные пункты не вылезали. */
  .sub-menu a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------
   DESKTOP: mega menu as grid for 3 sections
   --------------------------------------------------------- */
@media (min-width: 992px) {

  /* 1) Базовый стиль панели — только для нужных 3 пунктов */
  .menu-item-has-children > a[href*="/work_type/poem/"] + ul.sub-menu,
  .menu-item-has-children > a[href*="/work_type/prose/"] + ul.sub-menu,
  .menu-item-has-children > a[href*="/work_type/art/"] + ul.sub-menu,
  .menu-item-has-children > a[href*="/work_type/classic/"] + ul.sub-menu {
    background: #fff;
    padding: 16px 18px;
    border-radius: var(--mega-radius);
    box-shadow: var(--mega-shadow);
    overflow: hidden;
    z-index: 1000;

    /* страхуем ширину, но НЕ задаём позиционирование —
       этим занимается тема, чтобы не было “гэпов” и конфликтов */
    max-width: min(var(--mega-max), calc(100vw - (var(--mega-pad) * 2)));
  }

  /* 2) В момент открытия (hover/focus) превращаем в grid
        ВАЖНО: display НЕ задаём в обычном состоянии, чтобы не было “пустого окна” */
  .menu-item-has-children:hover > a[href*="/work_type/poem/"] + ul.sub-menu,
  .menu-item-has-children:focus-within > a[href*="/work_type/poem/"] + ul.sub-menu,
  .menu-item-has-children:hover > a[href*="/work_type/prose/"] + ul.sub-menu,
  .menu-item-has-children:focus-within > a[href*="/work_type/prose/"] + ul.sub-menu,
  .menu-item-has-children:hover > a[href*="/work_type/art/"] + ul.sub-menu,
  .menu-item-has-children:focus-within > a[href*="/work_type/art/"] + ul.sub-menu,
  .menu-item-has-children:hover > a[href*="/work_type/classic/"] + ul.sub-menu,
  .menu-item-has-children:focus-within > a[href*="/work_type/classic/"] + ul.sub-menu {
    display: grid; /* переопределяет display:block темы только в момент открытия */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px 20px;
  }

  /* 3) Grid items должны сжиматься, иначе текст “распирает” колонку */
  .menu-item-has-children:hover > a[href*="/work_type/poem/"] + ul.sub-menu > li,
  .menu-item-has-children:focus-within > a[href*="/work_type/poem/"] + ul.sub-menu > li,
  .menu-item-has-children:hover > a[href*="/work_type/prose/"] + ul.sub-menu > li,
  .menu-item-has-children:focus-within > a[href*="/work_type/prose/"] + ul.sub-menu > li,
  .menu-item-has-children:hover > a[href*="/work_type/art/"] + ul.sub-menu > li,
  .menu-item-has-children:focus-within > a[href*="/work_type/art/"] + ul.sub-menu > li,
  .menu-item-has-children:hover > a[href*="/work_type/classic/"] + ul.sub-menu > li,
  .menu-item-has-children:focus-within > a[href*="/work_type/classic/"] + ul.sub-menu > li {
    margin: 0;
    min-width: 0;
  }

  /* 4) Ссылки: ellipsis, чтобы ничего не вылезало вправо */
  .menu-item-has-children:hover > a[href*="/work_type/poem/"] + ul.sub-menu a,
  .menu-item-has-children:focus-within > a[href*="/work_type/poem/"] + ul.sub-menu a,
  .menu-item-has-children:hover > a[href*="/work_type/prose/"] + ul.sub-menu a,
  .menu-item-has-children:focus-within > a[href*="/work_type/prose/"] + ul.sub-menu a,
  .menu-item-has-children:hover > a[href*="/work_type/art/"] + ul.sub-menu a,
  .menu-item-has-children:focus-within > a[href*="/work_type/art/"] + ul.sub-menu a,
  .menu-item-has-children:hover > a[href*="/work_type/classic/"] + ul.sub-menu a,
  .menu-item-has-children:focus-within > a[href*="/work_type/classic/"] + ul.sub-menu a {
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: 6px 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------------------------------------------------------
     Responsive columns (desktop widths)
     --------------------------------------------------------- */
  @media (max-width: 1200px) {
    .menu-item-has-children:hover > a[href*="/work_type/poem/"] + ul.sub-menu,
    .menu-item-has-children:focus-within > a[href*="/work_type/poem/"] + ul.sub-menu,
    .menu-item-has-children:hover > a[href*="/work_type/prose/"] + ul.sub-menu,
    .menu-item-has-children:focus-within > a[href*="/work_type/prose/"] + ul.sub-menu,
    .menu-item-has-children:hover > a[href*="/work_type/art/"] + ul.sub-menu,
    .menu-item-has-children:focus-within > a[href*="/work_type/art/"] + ul.sub-menu,
  .menu-item-has-children:hover > a[href*="/work_type/classic/"] + ul.sub-menu,
  .menu-item-has-children:focus-within > a[href*="/work_type/classic/"] + ul.sub-menu {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1050px) {
    .menu-item-has-children:hover > a[href*="/work_type/poem/"] + ul.sub-menu,
    .menu-item-has-children:focus-within > a[href*="/work_type/poem/"] + ul.sub-menu,
    .menu-item-has-children:hover > a[href*="/work_type/prose/"] + ul.sub-menu,
    .menu-item-has-children:focus-within > a[href*="/work_type/prose/"] + ul.sub-menu,
    .menu-item-has-children:hover > a[href*="/work_type/art/"] + ul.sub-menu,
    .menu-item-has-children:focus-within > a[href*="/work_type/art/"] + ul.sub-menu,
  .menu-item-has-children:hover > a[href*="/work_type/classic/"] + ul.sub-menu,
  .menu-item-has-children:focus-within > a[href*="/work_type/classic/"] + ul.sub-menu {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* Badge непрочитанных в меню */
.sm ysly-menu-badge,
.smysly-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;

  font-size: 12px;
  line-height: 1;
  font-weight: 600;

  color: #fff;
  background: #6941c6;
  border-radius: 999px;
}

.smysly-menu-badge{
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: #fff;

  background: #6941c6; /* твой цвет */
}

/* если тема где-то принудительно прячет span’ы */
.smysly-menu-badge[style*="display: inline-flex"]{
  display: inline-flex !important;
}