/*
 * Post table of contents. Markup from lib/toc.mjs, behavior from
 * assets/js/ee-toc.js; base.njk loads both only on posts that have one.
 *
 * Below 1440px it is a box above the post that opens and closes (native
 * <details>). From 1440px, where the margin beside the 720px column has room
 * for it, it becomes a sidebar that stays in view while the post scrolls. The
 * text column never moves to make room.
 */

/* Same 2rem side padding as .entry-header and .entry-content, so the box
   lines up with the post on phones and with the 720px column above that. */
.ee-toc {
    box-sizing: border-box;
    max-width: calc(720px + 4rem);
    margin: 0 auto 2rem;
    padding: 0 2rem;
    font-family: 'Lato', sans-serif;
}

.ee-toc__box {
    background: var(--bg-light-gray);
    border-radius: 4px;
}

.ee-toc__title {
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ee-blue);
    cursor: pointer;
}

/* Drawn inside the item, not around it: the sidebar box scrolls
   (overflow-y: auto), which clips anything outside its edges, so an outer
   ring showed only as a line along the bottom. The white fill separates the
   focused item from the gray box as well. */
.ee-toc__title:focus-visible,
.ee-toc a:focus-visible {
    outline: 3px solid var(--ee-blue);
    outline-offset: -3px;
    background: #fff;
    box-shadow: none;
}

.ee-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ee-toc__box > ul {
    padding: 0 1rem 0.75rem;
}

.ee-toc li {
    margin: 0;
}

.ee-toc li li {
    padding-left: 1rem;
}

.ee-toc a {
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ee-black);
    text-decoration: none;
    border-top: 1px solid var(--bg-light-gray-2);
    border-left: 4px solid transparent;
}

.ee-toc a:hover {
    color: var(--ee-blue);
    text-decoration: underline;
}

/* Regular weight, whatever the page: ee-global.css makes every link in an
   article weight 800 on pages with their own stylesheet, and on /privacy/
   and /accessibility/ the list sits inside the article. Two classes outrank
   its `article a:not(.round-btn)`. */
.ee-toc .ee-toc__box a {
    font-weight: 400;
}

/* The section being read: weight and a bar, not color alone. */
.ee-toc a[aria-current="true"] {
    font-weight: 700;
    color: var(--ee-blue);
    border-left-color: var(--ee-blue);
}

/* Room for a little space above a heading reached from the list. */
article.post .entry-content h2[id],
article.post .entry-content h3[id] {
    scroll-margin-top: 1.5rem;
}

/* Pages whose text starts at the gray band title's edge (/privacy/,
   /accessibility/; ee-blog-index.css): the box lines up with the text, and
   from 1440px the sidebar is on the left, as on posts, at the title's edge
   and level with the first line; the text moves right to make room
   (ee-blog-index.css). */
.archive-page + .page .ee-toc {
    max-width: 720px;
    margin: 0 0 2rem;
    padding: 0;
}

.archive-page + .page .entry-content h2[id],
.archive-page + .page .entry-content h3[id] {
    scroll-margin-top: 1.5rem;
}

@media (min-width: 1440px) {
    .archive-page + .page {
        position: relative;
    }

    .archive-page + .page .ee-toc {
        top: 48px;
        left: var(--ee-header-inset);
    }
}

@media (min-width: 1440px) {
    /* .ee-post-body (layouts/post.njk) holds the list and the post content,
       so the sidebar starts level with the Summary box, below the title. */
    .ee-post-body {
        position: relative;
    }

    /* z-index: .entry-content is full width, position: relative and later in
       the page, so without it the content's empty margin is painted over the
       sidebar and takes every mouse click; only keyboard focus got through. */
    .ee-toc {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: calc(50% - 360px - 2.5rem - 16rem);
        width: 16rem;
        margin: 0;
        padding: 0;
    }

    .ee-toc__box {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }

    .ee-toc a {
        font-size: 0.9375rem;
    }
}