/* ===========================
   Table of Contents (Dark)
   =========================== */

@media (min-width: 768px) {
    #middle-pages .main-pages-mid .middle-wrapper{padding: 180px 0;}
}

/* global defaults for safe anchor jumps */
:root { --sticky-offset: 80px; } /* JS will keep this live to real header height */
html { scroll-padding-top: var(--sticky-offset, 80px); }

/* dark card */
.toc-accordion.dark {
    background: #1f2a33;
    border: 1px solid #2b3944;
    border-radius: 6px;
    margin: 18px 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
    color: #cfe3f1;
    overflow: hidden;
}

/* header */
.toc-summary {
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #23313b;
    border-bottom: 1px solid #2b3944;
}
.toc-summary::after { content: "▴"; font-size: 12px; color: #9eb6c6; }
.toc-accordion:not([open]) .toc-summary::after { content: "▾"; }

/* body */
.toc-body { padding: 8px 0 6px; }

/* list */
.toc-list {
    list-style: none;
    padding: 0 16px;
    margin: 0;
}
.toc-item {
    width: 100% !important;
    float: unset !important;
    margin: 10px !important;            /* fixed invalid unit */
    padding: 10px 0;
    border-bottom: 1px dotted #395061;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
}
.toc-item:last-child { border-bottom: none; }

.toc-list a {
    color: #cfe3f1;
    text-decoration: none;
}
.toc-list a:hover { text-decoration: underline; }
.toc-list a.active { font-weight: 600; text-decoration: none; }

/* footer HIDE link (currently unused) */
.toc-footer { padding: 8px 16px 12px; }
.toc-hide {
    font-size: 12px;
    color: #9eb6c6;
    text-decoration: none;
}
.toc-hide::after { content:"  ▴"; }
.toc-accordion:not([open]) .toc-hide::after { content:"  ▾"; }

/* make anchor jumps land below sticky header (JS sets the var) */
h2[id] { scroll-margin-top: var(--sticky-offset, 80px); }

/* small phones: a bit tighter */
@media (max-width: 575.98px) {
    .toc-summary{ padding: 12px; }
    .toc-list{ padding: 0 12px; }
    .toc-footer{ padding: 6px 12px 10px; }
}

.blog_body_content h2[id]{
    position: relative;
    display: inline-block;
}