/*
 * @package     J2Commerce
 * @subpackage  plg_content_articletoc
 *
 * @copyright   (C)2024-2026 J2Commerce, LLC <https://www.j2commerce.com>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

.articletoc {
    --articletoc-bg: #f8f9fa;
    --articletoc-border: #d0d7de;
    --articletoc-title: #1f2328;
    --articletoc-text: #1f2328;
    --articletoc-link: #0d6efd;
    --articletoc-link-active: #0a58ca;
    --articletoc-active-bg: #e7f1ff;
    color: var(--articletoc-text);
    font-size: .9375rem;
}

@media (prefers-color-scheme: dark) {
    .articletoc {
        --articletoc-bg: #21262d;
        --articletoc-border: #30363d;
        --articletoc-title: #e6edf3;
        --articletoc-text: #e6edf3;
        --articletoc-link: #6ea8fe;
        --articletoc-link-active: #9ec5fe;
        --articletoc-active-bg: #1c2a41;
    }
}

.articletoc-target {
    scroll-margin-top: var(--articletoc-offset, 0px);
}

.articletoc__title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--articletoc-title);
}

.articletoc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.articletoc__toggle {
    border: 0;
    background: none;
    color: var(--articletoc-link);
    font-size: .8125rem;
    cursor: pointer;
    padding: 0 .1rem;
}

.articletoc__toggle:hover {
    text-decoration: underline;
}

.articletoc__list,
.articletoc__list ol,
.articletoc__list ul {
    margin: 0;
    padding-left: 1.35rem;
}

.articletoc__list li {
    margin: .22rem 0;
}

.articletoc__link {
    color: var(--articletoc-link);
    text-decoration: none;
}

.articletoc__link:hover {
    text-decoration: underline;
}

.articletoc__link.is-active {
    color: var(--articletoc-link-active);
    font-weight: 600;
    background: var(--articletoc-active-bg);
    border-radius: .2rem;
    padding: .05rem .3rem;
    margin-left: -.3rem;
}

.articletoc__backtotop {
    display: inline-block;
    margin-top: .6rem;
    font-size: .8125rem;
    color: var(--articletoc-link);
}

/* Marker: numbered/bullet/none is a list-style concern layered on any preset */
.articletoc--numbered ol.articletoc__list,
.articletoc--numbered ol.articletoc__list ol {
    list-style: decimal;
}

.articletoc--bullet ul.articletoc__list,
.articletoc--bullet ul.articletoc__list ul {
    list-style: disc;
}

.articletoc--none ul.articletoc__list,
.articletoc--none ul.articletoc__list ul {
    list-style: none;
    padding-left: 1rem;
}

/* 1. Classic Box — Wikipedia-style shaded bordered box */
.articletoc--classic {
    background: var(--articletoc-bg);
    border: 1px solid var(--articletoc-border);
    border-radius: .25rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
}

/* 2. Bordered Card */
.articletoc--card {
    border: 1px solid var(--articletoc-border);
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    margin-bottom: 1.25rem;
}

.articletoc--card .articletoc__header {
    background: var(--articletoc-bg);
    border-bottom: 1px solid var(--articletoc-border);
    border-left: 4px solid var(--articletoc-link);
    padding: .6rem .9rem;
}

.articletoc--card .articletoc__body {
    padding: .75rem .9rem;
}

/* 3. Minimal Inline — inherits the surrounding template typography */
.articletoc--minimal {
    margin-bottom: 1.25rem;
}

.articletoc--minimal .articletoc__title {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--articletoc-title);
    opacity: .75;
}

.articletoc--minimal .articletoc__link {
    color: inherit;
    text-decoration: underline;
}

.articletoc--minimal .articletoc__link:hover {
    color: var(--articletoc-link);
}

/* 4. Collapsible Accordion — native <details>/<summary>, zero-JS collapse */
.articletoc--accordion .articletoc__details {
    background: var(--articletoc-bg);
    border: 1px solid var(--articletoc-border);
    border-radius: .4rem;
    margin-bottom: 1.25rem;
}

.articletoc--accordion .articletoc__summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--articletoc-title);
    padding: .6rem .9rem;
    list-style-position: inside;
}

.articletoc--accordion .articletoc__details[open] .articletoc__summary {
    border-bottom: 1px solid var(--articletoc-border);
}

.articletoc--accordion .articletoc__body {
    padding: .7rem 1rem .8rem;
}