/* ═══════════════════════════════════════════════════════════════════
 *  MjourneyGo — Contrast Fix
 *  แก้ปัญหา "ตัวหนังสือสีจม" ให้ผ่านเกณฑ์ WCAG 2.1 AA
 *  (ข้อความปกติ ≥ 4.5:1 · ข้อความใหญ่/หนา ≥ 3:1)
 *
 *  วิธีใช้: ใส่บรรทัดนี้ "เป็นบรรทัดสุดท้ายใน <head>" ของทุกหน้า
 *      <link rel="stylesheet" href="/css/mj-contrast.css?v=1">
 *
 *  ทำไมต้องอยู่ท้าย <head>:
 *    - จะได้ชนะกฎสีเดิมที่อยู่ใน <style> ด้านบน (ลำดับหลังชนะ)
 *    - แต่ยังแพ้ <style> ธีมมืดที่อยู่ท้าย <body> ของบางหน้า
 *      → หน้าธีมมืดจึงยังคุมสีของตัวเองได้ ไม่โดนไฟล์นี้ทับ
 *
 *  ตัวเลขในคอมเมนต์ = อัตราส่วนคอนทราสต์ ก่อน → หลัง
 * ═══════════════════════════════════════════════════════════════════ */

/* หมายเหตุเรื่อง !important:
 *  หลายหน้ามี <style> แทรกอยู่กลาง <body> (หลังไฟล์นี้) กฎเดิมจึงชนะ
 *  เฉพาะคลาสที่ยืนยันแล้วว่าอยู่บน "หน้าพื้นสว่าง" เท่านั้นจึงใส่ !important
 *  คลาสที่อาจไปโผล่บนหน้าพื้นมืดด้วย จะไม่ใส่ เพื่อไม่ให้ธีมมืดพัง
 */

/* ───────────────────────────────────────────────────────────────────
 *  1) ข้อความรองบนพื้นสว่าง
 *     #8a8278 บนพื้นครีม = 3.45:1 (ตก) → #6b6459 = 5.33:1
 * ─────────────────────────────────────────────────────────────────── */
.section-desc,
.lh-sub,
#aboutText,
.live-meta,
.fc,
#ps1,
#ps2,
.st-dsc,
.sb-lbl,
.rg-gl,
.tph-d,
.tpi-sub {
  color: #6b6459 !important;
}

/* คลาสที่มีทั้งบนหน้าสว่างและหน้ามืด — ไม่ใส่ !important
   ปล่อยให้ธีมมืดของหน้านั้น ๆ ชนะได้ */
.sub,
.gd,
.rt-hint,
.sbl,
.tpi-cl {
  color: #6b6459;
}

/* ปุ่มฟิลเตอร์/แท็บที่ยังไม่ถูกเลือก — เดิมจางจนอ่านยาก */
.filter-btn,
.transport-tab,
.share-btn,
.tp.ht,
.tp.rs,
.fb.str,
.fb.cui {
  color: #6b6459 !important;
}
.filter-btn.active,
.transport-tab.active {
  color: #fff;
}

/* ───────────────────────────────────────────────────────────────────
 *  2) ลิงก์/ป้ายสีเขียวแบรนด์บนพื้นสว่าง
 *     #5c7a5f = 4.35:1 (ตกนิดเดียว) → #4f6952 = 5.51:1
 *     คงโทนเขียวเดิมไว้ แค่เข้มขึ้นเล็กน้อย
 * ─────────────────────────────────────────────────────────────────── */
.section-label,
.lh-all {
  color: #4f6952 !important;
}

/* ───────────────────────────────────────────────────────────────────
 *  3) ข้อความรองบนพื้นมืด
 *     --faint #5a6485 บน #07090f = 3.41:1 (ตก) → #8891b3 = 6.40:1
 *     ยังจางกว่า --muted อยู่ ลำดับความสำคัญทางสายตาไม่เสีย
 * ─────────────────────────────────────────────────────────────────── */
:root {
  --faint: #8891b3;
}

/* ฟุตเตอร์สีน้ำตาลเข้มของหน้าแรก: #6e6a62 บน #2d2a25 = 2.65:1 → 5.32:1 */
.footer-copy {
  color: #a49d92 !important;
}

/* ───────────────────────────────────────────────────────────────────
 *  4) ตัวอักษรขาวบนพื้นสี — พื้นสีอ่อนเกินไป ทำให้ตัวขาวจม
 * ─────────────────────────────────────────────────────────────────── */

/* แท็บสายยามาโนเตะ: ขาวบน #4caf50 = 2.78:1 → พื้น #357a38 = 5.26:1 */
/* แท็บสายรถไฟหน้าแรก — พื้นเขียวอ่อนเกินไป ตัวขาวเลยจม */
.yl-tab {
  background: #357a38 !important;
  color: #fff !important;
}

/* ปุ่ม YouTube: ขาวบนแดง #f00 = 4.00:1 → #d40000 = 5.53:1 */
#aboutYtBtn,
.social-btn.yt {
  background: #d40000 !important;
}

/* ป้าย NEW/LIVE: ขาวบน #e0324a = 4.44:1 → #cc2a40 = 5.29:1 */
.mjh-livetag {
  background: #cc2a40 !important;
}

/* ป้าย "ฟรี / Overpass API" หน้าที่พัก — ขาวบนเขียวอ่อน 1.61:1 */
.hb.g {
  background: #4f7a34 !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────────
 *  5) ตาข่ายกันพลาด — ถ้ามีที่ไหนหลุดไป
 *     สีตัวอักษรของธีมสว่างเดิมจะจมสนิทบนพื้นมืด (≈1.3:1)
 *     กฎนี้ดักไว้เฉพาะกรณีที่ประกาศสีมืดไว้ตรง ๆ ในแอตทริบิวต์ style
 * ─────────────────────────────────────────────────────────────────── */
[style*="color:#2d2a25"],
[style*="color: #2d2a25"] {
  color: inherit !important;
}

/* ───────────────────────────────────────────────────────────────────
 *  6) โฟกัสคีย์บอร์ด — ต้องมองเห็นชัดทุกธีม
 * ─────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #37f0dc;
  outline-offset: 2px;
  border-radius: 4px;
}