/* ============================================================
   หน้าสาธารณะของ Elebiz — landing ของแพลตฟอร์มและขององค์กร

   ★★ แยกไฟล์จาก app.css โดยตั้งใจ — หน้าพวกนี้เปิดโดยคนที่ยังไม่ล็อกอิน
      และมักเปิดจากมือถือผ่านเน็ตช้า จึงไม่ควรโหลด CSS ของหลังบ้านทั้งก้อน
   ★★ ไม่มี JavaScript เลยสักบรรทัด
   สี token มาจาก docs/design-system.md
   ============================================================ */

:root{
  --primary:#0d631b;
  --primary-container:#2e7d32;
  --on-primary:#ffffff;
  --primary-fixed:#a3f69c;
  --on-primary-fixed:#002204;
  --secondary:#875200;
  --secondary-container:#f89c00;
  --on-secondary:#ffffff;
  --tertiary:#006157;
  --background:#f2fcef;
  --surface:#f2fcef;
  --surface-lowest:#ffffff;
  --surface-low:#ecf7e9;
  --surface-variant:#dbe5d9;
  --on-surface:#151e16;
  --on-surface-variant:#40493d;
  --outline:#707a6c;
  --error:#ba1a1a;

  --radius:16px;
  --radius-sm:10px;
  --maxw:1120px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  /* ★ Prompt มาก่อน ถ้าเครื่องไม่มีก็ตกไปที่ฟอนต์ไทยของระบบ ไม่โหลดจากภายนอก */
  font-family:'Prompt','IBM Plex Sans Thai','Noto Sans Thai',
              -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* ★ ข้อความไทยต้อง line-height ≥ 1.6 (CLAUDE.md หมวดหน้าจอ) */
  line-height:1.7;
  color:var(--on-surface);
  background:var(--background);
  font-size:16px;
}

a{color:var(--primary); text-underline-offset:3px}
img{max-width:100%; height:auto}

.skiplink{
  position:absolute; left:-9999px;
  background:var(--primary); color:var(--on-primary);
  padding:12px 16px; border-radius:0 0 var(--radius-sm) 0; z-index:100;
}
.skiplink:focus{left:0; top:0}

/* ── หัวและท้าย ───────────────────────────────────────────── */
.phead{
  background:var(--surface-lowest);
  border-bottom:1px solid var(--surface-variant);
  position:sticky; top:0; z-index:50;
}
.phead__in,.pfoot__in{
  max-width:var(--maxw); margin:0 auto;
  /* ★ padding ด้านข้างอย่างน้อย 16px ทุกความกว้าง */
  padding:12px 16px;
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
}
.phead__brand{
  font-weight:700; font-size:18px; color:var(--primary);
  text-decoration:none; margin-right:auto;
}
.phead__nav{display:flex; flex-wrap:wrap; gap:16px; font-size:14px}
.phead__nav a{color:var(--on-surface-variant); text-decoration:none}
.phead__nav a:hover{color:var(--primary); text-decoration:underline}

.pfoot{background:var(--surface-variant); margin-top:48px}
.pfoot__in{flex-direction:column; align-items:flex-start; padding-block:24px}
.pfoot__name{margin:0; font-weight:600}
.pfoot__nav{display:flex; flex-wrap:wrap; gap:16px; font-size:14px}
.pfoot__contact{margin:0; font-size:14px; color:var(--on-surface-variant)}

/* ── บล็อกทั่วไป ──────────────────────────────────────────── */
.sec{max-width:var(--maxw); margin:0 auto; padding:48px 16px}
.sec--tint{background:var(--surface-low); max-width:none}
.sec--tint > .sec__in{max-width:var(--maxw); margin:0 auto}
.sec__head{margin:0 0 24px}
.sec h2{font-size:26px; line-height:1.4; margin:0 0 8px}
.sec__lead{margin:0; color:var(--on-surface-variant); max-width:60ch}

/* ── ฮีโร่ ────────────────────────────────────────────────── */
.hero{
  background:linear-gradient(160deg,var(--primary) 0%,var(--tertiary) 100%);
  color:var(--on-primary);
}
.hero__in{max-width:var(--maxw); margin:0 auto; padding:64px 16px}
.hero h1{font-size:34px; line-height:1.3; margin:0 0 12px; max-width:20ch}
.hero__lead{margin:0 0 24px; max-width:56ch; opacity:.94; font-size:17px}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  /* ★ เป้าแตะ ≥ 44px ตามกติกาหน้ามือถือ */
  min-height:48px; padding:0 22px;
  border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:15px; text-decoration:none; cursor:pointer;
}
.btn--primary{background:var(--secondary-container); color:#2b1900}
.btn--ghost{background:transparent; color:var(--on-primary); border-color:rgba(255,255,255,.6)}
.btn--solid{background:var(--primary); color:var(--on-primary)}
.btn:hover{filter:brightness(.95)}

/* ── การ์ด ────────────────────────────────────────────────── */
.grid{display:grid; gap:16px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.card{
  background:var(--surface-lowest);
  border:1px solid var(--surface-variant);
  border-radius:var(--radius);
  padding:20px;
}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--on-surface-variant); font-size:15px}
.card__price{
  margin:12px 0 0; font-size:24px; font-weight:700; color:var(--primary);
}
.card__price small{font-size:13px; font-weight:400; color:var(--on-surface-variant)}
.card__meta{
  margin:10px 0 0; padding:0; list-style:none;
  font-size:14px; color:var(--on-surface-variant);
}
.card__meta li{padding:2px 0}

.pill{
  display:inline-block; padding:3px 12px; border-radius:999px;
  background:var(--primary-fixed); color:var(--on-primary-fixed);
  font-size:13px; font-weight:600;
}

/* ── เอกสารนโยบาย ─────────────────────────────────────────── */
.doc{max-width:74ch; margin:0 auto; padding:40px 16px}
.doc__meta{
  margin:0 0 24px; padding:12px 16px;
  background:var(--surface-low); border-radius:var(--radius-sm);
  font-size:14px; color:var(--on-surface-variant);
}
.doc h1{font-size:28px; line-height:1.35; margin:0 0 4px}
.doc h2{font-size:21px; margin:32px 0 8px}
.doc h3{font-size:18px; margin:24px 0 6px}
.doc h4{font-size:16px; margin:20px 0 6px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px; padding-left:22px}
.doc li{margin:4px 0}
/* ★ ตารางในเอกสารนโยบาย (2026-10-17) — กว้างเกินจอให้เลื่อนเฉพาะตาราง ไม่ใช่ทั้งหน้า */
.doc .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px}
.doc table{border-collapse:collapse; width:100%; font-size:15px; line-height:1.6}
.doc th,.doc td{border:1px solid var(--outline-variant, #c6cdc3); padding:8px 10px; text-align:left; vertical-align:top}
.doc th{background:var(--surface-low); font-weight:600}

/* ── หน้าไม่พบ ───────────────────────────────────────────── */
.nf{max-width:56ch; margin:0 auto; padding:80px 16px; text-align:center}
.nf h1{font-size:26px; margin:0 0 8px}
.nf p{color:var(--on-surface-variant)}

/* ── กล่องแจ้งเตือน ───────────────────────────────────────── */
.note{
  border-left:4px solid var(--secondary-container);
  background:var(--surface-low);
  padding:14px 16px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:15px;
}

/* ── คำยืนยันหลังออกจากระบบ ───────────────────────────────
   ★ อยู่บนสุดของหน้าแรก ต้องเห็นทันทีโดยไม่ต้องเลื่อน
     ไม่งั้นผู้ใช้จะไม่แน่ใจว่าปุ่มออกจากระบบทำงานหรือเปล่า */
.notice{
  max-width:var(--page, 1100px); margin:16px auto 0; padding:14px 18px;
  border-left:4px solid var(--primary);
  background:var(--surface-low);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:15px; line-height:1.7;
}
.notice strong{display:block; font-size:16px; margin-bottom:4px}
.notice p{margin:0; color:var(--on-surface-variant)}

@media (max-width:640px){
  .notice{margin:12px 16px 0}
  .hero__in{padding:44px 16px}
  .hero h1{font-size:27px}
  .sec{padding:36px 16px}
  .sec h2{font-size:22px}
  /* ★ ปุ่มเต็มความกว้างบนจอแคบ กดง่ายกว่าและไม่ตกบรรทัดครึ่ง ๆ */
  .hero__cta .btn{width:100%}
}