/* ═══════════════════════════════════════════════════════════════════
   DWR Sitemap — หน้าแผนผังเว็บไซต์ (ตาม Figma)
   hero ไล่สี + การ์ดต่อ section (header ไล่สี + badge จำนวน + ลิสต์ลิงก์)
   สี default ตาม design · ดึง token กลาง (--dwr-fe-*) ก่อน แล้ว fallback เป็น hex
   ฟอนต์ = ไม่กำหนดเอง → inherit Prompt (dwr-shared) ทั้งเว็บ
   ─────────────────────────────────────────────────────────────────── */

.dwr-sitemap-layout {
  --smap-navy:   var(--dwr-fe-primary, #0152A2);
  --smap-navy-d: var(--dwr-fe-primary-strong, #12305C);
  --smap-ink:    #1c3a5e;
  --smap-border: #E3EDF7;
  /* header การ์ด = ไล่สีฟ้าอ่อนตาม Figma (#7BC1FE บน → #CEEFF8 ล่าง) · admin override ได้ผ่าน setting */
  --smap-card-header: linear-gradient(180deg, #7BC1FE 0%, #CEEFF8 100%);
  /* DWD-34 / direction #1+#3: ไม่มีพื้นหลังของตัวเอง — ให้ template/Page editor คุม
     (เดิม: linear-gradient(180deg,#EAF3FC,#F6FAFF 34%,#FFF 60%)) */
  background: none;
  /* responsive อิง "ความกว้างกล่อง" ไม่ใช่ความกว้างจอ — พอปลั๊กอินไม่กำหนดความกว้างเอง
     @media จะเชื่อถือไม่ได้ (จอ 1920 แต่กล่องอาจ 620) → ใช้ container query แทน */
  container-type: inline-size;
}

/* ── Hero ถูกถอดออกแล้ว (DWD-34 / direction #3) ──
   shortcode ไม่พ่นหัวข้อ/แบนเนอร์ของตัวเองอีก → หัวข้อ + พื้นหลังจัดใน Page editor
   (CSS .dwr-sitemap-hero* เดิมลบทิ้ง เพราะไม่มี markup ใดใช้แล้ว) */

/* ── Main container ── ไม่กำหนดความกว้าง/ระยะขอบเอง (direction #1+#3): เนื้อหาล้วน
   ไหลเต็มพื้นที่ที่ได้รับ · padding/พื้นหลัง ให้ Page editor คุม (เดิม 44px 24px 64px) */
.dwr-sitemap {
  width: 100%;
  padding: 0;
}

/* ── Grid: 2 คอลัมน์ ── */
.dwr-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(var(--dwr-sitemap-cols, 2), 1fr);
  gap: 28px;
  align-items: stretch; /* การ์ดในแถวเดียวกันสูงเท่ากัน = เตี้ยกว่ายืดพื้นขาวลงมาชนก้นตัวสูงสุด */
}

/* ── Card ── */
.dwr-sitemap-card {
  background: #fff;
  border: 1px solid var(--smap-border);
  border-radius: 16px;
  box-shadow: 0 16px 40px -22px rgba(21, 76, 145, 0.30);
  overflow: hidden;
}

/* ── Card header (แถบไล่สี + badge) ── */
.dwr-sitemap-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: var(--smap-card-header);
}
.dwr-sitemap-card-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.dwr-sitemap-card-title a,
.dwr-sitemap-card-title span {
  color: var(--smap-navy) !important; /* header ฟ้าอ่อน → title สีเข้มตาม Figma */
  text-decoration: none !important;
}
.dwr-sitemap-card-count {
  flex: none;
  background: #fff;
  color: var(--smap-navy);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Card body: ลิสต์ลิงก์ (สะอาด ไม่มี bullet) ── */
.dwr-sitemap-card-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 14px 22px 20px !important;
}
.dwr-sitemap-card-list > li {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.5;
}
.dwr-sitemap-card-list > li + li {
  border-top: 1px solid #F0F5FB;
}
.dwr-sitemap-card-list a,
.dwr-sitemap-card-list > li > span {
  display: block;
  color: var(--smap-ink) !important;
  text-decoration: none !important;
  font-size: 1rem;
  padding: 9px 0;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.dwr-sitemap-card-list a:hover {
  color: var(--smap-navy) !important;
  padding-left: 6px;
}

/* ── Sub-list (grandchildren ถ้ามี) ── */
.dwr-sitemap-card-sublist {
  list-style: none !important;
  padding: 4px 0 6px 16px !important;
  margin: 0 0 4px !important;
  border-left: 2px solid var(--smap-border);
}
.dwr-sitemap-card-sublist li {
  margin: 0 !important;
  line-height: 1.4;
}
.dwr-sitemap-card-sublist a {
  font-size: 0.9rem !important;
  color: #55627A !important;
  padding: 4px 0 !important;
}
.dwr-sitemap-card-sublist a:hover {
  color: var(--smap-navy) !important;
}

/* ── Responsive ── */
/* พับคอลัมน์ตาม "ความกว้างกล่อง" (container query) — ทำงานถูกแม้กล่องแคบบนจอใหญ่ */
@container (max-width: 900px) {
  .dwr-sitemap-grid { grid-template-columns: 1fr; gap: 18px; }
}
@container (max-width: 560px) {
  .dwr-sitemap-card-header { padding: 15px 18px; }
  .dwr-sitemap-card-list { padding: 10px 18px 16px !important; }
}
/* fallback สำหรับเบราว์เซอร์เก่าที่ยังไม่รองรับ container query */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .dwr-sitemap-grid { grid-template-columns: 1fr; gap: 18px; }
  }
  @media (max-width: 560px) {
    .dwr-sitemap-card-header { padding: 15px 18px; }
    .dwr-sitemap-card-list { padding: 10px 18px 16px !important; }
  }
}

/* ═══ Style: Nested List (ทางเลือก) ═══ */
.dwr-sitemap--list .dwr-sitemap-tree,
.dwr-sitemap--list .dwr-sitemap-tree ul {
  list-style: none; margin: 0; padding: 0;
}
.dwr-sitemap--list .dwr-sitemap-tree > li { margin-bottom: 18px; }
.dwr-sitemap--list .dwr-sitemap-tree > li > a,
.dwr-sitemap--list .dwr-sitemap-tree > li > span {
  font-size: 1.2rem; font-weight: 600;
  color: var(--smap-navy) !important; text-decoration: none;
}
.dwr-sitemap--list .dwr-sitemap-tree ul {
  margin: 8px 0 0 10px; padding-left: 18px;
  border-left: 2px solid var(--smap-border);
}
.dwr-sitemap--list .dwr-sitemap-tree ul li { margin: 5px 0; line-height: 1.6; }
.dwr-sitemap--list .dwr-sitemap-tree ul li::before {
  content: "•"; margin-right: 8px; color: var(--smap-ink);
}
.dwr-sitemap--list .dwr-sitemap-tree ul ul li::before { content: "–"; color: #55627A; }
.dwr-sitemap--list .dwr-sitemap-tree a { color: var(--smap-ink) !important; text-decoration: none; }
.dwr-sitemap--list .dwr-sitemap-tree a:hover { color: var(--smap-navy) !important; }

/* ═══ Style: Columns (newspaper flow) ═══ */
.dwr-sitemap-cols { column-count: var(--dwr-sitemap-cols, 3); column-gap: 32px; }
.dwr-sitemap-cols .dwr-sitemap-card {
  break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 28px;
}
@media (max-width: 768px) { .dwr-sitemap-cols { column-count: 1; } }