/* ============================================
   1. นำเข้าฟอนต์ใหม่: Sarabun สำหรับหัวข้อ
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@500;600;700&display=swap');

/* ============================================
   2. ตัวแปรสี (อิงจาก prototype academic-profile.jsx)
   ============================================ */
:root {
  --kt-terracotta: #5b3e31;
  --kt-terracotta-mid: #c4907a;
  --kt-terracotta-dark: #45302a;
  --kt-cream: #f7f1e8;
  --kt-dark: #1e1b18;
  --kt-text: #2b2b2b;
  --kt-text-muted: #9a9087;
  --kt-border: #e5ddd0;
}

/* ============================================
   3. Typography — หัวข้อใช้ Sarabun weight หนักขึ้น ให้ contrast กับ body (Prompt)
   ============================================ */
h1, h2, h3, h4,
.entry-title,
.wp-block-post-title {
  font-family: 'Sarabun', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h1, .entry-title {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
}

h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

body, p, a, li {
  line-height: 1.75;
  color: var(--kt-text);
}

/* ============================================
   4. ระยะห่าง — ลด padding ของ container/group ให้บางลง
   ============================================ */
.wp-block-group,
.wp-block-cover,
.entry-content {
  padding-top: clamp(1rem, 3vw, 2rem) !important;
  padding-bottom: clamp(1rem, 3vw, 2rem) !important;
}

/* เพิ่มช่องว่างระหว่าง section ให้หายใจได้มากขึ้น */
.wp-block-group + .wp-block-group,
.entry-content > * + * {
  margin-top: 1.25rem;
}

/* ============================================
   5. ลิงก์ — สี terracotta + hover แบบ underline เลื่อน
   ============================================ */
a {
  color: var(--kt-terracotta);
  text-decoration: none;
  background-image: linear-gradient(var(--kt-terracotta-mid), var(--kt-terracotta-mid));
  background-position: 0 1.1em;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.25s ease, color 0.25s ease;
}

a:hover {
  background-size: 100% 1px;
  color: var(--kt-terracotta-mid);
}

/* ============================================
   6. ปุ่ม — ทันสมัยขึ้น มี hover scale เล็กน้อย
   ============================================ */
.wp-block-button__link,
.wp-element-button {
  border-radius: 999px;
  padding: 0.65em 1.6em;
  font-weight: 500;
  border: 1.5px solid var(--kt-terracotta);
  color: var(--kt-terracotta);
  background: transparent;
  transition: all 0.2s ease;
}

.wp-block-button__link:hover {
  background: var(--kt-terracotta);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================
   7. การ์ด/กล่อง — เงาบาง ขอบมุมโค้งมากขึ้น hover ยกขึ้นเล็กน้อย
   ============================================ */
.wp-block-column,
.wp-block-group.is-style-card,
article {
  border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

article:hover,
.wp-block-group.is-style-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ============================================
   8. รูปภาพ — featured image เป็นเหลี่ยม ไม่ต้องขอบมน
   ============================================ */
img {
  border-radius: 0;
}

.wp-post-image,
.featured-image,
.wp-block-post-featured-image img {
  border-radius: 0 !important;
}

/* รูปโปรไฟล์วงกลม ยังคงเป็นวงกลมตามเดิม */
.wp-block-image.is-style-rounded img,
.is-style-circle-mask img {
  border-radius: 50% !important;
}

/* ============================================
   8c. Category breadcrumb (.cat-links) — pill แบบเดียวกับ tags
   ============================================ */
.cat-links {
  font-size: 0; /* ซ่อนตัวอักษร "/" ที่คั่นระหว่างลิงก์ */
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cat-links a[rel="category tag"] {
  display: inline-block;
  font-size: 0.8125rem; /* คืนขนาดตัวอักษรให้ลิงก์ */
  border: 1px solid var(--kt-terracotta-mid);
  background: var(--kt-cream);
  color: var(--kt-terracotta) !important;
  padding: 4px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  background-image: none !important;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.cat-links a[rel="category tag"]:hover {
  background: var(--kt-terracotta);
  color: #fff !important;
  border-color: var(--kt-terracotta);
}
a[href*="/tag/"] {
  display: inline-block;
  border: 1px solid var(--kt-terracotta-mid);
  background: var(--kt-cream);
  color: var(--kt-terracotta) !important;
  padding: 4px 14px;
  margin: 2px;
  border-radius: 999px;
  font-size: 0.8125rem;
  text-decoration: none !important;
  background-image: none !important;
  transition: all 0.2s ease;
}

a[href*="/tag/"]:hover {
  background: var(--kt-terracotta);
  color: #fff !important;
  border-color: var(--kt-terracotta);
}

/* ซ่อนจุด · (middot) ที่คั่นระหว่าง tag เดิม เพราะเปลี่ยนมาเป็น pill ที่มี margin คั่นแทน */
a[href*="/tag/"] + br {
  display: none;
}

/* ============================================
   9. แถบเส้นบาง ๆ คั่น section แทนกรอบหนา
   ============================================ */
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--kt-border);
  margin: 2rem 0;
}

/* ============================================
   11. โหมดมือถือ — ลด padding ลงอีกในจอเล็ก
   ============================================ */
@media (max-width: 600px) {
  .wp-block-group,
  .entry-content {
    padding: 1rem !important;
  }

  h1, .entry-title {
    font-size: 1.75rem;
  }
}