/* ===========================================================================
   Component — Article TOC (Table of Contents)
   ---------------------------------------------------------------------------
   .article-toc = sidebar TOC على الديسكتوب (sticky)، static على الجوال.

   📦 داخل @layer components
   📛 0 !important
   ============================================================================ */
@layer components {


/* (1) Mobile + tablet (<992px) — TOC يبقى static، لا يطفو */
@media (max-width: 991.98px) {
    .single-layout__toc-col,
    .article-toc,
    .adn-toc {
        position: static;
        inset: auto;
        z-index: auto;
        max-block-size: none;
        margin-block: 0 16px;
    }

    .article-toc[hidden],
    .single-layout__toc-col[hidden],
    .adn-toc[hidden] {
        display: none;
    }

    .article-toc__toggle,
    .adn-toc__toggle {
        inline-size: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(141, 182, 0, 0.08), rgba(141, 182, 0, 0.02));
        border: 1px solid rgba(141, 182, 0, 0.15);
        border-radius: 10px;
        color: #1a1a1a;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
    }
    .article-toc__toggle::after,
    .adn-toc__toggle::after {
        content: "▾";
        font-size: 1em;
        transition: transform 0.2s ease;
    }
    .article-toc.is-collapsed .article-toc__toggle::after,
    .adn-toc.is-collapsed .adn-toc__toggle::after {
        transform: rotate(-90deg);
    }
    .article-toc.is-collapsed .article-toc__list,
    .adn-toc.is-collapsed .adn-toc__list {
        display: none;
    }
    .article-toc__list,
    .adn-toc__list {
        margin-block-start: 12px;
        padding: 12px 16px;
        background: #fff;
        border: 1px solid var(--ad-color-border, #e5e7eb);
        border-radius: 10px;
        list-style: none;
    }
}


/* (2) Mobile small (<768px) — TOC compact */
@media (max-width: 767.98px) {
    .single-layout__toc-col {
        order: -1;
        margin-block-end: 16px;
    }
    .article-toc,
    .adn-toc {
        max-block-size: 50vh;
        overflow-y: auto;
        padding: 12px 16px;
        margin-inline: 16px;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .article-toc__title,
    .adn-toc__title {
        font-size: 0.95rem;
    }
}


} /* end @layer components */