/* ===== Kanit + Base ===== custom-ui.css */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap");

/* -------- Palette (คงโทนเดิม + เพิ่ม token สำหรับคอนทราสต์) -------- */
:root{
  /* Brand (เดิม) */
  --brand-50:#fff0f4;
  --brand-100:#ffe2ea;
  --brand-200:#ffc7d5;
  --brand-300:#ffa3bb;
  --brand-400:#f77aa0;
  --brand-500:#EC5A87;    /* เดิม: ใช้เป็น accent ได้ */
  --brand-600:#d84a77;
  --brand-700:#c0396a;    /* ใช้เป็น action (ปุ่ม/ลิงก์/หัวการ์ด) ผ่าน 4.5:1 */
  --brand-800:#a42e58;    /* hover เข้มขึ้น */
  --brand-900:#7f2545;    /* ตัวอักษรเข้มบนพื้นอ่อนได้ดี */

  /* Action/Accent tokens (WCAG-friendly) */
  --ui-action: var(--brand-700);    /* สีหลักใช้งานจริง: ปุ่ม/ลิงก์ */
  --ui-action-2: var(--brand-800);  /* hover/darken */
  --ui-accent: var(--brand-500);    /* สีตกแต่ง (หัวไล่เฉด/ชิป ฯลฯ) */

  /* Text/Surface */
  --ui-bg:#ffffff;                  /* พื้นหลังหลัก */
  --ui-surface:#ffffff;             /* การ์ด/บล็อก */
  --ui-soft:#fdf7fa;                /* พื้นจางชมพู (อ่านง่าย) */
  --ui-text:#0b1220;                /* ตัวอักษรหลัก */
  --ui-muted:#6b7280;               /* ตัวอักษรรอง (ผ่านบนพื้นขาว/อ่อน) */
  --ui-border:#e5e7eb;
  --ui-shadow:0 12px 32px rgba(124, 10, 61, .07);
  --focus-ring: 0 0 0 3px rgba(192, 57, 106, .25); /* จาก action สีชมพูเข้ม */
  --radius:14px;
  --nav-height:64px;

  /* สำหรับกรณีต้องใช้ #df508f: ใช้เฉพาะหัวข้อใหญ่/ป้าย (ไม่ใช้กับเนื้อความยาว) */
  --ui-accent-soft:#df508f;
}

html,body{
  font-family:"Kanit",system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.6; color:var(--ui-text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background: #fbfbfb;
}

/* ===== Headings (ปรับสำหรับคอนทราสต์และลำดับสายตา) ===== */
h1{font-size:1.5rem;font-weight:700;margin:0 0 .35rem;color:var(--ui-text)}
h2{font-size:1.3rem;font-weight:700;margin:.6rem 0;color:var(--ui-text)}
h3{font-size:1.2rem;font-weight:700;margin:.5rem 0;color:var(--ui-text)}
/* ใช้กับหัวข้อใหญ่เท่านั้น ถ้าอยากได้ชมพูสด */
.h-accent{ color: var(--ui-accent-soft); font-weight: 700; }

/* ===== Navbar / ลิงก์ ===== */
.navbar, .sticky-nav{
  position:sticky; top:0; z-index:1050;
  background:#fff; border-bottom:1px solid var(--ui-border);
}
a{ color: var(--ui-action); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ color: var(--ui-action-2); }
.navbar a, .sticky-nav a { color: var(--ui-action); text-decoration: none; }
.navbar a:hover, .sticky-nav a:hover { color: var(--ui-action-2); text-decoration: underline; }

/* ===== ปุ่ม ===== */
.ui-btn{
  appearance:none;border:1px solid rgba(0,0,0,.08);
  background:#fff; color:var(--ui-action);
  padding:9px 14px;border-radius:10px;cursor:pointer;font-size:.95rem;
  transition:.2s;
}
.ui-btn:hover{ background:#fdf2f7; border-color: var(--brand-200); color: var(--ui-action-2); }

.btn-solid{
  background:var(--ui-action); color:#fff; border:1px solid var(--ui-action);
}
.btn-solid:hover{ background:var(--ui-action-2); border-color:var(--ui-action-2); }

/* Focus states (การเข้าถึง) */
.ui-btn:focus-visible, .btn-solid:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
  border-color: transparent;
}

/* ===== จุดสี/ยูทิล ===== */
.dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:8px}
.dot-emerald{background:var(--brand-400)}
.dot-indigo{background:var(--brand-700)}
.dot-amber{background:#f59e0b}
.dot-slate{background:#475569}

.row-gap{margin-top:10px}
.trimText{display:block}

/* ===== HERO HEADER (พื้นไล่เฉดอ่อน อ่านง่ายขึ้น) ===== */
.hero-card{
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  border: 1px solid var(--ui-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 12px 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: var(--ui-shadow);
  flex-direction: column;
}
.hero-title{display:flex;flex-direction:column;gap:6px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--ui-border);
  font-weight:600;color:var(--brand-900);
}
.chip-emerald{background:var(--brand-50);border-color:var(--brand-200)}
.chip-indigo{background:var(--brand-100);border-color:var(--brand-200)}
.chip-slate{background:#fff; border-color:var(--ui-border)}
.hero-actions{display:flex;gap:14px;align-items:center}
.hero-action{color:var(--ui-action);text-decoration:none}
.hero-action:hover{color:var(--ui-action-2);text-decoration:underline}

/* Hero Title (ใช้สีเข้มเพื่อคอนทราสต์บนพื้นไล่เฉดอ่อน) */
.hero-card h1 {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--brand-900); /* #7f2545 */
  margin: 0;
}

/* ===== Cards / media ===== */
.card{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--radius);box-shadow:var(--ui-shadow)}
.card.soft{box-shadow:none}
.media-card{background:#fff;border:1px solid var(--ui-border);border-radius:var(--radius);box-shadow:var(--ui-shadow);overflow:hidden}
.thumbs-wrap{margin-top:8px}

/* หัวการ์ด: ใช้ action (เข้ม) เพื่อให้ตัวอักษรขาวผ่าน 4.5:1 */
.card-head{
  background:linear-gradient(135deg, var(--ui-action), var(--ui-action-2));
  color:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:14px 18px;
  display:flex;align-items:center;gap:10px
}
.card-head h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0; }

/* หัวกลุ่ม (scope) */
.scope-head{
  background:linear-gradient(135deg, var(--ui-accent), var(--ui-action));
  color:#fff;border-radius:14px;padding:14px 18px;margin:0 0 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.scope-head h4{margin:0;font-size:1.3rem;font-weight:700;color:#fff}

/* ===== Accordion ===== */
.accordion{margin-bottom:14px;border:1px solid var(--ui-border);border-radius:14px;overflow:hidden;background:#fff}
.ac-head{
  background:linear-gradient(135deg, var(--ui-action), var(--ui-action-2));
  color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;cursor:pointer;font-weight:700;font-size:1.08rem
}
.ac-icon{color:#ffe4ec;transition:transform .2s ease}
.accordion.is-open .ac-icon{transform:rotate(180deg)}
.ac-panel{display:none}
.accordion.is-open .ac-panel{display:block}


/* ===== ฟอร์ม ===== */
input[type="text"], input[type="search"], input[type="email"], input[type="url"],
select, textarea, .form-control{
  border:1px solid var(--ui-border); border-radius:10px; background:#fff; color:var(--ui-text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus-visible{
  outline:none; box-shadow: var(--focus-ring); border-color: transparent;
}

/* ===== แกลเลอรี/ภาพ ===== */
.all-reps-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.rep-thumb img {
  width: 100%; height: auto; border-radius: 8px; border: 1px solid #ddd;
  transition: transform .2s, box-shadow .2s;
}
.rep-thumb img:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

/* ===== Layout (2 คอลัมน์บน Desktop) ===== */
.ui-two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ui-two-col > *{ margin: 0; }

/* ===== Navbar minor ===== */
.navTop a{color:var(--ui-action)}
.navTop a:hover{color:var(--ui-action-2)}
.detailNavBgLeft,.detailNavBgRight{padding-top:60px}

/* ===== Responsive: Mobile first ===== */
@media (max-width: 992px){
  h1{ font-size:1.35rem }
  .hero-card h1{ font-size:1.6rem }
  .ui-two-col{ grid-template-columns: 1fr; }
  .styled-table td:first-child{ width: 100%; }
  .navbar, .sticky-nav{ position: sticky; }
  body{ font-size: 16.5px; line-height: 1.65; }
}

@media (max-width: 640px){
  .hero-card{ padding: 16px; gap: 12px; }
  .card-head{ padding:12px 14px }
  .ac-head{ padding:12px 14px }
  .styled-table td{ padding:10px 12px }
  .all-reps-grid{ gap: 10px }
}

/* ===== โหมดมืด (ตามระบบ) — คงคอนทราสต์ครบ ===== */
@media (prefers-color-scheme: dark){
  :root{
    --ui-bg:#0b0f14; --ui-surface:#0f141a; --ui-soft:#121821; --ui-border:#1f2937;
    --ui-text:#f3f4f6; --ui-muted:#c1c7d0;
    --ui-action:#eb5e96;        /* ชมพูสว่างขึ้นบนพื้นเข้ม */
    --ui-action-2:#ff7aae;
    --focus-ring: 0 0 0 3px rgba(235, 94, 150, .28);
  }
  .card, .media-card, .accordion, .chip, .styled-table td{ background: #ffffff; }
  .styled-table td:first-child{ background: var(--ui-soft); color:#ffd7e6; }
  .rep-thumb img{ border-color:#2b3442 }
}