/* Header isolation & consistency: ใช้ชั้นนี้เพื่อทำให้ header มีรูปแบบเหมือนกันทุกหน้า */

:root {
  --header-font-family: 'Mitr', 'Prompt', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --header-brand-size: 24px; /* เทียบเท่า text-2xl */
  --header-line-height: 1.6; /* ~tailwind leading-relaxed */
}

#site-header {
  font-family: var(--header-font-family);
  line-height: var(--header-line-height);
}

/* กำหนดฟอนต์แบรนด์ให้คงที่ (Mitr หนัก 700 สีชมพู) */
#site-header .brand-name {
  font-family: 'Mitr', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--header-brand-size);
  color: rgb(236 72 153); /* text-pink-500 */
}

/* ป้องกัน style ภายนอกมาทับ container ภายใน header */
#site-header .container {
  max-width: 1200px; /* ให้เหมือนหน้าแรก */
}

/* ทำให้ความสูง/spacing ของ nav คงที่ */
#site-header nav {
  background-image: linear-gradient(to right, rgb(253 242 248), rgb(245 243 255)); /* from-pink-50 to-purple-50 */
}

/* คงความสูงของ input ค้นหา */
#site-header input[type="text"] {
  font-size: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

/* ป้องกันการ override ที่ไม่ตั้งใจ โดยเพิ่ม specificity เฉพาะใน header */
#site-header .nav-link span,
#site-header .nav-item i {
  line-height: 1.6;
}

/* Sticky top คงที่ทุกหน้า */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}