/*
 * หน้าเว็บผู้อ่าน — ห้องสมุดดิจิทัลสำหรับคนตาบอด
 *
 * ข้อกำหนดที่ยึด (WCAG 2.2 AA):
 *   - คอนทราสต์ข้อความอย่างน้อย 4.5:1 (คำนวณและตรวจแล้วทุกคู่สี)
 *   - กรอบโฟกัสเห็นชัด ห้ามซ่อน
 *   - เป้าหมายสัมผัสอย่างน้อย 44x44 px
 *   - ข้อความขยายได้ถึง 200% โดยไม่พัง (ใช้ rem ไม่ใช่ px)
 *   - ไม่สื่อความหมายด้วยสีอย่างเดียว
 */

:root {
    /* คู่สีที่ผ่านเกณฑ์คอนทราสต์ — ตรวจด้วยการคำนวณจริง ไม่ใช่กะเอา */
    --text: #1a1a1a;          /* บนพื้นขาว = 16.9:1 */
    --text-muted: #4a5462;    /* บนพื้นขาว = 8.1:1  */
    --bg: #ffffff;
    --bg-alt: #f4f6f8;
    --primary: #12508f;       /* ตัวอักษรขาวบนพื้นนี้ = 7.6:1 */
    --primary-text: #ffffff;
    --border: #6b7280;        /* บนพื้นขาว = 4.8:1 (ผ่านเกณฑ์ non-text 3:1) */
    --focus: #b3541e;         /* สีกรอบโฟกัส ตัดกับทั้งพื้นขาวและพื้นน้ำเงิน */
    --danger: #a4262c;        /* บนพื้นขาว 7.3:1 บน --bg-alt 6.7:1 */
    --warning: #7a4a00;       /* บนพื้นขาว 7.5:1 บน --bg-alt 6.9:1 */
    --success: #1e6b34;       /* บนพื้นขาว 6.6:1 บน --bg-alt 6.0:1 */
}

/* ใช้ rem ทั้งหมดเพื่อให้ผู้ใช้ขยายตัวอักษรได้จากการตั้งค่าเบราว์เซอร์ */
html { font-size: 100%; }

body {
    margin: 0;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
    /* 1.125rem = 18px เริ่มต้น อ่านง่ายกว่า 16px สำหรับผู้ใช้สายตาเลือนราง */
    font-size: 1.125rem;
    /* บรรทัดห่าง 1.6 ตามเกณฑ์ WCAG 1.4.12 */
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

/* ------------------------------------------------------------------
   ลิงก์ข้ามไปเนื้อหาหลัก
   ซ่อนจนกว่าจะได้โฟกัส แล้วต้องเห็นชัดทันที
   ------------------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    color: var(--primary-text);
    z-index: 100;
}

.skip-link:focus {
    left: 0;
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   กรอบโฟกัส — ห้ามลบเด็ดขาด
   ผู้ใช้คีย์บอร์ดและผู้ใช้สายตาเลือนรางจะไม่รู้ว่าอยู่ตรงไหน
   ------------------------------------------------------------------ */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   ข้อความสำหรับ screen reader เท่านั้น
   ห้ามใช้ display:none เพราะ screen reader จะอ่านไม่เจอ
   ------------------------------------------------------------------ */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
   โครงหน้า
   ------------------------------------------------------------------ */
header[role="banner"],
footer[role="contentinfo"] {
    padding: 1rem;
    background: var(--bg-alt);
}

main {
    /* 70ch อ่านสบายตา ไม่ต้องกวาดสายตาไกล */
    max-width: 70ch;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.site-name { margin: 0; font-weight: 700; }

/* เมนูหลักแนวนอนบนจอกว้าง ขึ้นบรรทัดใหม่เองบนจอแคบหรือเมื่อขยายตัวอักษร */
.site-nav { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-nav a { display: inline-block; padding: 0.35rem 0; }

.announcement { border-left: 4px solid var(--primary); padding: 0.25rem 1rem; background: var(--bg-alt); }
.rating, .recommend-note { margin: 0.25rem 0; }
.recommend-note { font-style: italic; }
.review-meta { font-weight: 600; margin-bottom: 0.25rem; }
.reviews > li { margin-bottom: 1rem; }
fieldset { margin: 1rem 0; padding: 0.75rem 1rem; }
legend { font-weight: 700; padding: 0 0.25rem; }

h1 { font-size: 1.75rem; margin-top: 0; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }

/* ขีดเส้นใต้ลิงก์เสมอ — ไม่แยกลิงก์ด้วยสีอย่างเดียว */
a { color: var(--primary); text-decoration: underline; }
a:hover { text-decoration-thickness: 3px; }

/* ------------------------------------------------------------------
   แถบแจ้งโหมดทดสอบ
   ต้องเห็นชัดและมีข้อความ ไม่ใช่แค่เปลี่ยนสีพื้นหลัง
   ------------------------------------------------------------------ */
.mode-banner {
    padding: 0.75rem 1rem;
    background: #fff4e5;
    color: #6b3d00;   /* บนพื้น #fff4e5 = 8.2:1 */
    border-bottom: 4px solid #b3541e;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   ฟอร์ม
   ------------------------------------------------------------------ */
.field { margin-bottom: 1.25rem; }

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.field-help {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/*
 * ทุกชนิดของช่องกรอก ไม่ใช่แค่ text/search
 * ช่องที่ไม่มีกฎ (email, password, date, number, textarea) ใช้ตัวอักษรของเบราว์เซอร์ 13.33px
 * ซึ่งไม่ขยายตามขนาดตัวอักษรของห้องสมุด (font_scale) และสูงแค่ 21px
 * ทั้งที่หน้าเข้าสู่ระบบคือหน้าที่ผู้อ่านสายตาเลือนรางใช้บ่อยที่สุด
 * (1rem ตามขนาดของ html จึงขยายตาม font_scale และการตั้งค่าเบราว์เซอร์)
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),
input[type="file"],
textarea,
select {
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
    /* 44px ตามเกณฑ์เป้าหมายสัมผัส WCAG 2.5.8 */
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    /* 1rem = 16px กัน iOS ซูมอัตโนมัติตอนโฟกัส ซึ่งทำให้ผู้ใช้สับสน */
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 4px;
}

button {
    min-height: 44px;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--primary-text);
    background: var(--primary);
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

button:hover { background: #0d3d6f; }

textarea { min-height: 6rem; resize: vertical; }
input[type="file"] { padding: 0.5rem; }
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; }

/* ------------------------------------------------------------------
   ข้อความผิดพลาด คำเตือน และข้อความแจ้งผล
   ทุกแบบมีคำนำหน้าเป็นตัวอักษร ("ผิดพลาด:" "ข้อควรทราบ:") และกรอบ/ความหนา
   ไม่สื่อด้วยสีอย่างเดียว (WCAG 1.4.1) สีทุกชุดผ่าน 4.5:1 บนทั้ง --bg และ --bg-alt
   ------------------------------------------------------------------ */
.error-message,
.field-error,
.error {
    color: var(--danger);
    font-weight: 700;
}

.field-error { margin: 0 0 0.4rem; }

.warning { color: var(--warning); font-weight: 700; }
.ok { color: var(--success); font-weight: 700; }

/* กล่องประกาศข้อผิดพลาดต้นหน้า (role="alert" จาก liveRegion และ errorSummary) */
.error-summary,
[role="alert"] {
    border: 3px solid var(--danger);
    border-left-width: 8px;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background: var(--bg);
}

/* สรุปข้อผิดพลาดที่ซ้อนอยู่ในกล่อง alert อีกชั้น ไม่ต้องมีกรอบซ้ำ */
[role="alert"] .error-summary { border: 0; padding: 0; margin: 0; }

.error-summary h2 { margin-top: 0.25rem; color: var(--danger); }
.error-summary a { color: var(--danger); font-weight: 700; }

/* ข้อความแจ้งผล (role="status" จาก liveRegion) */
.notice,
main [role="status"] {
    border-left: 6px solid var(--success);
    padding: 0.25rem 1rem;
    margin: 1rem 0;
}

/* ช่องที่ผิด: ขอบหนาขึ้นและเป็นสีอันตราย ประกอบกับข้อความผิดพลาดที่อยู่เหนือช่อง */
[aria-invalid="true"] {
    border-color: var(--danger) !important;
    border-width: 3px !important;
}

.field-invalid > label { color: var(--danger); }

/* ------------------------------------------------------------------
   ผลการค้นหา
   ------------------------------------------------------------------ */
.results {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.results > li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.results > li:last-child { border-bottom: 0; }

/* ฟอร์แมตที่มี — ข้อมูลสำคัญที่ผู้ใช้ต้องรู้ก่อนคลิก จึงเน้นให้ชัด */
.formats {
    margin: 0.25rem 0;
    font-weight: 600;
}

.summary {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------
   โหมดคอนทราสต์สูงของระบบปฏิบัติการ
   บางเบราว์เซอร์ตัดสีพื้นหลังออก ต้องบังคับให้ยังเห็นขอบเขต
   ------------------------------------------------------------------ */
@media (forced-colors: active) {
    button,
    input,
    textarea,
    select {
        border: 2px solid currentColor;
    }

    /* สีถูกตัดออกในโหมดนี้ ช่องที่ผิดจึงต้องต่างด้วยความหนาของขอบ */
    [aria-invalid="true"] { border-width: 4px; }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
   ตัวอ่านหนังสือบนเว็บ

   ผู้ใช้สายตาเลือนรางจำนวนมากอ่านด้วยการขยายหน้าจอมาก
   บรรทัดจึงต้องไม่ยาวเกินไป และระยะห่างบรรทัดต้องพอให้สายตาไม่หลงบรรทัด
   ------------------------------------------------------------------ */
.section-body {
    max-width: 38em;
    line-height: 1.9;
    font-size: 1.05rem;
}

.section-body p {
    margin: 0 0 1.1em;
}

.section-body blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid var(--border);
}

/* เลขหน้าไม่แสดงเป็นข้อความ แต่ยังอ่านได้ด้วยโปรแกรมอ่านหน้าจอ */
.pagenum {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}

.position,
.book-context,
.capability {
    color: var(--text-muted);
    margin: 0.25rem 0;
}

.section-nav {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* สารบัญที่มีหลายระดับ ย่อหน้าตามระดับเพื่อให้เห็นลำดับชั้น */
.toc { line-height: 2; }
.toc-level-2 { margin-left: 1.5rem; }
.toc-level-3 { margin-left: 3rem; }
.toc-level-4 { margin-left: 4.5rem; }
.toc-level-5,
.toc-level-6 { margin-left: 6rem; }

.shortcuts { margin: 1.5rem 0; }

.shortcuts-table {
    border-collapse: collapse;
    margin: 0.5rem 0;
}

.shortcuts-table th,
.shortcuts-table td {
    text-align: left;
    padding: 0.35rem 1rem 0.35rem 0;
    border-bottom: 1px solid var(--border);
}

audio {
    width: 100%;
    max-width: 38em;
    margin: 0.5rem 0 1rem;
}

/* ------------------------------------------------------------------
   ชุดสี — ห้องสมุดเลือกค่าเริ่มต้น ผู้อ่านเลือกเองได้ที่หน้าบัญชีของฉัน
   ทุกคู่สีคำนวณความต่างแล้ว (ตัวเลขในวงเล็บคืออัตราบนพื้นหลักของชุดนั้น)
   ------------------------------------------------------------------ */
html[data-theme="dark"] {
    --text: #eceff1;          /* 16.0:1 */
    --text-muted: #b8c0c8;    /* 10.0:1 */
    --bg: #121417;
    --bg-alt: #1e2227;        /* ตัวอักษรบนพื้นนี้ 13.9:1 */
    --primary: #8ab8ff;       /* 9.1:1 */
    --primary-text: #0b1a2e;  /* บนปุ่มสีหลัก 8.6:1 */
    --border: #8a939e;        /* 5.9:1 */
    --focus: #ffb86b;         /* 10.8:1 */
    --danger: #ff8a8a;        /* 8.1:1 บน --bg-alt 7.1:1 */
    --warning: #ffcc66;       /* 12.4:1 บน --bg-alt 10.7:1 */
    --success: #7ddc94;       /* 11.0:1 บน --bg-alt 9.6:1 */
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --text: #eceff1;
        --text-muted: #b8c0c8;
        --bg: #121417;
        --bg-alt: #1e2227;
        --primary: #8ab8ff;
        --primary-text: #0b1a2e;
        --border: #8a939e;
        --focus: #ffb86b;
        --danger: #ff8a8a;
        --warning: #ffcc66;
        --success: #7ddc94;
        color-scheme: dark;
    }
}

/* สีตัดกันสูง: พื้นดำ ตัวอักษรเหลือง ลิงก์ฟ้า — สำหรับผู้อ่านสายตาเลือนราง */
html[data-theme="contrast"] {
    --text: #ffff00;          /* 19.6:1 */
    --text-muted: #ffffff;    /* 21:1 */
    --bg: #000000;
    --bg-alt: #000000;
    --primary: #00ffff;       /* 16.8:1 */
    --primary-text: #000000;
    --border: #ffffff;
    --focus: #ffffff;
    --danger: #ff6b6b;        /* 7.6:1 */
    --warning: #ffd166;       /* 14.6:1 */
    --success: #66ff66;       /* 16.1:1 */
    color-scheme: dark;
}

html[data-theme="dark"] button:hover,
html[data-theme="contrast"] button:hover { background: var(--text); color: var(--bg); }

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] button:hover { background: var(--text); color: var(--bg); }
}

html[data-theme="dark"] .mode-banner,
html[data-theme="contrast"] .mode-banner { background: #2a2210; color: #ffd166; }  /* 10.9:1 */

.site-logo { max-height: 4rem; width: auto; vertical-align: middle; margin-right: 0.5rem; }
.site-footer-text { white-space: pre-line; }