/* Table of contents (v0.3.900) — its own stylesheet, and the whole of the feature.
 *
 * THERE IS NO toc.js, AND THAT IS THE DESIGN. Joli's would not open because WP Rocket delays its
 * 14.6 KB script until the reader's first interaction, and the tap meant to open it was spent
 * loading that script instead. Everything here is native: <details> opens and closes on its own, an
 * anchor jumps on its own, and the smooth scroll below is a CSS property. Nothing a delayed or
 * blocked script can stop working.
 *
 * IT FOLLOWS THE HOUSE STYLE RATHER THAN INVENTING A SIXTH ONE:
 *   - No border. Every section in this plugin is `border: 0` with a background, and the promo boxes
 *     are coloured panels — a bordered box would be the only one on the page.
 *   - No border-radius. Brand decision, everywhere.
 *   - No font-family and no font-weight on the body of it. The theme's Customizer sets Tahoma at
 *     20px and sizes the headings; restating any of that here just makes a staler copy of it.
 *   - Sizes in `em`, never `rem` — her body text is 20px and `rem` is 16px, so a rem-sized box
 *     renders smaller than the writing around it.
 *   - Every colour comes from a settings variable WITH a literal fallback. A bare hex would ignore
 *     Settings → Colors, and a var() with nothing behind it fails silently and differently per
 *     property.
 *
 * The title is plain text on purpose. Section headings in this plugin are Sweet Apricot PNGs and
 * sub-headings are plain — a contents label is a sub-heading, and a new PNG would need its colour
 * file, its -bw twin for print, a map entry in frontend.js and a check against
 * --jcp-heading-widest.
 */

.jcp-toc {
    margin: 2rem 0;
    /* More room on the LEFT than the other three sides, her call once she saw it on a real post.
       Her theme numbers an <ol> with a large round badge that sits outside the text, so the list
       reads as though it is touching the edge even though the box is evenly padded. The extra is
       given back on a narrow screen, where every pixel of width is doing more work. */
    padding: 1.25rem 1.5rem 1.25rem 2.5rem;
    background: var(--jcp-toc-bg, #f6fafa);
    border: 0;
    border-radius: 0;
    font-size: 0.95em;
    line-height: 1.6;
    /* So a floated image in the post cannot ride into the box, the same reason all five promo
       boxes carry it. */
    display: flow-root;
}

/* The WHOLE bar opens and closes it, not a small word at one end. Joli's `header_as_toggle` was off,
   which left a grey "[View More]" as the only target — a hard thing to hit on a phone, and half of
   why it felt like it would not open. */
.jcp-toc-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--jcp-heading, #555557);
    font-weight: bold;
}
/* Safari draws its own triangle through ::-webkit-details-marker and ignores list-style. */
.jcp-toc-summary::-webkit-details-marker { display: none; }

/* Our own marker. A border triangle rather than an SVG or a font glyph: nothing to download, it
   inherits the accent colour, and it costs no bytes at all. */
.jcp-toc-summary::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 0.42em solid var(--jcp-accent, #4f857b);
    border-top: 0.32em solid transparent;
    border-bottom: 0.32em solid transparent;
    transition: transform 0.15s ease;
}
.jcp-toc[open] > .jcp-toc-summary::before {
    transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    .jcp-toc-summary::before { transition: none; }
}

.jcp-toc-summary:focus-visible {
    outline: 2px solid var(--jcp-accent, #4f857b);
    outline-offset: 2px;
}

.jcp-toc-nav {
    margin-top: 0.7em;
}

.jcp-toc-list {
    margin: 0;
    padding: 0 0 0 1.4em;
}

.jcp-toc-item {
    margin: 0.25em 0;
    color: var(--jcp-text, #555557);
}

/* Sub-headings sit in a nested list, so their numbering restarts instead of running straight on
   from the main sections -- flat, "2. How to crochet ..." read as the second main section rather
   than as part of the first. A touch quieter so the shape of the pattern reads at a glance. */
.jcp-toc-sublist {
    margin: 0.25em 0 0.4em;
    padding: 0 0 0 1.5em;
    list-style: lower-alpha;
}
.jcp-toc-item--sub {
    font-size: 0.94em;
}

.jcp-toc-link {
    color: var(--jcp-text, #555557);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.jcp-toc-link:hover,
.jcp-toc-link:focus-visible {
    color: var(--jcp-link, #4f857b);
    border-bottom-color: var(--jcp-link, #4f857b);
}

/* A jump should land the heading below the sticky pattern header, not underneath it.
   `scroll-margin` needs no JavaScript at all — Joli spends a 750ms scripted animation and an offset
   option on the same job. Scoped to the headings we actually list, so it cannot surprise anything
   else on her pages that uses an anchor. */
.jcp-pattern [id]:target,
.entry-content [id]:target {
    scroll-margin-top: 5rem;
}
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* The readability mode turns the pattern high-contrast; the contents has to come with it. */
body.jcp-text-mode .jcp-toc {
    background: #ffffff;
    border: 1px solid #1a1a1a;
}
body.jcp-text-mode .jcp-toc-link,
body.jcp-text-mode .jcp-toc-summary {
    color: #1a1a1a;
}

@media (max-width: 600px) {
    .jcp-toc { padding: 1.1rem 1rem 1.1rem 1.5rem; }
}

/* Paper does not need a list of links to places in itself. */
@media print {
    .jcp-toc { display: none !important; }
}