/* ===========================================================================
   CareMatePro — Legal pages (privacy, terms)
   หน้า "นโยบายความเป็นส่วนตัว" + "ข้อกำหนดการใช้งาน"

   เขียนแยกจาก Tailwind build โดยตั้งใจ — แก้สไตล์ได้อิสระโดยไม่ต้อง re-build.
   ใช้ design token เดิมของธีม (var(--primary), var(--foreground) ฯลฯ ที่นิยามไว้
   ที่ :root ใน main.css) เพื่อให้สีกลมกลืนกับทั้งเว็บ.

   โครงสร้าง markup: GenerateBlocks element เดียวครอบด้วย .cmp-legal แล้วใช้
   descendant selector จัดสไตล์ heading/paragraph/list ข้างใน → เพิ่มบล็อกใหม่
   ในหน้า editor แล้วได้สไตล์อัตโนมัติ ไม่ต้องผูกคลาสรายอีลีเมนต์.
   ทุก selector ครอบด้วย .cmp-legal เพื่อไม่ให้สไตล์รั่วไปหน้าอื่น.
   =========================================================================== */

.cmp-legal {
  --lg-line: 145 84% 39%;        /* LINE green */
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 0 3.5rem;
  font-family: 'Prompt', 'Noto Sans Thai', system-ui, sans-serif;
  color: hsl(var(--foreground));
  line-height: 1.75;
  font-size: 1.0625rem;
}

/* ชื่อหน้า + คำโปรย แสดงในหัวเพจมาตรฐาน (.cmp-page-hero) แล้ว — ในเนื้อหาเหลือ
   เพียงบรรทัด "ปรับปรุงล่าสุด" เล็ก ๆ ด้านบนของ body */
.cmp-legal__updated {
  margin: 0 0 2rem;
  padding: 0.5rem 0.85rem;
  display: inline-block;
  border-radius: 999px;
  background: hsl(var(--muted));
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.cmp-legal__updated strong { color: hsl(var(--foreground)); font-weight: 600; }

/* =====================================================================
   BODY — typography (descendant selectors → เพิ่มบล็อกใหม่ได้สไตล์อัตโนมัติ)
   ===================================================================== */
.cmp-legal__body { margin: 0 auto; }

.cmp-legal__body h2 {
  margin: 2.75rem 0 0.85rem;
  padding-top: 1.75rem;
  border-top: 1px solid hsl(var(--border));
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  color: hsl(var(--foreground));
  scroll-margin-top: 6rem;
}
.cmp-legal__body > :first-child h2,
.cmp-legal__body h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.cmp-legal__body h3 {
  margin: 1.85rem 0 0.6rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.cmp-legal__body p {
  margin: 0 0 1.1rem;
  color: hsl(var(--foreground) / 0.9);
}

.cmp-legal__body a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.cmp-legal__body a:hover { color: hsl(16 95% 48%); }

.cmp-legal__body ul,
.cmp-legal__body ol {
  margin: 0 0 1.25rem;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.cmp-legal__body li {
  position: relative;
  padding-left: 1.65rem;
  color: hsl(var(--foreground) / 0.9);
}
.cmp-legal__body ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.66em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: hsl(var(--primary));
}
.cmp-legal__body ol { counter-reset: lg-ol; }
.cmp-legal__body ol li { counter-increment: lg-ol; }
.cmp-legal__body ol li::before {
  content: counter(lg-ol);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-size: 0.72rem;
  font-weight: 700;
}
.cmp-legal__body li strong { color: hsl(var(--foreground)); font-weight: 600; }

/* callout — ย่อหน้าสำคัญ (ใส่ class "is-callout" กับบล็อกย่อหน้าในหน้า editor) */
.cmp-legal__body .is-callout {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius, 1.25rem);
  border: 1px solid hsl(var(--primary) / 0.22);
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--foreground));
  font-weight: 500;
}

/* ช่องทางติดต่อท้ายหน้า (shortcode [cmp_contact_channels]) — เว้นระยะให้สวย */
.cmp-legal__body .cc-channels,
.cmp-legal__body .cmp-contact-channels {
  margin-top: 1.25rem;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 640px) {
  .cmp-legal { font-size: 1rem; }
  .cmp-legal__body h2 { margin-top: 2.25rem; }
}