/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    TABLE OF CONTENTS
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* The table of contents container should always have two children, first the main content area and
   second the table of contents itself */
.table-of-contents-container {
    display: flex;
}

.sv-marketplace-sitevision-table-of-contents {
    position: sticky;
    top: 1rem;
}

.sv-marketplace-sitevision-table-of-contents h2 {
    color: var(--bs-body-color);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Remove outline on focus for headings within the main content area so they do not get focus
   styles when using table of contents */
main h2:focus-visible,
main h3:focus-visible,
main h4:focus-visible {
    outline: none;
}


/* On small screens the table of contents should be displayed above the main content */
@media screen and (max-width: 768px) {
    .table-of-contents-container {
        flex-direction: column;
    }

    .table-of-contents-container > :has(.sv-marketplace-sitevision-table-of-contents) {
        order: -1;
    }

    .sv-marketplace-sitevision-table-of-contents {
        position: static;
    }
}