/*
 * Advanced Heading widget.
 *
 * The picked-out words use one variable (--ekl-mark), so the panel's colour works
 * for all three ways of doing it. The default, #c36, reads at 5:1 on white.
 */
.ekl-heading {
    @apply w-full;
}

.ekl-heading__sub {
    @apply m-0 mb-[8px] text-[14px] font-semibold uppercase leading-[1.4] tracking-[0.08em];

    color: var(--color-ekl-hover);
}

.ekl-heading__title {
    @apply m-0 mb-[12px] text-[36px] font-bold leading-[1.2] text-ekl-text;
}

.ekl-heading__desc {
    @apply m-0 text-[16px] leading-[1.7];

    color: #50575e;
}

.ekl-heading__mark {
    --ekl-mark: var(--color-ekl-hover);
}

.ekl-heading--color .ekl-heading__mark {
    color: var(--ekl-mark);
}

/* A marker: the colour behind the lower half of the words, so the words stay dark on a pale band. */
.ekl-heading--marker .ekl-heading__mark {
    background: linear-gradient(transparent 55%, color-mix(in srgb, var(--ekl-mark) 28%, transparent) 55%);
}

.ekl-heading--underline .ekl-heading__mark {
    text-decoration: underline;
    text-decoration-color: var(--ekl-mark);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
}