/* ============================================================================
   wp-bridge.css — ชั้นเชื่อมระหว่าง markup ของ WordPress กับ CSS ที่ยกมาจากแม่แบบเดิม
   โหลดเป็นไฟล์สุดท้าย (ดู functions.php) จึงทับค่าไฟล์ก่อนหน้าได้

   หลักการ: **ห้ามแก้ไฟล์ที่ยกมา** (styles.css / style2.css / NivooSlider.css)
   ถ้าต้องเปลี่ยนอะไร ให้เขียนทับที่นี่ — เพื่อให้เทียบกับต้นฉบับได้ตลอดเวลาว่าเราเปลี่ยนอะไรไป
   ============================================================================ */

/* ── ชั้นการเข้าถึง (accessibility) — เว็บเดิมไม่มีทั้งสองอย่างนี้ ── */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.dss-skip-link:focus {
  position: fixed !important; top: 8px; left: 8px;
  width: auto; height: auto; clip: auto; clip-path: none;
  z-index: 100000; padding: 10px 16px;
  background: #fff; color: #3d5175; border: 2px solid #3d5175; border-radius: 3px;
}
/* เว็บเดิมไม่มีเส้นบอกตำแหน่งโฟกัสเลย — ใช้แป้นพิมพ์แล้วไม่รู้ว่าอยู่ที่ไหน */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #3d5175; outline-offset: 1px;
}
#nav a:focus-visible, .topmenu a:focus-visible { outline-color: #fff; }

/* ── ภาพเลื่อน: ทำหน้าที่แทน NivooSlider (ที่ต้องใช้ MooTools) ──
   ของเดิม NivooSlider ย้ายรูปไปเป็นพื้นหลังของกล่องที่มันสร้างขึ้น ทำให้ <img> ในหน้าเป็น 0×0
   ที่นี่ใช้กล่อง <a> ซ้อนกันแล้วสลับความทึบแสง ผลที่เห็นเหมือนกัน
   ⚠️ `.nivoo-slider` มี padding-left:10px (กว้างรวม 950px) → กล่องภาพต้องเริ่มที่ left:10px
      ไม่ใช่ 0 ไม่งั้นภาพจะเลื่อนไปทับขอบซ้าย 10px */
#Slider { position: relative; }
#Slider > a {
  position: absolute; top: 0; left: 10px; right: 0; height: 100%;
  display: block; z-index: 0;
  opacity: 0; transition: opacity .6s ease-in-out;
}
#Slider > a.is-active { opacity: 1; z-index: 1; }
/* ถ้า JavaScript ไม่ทำงาน ให้ภาพแรกยังแสดง (ของเดิมจะว่างเปล่า) */
#Slider:not(.dss-ready) > a:first-of-type { opacity: 1; z-index: 1; }
#Slider img {
  position: static !important;
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
/* คำบรรยาย: ของเดิม CSS ตั้ง bottom:-30px (ซ่อน) แล้ว NivooSlider เลื่อนขึ้นมา
   วัดจากหน้าจริงแล้วคำบรรยายแสดงอยู่ที่ขอบล่าง จึงตั้ง bottom:0 ให้ตรงผลที่เห็น */
#Slider p { bottom: 0; }

/* ปุ่มเลื่อนภาพ — สร้างด้วย JavaScript แล้วใส่คลาสเดิมเพื่อให้ใช้ภาพลูกศรชุดเดิม
   ของเดิมเป็น <div> กดด้วยแป้นพิมพ์ไม่ได้ ที่นี่เป็น <button> จริง */
.direction-nav-left, .direction-nav-right {
  height: 100%; width: 44px;
  border: 0; background-color: transparent; padding: 0;
  cursor: pointer; z-index: 40;
}
.direction-nav-right { padding-right: 15px; box-sizing: content-box; width: 29px; }
.direction-nav-left:hover, .direction-nav-right:hover { opacity: .85; }

/* ── ชั้นแสดงเนื้อหา: map markup ของ WordPress เข้ากับคลาสของเทมเพลตเดิม ── */
#centercontent_bg .item-page > * { margin-bottom: 1em; }
#centercontent_bg .item-page > *:last-child { margin-bottom: 0; }
#centercontent_bg figure { margin: 0 0 1.2em; }
#centercontent_bg figcaption { font-size: 13px; color: #666; margin-top: 6px; text-align: center; }
#centercontent_bg .wp-caption { max-width: 100%; }
#centercontent_bg blockquote {
  margin: 0 0 1em; padding: 8px 14px; border-left: 3px solid #e1e1e1; color: #555;
}
/* ตารางในเนื้อหาที่ยกมาจาก Joomla กว้างเกินจอได้ ให้เลื่อนในกรอบของตัวเอง */
#centercontent_bg .item-page table { display: block; overflow-x: auto; max-width: 100%; }

/* หัวข้อผลการค้นหา ใช้แบบเดียวกับหัวข้อเนื้อหาของเดิม */
.dss-cm-search-heading {
  font-family: 'Cuprum', sans-serif; font-size: 20px; font-weight: normal;
  color: #01406a; padding: 3px 0; margin: 0 0 8px;
  border-bottom: 1px dotted #e1e1e1;
}

/* แถบเลขหน้าของ WordPress ใช้คลาส `pagination` ตรงกับของเดิมอยู่แล้ว
   เหลือแค่จัดระยะและซ่อนหัวข้อที่ WordPress ใส่มาให้เครื่องอ่านหน้าจอ */
.navigation.pagination { clear: both; padding: 8px 0 2px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.navigation.pagination .page-numbers.current { background: #3A759E; color: #fff; }

/* เครดิตผู้สร้างแม่แบบ — ต้องแสดงตามใบอนุญาต CC BY 2.0 (ดู NOTICE.md §3) */
.dss-cm-credit {
  clear: both; width: 940px; margin: 0 auto; padding: 2px 40px 6px;
  font-size: 10px; color: #708090; box-sizing: border-box;
}
.dss-cm-credit a { color: #708090; }

/* ── ปุ่มเมนูสำหรับจอเล็ก — ซ่อนบนจอใหญ่ (เว็บเดิมกว้างตายตัว 980px ไม่มีปุ่มนี้) ── */
.dss-cm-menu-toggle { display: none; }
.dss-cm-bars, .dss-cm-bars::before, .dss-cm-bars::after {
  display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px;
}
.dss-cm-bars { position: relative; }
.dss-cm-bars::before, .dss-cm-bars::after { content: ""; position: absolute; left: 0; }
.dss-cm-bars::before { top: -7px; }
.dss-cm-bars::after  { top: 7px; }

/* ปุ่มขึ้นบนสุด: ของเดิมเป็น div ที่ JavaScript สลับ display — ที่นี่เป็น <button> + hidden */
.nav_up[hidden] { display: none; }
.nav_up { z-index: 900; }

/* ============================================================================
   จอเล็ก — เว็บเดิม **ไม่รองรับ** (ทุกกล่องกว้างตายตัว 980px)
   TOR ข้อ ๓.๒ กำหนดให้รองรับ จึงเพิ่มชั้นนี้ขึ้นใหม่ โดยไม่แตะการแสดงผลบนจอใหญ่
   ============================================================================ */
@media (max-width: 1010px) {
  /* ปล่อยความกว้างให้ยืดตามจอ — ต้องใช้ !important เพราะค่า 980px ถูกพ่นเป็น inline <style>
     ⚠️ ต้องครอบ **ทุกกล่องที่ CSS เดิมตั้งความกว้างเป็นพิกเซล** ไม่ใช่แค่กล่องนอก
        รายการนี้ได้จากการค้นกฎ `width:<600-999>px` ในไฟล์ที่ยกมา (styles.css / style2.css)
        ตกไปกล่องเดียวก็ล้นทั้งหน้า — เจอจริง: ลืม #centercontent_bg (930px) แล้วจอ 390px ล้น 566px */
  #header, #wrapper, #bottom { width: auto !important; max-width: 980px; }
  #navr, #centercontent_bg, #centercontent_md, #topuser,
  #mods2, #mods3, .footer-pad, .shadow, .shadowtop, #error {
    width: auto !important; max-width: 100%;
  }
  #centercontent_bg { box-sizing: border-box; }
  #wrapper { margin-left: 6px; margin-right: 6px; box-sizing: border-box; }
  #header { margin-left: 12px; margin-right: 12px; }
  #bottom { margin-left: 6px; margin-right: 6px; box-sizing: border-box; }

  /* ภาพเลื่อน: รักษาสัดส่วน 940×250 แทนความสูงตายตัว */
  /* ⚠️ ต้องเป็น `width:100%` ไม่ใช่ `width:auto`
     กล่องนี้ไม่มีเนื้อหาที่อยู่ในสายการไหลเลย (สไลด์และปุ่มเป็น position:absolute ทั้งหมด)
     เมื่อใช้ width:auto ร่วมกับ aspect-ratio เบราว์เซอร์จะคิดความกว้างจากเนื้อหา
     ได้ผลเพี้ยนไม่คงที่ — วัดจริงที่จอ 768px ได้กว้างเพียง 141px (ควรเป็น ~728px)
     ส่วน width:100% เป็นค่าที่ชี้ชัด อ้างจากความกว้างของกล่องแม่ตรง ๆ */
  .nivoo-slider, .nivoo-slider-holder {
    width: 100% !important; height: auto !important;
    aspect-ratio: 940 / 250; padding-left: 0; box-sizing: border-box;
  }
  #Slider > a { left: 0; }
  .slideshadow2 { display: none; }   /* เงาใต้สไลด์เป็นภาพกว้างตายตัว 952px */

  .tg, .dss-cm-credit { width: auto; padding-left: 12px; padding-right: 12px; }
  .user1, .user2, .user3 { float: none; width: auto; margin: 10px 12px; padding: 0 0 6px; }
}

@media (max-width: 767px) {
  /* โลโก้และช่องค้นหาของเดิมวางทับกันด้วย absolute — บนจอแคบต้องเรียงลงมา */
  #header { height: auto !important; padding-bottom: 10px; }
  #header > a { display: block; }
  .logo { position: static !important; max-width: 100%; height: auto; }
  .topmenu { float: none; }
  .search { text-align: left; padding: 8px 0 0; }
  /* ⚠️ ห้ามยืดช่องค้นหา — พื้นหลังเป็นภาพ searchbg.png ที่ตั้ง `repeat-x`
     ถ้ากว้างเกินภาพจะซ้ำ กลายเป็นเห็น "สองกล่อง" ต่อกัน (เห็นจริงในภาพ 390px)
     จึงคุมไว้ที่ความกว้างที่ภาพออกแบบมา และย่อลงได้ถ้าจอแคบกว่านั้น */
  .searchbox { width: 176px !important; max-width: 100%; }

  /* แถบเมนู: ซ่อนเมนูแนวนอน แล้วให้ปุ่มเปิดแผงแทน
     ⚠️ #navl อยู่ **ข้างใน** #navr และ #navr เป็นแถบสูง 43px มีภาพพื้นหลัง
        จึงต้องปล่อยความสูงเป็น auto ไม่งั้นแผงเมนูจะถูกตัด */
  #navr { height: auto !important; position: relative; }
  .dss-cm-menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 43px; margin-left: 4px;
    background: transparent; border: 0; cursor: pointer;
  }
  #navl { position: static; }
  #nav-left { float: none; width: auto; }
  #nav ul.menu { display: none; float: none; margin: 0; }
  #nav ul.menu.dss-open { display: block; background: #222; }
  #nav ul.menu.dss-open > li { float: none; width: 100%; height: auto; padding: 0; }
  #nav ul.menu.dss-open > li > a,
  #nav ul.menu.dss-open ul li a {
    line-height: 1.5 !important; height: auto !important;
    min-height: 44px; padding: 11px 16px !important;
    display: flex; align-items: center;
    white-space: normal; word-break: keep-all;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  /* เมนูย่อย: ของเดิมซ่อนด้วย left:-999em แล้วกางด้วย :hover ซึ่งบนจอสัมผัสใช้ไม่ได้
     → เปลี่ยนเป็นกางอยู่ในสายเดียวกัน เปิด/ปิดด้วยการกด (JavaScript ใส่คลาส dss-open) */
  #nav ul.menu.dss-open li ul {
    position: static !important; left: auto !important; width: auto !important;
    display: none;
  }
  #nav ul.menu.dss-open li.dss-open > ul { display: block; }
  /* ⚠️ ต้องปลด float ของ **ทุกชั้น** ไม่ใช่แค่ชั้นบนสุด
     `#nav ul li { float:left }` ของแม่แบบมีผลกับ li ทุกระดับ ทำให้เมนูย่อยเรียงข้างกัน
     เป็นตาราง 2 คอลัมน์บนมือถือ (เห็นจริงในภาพหน้าจอ 390px 13 ส.ค. 2569) */
  /* ⚠️ ต้องปลด float ที่ **ตัว ul เองด้วย** ไม่ใช่แค่ li
     `#nav ul { float:left }` มีผลกับ ul ทุกชั้น → ul เมนูย่อยลอยซ้าย
     แล้วรายการหลักที่เหลือไหลไปอยู่ข้าง ๆ กลายเป็น 2 คอลัมน์ (เห็นจริงในภาพ 390px) */
  #nav ul.menu.dss-open,
  #nav ul.menu.dss-open ul { float: none !important; width: 100% !important; margin-left: 0; }
  #nav ul.menu.dss-open li { float: none !important; width: 100% !important; height: auto; }
  #nav ul.menu.dss-open li ul { background: rgba(0, 0, 0, .18); }
  #nav ul.menu.dss-open li ul li a { padding-left: 32px !important; }
  #nav ul.menu.dss-open li ul li ul li a { padding-left: 48px !important; }

  /* เรียงลำดับในหัวเว็บบนจอแคบ: โลโก้ก่อน แล้วค่อยช่องค้นหา
     (ของเดิมวางทับกันด้วย absolute จึงไม่มีลำดับ พอปลดเป็นสายการไหลแล้วช่องค้นหาขึ้นก่อน) */
  #header { display: flex; flex-direction: column; }
  #header > a[rel="home"] { order: 1; }
  .topmenu { order: 2; }
  .slogan  { order: 3; }
  /* ปุ่มค้นหาของเดิมเป็นภาพพื้นหลังกว้าง 30px — บนจอแคบต้องไม่ให้กล่องว่างโผล่ข้าง ๆ */
  .search { display: flex; align-items: center; gap: 0; }
  .searchbox { flex: 0 1 176px; }
  .search_button { flex: 0 0 auto; }

  /* ตารางรายการ: คอลัมน์วันที่แคบเกินไปบนจอเล็ก */
  td.list-date, th.list-date { width: 30%; font-size: 12px; }
  #centercontent_bg { padding: 0; }
  .item-page { padding: 7px 4px; }
}

/* ── ปุ่มปรับขนาดตัวอักษร (แทนโมดูล mod_jfontsize) ────────────────────────────
   เขียนกฎขึ้นใหม่ให้ได้หน้าตาเดียวกับของเดิม (ปุ่มตัวหนา 12px กรอบเทาบาง)
   ไม่ได้คัดลอก jfontsize.css มาเพราะเป็น GPL v3 — เหตุผลเต็มใน NOTICE.md
   ตำแหน่งอ้างจากของจริง: อยู่ใน .topmenu ชิดขวา สูง 17px                       */
/* ของเดิมเป็นบล็อกเต็มความกว้างของ .topmenu (206px) วางใต้ช่องค้นหา
   ปุ่มเป็น inline เรียงจากซ้าย — วัดจากของจริง: กล่อง y=57 h=17 · ปุ่ม h=22 */
.topmenu .jfontsize { display: block; float: none; clear: both; margin: 0; padding: 0; }
.topmenu .jfontsize-button {
  font: bold 12px Arial, Helvetica, sans-serif;
  display: inline; padding: 3px; margin: 0 3px 0 0;
  border: solid 1px #ccc; background: transparent; color: inherit;
  cursor: pointer; border-radius: 0;
}
.topmenu .jfontsize-button:hover:not(:disabled),
.topmenu .jfontsize-button:focus-visible:not(:disabled) {
  text-decoration: none; background: #333; color: #fff; border-color: #333;
}
.topmenu .jfontsize-button:focus-visible { outline: 2px solid #1a5b9a; outline-offset: 1px; }
/* สุดขอบแล้ว — ของเดิมไม่มีสถานะนี้เพราะไม่มีขอบเขต */
.topmenu .jfontsize-button:disabled,
.topmenu .jfontsize-button.jfontsize-disabled {
  color: #aaa; border-color: #eee; background: #eee; cursor: default;
}