/**
 * Widget: Akordeon numerowany (akryltech-numbered-accordion)
 */

.akryl-accordion {
    --akryl-accordion-items-gap: 32px;
    --akryl-accordion-item-padding: 32px;
    --akryl-accordion-divider-width: 1px;
    --akryl-accordion-divider-color: rgba(78, 96, 102, 0.4);
    --akryl-accordion-number-width: 16px;
    --akryl-accordion-number-gap: 24px;
    --akryl-accordion-title-color: #17292d;
    --akryl-accordion-title-color-closed: rgba(78, 96, 102, 0.6);
    --akryl-accordion-content-spacing: 22px;
    --akryl-accordion-content-indent: 42px;
    --akryl-accordion-paragraph-spacing: 18px;
    --akryl-accordion-bullet-color: currentColor;
    --akryl-accordion-transition: 0.35s ease;

    display: flex;
    flex-direction: column;
    gap: var(--akryl-accordion-items-gap);
}

.akryl-accordion__item {
    padding-bottom: var(--akryl-accordion-item-padding);
    border-bottom: var(--akryl-accordion-divider-width) solid var(--akryl-accordion-divider-color);
}

.akryl-accordion__heading {
    margin: 0;
    font: inherit;
}

/* Reset theme button styles (Hello Elementor styles every button). */
.akryl-accordion .akryl-accordion__trigger,
.akryl-accordion .akryl-accordion__trigger:hover,
.akryl-accordion .akryl-accordion__trigger:focus {
    display: flex;
    align-items: flex-start;
    gap: var(--akryl-accordion-number-gap);
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    white-space: normal;
    cursor: pointer;
}

.akryl-accordion .akryl-accordion__trigger--static {
    cursor: default;
}

.akryl-accordion .akryl-accordion__trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.akryl-accordion__number {
    flex: 0 0 var(--akryl-accordion-number-width);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: rgba(46, 46, 46, 0.6);
}

.akryl-accordion__title {
    color: var(--akryl-accordion-title-color-closed);
    transition: color var(--akryl-accordion-transition);
}

.akryl-accordion__item.is-open .akryl-accordion__title,
.akryl-accordion__item.is-active .akryl-accordion__title,
button.akryl-accordion__trigger:hover .akryl-accordion__title {
    color: var(--akryl-accordion-title-color);
}

/* Height animation without JS measurements: grid row 0fr -> 1fr. */
.akryl-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--akryl-accordion-transition);
}

.akryl-accordion__item.is-open .akryl-accordion__panel {
    grid-template-rows: 1fr;
}

.akryl-accordion__panel-inner {
    min-height: 0;
    overflow: hidden;
}

.akryl-accordion__content {
    padding-top: var(--akryl-accordion-content-spacing);
    padding-left: var(--akryl-accordion-content-indent);
}

/* Doubled class: must win over the kit's ".elementor-kit-N p" paragraph spacing. */
.akryl-accordion .akryl-accordion__content > * {
    margin-top: 0;
    margin-bottom: var(--akryl-accordion-paragraph-spacing);
}

.akryl-accordion .akryl-accordion__content > :last-child {
    margin-bottom: 0;
}

.akryl-accordion__content strong,
.akryl-accordion__content b {
    font-weight: 500;
}

.akryl-accordion__content ul {
    display: flex;
    flex-direction: column;
    gap: var(--akryl-accordion-paragraph-spacing);
    padding: 0;
    list-style: none;
}

.akryl-accordion__content li {
    position: relative;
    padding-left: 22px;
}

.akryl-accordion__content li::before {
    content: "";
    position: absolute;
    top: calc(0.75em - 2px);
    left: 0;
    width: 4px;
    height: 4px;
    background-color: var(--akryl-accordion-bullet-color);
}

@media (prefers-reduced-motion: reduce) {
    .akryl-accordion {
        --akryl-accordion-transition: 0s;
    }
}