/*
 * Read More widget.
 *
 * Folded only once the script has measured the text (.is-ready and .is-folded),
 * so without it the whole text is simply there.
 */
.ekl-readmore {
    --ekl-rm-height: 120px;
    --ekl-rm-fade: #fff;

    @apply relative w-full;
}

.ekl-readmore__content {
    @apply relative text-[16px] leading-[1.7];

    > :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;
        }
    }

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

.ekl-readmore.is-ready .ekl-readmore__content {
    @apply overflow-hidden transition-[max-height] duration-300 ease-in-out;
}

.ekl-readmore.is-folded .ekl-readmore__content {
    max-height: var(--ekl-rm-height);
}

/* The cut edge melts into what is behind. */
.ekl-readmore[data-fade='yes'].is-folded .ekl-readmore__content::after {
    content: '';

    @apply pointer-events-none absolute inset-x-0 bottom-0 h-[3.2em];

    background: linear-gradient(to bottom, transparent, var(--ekl-rm-fade));
}

.ekl-readmore__actions {
    @apply mt-[12px] flex;

    &:has(> [hidden]) {
        @apply mt-0;
    }
}

.ekl-readmore__button {
    @apply cursor-pointer rounded-[6px] border-0 bg-transparent px-0 py-[6px] text-[15px] font-semibold text-ekl-hover underline-offset-4 transition-colors duration-200;

    font-family: inherit;

    &:hover {
        @apply underline;
    }

    &[hidden] {
        @apply hidden;
    }

    &:focus-visible {
        outline: 3px solid var(--color-ekl-secondary);
        outline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ekl-readmore.is-ready .ekl-readmore__content,
    .ekl-readmore__button {
        transition: none;
    }
}

/*
 * A theme styles every button (Hello Elementor: crimson with white text on hover
 * and focus, nowrap, centred, a 1px border). The rules below say every state
 * outright, one class deeper than the theme's [type=button]:hover, so the
 * button looks the way this widget says whatever the theme does. A style
 * control in the panel is still more specific than these.
 * Checked against the real theme in tests/test-theme-buttons.php.
 */

.ekl-readmore .ekl-readmore__button,
.ekl-readmore .ekl-readmore__button:hover,
.ekl-readmore .ekl-readmore__button:focus,
.ekl-readmore .ekl-readmore__button:active {
    padding: 6px 0;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    white-space: normal;
}

.ekl-readmore .ekl-readmore__button {
    color: var(--color-ekl-hover);
    text-decoration: none;
}

.ekl-readmore .ekl-readmore__button:hover,
.ekl-readmore .ekl-readmore__button:focus,
.ekl-readmore .ekl-readmore__button:active {
    color: #a82a55;
    text-decoration: underline;
}

.ekl-readmore .ekl-readmore__button[hidden] {
    display: none;
}