/* =====================================================================
   intramind — legal document pages (terms, privacy, …)
   โหลดต่อจาก main.css ใช้โทเคน สี และฟอนต์ชุดเดียวกัน
   ต่างจากหน้าแรกตรง line-height: หน้าแรกใช้ 1.25 ซึ่งแน่นเกินไปสำหรับ
   ข้อความกฎหมายยาว ๆ ที่นี่จึงคลายเป็น 1.8
   ===================================================================== */

/* ฉากหลัง — ไล่โทนม่วงนิ่ง ๆ แทน halo WebGL ของหน้าแรก
   เอกสารกฎหมายไม่ควรแลกแบตกับ particle 70k */
.legal-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(177,97,253,0.20), rgba(81,39,182,0.06) 45%, transparent 72%),
    radial-gradient(45% 35% at 100% 100%, rgba(81,39,182,0.16), transparent 65%),
    #000;
}

.legal{position:relative;z-index:10;}

/* หน้านี้ไม่มี SmoothScroll ของ main.js มาคุม จึงใช้ของเบราว์เซอร์ตรง ๆ
   ให้การกดสารบัญไม่กระโดด */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ============================= HERO ============================= */
.legal-hero{
  padding:9rem 1.5rem 3.5rem;
  border-bottom:1px solid rgba(177,97,253,0.12);
}
.legal-hero .eyebrow{margin-bottom:1.5rem;}
.legal-hero h1{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-0.01em;
  color:#fff;
  max-width:34rem;
}
.legal-meta{
  margin-top:2.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1.75rem 3rem;
}
.legal-meta .mk{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--brand-light);
  opacity:0.55;
  margin-bottom:0.55rem;
}
.legal-meta .mv{
  font-size:1rem;
  font-weight:300;
  color:var(--accent);
  opacity:0.8;
  line-height:1.5;
}

/* ย่อหน้านำ — กรอบเน้นแบบเดียวกับ .form-sent ของหน้าแรก */
.legal-lead{
  margin-top:3rem;
  max-width:52rem;
  border:1px solid rgba(177,97,253,0.22);
  border-radius:var(--r);
  background:rgba(81,39,182,0.10);
  padding:1.75rem;
}
.legal-lead p{
  font-size:1rem;
  font-weight:300;
  line-height:1.8;
  color:var(--accent);
  opacity:0.85;
}
.legal-lead p + p{margin-top:1rem;}
.legal-lead strong{font-weight:500;color:#fff;opacity:1;}

/* ============================= BODY GRID ============================= */
.legal-body{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  padding:3.5rem 1.5rem 5rem;
}

/* ---- สารบัญ ---- */
.legal-toc-title{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--brand-light);
  opacity:0.55;
  margin-bottom:1.25rem;
}
.legal-toc ol{list-style:none;}
.legal-toc li + li{margin-top:0.15rem;}
.legal-toc a{
  display:grid;
  grid-template-columns:2.2rem 1fr;
  gap:0.4rem;
  align-items:baseline;
  padding:0.42rem 0.6rem 0.42rem 0;
  font-size:0.82rem;
  line-height:1.45;
  color:#fff;
  opacity:0.45;
  border-left:1px solid transparent;
  padding-left:0.85rem;
  transition:opacity .3s ease, color .3s ease, border-color .3s ease;
}
.legal-toc a span{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.1em;
  color:var(--brand-light);
  opacity:0.6;
}
.legal-toc a:hover{opacity:0.95;}
.legal-toc a.active{
  opacity:1;
  color:var(--brand-light);
  border-left-color:var(--brand-light);
}
.legal-toc a.active span{opacity:1;}

/* ---- ตัวเอกสาร ---- */
.legal-doc{max-width:52rem;}
.legal-doc section + section{
  margin-top:3.25rem;
  padding-top:3.25rem;
  border-top:1px solid rgba(177,97,253,0.12);
}
.legal-doc section{scroll-margin-top:6.5rem;}   /* ไม่ให้หัวข้อมุดใต้ nav ที่ fixed */
.legal-doc h2{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:baseline;
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:500;
  line-height:1.35;
  color:#fff;
  margin-bottom:1.5rem;
}
.legal-doc h2 .sn{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  color:rgba(177,97,253,0.75);
  padding-top:0.35rem;
}
.legal-doc p{
  font-size:1rem;
  font-weight:300;
  line-height:1.8;
  color:#fff;
  opacity:0.68;
}
.legal-doc p + p{margin-top:1.1rem;}
.legal-doc .intro + ol,
.legal-doc .intro + ul,
.legal-doc p + ol,
.legal-doc p + ul,
.legal-doc p + dl{margin-top:1.35rem;}
.legal-doc ol + p,
.legal-doc ul + p,
.legal-doc dl + p{margin-top:1.35rem;}
.legal-doc strong{font-weight:500;color:#fff;opacity:1;}
/* ลิงก์ในเนื้อเอกสาร — เอกสารกฎหมายอ้างอิงกันไปมา ต้องเห็นว่ากดได้ */
.legal-doc a,
.legal-lead a{
  color:var(--brand-light);
  border-bottom:1px solid rgba(177,97,253,0.35);
  transition:border-color .3s ease, opacity .3s ease;
}
.legal-doc a:hover,
.legal-lead a:hover{border-bottom-color:var(--brand-light);}

/* หัวข้อย่อย — นโยบายความเป็นส่วนตัวมีสองชั้นซ้อนใต้หัวข้อหลัก
   ต่างจากข้อกำหนดที่แบนราบ ใช้ป้าย mono นำเพื่อให้ไล่ลำดับได้ด้วยตา */
.legal-doc h3{
  margin-top:2.5rem;
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:500;
  line-height:1.45;
  color:#fff;
}
.legal-doc h3:first-of-type{margin-top:2rem;}
.legal-doc h4{
  margin-top:1.9rem;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:0.16em;
  text-transform:uppercase;
  line-height:1.6;
  color:var(--brand-light);
  opacity:0.75;
}
.legal-doc h3 + ul,
.legal-doc h3 + p,
.legal-doc h4 + ul,
.legal-doc h4 + p{margin-top:1rem;}

/* รายการไม่มีเลข — ขีดสั้นสีแบรนด์แทนจุดกลม ให้เข้ากับภาษาเส้นของทั้งไซต์ */
.legal-doc ul{list-style:none;}
.legal-doc ul li{
  position:relative;
  padding-left:1.5rem;
  font-size:1rem;
  font-weight:300;
  line-height:1.8;
  color:#fff;
  opacity:0.68;
}
.legal-doc ul li + li{margin-top:0.5rem;}
.legal-doc ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.85rem;
  width:0.6rem;
  height:1px;
  background:var(--brand-light);
  opacity:0.55;
}

/* ช่องทางติดต่อท้ายเอกสาร */
.legal-contact{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  border:1px solid rgba(177,97,253,0.2);
  border-radius:var(--r);
  background:rgba(81,39,182,0.09);
  padding:1.5rem;
}
.legal-contact dt{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brand-light);
  opacity:0.7;
  margin-bottom:0.5rem;
}
.legal-contact dd{
  font-size:1rem;
  font-weight:300;
  line-height:1.7;
  color:#fff;
  opacity:0.85;
  padding-left:0;
  border-left:none;
}
.legal-contact dd a{
  color:var(--brand-light);
  border-bottom:1px solid rgba(177,97,253,0.35);
  transition:border-color .3s ease;
}
.legal-contact dd a:hover{border-bottom-color:var(--brand-light);}

/* รายการมีเลข — ใช้ counter เองเพื่อคุมสีและระยะให้ตรงธีม */
.legal-doc ol{list-style:none;counter-reset:item;}
.legal-doc ol li{
  counter-increment:item;
  position:relative;
  padding-left:2.6rem;
  font-size:1rem;
  font-weight:300;
  line-height:1.8;
  color:#fff;
  opacity:0.68;
}
.legal-doc ol li + li{margin-top:0.85rem;}
.legal-doc ol li::before{
  content:counter(item,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0.25rem;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--brand-light);
  opacity:0.7;
}

/* คำนิยาม */
.legal-doc dl{display:flex;flex-direction:column;gap:1.1rem;}
.legal-doc dt{
  font-size:1rem;
  font-weight:500;
  color:var(--brand-light);
  line-height:1.6;
  margin-bottom:0.3rem;
}
.legal-doc dd{
  font-size:1rem;
  font-weight:300;
  line-height:1.8;
  color:#fff;
  opacity:0.68;
  padding-left:1.1rem;
  border-left:1px solid rgba(177,97,253,0.2);
}

/* ปิดท้าย */
.legal-sign{
  margin-top:3.5rem;
  padding-top:2.5rem;
  border-top:1px solid rgba(177,97,253,0.12);
}
.legal-sign .co{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:500;
  color:#fff;
}
.legal-sign .ro{
  margin-top:0.5rem;
  font-size:0.95rem;
  font-weight:300;
  color:var(--accent);
  opacity:0.6;
}

/* ============================= RESPONSIVE ============================= */
@media (min-width:768px){
  .legal-hero{padding:11rem 2.5rem 4.5rem;}
  .legal-hero h1{font-size:2.6rem;}
  .legal-lead{padding:2.25rem;}
  .legal-body{padding:4.5rem 2.5rem 6rem;}
  .legal-doc h2{font-size:1.6rem;}
  .legal-doc h3{font-size:1.25rem;}
  .legal-contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;padding:2rem;}
}
@media (min-width:1024px){
  .legal-hero h1{font-size:3rem;max-width:44rem;}
  .legal-body{
    grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    gap:4.5rem;
    align-items:start;
  }
  .legal-toc{
    position:sticky;
    top:8.5rem;
    max-height:calc(100vh - 12rem);
    overflow-y:auto;
  }
}

/* ============================= PRINT ============================= */
@media print{
  .nav,.legal-bg,.legal-toc,.footer,#cursor-layer{display:none !important;}
  body{background:#fff;color:#000;cursor:auto;}
  .legal-hero{padding:0 0 1.5rem;border-color:#999;}
  .legal-hero h1,.legal-doc h2,.legal-sign .co{color:#000;}
  .legal-body{display:block;padding:1.5rem 0 0;}
  .legal-doc,.legal-doc p,.legal-doc ol li,.legal-doc dd,
  .legal-lead p,.legal-meta .mv,.legal-sign .ro{color:#000;opacity:1;max-width:none;}
  .legal-lead{background:none;border-color:#999;}
  .legal-doc section{break-inside:avoid;}
  .legal-doc section + section{border-color:#ccc;}
}