/* ปุ่มสลับภาษาแบบลิงก์ (มติ 92)

   ⚠⚠ ชุดออกแบบวาดไว้เป็น `<select>` ที่ JavaScript คอยฟัง
     ซึ่งแปลว่าหน้าที่เซิร์ฟเวอร์วาดจะมีปุ่มที่กดแล้วไม่ติด
     ตอนนี้เป็นลิงก์ที่ยิงไปเซิร์ฟเวอร์ จึงทำงานเหมือนกันทุกหน้า

   ⚠ ไฟล์ทับ — โหลดหลัง `home.css` และหลัง `storefront.css`
     **ห้ามไปแก้สองไฟล์นั้น** มันเป็นไฟล์ของชุดออกแบบ
   ⚠ ขนาดตัวอักษรกับความสูงลอกมาจาก `.language select` เดิม
     เพื่อให้หัวเว็บไม่ขยับตอนเปลี่ยนมาเป็นลิงก์ */

.language { display: flex; gap: 6px; align-items: center; }

.language-option {
  display: inline-flex;
  align-items: center;
  /* ⚠ 44px คือขนาดที่นิ้วกดโดนจริงบนมือถือ — ค่าเดียวกับทั้งชุดออกแบบ */
  min-height: 44px;
  padding: 0 2px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
}

/* ⚠⚠ ภาษาที่กำลังใช้อยู่ต้อง **อ่านออกว่าอันไหนถูกเลือก โดยไม่ต้องดูสี**
   จึงมีขีดใต้ด้วย ไม่ใช่เปลี่ยนสีอย่างเดียว
   (บทเรียนเดิมจาก Configurator — หน้าที่ทำงานถูกแต่ดูไม่ออก
    ผู้ใช้แยกไม่ออกจากหน้าที่พัง) */
.language-option.on {
  color: var(--ink);
  box-shadow: inset 0 -3px var(--yellow);
}

.language-option:not(.on):hover { color: var(--ink); }

@media (max-width: 600px) {
  .language { gap: 3px; }
  .language-option { font-size: 12px; padding: 0 1px; }
}