/* Скриваме всички подменюта в акордеона по подразбиране */
.menu--accordion .menu__sub {
  display: none;
}
/* Контейнерът за линка и бутона */
.menu-item__wrapper {
  display: flex;
  justify-content: space-between; /* Избутва бутона вдясно */
  align-items: center;           /* Центрира ги вертикално */
  width: 100%;                   /* Заема цялата широчина на <li> */
  gap: 10px;                     /* Разстояние между текста и бутона */
}

/* Стил за самия линк, за да не избутва бутона */
.menu-item__wrapper a {
  flex-grow: 1;                  /* Позволява на линка да заеме останалото място */
  display: block;
  text-decoration: none;
}

/* Стил за бутона - фиксираме размерите, за да не се свива */
.menu-item__toggle {
  flex-shrink: 0;                /* Предотвратява свиването на бутона */
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Иконите (плюс/минус) */
.menu-item__toggle::before,
.menu-item__toggle::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Хоризонтална линия */
.menu-item__toggle::before {
  width: 12px;
  height: 2px;
}

/* Вертикална линия */
.menu-item__toggle::after {
  width: 2px;
  height: 12px;
}

/* Анимация при отваряне */
.is-open > .menu-item__wrapper .menu-item__toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}

.is-open > .menu-item__wrapper .menu-item__toggle::before {
  transform: rotate(180deg);
}

/* Премахва черните триъгълници/точки от списъка */
.menu--accordion, 
.menu--accordion ul {
  list-style: none !important;
  padding-left: 0;
}

.menu--accordion li {
  list-style-type: none !important;
}

/* Ако триъгълникът идва от HTML5 <details> или специфичен маркер на браузъра */
.menu--accordion li::marker {
  content: none;
}

ul.menu a.is-active {
    color: unset!important;
}

/* Контейнерът */
.menu-item__wrapper {
  display: flex;
  justify-content: flex-start; /* Бутонът застава веднага след линка */
  align-items: center;
  width: 100%;
  gap: 15px; /* Тук контролирате точното разстояние между текста и плюса */
}

/* 1. ОСНОВНИ НАСТРОЙКИ ЗА СПИСЪКА */
.menu--accordion, 
.menu--accordion ul {
  list-style: none !important;
  padding-left: 0;
  margin: 0;
}

.menu--accordion li {
  list-style-type: none !important;
  position: relative;
}

.menu--accordion li::marker {
  content: none;
}

/* 2. КОНТЕЙНЕР ЗА ЛИНКА И БУТОНА */
.menu-item__wrapper {
  display: flex;
  justify-content: flex-start; /* Бутонът стои близо до текста */
  align-items: center;
  width: 100%;
  gap: 15px;                  /* Разстояние между текста и плюса */
  padding: 10px 0;            /* Вертикален клирънс за целия ред */
}

/* 3. СТИЛ ЗА ЛИНКА (С АНИМИРАНО ПОДЧЕРТАВАНЕ) */
.menu-item__wrapper a {
  flex-grow: 0;
  flex-shrink: 1;
  display: inline-block;
  width: auto;
  position: relative;
  text-decoration: none !important;
  color: inherit;
  text-transform: uppercase;  /* Главни букви */
  letter-spacing: 0.5px;      /* По-добра четимост за uppercase */
  padding-bottom: 2px;
  transition: color 0.3s ease;
}

/* Премахване на дефолтни ефекти от теми */
ul.menu a.is-active {
  color: inherit !important;
}

/* ПЛАВНАТА ЛИНИЯ (::after) */
.menu-item__wrapper a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;                /* Линията е точно колкото текста */
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

.menu-item__wrapper a:hover::after {
  transform: scaleX(1);
}

/* 4. БУТОНЪТ (ПУСЪКЪТ НА АКОРДЕОНА) */
.menu-item__toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;             /* Взема цвета на текста */
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.menu-item__toggle:hover {
  opacity: 1;
}

/* Иконите (плюс/минус) */
.menu-item__toggle::before,
.menu-item__toggle::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Хоризонтална линия */
.menu-item__toggle::before {
  width: 12px;
  height: 2px;
}

/* Вертикална линия */
.menu-item__toggle::after {
  width: 2px;
  height: 12px;
}

/* Анимация на иконата при отваряне */
.is-open > .menu-item__wrapper .menu-item__toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}

.is-open > .menu-item__wrapper .menu-item__toggle::before {
  transform: rotate(180deg);
}

/* 5. ПОДМЕНЮТА (FADE-IN АНИМАЦИЯ) */
.menu--accordion .menu__sub {
  display: none;              /* Скрито по подразбиране */
  opacity: 0;
  transform: translateY(-5px); /* Леко изместване нагоре */
  padding-left: 20px;         /* Отместване за поднивата */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Когато родителят е отворен */
.is-open > .menu__sub {
  display: block;             /* Правим го видим за браузъра */
  opacity: 1;
  transform: translateY(0);   /* Връщаме го на мястото му */
}

/* Стил за линковете в подменютата (може да са по-малки) */
.menu__sub .menu-item__wrapper a {
  text-transform: none;       /* По избор: подменютата да не са само с главни букви */
  font-size: 0.9em;
  opacity: 0.9;
}