/* เชื่อมลักษณะการแสดงผลของแม่แบบเดิมเข้ากับ HTML ที่ WordPress พ่นออกมา
   โหลดท้ายสุดเพื่อทับค่าได้ — แก้เฉพาะจุดที่ต่างกันจริง ไม่แก้ดีไซน์ */

/* ── เมนู: CSS เดิมกางเมนูย่อยด้วย :hover ── */
/*    เพิ่มคลาสจากสคริปต์เพื่อให้กดและใช้คีย์บอร์ดได้ด้วย */
/* ⚠️ ต้องสั่ง `display` ด้วย — template.css:848 ตั้ง `.sp-dropdown{display:none}`
   และเปิดด้วย `:hover` เท่านั้น · สั่งแค่ visibility/opacity จะได้กล่อง 0×0
   ผลคือ **ผู้ใช้แป้นพิมพ์เปิดเมนูย่อยไม่ได้เลย** (ชุดทดสอบ A2 จับได้ 14 ส.ค. 2569
   — และตอนแรกเทสวัดแค่ visibility จึงรายงานว่าผ่านทั้งที่เมนูไม่กาง) */
.sp-megamenu-parent > li.sp-has-child.dss-open > .sp-dropdown,
.sp-megamenu-parent li.sp-has-child.dss-open > .sp-dropdown {
  display: block;
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.sp-megamenu-parent li.sp-has-child.dss-open > .sp-dropdown .sp-dropdown {
  top: 0;
}
/* จอเล็ก: ปุ่มเมนูเปิดรายการเป็นแนวตั้ง
   ⚠️ ต้องระวัง: `.sp-megamenu-parent` อยู่ในคอลัมน์ #sp-menu ที่กว้างแค่ 1/3 บนมือถือ
      ถ้าใช้ position:absolute + left:0/right:0 แผงจะกว้างเท่าคอลัมน์นั้น (~130px)
      ทำให้ชื่อเมนูแตกบรรทัด ("ห้อง / อนุสรณ์ / ดร.ตั้ว") — เจอจริง 13 ส.ค. 2569
   วิธีที่ใช้: กำหนดความกว้างเป็น 100vw แล้วเลื่อนกลับมาให้เต็มจอ
      ไม่ต้องพึ่งว่า element แม่ตัวไหนเป็น positioned */
@media (max-width: 991px) {
  /* ⚠️ กรอบอ้างอิงตำแหน่งของแผงเมนู
     Bootstrap 3 ตั้ง position:relative ให้ทุกคลาส .col-* ดังนั้น #sp-menu (col-xs-4)
     จะกลายเป็นกรอบอ้างอิง แล้วแผงจะกว้าง/วางตามคอลัมน์ที่กว้างแค่ 1/3 ของจอ
     (เจอจริง 13 ส.ค. 2569 — แผงกว้าง 130px ชื่อเมนูแตกบรรทัด "ห้อง / อนุสรณ์ / ดร.ตั้ว")
     แก้ด้วยการปลด #sp-menu เป็น static แล้วให้ #sp-header เป็นกรอบ
     จึงใช้ left:0 / right:0 ได้ตรง ๆ ไม่ต้องพึ่ง 100vw หรือค่าชดเชยที่ตายตัว */
  #sp-header { position: relative; }
  #sp-header .container,
  #sp-header .container > .row,
  #sp-menu { position: static; }

  .sp-megamenu-parent.dss-mobile-open {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 6px 0 12px;
    z-index: 999;
    background: #222533;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    float: none !important;
  }
  .sp-megamenu-parent.dss-mobile-open > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .sp-megamenu-parent.dss-mobile-open > li:last-child { border-bottom: 0; }
  /* ชื่อเมนูต้องไม่แตกบรรทัดกลางคำ และแตะได้สะดวก (สูง ≥ 44px ตามแนวปฏิบัติ) */
  .sp-megamenu-parent.dss-mobile-open a {
    display: block;
    padding: 12px 20px;
    line-height: 1.5;
    min-height: 44px;
    white-space: normal;
    word-break: keep-all;
    text-align: left;
  }
  /* เมนูย่อย: กางอยู่ในสายเดียวกัน ไม่ลอยทับ
     ⚠️ ปิด/เปิดต้องสั่งที่ display — template.css:848 ตั้ง .sp-dropdown{display:none}
     และเปิดด้วย :hover เท่านั้น สั่งแค่ visibility/opacity/max-height จะไม่มีผลเลย
     (เจอจริง 13 ส.ค. 2569 — กดหัวข้อแล้วได้คลาส dss-open แต่เมนูย่อยไม่โผล่) */
  .sp-megamenu-parent.dss-mobile-open .sp-dropdown {
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    display: none;
    box-shadow: none;
    background: rgba(0, 0, 0, .18);
  }
  .sp-megamenu-parent.dss-mobile-open li.dss-open > .sp-dropdown { display: block; }
  /* บนมือถือไม่มี hover — กัน :hover ของเดสก์ท็อปกางเมนูย่อยค้างตอนแตะ */
  .sp-megamenu-parent.dss-mobile-open .sp-has-child:hover > .sp-dropdown { display: none; }
  .sp-megamenu-parent.dss-mobile-open li.dss-open:hover > .sp-dropdown { display: block; }
  .sp-megamenu-parent.dss-mobile-open .sp-dropdown-inner { padding: 0; }
  .sp-megamenu-parent.dss-mobile-open .sp-dropdown-items > li { display: block; float: none; }
  /* ย่อหน้าตามระดับความลึก ให้เห็นลำดับชั้น */
  .sp-megamenu-parent.dss-mobile-open .sp-dropdown-items a { padding-left: 36px; }
  .sp-megamenu-parent.dss-mobile-open .sp-dropdown-items .sp-dropdown-items a { padding-left: 52px; }
  .sp-megamenu-parent.dss-mobile-open .sp-dropdown-items .sp-dropdown-items .sp-dropdown-items a { padding-left: 68px; }
  /* ปุ่มเมนูต้องอยู่เหนือแผง และมีพื้นที่แตะพอ */
  #offcanvas-toggler { position: relative; z-index: 1000; padding: 10px; }
}

/* ── ชั้นแสดงเนื้อหา ── */
/*    WordPress ใช้ .entry-content ส่วนแม่แบบเดิมจัดสไตล์ให้ .item-page
      map ให้ระยะและขนาดตัวอักษรตรงกัน */
#sp-component .entry-content > * { margin-bottom: 1.1em; }
#sp-component .entry-content figure { margin: 0 0 1.2em; }
#sp-component .entry-content figcaption {
  font-size: 13px; color: #666; margin-top: 6px; text-align: center;
}

/* การ์ดเอกสารแนบ (ไฟล์ PDF ที่แปลงจาก shortcode ของ Joomla) */
#sp-component figure.dss-doc { background: #f7f9fc; }

/* ── รายการบทความ ── */
#sp-component .items-row .item { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #eee; }
#sp-component .items-row .item:last-child { border-bottom: 0; }
#sp-component .entry-title { margin: 0 0 8px; font-size: 22px; line-height: 1.35; }
#sp-component .article-info { margin: 0 0 10px; font-size: 13px; color: #888; }
#sp-component .article-info dd { display: inline-block; margin: 0 14px 0 0; }
#sp-component .pagination { margin: 24px 0 0; }
#sp-component .pagination .page-numbers {
  display: inline-block; padding: 6px 12px; margin-right: 4px;
  border: 1px solid #ddd; text-decoration: none;
}
#sp-component .pagination .page-numbers.current { background: #9a693d; color: #fff; border-color: #9a693d; }

/* ── การเข้าถึง ── */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.screen-reader-text:focus {
  position: static !important; width: auto; height: auto; clip: auto;
}
/* กรอบโฟกัสให้เห็นชัดตอนใช้คีย์บอร์ด — แม่แบบเดิมไม่ได้ทำไว้ */
#sp-header a:focus-visible,
#sp-top-bar a:focus-visible,
#sp-component a:focus-visible { outline: 2px solid #9a693d; outline-offset: 2px; }

/* ── กริดของรายการบทความ (shortcode dss_museum_articles) ──
   ⚠️ คลาส `sppb-*` ที่เราพ่นออกมาเป็นโครงเดียวกับ SP Page Builder แต่ **CSS กริดของมัน
      อยู่ในไฟล์ของส่วนขยาย** (`components/com_sppagebuilder/assets/css/sppagebuilder.css`)
      ไม่ใช่ไฟล์ของแม่แบบ จึงไม่ได้ยกมา — และไม่ควรยกมาเพราะเป็นส่วนขยายเชิงพาณิชย์
      (SP Page Builder Pro ของ JoomShaper) ที่เงื่อนไขการแจกจ่ายซ้ำไม่ชัด
   → เขียนกริดขึ้นใหม่เองที่นี่ ให้ผลหน้าตาเดียวกัน เป็นโค้ดของกรมฯ ตาม TOR ข้อ ๑๒
      (เจอจริง 14 ส.ค. 2569: รายการเรียงเป็นคอลัมน์เดียวเพราะขาดกริดนี้) */
.sppb-addon-articles .sppb-row {
  display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px;
}
.sppb-addon-articles [class*="sppb-col-sm-"] {
  padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-bottom: 30px;
}
.sppb-addon-articles .sppb-col-sm-12 { width: 100%; }
.sppb-addon-articles .sppb-col-sm-6  { width: 50%; }
.sppb-addon-articles .sppb-col-sm-4  { width: 33.3333%; }
.sppb-addon-articles .sppb-col-sm-3  { width: 25%; }
.sppb-addon-articles .sppb-col-sm-2  { width: 16.6666%; }

.sppb-addon-article { height: 100%; }
.sppb-addon-article .sppb-article-img-wrap { display: block; overflow: hidden; }
.sppb-addon-article .sppb-article-img-wrap img { width: 100%; height: auto; display: block; }
.sppb-addon-article .sppb-article-info-wrap { padding-top: 12px; }
/* ชื่อเรื่องในการ์ด — วัดจากของเดิม: h3 28px / บรรทัด 30.8px / น้ำหนัก 300
   (รอบแรกใส่ 18px/500 เอง ทำให้ตัวเล็กกว่าของเดิมเห็นชัด) */
.sppb-addon-article h3 { margin: 0 0 6px; font-size: 28px; line-height: 1.1; font-weight: 300; }
.sppb-addon-article .sppb-article-meta {
  font-size: 12px; color: #888; margin-bottom: 8px;
}
.sppb-addon-article .sppb-article-meta > span + span { margin-left: 10px; }
.sppb-addon-article .sppb-article-introtext { font-size: 14px; line-height: 1.7; }
.sppb-addon-article .sppb-readmore { display: inline-block; margin-top: 8px; font-size: 13px; }

/* จอเล็ก: 3 คอลัมน์ → 2 → 1 (เว็บเดิมกว้างตายตัวจึงไม่มีขั้นนี้ TOR ข้อ ๓.๒ บังคับให้มี) */
@media (max-width: 991px) {
  .sppb-addon-articles .sppb-col-sm-4,
  .sppb-addon-articles .sppb-col-sm-3 { width: 50%; }
}
@media (max-width: 575px) {
  .sppb-addon-articles [class*="sppb-col-sm-"] { width: 100% !important; }
}

/* ── กริดของ SP Page Builder ที่ยกโครงมา (แถว/คอลัมน์) ──
   `scripts/23_import-sppb.py` พ่น <div class="sppb-row"><div class="sppb-col-sm-N"> ตามค่า
   `layout` ของแถวในต้นฉบับ (ระบบกริด 12 ช่อง) เพื่อให้หน้าที่เดิมจัด 2–3 คอลัมน์ได้โครงเดิม
   ⚠️ CSS กริดของ SP Page Builder อยู่ในไฟล์ของ **ส่วนขยายเชิงพาณิชย์** จึงไม่ยกมา
      กริดนี้เขียนขึ้นใหม่เอง เป็นงานของกรมฯ ตาม TOR ข้อ ๑๒ */
#sp-component .sppb-row {
  display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px;
}
#sp-component .sppb-row > [class*="sppb-col-sm-"] {
  padding-left: 15px; padding-right: 15px; box-sizing: border-box; min-width: 0;
}
#sp-component .sppb-col-sm-1  { width: 8.3333%; }
#sp-component .sppb-col-sm-2  { width: 16.6666%; }
#sp-component .sppb-col-sm-3  { width: 25%; }
#sp-component .sppb-col-sm-4  { width: 33.3333%; }
#sp-component .sppb-col-sm-5  { width: 41.6666%; }
#sp-component .sppb-col-sm-6  { width: 50%; }
#sp-component .sppb-col-sm-7  { width: 58.3333%; }
#sp-component .sppb-col-sm-8  { width: 66.6666%; }
#sp-component .sppb-col-sm-9  { width: 75%; }
#sp-component .sppb-col-sm-10 { width: 83.3333%; }
#sp-component .sppb-col-sm-11 { width: 91.6666%; }
#sp-component .sppb-col-sm-12 { width: 100%; }
/* รูปในคอลัมน์ต้องย่อตามความกว้างคอลัมน์ ไม่ดันคอลัมน์ให้กว้างเกิน */
#sp-component .sppb-row img { max-width: 100%; height: auto; }

/* จอเล็ก: ยุบเหลือคอลัมน์เดียว (เว็บเดิมกว้างตายตัว ไม่มีขั้นนี้ · TOR ข้อ ๓.๒ บังคับให้มี) */
@media (max-width: 767px) {
  #sp-component .sppb-row > [class*="sppb-col-sm-"] { width: 100% !important; }
}

/* ── แถบพื้นหลังของ addon (SP Page Builder) ────────────────────────────────
   ต้นฉบับตั้งพื้นหลัง/สี/การจัดวางไว้ที่ตัว addon เอง ตัวนำเข้าจึงพ่นเป็น
   inline style มาให้ (ดู scripts/23_import-sppb.py → wrap_background)
   ที่นี่จัดแค่ระยะห่างและขนาดหัวเรื่อง ให้แถบสูงเท่าของเดิม
   ของจริงที่วัดมา (museum · หน้า "ภาพรวมตามช่วงเวลา"): แถบสูง 80px =
   h2 line-height 50px + margin 20px บน / 10px ล่าง                        */
/* display:flow-root กันระยะขอบของลูกหลุดออกนอกกล่อง (margin collapse)
   ของเดิมกันด้วย .clearfix ของ Bootstrap ที่ใส่ ::before/::after เป็น display:table
   ถ้าไม่กัน แถบจะสูงแค่ 50px แทนที่จะเป็น 80px (วัดจริงแล้วต่างกันเท่านี้) */
#sp-component .sppb-addon-bg { display: flow-root; margin: 0 0 20px; }
#sp-component .sppb-addon-bg > :first-child { margin-top: 20px; }
#sp-component .sppb-addon-bg > :last-child  { margin-bottom: 10px; }
#sp-component .sppb-addon-bg h1,
#sp-component .sppb-addon-bg h2,
#sp-component .sppb-addon-bg h3 {
  color: inherit;
  /* ค่าตั้งต้นของ addon ที่ต้นฉบับไม่ได้กำหนดขนาดเอง = 28px (วัดจากหน้า
     "ห้องอนุสรณ์ ดร.ตั้ว") · addon ที่กำหนดเองจะส่งค่ามาทาง --dss-title-size */
  font-size: var(--dss-title-size, 28px);
  line-height: var(--dss-title-lh, normal);
  font-weight: 500;
}

/* ── หน้าบทความ: ลิงก์ไปเรื่องก่อนหน้า/ถัดไป ──────────────────────────────
   ของเดิมมี <ul class="pager pagenav"> ท้ายบทความ แต่ template.css ที่ยกมา
   ไม่มีกฎของคลาสนี้ (Bootstrap ของ Joomla เป็นคนจัด) จึงเขียนให้ตรงกัน    */
#sp-component .pager.pagenav {
  display: flex; justify-content: space-between; gap: 16px;
  list-style: none; margin: 30px 0 0; padding: 20px 0 0;
  border-top: 1px solid #eee;
}
#sp-component .pager.pagenav > li { max-width: 48%; }
#sp-component .pager.pagenav > li.next { margin-left: auto; text-align: right; }
#sp-component .pager.pagenav a { color: #666; font-size: 13px; }
#sp-component .pager.pagenav a:hover { color: #000; }
@media (max-width: 767px) {
  #sp-component .pager.pagenav { flex-direction: column; }
  #sp-component .pager.pagenav > li { max-width: 100%; }
  #sp-component .pager.pagenav > li.next { text-align: left; }
}

/* หัวเรื่องของหน้า (จากรายการเมนู) — ของเดิมวัดได้ 28px/สูง 31px
   ไม่มีกฎใน template.css ที่ยกมา จึงตกไปใช้ h1{font-size:2em} ของ normalize
   = 36px ซึ่งใหญ่กว่าของเดิมเห็นได้ชัด */
#sp-component .page-header h1 { font-size: 28px; line-height: 1.1; margin: 0; }

/* ── หน้ารวมหมวดคลังเอกสาร (edocman) ───────────────────────────────────────
   ส่วนขยาย edocman เป็นของเชิงพาณิชย์ ไม่ได้ยก CSS มา — เขียนกฎขึ้นใหม่
   ให้ตรงกับที่วัดจากหน้าจริง (museum · /index.php?option=com_edocman&view=category&id=1)
   กล่อง: พื้น #f2f2f2 · กรอบ 1px #dbdee1 · padding 4px 8px · ห่างล่าง 20px
   หัวข้อ: 28px น้ำหนัก 300 · margin 14px 0 · ลิงก์สี #9a693d                */
#sp-component .edocman-category { margin: 0 0 20px; }
#sp-component .edocman-box-heading {
  background: #f2f2f2; border: 1px solid #dbdee1; padding: 4px 8px;
}
#sp-component .edocman-category-title {
  margin: 14px 0; font-size: 28px; font-weight: 300; line-height: 1.1; color: #333;
}
#sp-component .edocman-category-title-link { color: #9a693d; }
#sp-component .edocman-count { font-size: 14px; color: #666; white-space: nowrap; }
@media (max-width: 767px) {
  #sp-component .edocman-category-title { font-size: 20px; }
}
#sp-component .edocman-page-heading {
  margin: 0 0 14px; font-size: 28px; font-weight: 300; color: #666; line-height: 1.1;
}
#sp-component .edocman-page-heading i { margin-right: 6px; }

/* ชื่อของ "แถว" (section title) ที่ยกมาจาก SP Page Builder
   วัดจากของเดิม (หน้าติดต่อเรา): h3 20px · ชิดซ้าย · เว้นล่าง ~14px */
#sp-component .sppb-section-title { margin: 0 0 14px; }
#sp-component .sppb-section-title .sppb-title-heading {
  margin: 0; font-size: 20px; line-height: 1.3; font-weight: 500; color: #333;
}