/* ==========================================================================
   dark.css — เก็บรายละเอียดที่ตัวแปรสีใน tokens.css ปรับให้ไม่ครบ
   (ส่วนใหญ่ของเว็บสลับโหมดได้เองผ่าน CSS variables แล้ว)
   ========================================================================== */

html[data-theme="dark"] {

  /* ภาพให้นวลตาลง ไม่แสบตาบนพื้นมืด */
  & img { filter: brightness(var(--img-bright)); }
  & .teacher-photo img,
  & .nav-logo img,
  & .fb-logo img { filter: none; }

  /* หัวข้อ Syne ที่เดิมใช้สีเข้ม */
  & .section-title,
  & .hero-title { color: var(--tx); }

  /* แถบบนสุด: teal เข้มลงเล็กน้อยให้เข้ากับพื้นมืด */
  & .topbar { background: #0C5C8F; }

  /* แถบสถิติและ CTA: ลดความจ้าของ gradient */
  & .stats-band { background: linear-gradient(135deg, #062544 0%, #0D4A78 100%); }
  & .cta        { background: linear-gradient(135deg, #14548C 0%, #062544 100%); }

  /* การ์ดคำนิยม: พื้นหลังต้องต่างจากพื้น section */
  & .testi-card { background: var(--bg2); }

  /* ช่องกรอกฟอร์ม */
  & .fg input,
  & .fg select,
  & .fg textarea { background: var(--bg2); color: var(--tx); }
  & .fg input::placeholder,
  & .fg textarea::placeholder { color: var(--tx3); }
  & .fg select option { background: var(--surface); color: var(--tx); }

  /* แผนที่ Google: ลดความจ้า */
  & .c-map iframe { filter: brightness(.85) contrast(1.05); }

  /* ฟุตเตอร์อยู่บนพื้นดำอยู่แล้ว ไม่ต้องหรี่ */
  & .footer img { filter: none; }

  /* เส้นขอบการ์ดให้เห็นชัดขึ้นบนพื้นมืด */
  & .feat-card,
  & .prog-card,
  & .news-main,
  & .news-item,
  & .safety-item,
  & .c-item,
  & .contact-form { border: 1px solid var(--border); }

  /* ปุ่ม outline */
  & .btn-outline { color: var(--tx); border-color: var(--border); }
  & .btn-outline:hover { border-color: var(--orange); color: var(--orange); }

  /* ปุ่มขาวบน CTA ยังเป็นสีขาวเหมือนเดิม (อ่านง่ายบนพื้นส้ม) */
  & .btn-white { background: #fff; color: #0C4E86; }
}

/* --------------------------------------------------------------------------
   สำรองสำหรับเบราว์เซอร์เก่าที่ยังไม่รองรับ CSS Nesting
   -------------------------------------------------------------------------- */
html[data-theme="dark"] img { filter: brightness(.88); }
html[data-theme="dark"] .teacher-photo img,
html[data-theme="dark"] .nav-logo img,
html[data-theme="dark"] .fb-logo img,
html[data-theme="dark"] .footer img { filter: none; }
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .hero-title { color: var(--tx); }
html[data-theme="dark"] .topbar { background: #0C5C8F; }
html[data-theme="dark"] .stats-band { background: linear-gradient(135deg, #062544 0%, #0D4A78 100%); }
html[data-theme="dark"] .cta { background: linear-gradient(135deg, #14548C 0%, #062544 100%); }
html[data-theme="dark"] .testi-card { background: var(--bg2); }
html[data-theme="dark"] .fg input,
html[data-theme="dark"] .fg select,
html[data-theme="dark"] .fg textarea { background: var(--bg2); color: var(--tx); }
html[data-theme="dark"] .fg input::placeholder,
html[data-theme="dark"] .fg textarea::placeholder { color: var(--tx3); }
html[data-theme="dark"] .c-map iframe { filter: brightness(.85) contrast(1.05); }
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .prog-card,
html[data-theme="dark"] .news-main,
html[data-theme="dark"] .news-item,
html[data-theme="dark"] .safety-item,
html[data-theme="dark"] .c-item,
html[data-theme="dark"] .contact-form { border: 1px solid var(--border); }
html[data-theme="dark"] .btn-outline { color: var(--tx); border-color: var(--border); }
html[data-theme="dark"] .btn-white { background: #fff; color: #0C4E86; }