/* Поведение и оформление по MUD (mud-accordion-item из @egov-moldova/mud).
   Всё через стили, без правки разметки: работает и в аккордеонах из редактора. */

div.accordion {padding-top: 10px; width: 100%;}

.accordion-item {
    background: var(--color-bg-primary);
    border: 0;
    border-bottom: var(--border-width-1) solid var(--color-border-default);
}

.accordion-button {
    gap: var(--spacing-12, 12px);
    padding: var(--spacing-32) 0;
    font-size: var(--text-desktop-heading-sm-size);
    font-weight: var(--text-desktop-heading-sm-weight);
    line-height: 32px;
    letter-spacing: -0.01em;
    color: var(--color-text-base-default, #121212);
    transition: padding 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

/* Круглый триггер 48px с иконкой 20px: те же линии, что в MUD (viewBox 0 0 20 20,
   stroke-width 1.5, круглые концы). Маска + currentColor, чтобы цвет наследовался. */
.accordion-button::after {
    --_accordion-bar-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cline%20x1='4.25'%20y1='10'%20x2='15.75'%20y2='10'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E");
    --_accordion-bar-v: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cline%20x1='10'%20y1='4.25'%20x2='10'%20y2='15.75'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E");
    content: '';
    flex-shrink: 0;
    width: 48px !important;
    height: 48px !important;
    margin-left: auto;
    border-radius: 9999px;
    background-image: none !important;
    background-color: currentColor;
    -webkit-mask-image: var(--_accordion-bar-h), var(--_accordion-bar-v);
    mask-image: var(--_accordion-bar-h), var(--_accordion-bar-v);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px 20px, 20px 20px;
    mask-size: 20px 20px, 20px 20px;
    box-shadow: none !important;
    transform: none !important;
    transition: -webkit-mask-size 150ms ease-out, mask-size 150ms ease-out !important;
}

/* Открыто: вертикальная черта сжимается к центру — плюс превращается в минус. */
.accordion-button:not(.collapsed)::after {
    -webkit-mask-size: 20px 20px, 20px 0;
    mask-size: 20px 20px, 20px 0;
}

/* Открытая секция подсвечивается брендовым цветом, иконка наследует currentColor. */
.accordion-button:not(.collapsed) {
    background-color: var(--color-bg-primary);
    border: 0;
    color: var(--color-text-primary);
    box-shadow: none !important;
}

/* Hover только у закрытых секций: фон и втягивание текста, оба с анимацией. */
.accordion-button.collapsed:hover {
    background-color: var(--gray-120, #f5f5f5);
    padding-inline: var(--spacing-20);
}

.accordion-button:focus {box-shadow: none !important;}
.accordion-button:focus-visible {
    outline: 2px solid var(--blue-sky-600, #0058d2);
    outline-offset: -2px;
    border-radius: var(--border-radius-4, 4px);
}

.accordion-body {padding: 0;}

@media (max-width: 767px) {
    .accordion-button {
        padding: var(--spacing-24) 0;
        font-size: var(--text-mobile-heading-sm-size);
        line-height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accordion-button,
    .accordion-button::after {
        transition: none !important;
    }
}