/* Smart TOC — front-end */
.smart-toc-box {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    padding: 16px;
    margin: 1.5rem 0;
    max-width: 640px;
    box-sizing: border-box;
    font-size: 14px;
}
.smart-toc-widget-area .smart-toc-box { max-width: 100%; margin: 0; }

/* Header */
.stoc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.stoc-title  { font-weight:700; font-size:14px; color:#1a1a2e; text-transform:uppercase; letter-spacing:.04em; }

/* Toggle button */
.stoc-toggle { background:none; border:1px solid #ddd; border-radius:4px; padding:1px 7px; cursor:pointer; font-size:11px; color:#666; transition:background .15s,color .15s; }
.stoc-toggle:hover { background:#2563eb; color:#fff; border-color:#2563eb; }
.stoc-toggle.collapsed { transform:rotate(-90deg); }

/* Nav collapsible */
.stoc-nav { overflow:hidden; transition:max-height .3s ease, opacity .25s ease; max-height:2000px; opacity:1; }
.stoc-nav.collapsed { max-height:0; opacity:0; }

/* ── Lists ───────────────────────────────────────────────────
   Both flat (padding-left on <li>) and nested (.stoc-sub indent)
   show hierarchy clearly.
─────────────────────────────────────────────────────────────*/
.stoc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Nested sub-list — indented with a left border as a visual guide */
.stoc-sub {
    list-style: none;
    margin: 2px 0 2px 12px;   /* <-- left margin creates the indent */
    padding: 0 0 0 10px;       /* <-- padding + border = visual hierarchy line */
    border-left: 2px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Links */
.smart-toc-box a {
    color: #2563eb;
    text-decoration: none;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .15s, background .15s;
    font-size: 14px;
    line-height: 1.5;
}
.smart-toc-box a:hover  { color:#1d4ed8; background:rgba(37,99,235,.08); }
.smart-toc-box a.stoc-active { font-weight:600; }

/* Flat list items — indentation via padding-left set inline by PHP */
.stoc-list li { margin:0; }

@media(max-width:600px){ .smart-toc-box { font-size:13px; } }