.ac {
    --c-bg: #fff;
    --c-text: #111;
    --c-hover-bg: #000;
    --c-hover-text: #fff;
    --c-bd: #111;
    --c-focus: var(--root-c-focus);

    --pad-dur: .5s;
    --pad-ease: ease;

    --icon-w: 24px;
    --icon-h: 24px;
    --icon-w-sm: 16px;
    --icon-h-sm: 16px;

    --link-icon-w: 24px;
    --link-icon-h: 24px;
    --link-icon-w-sm: 16px;
    --link-icon-h-sm: 16px;

    /* SVG іконки */
    --icon-plus: url("data:image/svg+xml;utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M13.0001%203H11.0001V11L3%2011V13H11.0001V21H13.0001V13H21V11L13.0001%2011V3Z%22%20fill=%22black%22/%3E%20%3C/svg%3E");
    --icon-plus-white: url("data:image/svg+xml;utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M13.0001%203H11.0001V11L3%2011V13H11.0001V21H13.0001V13H21V11L13.0001%2011V3Z%22%20fill=%22white%22/%3E%20%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml;utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20d=%22M20.9999%2011V13L2.99994%2013L2.99994%2011L20.9999%2011Z%22%20fill=%22black%22/%3E%20%3C/svg%3E");

    --icon-plus-sm: url("data:image/svg+xml;utf8,%3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M9%202H7V7H2V9H7V14H9V9H14V7H9V2Z%22%20fill=%22black%22/%3E%20%3C/svg%3E");
    --icon-plus-white-sm: url("data:image/svg+xml;utf8,%3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M9%202H7V7H2V9H7V14H9V9H14V7H9V2Z%22%20fill=%22white%22/%3E%20%3C/svg%3E");
    --icon-minus-sm: url("data:image/svg+xml;utf8,%3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20d=%22M14%207V9L2%209L2%207L14%207Z%22%20fill=%22black%22/%3E%20%3C/svg%3E");

    --icon-arrow-ne: url("data:image/svg+xml;utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.09723%204.12929L20.1614%204.1293L20.1615%2020.1293L18.1615%2020.1293L18.1614%207.53622L4.8027%2020.8379L3.39152%2019.4207L16.7399%206.1293L4.09723%206.12929L4.09723%204.12929Z%22%20fill=%22black%22/%3E%20%3C/svg%3E");
}


.ac {
    padding-top: 4rem;
    border-bottom: 2px solid var(--c-bd);
    margin-bottom: 4rem;
}

:where(.ac .ac),
.ac--nested {
    margin: clamp(30px, 4vw, 60px) 0;
    padding-top: 0;
}

.ac-item {
    position: relative;
}


/* Тригер — один div */
.ac-link,
.ac-trigger {
    border-top: 2px solid var(--c-bd);
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    background: white;
    padding: 22px 0;

    font-family: var(--e-ukraine-font), Arial, sans-serif;
    line-height: 1.25;
    font-size: clamp(18px, 2vw + .5em, 28px);

    transition: padding var(--pad-dur) var(--pad-ease), background-color 0s, color 0s;
    position: sticky;
    top: 0;
    z-index: 3; /* sticky над контентом (без фокусу) */
}

/*.ac-link:is(:has(~ .ac-link),~ .ac-link),*/
:where(:not(:has(> .ac-item))) > .ac-link,
.ac-link {
    padding: 15px 0;
    position: relative;
    text-decoration: none;
    color: var(--c-text);
}

/* будь-який .ac-link, якщо його батько має хоч один дочірній .ac-item */
:where(:has(> .ac-item)) > .ac-link {
    padding: 22px 0;
}

:where(.ac .ac) .ac-link,
.ac--nested .ac-trigger {
    padding: 22px 0;
    font-size: clamp(14px, 1vw + .5em, 22px);
}

/* Керування з клавіатури */
.ac-link:focus-visible,
.ac-trigger:focus-visible {
    z-index: 4;/* sticky над контентом (з фокусом) */
    outline-offset: 5px;
    outline: 2px solid var(--c-focus);
}
.ac-item .ac-link,
.ac-item .ac-item .ac-trigger {
    position: relative; /* не sticky але з z-index`ом */
    z-index: 1; /* над контентом (без фокусу) */
}
.ac-item .ac-link:focus-visible,
.ac-item .ac-item .ac-trigger:focus-visible {
    z-index: 2; /* з фокусом, над контентом і сусідами без фокусу */
}

/* Іконка праворуч */
.ac-link::after,
.ac-trigger::after {
    content: "";
    width: var(--icon-w);
    height: var(--icon-h);
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--icon-plus);
    margin-left: auto;
}
.ac-link::after {
    background-image: var(--icon-arrow-ne);
    width: var(--link-icon-w);
    height: var(--link-icon-h);
}

:where(.ac .ac) .ac-link::after {
    width: var(--link-icon-w-sm);
    height: var(--link-icon-h-sm);
}
.ac--nested .ac-trigger::after {
    width: var(--icon-w-sm);
    height: var(--icon-h-sm)
}

/* відкритий стан */
.ac-trigger[aria-expanded="true"]::after {
    background-image: var(--icon-minus);
}

.ac--nested .ac-trigger[aria-expanded="true"]::after {
    background-image: var(--icon-minus-sm)
}

/* hover/active — миттєвий колір, анімовані тільки падінги */
.ac-trigger[aria-expanded="false"]:hover,
.ac-trigger[aria-expanded="false"]:active{
    background: var(--c-hover-bg);
    color: var(--c-hover-text)
}

.ac-link:hover,
.ac-link:active,
.ac-trigger[aria-expanded="false"]:hover,
.ac-trigger[aria-expanded="false"]:active {
    padding-left: 1em;
    padding-right: 1em;
}
.ac-link:hover {
    text-decoration: underline;
}

.ac-trigger[aria-expanded="false"]:hover::after,
.ac-trigger[aria-expanded="false"]:active::after {
    background-image: var(--icon-plus-white)
}

.ac--nested .ac-trigger[aria-expanded="false"]:hover::after,
.ac--nested .ac-trigger[aria-expanded="false"]:active::after {
    background-image: var(--icon-plus-white-sm)
}

/* контент */
.ac-panel__inner {
    padding: 20px min(3vw, 2em) 24px;
    background: #fff
}

/* мобільні іконки */
@media (max-width: 768px) {

    .ac-link::after {
        width: var(--link-icon-w-sm);
        height: var(--link-icon-h-sm);
    }

    .ac-trigger::after {
        width: var(--icon-w-sm);
        height: var(--icon-h-sm)
    }

    .ac-trigger[aria-expanded="true"]::after {
        background-image: var(--icon-minus-sm)
    }

    .ac-trigger[aria-expanded="false"]::after {
        background-image: var(--icon-plus-sm)
    }

    .ac-trigger[aria-expanded="false"]:hover::after {
        background-image: var(--icon-plus-white-sm)
    }
}