/* SlipDeaw — คู่มือนักพัฒนา (/docs/) : ใช้ token และ header/footer จาก /style.css */

/* ---------- Header เพิ่มเติม ---------- */
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hide-sm { display: none; }
.site-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.docs-body .logo-th { white-space: nowrap; }

/* ---------- โครงหน้า ---------- */
.docs-main { padding: 24px 0 64px; }
.docs-layout { display: grid; gap: 24px; }
.docs-content { min-width: 0; overflow-wrap: anywhere; }
.docs-section { padding: 36px 0 8px; border-top: 1px solid var(--line); }
.docs-section:first-of-type { border-top: 0; }
.docs-section h2 { scroll-margin-top: 84px; margin-bottom: 14px; }
.docs-section h3 { scroll-margin-top: 84px; margin: 28px 0 8px; font-size: 1.25rem; }
.docs-section h4 { scroll-margin-top: 84px; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin: 22px 0 8px; }
.docs-section p, .docs-section li { color: var(--navy); }
.docs-section ul, .docs-section ol { padding-left: 22px; margin: 0 0 1em; }
.docs-section li { margin-bottom: 6px; }
.docs-section li:last-child { margin-bottom: 0; }
.muted { color: var(--navy-70); font-size: .9em; }
.jump { color: var(--navy-70); font-size: .95rem; }
.jump a { color: var(--navy); font-weight: 600; }

/* ---------- Hero ---------- */
.docs-hero { padding: 8px 0 12px; }
.docs-hero h1 { font-size: clamp(1.8rem, 5.2vw, 2.8rem); margin-bottom: 12px; }
.docs-lead { color: var(--navy-70); max-width: 720px; font-size: 1.05rem; }
.docs-hero .hero-actions { margin: 18px 0 0; }

/* ---------- สารบัญ ---------- */
.docs-toc { display: none; }
.toc-title { font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-70); margin: 0 0 10px; }
.docs-toc nav, .toc-mobile nav { display: flex; flex-direction: column; gap: 2px; }
.docs-toc a, .toc-mobile a {
  display: block; text-decoration: none; font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  color: var(--navy-70); padding: 5px 10px; border-radius: 8px; border-left: 3px solid transparent;
}
.docs-toc a.sub { padding-left: 22px; font-size: .85rem; font-weight: 400; }
.docs-toc a:hover, .toc-mobile a:hover { color: var(--navy); background: rgba(255, 210, 63, .25); }
.docs-toc a.active { color: var(--navy); border-left-color: var(--mint); background: rgba(76, 201, 240, .12); }
.toc-mobile { background: var(--white); border-radius: 14px; box-shadow: var(--shadow); padding: 4px 14px; margin: 20px 0 8px; }
.toc-mobile summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; padding: 10px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: "+"; font-size: 1.3rem; color: var(--mint); }
.toc-mobile[open] summary::after { content: "\2212"; }
.toc-mobile nav { padding: 0 0 12px; }

/* ---------- ขั้นตอน ---------- */
.docs-steps { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 14px; }
.docs-steps .step h3 { margin: 2px 0 6px; font-size: 1.15rem; }
.docs-steps .step p { margin: 0; color: var(--navy-70); font-size: .97rem; line-height: 1.65; }
.rules li { margin-bottom: 8px; }

/* ---------- Callout ---------- */
.callout {
  background: var(--white); border-radius: 14px; padding: 14px 18px; margin: 18px 0;
  border-left: 5px solid var(--mint); box-shadow: var(--shadow); font-size: .97rem; line-height: 1.65;
}
.callout-warn { border-left-color: var(--pink); }
.callout strong { font-family: var(--font-head); font-weight: 600; margin-right: 6px; }

/* ---------- โค้ด ---------- */
code, pre {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.docs-content code {
  background: rgba(27, 42, 73, .08); color: var(--navy); padding: 1px 6px; border-radius: 6px;
  font-size: .88em; overflow-wrap: anywhere;
}
.docs-content pre {
  background: var(--navy); color: #EAF0FA; border-radius: 14px; padding: 16px 18px; margin: 10px 0 18px;
  font-size: .84rem; line-height: 1.6; overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; tab-size: 2;
}
.docs-content pre code {
  background: none; color: inherit; padding: 0; border-radius: 0; font-size: inherit;
  white-space: pre; overflow-wrap: normal; word-break: normal;
}
.code-label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy-70); margin: 14px 0 4px; }

.method {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .75rem; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; margin-right: 6px; vertical-align: middle; color: var(--navy);
}
.method.post { background: var(--yellow); }
.method.get { background: rgba(76, 201, 240, .35); }
.method.put { background: rgba(46, 204, 113, .35); }

/* ---------- ตาราง ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 18px; border-radius: 14px; box-shadow: var(--shadow); background: var(--white); }
.docs-content table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; line-height: 1.55; }
.docs-content th, .docs-content td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.docs-content th { font-family: var(--font-head); font-weight: 600; font-size: .85rem; background: rgba(255, 210, 63, .25); white-space: nowrap; }
.docs-content tr:last-child td { border-bottom: 0; }
.docs-content td code { white-space: nowrap; }
.reasons-table { min-width: 760px; }

/* ---------- แนวปฏิบัติ ---------- */
.practice-list { display: grid; gap: 12px; margin-top: 8px; }
.practice { background: var(--white); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); border-left: 6px solid var(--yellow); min-width: 0; }
.practice:nth-child(3n+2) { border-left-color: var(--mint); }
.practice:nth-child(3n) { border-left-color: var(--green); }
.practice h3 { margin: 0 0 6px; font-size: 1.05rem; }
.practice p { margin: 0; color: var(--navy-70); font-size: .95rem; line-height: 1.6; }
.practice pre { margin-top: 12px; margin-bottom: 0; }

/* ---------- FAQ / ติดต่อ ---------- */
.docs-contact { padding-bottom: 24px; }
.docs-contact .hero-actions { margin-top: 8px; }

/* ---------- Footer (ไม่มีปุ่มลอยในหน้านี้) ---------- */
.docs-body .site-footer { padding-bottom: 40px; }

/* ---------- จอกว้าง ---------- */
@media (min-width: 640px) {
  .hide-sm { display: inline-flex; }
  .docs-section { padding-top: 44px; }
}
@media (min-width: 900px) {
  .docs-main { padding: 36px 0 80px; }
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
  .docs-toc {
    display: block; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto;
    padding-right: 6px;
  }
  .toc-mobile { display: none; }
  .docs-section h3 { font-size: 1.35rem; }
  .practice-list { grid-template-columns: 1fr 1fr; }
  .practice:has(pre) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .docs-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; }
}

@media print {
  .site-header, .site-footer, .docs-toc, .toc-mobile, .hero-actions { display: none !important; }
  .docs-content pre { white-space: pre-wrap; overflow: visible; }
}