/**
 * JuvioX Auto Table of Contents
 * Blog single posts only.
 */


/* =========================================================
   TOC CONTAINER
   ========================================================= */

.juviox-toc {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   TOC SUMMARY / HEADER
   ========================================================= */

.juviox-toc-summary {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 24px 28px;
    box-sizing: border-box;

    font-family: "Manrope", sans-serif;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: #0F172A;

    cursor: pointer;
    list-style: none;
    user-select: none;
}


/* Remove native details marker */

.juviox-toc-summary::-webkit-details-marker {
    display: none;
}

.juviox-toc-summary::marker {
    display: none;
    content: "";
}


/* =========================================================
   ORANGE ACCENT
   ========================================================= */

.juviox-toc-accent {
    width: 8px;
    height: 8px;
    margin-right: 14px;
    flex: 0 0 8px;

    background: #F97316;
}


/* =========================================================
   TITLE
   ========================================================= */

.juviox-toc-title {
    flex: 1;
}


/* =========================================================
   CHEVRON
   ========================================================= */

.juviox-toc-chevron {
    width: 10px;
    height: 10px;
    margin-left: 20px;

    border-right: 2px solid #0F172A;
    border-bottom: 2px solid #0F172A;

    transform: rotate(45deg);
    transition: transform 0.2s ease;
}


/* Expanded state */

.juviox-toc[open] .juviox-toc-chevron {
    transform: rotate(225deg);
}


/* =========================================================
   TOC CONTENT
   ========================================================= */

.juviox-toc-nav {
    padding: 0 28px 28px 50px;
}


/* =========================================================
   MAIN LIST
   ========================================================= */

.juviox-toc-list,
.juviox-toc-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.juviox-toc-list {
    counter-reset: juviox-toc-h2;
}


/* =========================================================
   H2 ITEMS
   ========================================================= */

.juviox-toc-h2 {
    position: relative;
    margin: 0 0 14px;
    padding: 0;

    counter-increment: juviox-toc-h2;
}

.juviox-toc-h2 > a {
    display: inline-block;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;

    color: #334155;
    text-decoration: none;
}

.juviox-toc-h2 > a::before {
    content: counter(juviox-toc-h2, decimal-leading-zero) ".";
    margin-right: 10px;

    color: #F97316;
    font-weight: 600;
}


/* =========================================================
   H3 SUBLIST
   ========================================================= */

.juviox-toc-sublist {
    margin-top: 10px;
    margin-left: 32px;

    counter-reset: juviox-toc-h3;
}

.juviox-toc-h3 {
    margin: 0 0 8px;

    counter-increment: juviox-toc-h3;
}

.juviox-toc-h3 > a {
    display: inline-block;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;

    color: #64748B;
    text-decoration: none;
}

.juviox-toc-h3 > a::before {
    content:
        counter(juviox-toc-h2, decimal-leading-zero)
        "."
        counter(juviox-toc-h3);

    margin-right: 10px;

    color: #F97316;
    font-weight: 500;
}


/* =========================================================
   LINK INTERACTION
   ========================================================= */

.juviox-toc a {
    transition: color 0.2s ease;
}

.juviox-toc a:hover {
    color: #F97316;
}

.juviox-toc a:focus-visible,
.juviox-toc-summary:focus-visible {
    outline: 2px solid #F97316;
    outline-offset: 4px;
}


/* =========================================================
   ANCHOR POSITION
   ========================================================= */

.entry-content h2,
.entry-content h3 {
    scroll-margin-top: 120px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .juviox-toc-summary {
        padding: 22px 24px;

        font-size: 20px;
        line-height: 30px;
    }

    .juviox-toc-nav {
        padding: 0 24px 24px 46px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .juviox-toc {
        border-radius: 10px;
    }

    .juviox-toc-summary {
        padding: 18px 20px;

        font-size: 18px;
        line-height: 28px;
    }

    .juviox-toc-accent {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
        margin-right: 11px;
    }

    .juviox-toc-nav {
        padding: 0 20px 20px;
    }

    .juviox-toc-h2 > a {
        font-size: 15px;
        line-height: 24px;
    }

    .juviox-toc-sublist {
        margin-left: 20px;
    }

    .juviox-toc-h3 > a {
        font-size: 14px;
        line-height: 22px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

    html {
        scroll-behavior: smooth;
    }

}