/* Make verses display inline and wrap within chapters */
.outline-3 {
    display: inline;
    margin-right: 0.3em; /* Small space between verses */
}

.outline-3 h3 {
    display: inline;
    margin: 0;
    font-size: 0.8em;
    vertical-align: super;
    font-weight: normal;
}

/* Add a space after verse number */
.outline-3 h3::after {
    content: "\00a0"; /* non-breaking space */
}

.outline-text-3 {
    display: inline;
}

.outline-text-3 p {
    display: inline;
    margin: 0;
}

/* TOC */
/* Remove bullet points from TOC lists */
#text-table-of-contents ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#text-table-of-contents li {
    list-style: none;
}

/* Make chapter headings flow inline */
#text-table-of-contents > ul > li.collapsible {
    display: inline-block;
    margin-right: 1em;
    vertical-align: top;
}

/* Nested verse lists get some left padding */
#text-table-of-contents li ul {
    display: none;
    padding-left: 1.5rem;
}

#text-table-of-contents li.collapsible > a {
    font-weight: bold;
    cursor: pointer;
    position: relative;
    padding-left: 1rem;
}

/* arrow */
#text-table-of-contents li.collapsible > a::before {
    content: "▶";
    position: absolute;
    left: 0;
    transition: transform 0.2s ease;
}

/* expanded state - display verses inline */
#text-table-of-contents li.open > ul {
    display: block;
}

#text-table-of-contents li.open > ul > li {
    display: inline;
    margin-right: 0.5em;
}

#text-table-of-contents li.open > a::before {
    transform: rotate(90deg);
}



/* Highlight the parent container when any child is targeted */
:target,
div:has(> :target),
.verse-highlighted {
    background-color: #ffffcc;
    /*padding: 10px;*/
    /*border-left: 4px solid #ff6b6b;*/
    animation: highlight 2s ease-in-out;
}

/* Optional: Fade-in animation for the highlight */
@keyframes highlight {
    0% {
        background-color: #ffeb3b;
    }
    100% {
        background-color: #ffffcc;
    }
}