/*
 * Accordion widget.
 */
.ekl-accordion {
    @apply flex w-full flex-col;

    gap: 12px;
}

.ekl-accordion__item {
    @apply overflow-hidden rounded-[10px] border border-solid border-ekl-neutral-200 bg-white transition-[border-color,box-shadow] duration-200;

    &:hover {
        @apply border-ekl-neutral-700/40;
    }

    /* The open one stands out: an accent edge and a little lift. */
    &.is-open {
        @apply border-ekl-brand shadow-[0_6px_20px_rgba(0,0,0,0.07)];
    }
}

.ekl-accordion__heading {
    @apply m-0 p-0;

    font: inherit;
}

.ekl-accordion__trigger {
    @apply flex w-full cursor-pointer items-center gap-[12px] rounded-none border-0 bg-transparent px-[20px] py-[16px] text-left text-ekl-text no-underline shadow-none transition-colors duration-200;

    font: inherit;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
}

/*
 * A theme styles every button — Hello Elementor turns it crimson with white text
 * on hover and focus — and a button inside this widget is no exception. These are
 * written one class deeper than a theme's [type=button]:hover, and say every state
 * outright, so the title is always what this widget says it is.
 */
.ekl-accordion .ekl-accordion__trigger,
.ekl-accordion .ekl-accordion__trigger:hover,
.ekl-accordion .ekl-accordion__trigger:focus,
.ekl-accordion .ekl-accordion__trigger:active {
    @apply rounded-none border-0 bg-transparent px-[20px] py-[16px] text-left no-underline shadow-none;

    width: 100%;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
}

.ekl-accordion .ekl-accordion__trigger {
    @apply text-ekl-text;
}

.ekl-accordion .ekl-accordion__trigger:hover,
.ekl-accordion .ekl-accordion__trigger:focus,
.ekl-accordion .ekl-accordion__trigger:active,
.ekl-accordion .ekl-accordion__trigger[aria-expanded='true'] {
    @apply text-ekl-hover;
}

.ekl-accordion .ekl-accordion__trigger:hover,
.ekl-accordion .ekl-accordion__trigger:focus {
    background-color: rgba(0, 0, 0, 0.03);
}

.ekl-accordion .ekl-accordion__trigger[aria-expanded='true'],
.ekl-accordion .ekl-accordion__trigger[aria-expanded='true']:hover,
.ekl-accordion .ekl-accordion__trigger[aria-expanded='true']:focus {
    background-color: transparent;
}

.ekl-accordion .ekl-accordion__trigger:focus-visible {
    outline: 3px solid var(--color-ekl-brand);
    outline-offset: -3px;
}

.ekl-accordion__title {
    @apply flex-1 text-[17px] font-semibold leading-[1.4];
}

.ekl-accordion__icon {
    @apply inline-flex shrink-0 items-center;

    i,
    svg {
        @apply block h-[1em] w-[1em];
    }

    svg {
        @apply fill-current;
    }
}

.ekl-accordion--left .ekl-accordion__title {
    @apply flex-1;
}

/*
 * The indicator is drawn, not a glyph: a round badge holding a plus that loses
 * its upright when open, or a chevron that turns. Open, the badge fills.
 */
.ekl-accordion__indicator {
    @apply relative inline-block h-[28px] w-[28px] shrink-0 rounded-full bg-ekl-neutral-200 text-ekl-text transition-colors duration-200;
}

.ekl-accordion__trigger[aria-expanded='true'] .ekl-accordion__indicator {
    @apply bg-ekl-brand text-white;
}

.ekl-accordion--indicator-plus .ekl-accordion__indicator {
    &::before,
    &::after {
        content: '';

        @apply absolute left-1/2 top-1/2 bg-current transition-transform duration-200;
    }

    &::before {
        @apply h-[2px] w-[12px] -translate-x-1/2 -translate-y-1/2;
    }

    &::after {
        @apply h-[12px] w-[2px] -translate-x-1/2 -translate-y-1/2;
    }
}

.ekl-accordion--indicator-plus .ekl-accordion__trigger[aria-expanded='true'] .ekl-accordion__indicator::after {
    @apply scale-y-0;
}

.ekl-accordion--indicator-chevron .ekl-accordion__indicator {
    &::before {
        content: '';

        @apply absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-[70%] rotate-45 border-b-2 border-r-2 border-solid border-current transition-transform duration-200;
    }
}

.ekl-accordion--indicator-chevron .ekl-accordion__trigger[aria-expanded='true'] .ekl-accordion__indicator::before {
    @apply -translate-y-[30%] -rotate-[135deg];
}

.ekl-accordion__panel {
    @apply border-t border-solid border-ekl-neutral-200 bg-white;
}

.ekl-accordion__panel[hidden] {
    @apply hidden;
}

.ekl-accordion__content {
    @apply px-[20px] pb-[20px] pt-[16px] text-[16px] leading-[1.7] text-ekl-neutral-700;

    > :first-child {
        @apply mt-0;
    }

    > :last-child {
        @apply mb-0;
    }

    /* What an author writes: lists keep their markers, links look like links. */
    p {
        @apply my-[0.8em];
    }

    ul {
        @apply my-[0.8em] list-disc pl-[1.4em];
    }

    ol {
        @apply my-[0.8em] list-decimal pl-[1.6em];
    }

    li {
        @apply my-[0.3em];
    }

    a {
        @apply font-medium text-ekl-hover underline underline-offset-[3px];

        &:hover {
            color: #a82a55;
        }
    }

    strong,
    b {
        @apply font-semibold text-ekl-text;
    }

    img {
        @apply h-auto max-w-full rounded-[6px];
    }

    blockquote {
        @apply my-[1em] border-l-[3px] border-solid border-ekl-brand pl-[1em] italic;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ekl-accordion__item,
    .ekl-accordion__trigger,
    .ekl-accordion__indicator,
    .ekl-accordion__indicator::before,
    .ekl-accordion__indicator::after {
        transition: none;
    }
}