/**
 * TOC Enhance (child) - giao diện Table of Contents kiểu thu/mở + cuộn
 *
 * Nạp SAU toc.css của parent. Chỉ tác động lên .toc-expandable (TOC inline),
 * không đụng tới toc-bubble (nút nổi).
 *
 * @package AffiliateCMS_Child
 */

/* Khung card: viền theo màu primary, bo góc rõ như mẫu */
.toc-enh.toc-expandable__card {
    border: 2px solid var(--color-primary, #6d5ef8);
    border-radius: 14px;
}

/* Header: nền trắng (mặc định), bấm được, chevron nằm bên phải */
.toc-enh .toc-expandable__header {
    background-color: var(--color-surface, #ffffff);
    cursor: pointer;
    gap: var(--space-3);
}

/* Icon đơn giản (bỏ khối gradient) cho giống mẫu */
.toc-enh .toc-expandable__icon {
    width: auto;
    height: auto;
    background: none;
    color: var(--color-primary, #6d5ef8);
    font-size: 1.35rem;
}

/* Tiêu đề đậm hơn chút */
.toc-enh .toc-expandable__title {
    font-size: 1.05rem;
}

/* Ẩn meta (sections / min read) + progress để danh sách gọn như mẫu */
.toc-enh .toc-expandable__meta,
.toc-enh .toc-expandable__progress {
    display: none;
}

/* Nút chevron thu/mở */
.toc-enh-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--color-primary, #6d5ef8);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.2s ease;
}

.toc-enh-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.toc-enh-toggle i {
    transition: transform 0.2s ease;
}

/* Khi thu gọn: xoay chevron xuống + ẩn body */
.toc-enh.is-toc-collapsed .toc-enh-toggle i {
    transform: rotate(180deg);
}

.toc-enh.is-toc-collapsed .toc-expandable__header {
    border-bottom: 0;
}

.toc-enh.is-toc-collapsed .toc-expandable__body {
    display: none;
}

/* Body: KHUNG CUỘN - không show hết, cuộn được */
.toc-enh .toc-expandable__body {
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Thanh cuộn gọn (WebKit) */
.toc-enh .toc-expandable__body::-webkit-scrollbar {
    width: 8px;
}

.toc-enh .toc-expandable__body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Hiện TẤT CẢ mục (bỏ cơ chế ẩn bớt của parent) + ẩn nút "Show all" cũ */
.toc-enh .toc-expandable__hidden {
    display: block;
}

.toc-enh .toc-expandable__expand {
    display: none;
}

/* Bỏ số thứ tự (number badge) cho giống mẫu - chỉ còn chữ */
.toc-enh .toc-expandable__number {
    display: none;
}

/* Mục danh sách: chữ to, dễ đọc, cho xuống dòng (không cắt cụt) */
.toc-enh .toc-expandable__link {
    font-size: 1rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text, #111827);
}

.toc-enh .toc-expandable__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.toc-enh .toc-expandable__link--h3 {
    padding-left: var(--space-6);
    font-size: 0.9375rem;
}

/* ================================================================
   RESPONSIVE - tối ưu điện thoại
   ================================================================ */
@media (max-width: 639px) {
    .toc-enh .toc-expandable__body {
        max-height: 50vh;
        padding: var(--space-2) var(--space-3);
    }

    .toc-enh .toc-expandable__title {
        font-size: 0.95rem;
    }

    .toc-enh .toc-expandable__link {
        font-size: 0.95rem;
        padding: 0.5rem 0.6rem;
    }

    /* Tap target chevron đủ lớn */
    .toc-enh-toggle {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}