/* ============================================================
   ACADEMY MASTER CSS  —  varoriya
   ไฟล์กลางสำหรับคุม/override สไตล์ทั้งระบบ Academy
   โหลดเข้าใน: page-academy.php, page-academy-lesson.php
   ทุก rule scope อยู่ใต้ .learn-content / .academy-* เท่านั้น
   เพื่อไม่ให้กระทบ global theme ส่วนอื่นของเว็บ
   ------------------------------------------------------------
   แก้ที่นี่ที่เดียว มีผลทุกหน้า Academy
   ============================================================ */

/* ---------- 1) SCROLLBAR: โทนมืด เทา-ดำ ---------- */
/* Firefox */
.panel-learn,
.academy-lesson-wrap .course-sidebar,
.course-gallery-strip {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #141414;
}
/* WebKit (Chrome/Safari/Edge) */
.panel-learn::-webkit-scrollbar,
.academy-lesson-wrap .course-sidebar::-webkit-scrollbar,
.course-gallery-strip::-webkit-scrollbar {
    width: 10px;
    height: 8px;
}
.panel-learn::-webkit-scrollbar-track,
.academy-lesson-wrap .course-sidebar::-webkit-scrollbar-track,
.course-gallery-strip::-webkit-scrollbar-track {
    background: #141414;
    border-radius: 8px;
}
.panel-learn::-webkit-scrollbar-thumb,
.academy-lesson-wrap .course-sidebar::-webkit-scrollbar-thumb,
.course-gallery-strip::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 8px;
    border: 2px solid #141414;
}
.panel-learn::-webkit-scrollbar-thumb:hover,
.academy-lesson-wrap .course-sidebar::-webkit-scrollbar-thumb:hover,
.course-gallery-strip::-webkit-scrollbar-thumb:hover {
    background: #4d4d4d;
}


/* ---------- 2) + 3) LISTS: ระยะบรรทัดกระชับ + indent ลึกขึ้น ---------- */
.learn-content ul,
.learn-content ol {
    padding-left: 30px;          /* indent ลึกขึ้น (เดิม theme มักตื้น) */
    margin: 12px 0 18px;
    list-style-position: outside;
}
.learn-content ul { list-style-type: disc; }
.learn-content ol { list-style-type: decimal; }

.learn-content li {
    margin: 0 0 6px;             /* ระหว่างข้อกระชับลง (เดิมกว้างไป) */
    line-height: 1.6;            /* บรรทัดภายในข้อเดียวกัน */
    padding-left: 4px;           /* เว้นจากหัวข้อ/ตัวเลขนิดหน่อย */
}
.learn-content li:last-child { margin-bottom: 0; }

/* list ซ้อน (nested) ให้ชิดขึ้นและ indent ต่ออีกชั้น */
.learn-content li > ul,
.learn-content li > ol {
    margin: 6px 0 6px;
    padding-left: 24px;
}


/* ---------- 4) PARAGRAPH: ระยะย่อหน้าให้อ่านสบาย ---------- */
.learn-content p {
    margin: 0 0 14px;
    line-height: 1.75;
}
.learn-content p:last-child { margin-bottom: 0; }

/* หัวข้อกับย่อหน้าถัดไปให้เกาะกลุ่มกัน */
.learn-content h2 { margin: 28px 0 10px; line-height: 1.35; }
.learn-content h3 { margin: 22px 0 8px;  line-height: 1.4; }
.learn-content h2:first-child,
.learn-content h3:first-child { margin-top: 0; }

/* strong ในเนื้อหาให้เด่นแบบนุ่ม ๆ ไม่แสบตา */
.learn-content strong { color: #eaeaea; font-weight: 700; }

/* tip-box: ย่อหน้าภายในไม่ให้มี margin เกิน */
.learn-content .tip-box p:last-child { margin-bottom: 0; }
ol li:not(:last-child) {
    margin-bottom: 4px;
}
.learn-content {user-select: text;}

/* ---------- Reader font-family override: cascades across whole lesson split + dashboard ---------- */
.academy-lesson-wrap,
.academy-lesson-wrap button,
.academy-lesson-wrap input,
.academy-lesson-wrap textarea,
.academy-lesson-wrap select,
.academy-dash,
.academy-dash button,
.academy-dash input,
.academy-dash textarea,
.academy-dash select {
    font-family: var(--academy-font-family, inherit);
}
/* Theme (css/font-roboto.css) forces font-family directly on h1-h6 AND .h1-.h6 classes.
   That explicit declaration breaks inheritance for any descendant (e.g. h2 in .learn-content,
   or .seedream-prompt-editor nested inside a ".h5" wrapper div) — so it must be overridden here
   with matching selectors at a higher specificity than the theme's bare "h2"/".h5" rule. */
.academy-lesson-wrap h1, .academy-lesson-wrap h2, .academy-lesson-wrap h3,
.academy-lesson-wrap h4, .academy-lesson-wrap h5, .academy-lesson-wrap h6,
.academy-lesson-wrap .h1, .academy-lesson-wrap .h2, .academy-lesson-wrap .h3,
.academy-lesson-wrap .h4, .academy-lesson-wrap .h5, .academy-lesson-wrap .h6,
.academy-dash h1, .academy-dash h2, .academy-dash h3,
.academy-dash h4, .academy-dash h5, .academy-dash h6,
.academy-dash .h1, .academy-dash .h2, .academy-dash .h3,
.academy-dash .h4, .academy-dash .h5, .academy-dash .h6 {
    font-family: var(--academy-font-family, inherit);
}

/* ---------- Reader controls: text-size + font-family pills (shared: lesson + dashboard) ---------- */
.reader-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.reader-controls .control-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: -2px;
}
.reader-controls .control-divider {
    width: 1px;
    height: 20px;
    background: #3a3a3a;
}
.reader-controls .control-group {
    display: flex;
    gap: 4px;
}
.reader-controls .control-group button {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    padding: 3px 10px;
    font-weight: 700;
    line-height: 1.4;
    transition: all 0.15s;
    height: 30px;
    white-space: nowrap;
    margin-top: 0px;}
.reader-controls .control-group button:hover { border-color: #35d582; color: #35d582; }
.reader-controls .control-group button.active {
    background: #1a4a3a;
    border-color: #2a7a5a;
    color: #35d582;
}
/* Buttons are compact single-glyph pills now — keep everything on one row even on mobile.
   flex-wrap on .reader-controls / .panel-header still lets it fall back to wrapping
   gracefully on extremely narrow screens, but we no longer force a stacked layout. */
@media (max-width: 640px) {
    .reader-controls {
        gap: 6px;
        row-gap: 6px;
    }
    .reader-controls .control-label {
        margin-right: -4px;
    }
    .reader-controls .control-group button {
        padding: 3px 7px;
    }
}