/* ── Bootstrap 4 -> 5: คืนพฤติกรรมที่ดีไซน์เดิมพึ่งพา ─────────────────────────
 *
 * เว็บเดิมสร้างบน Bootstrap 4.3.1 โปรเจกต์นี้ใช้ Bootstrap 5 ตัวล่าสุด
 * มี 3 เรื่องที่ Bootstrap 5 เปลี่ยนค่าเริ่มต้นแล้วทำให้หน้าตาขยับ
 * ไฟล์นี้ดึงกลับมาให้เท่าเดิม ไม่ได้แก้ Bootstrap และไม่ได้แตะดีไซน์
 *
 * ต้องโหลด "หลัง" bootstrap.min.css และ "ก่อน" CSS ของธีม
 * ────────────────────────────────────────────────────────────────────────── */

/* 1. ระยะ gutter ของ grid
      Bootstrap 4 = 30px (คอลัมน์เว้นข้างละ 15px)
      Bootstrap 5 = 24px (ข้างละ 12px) — คอลัมน์จะกว้างขึ้น ช่องไฟแคบลงทั้งหน้า */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row {
    --bs-gutter-x: 1.875rem;
}

/* 2. ลิงก์
      Bootstrap 5 ขีดเส้นใต้ให้ทุกลิงก์เป็นค่าเริ่มต้น Bootstrap 4 ไม่ขีด */
a {
    text-decoration: none;
}

/* 3. ปุ่มปิด
      Bootstrap 5 เปลี่ยน .close เป็น .btn-close ที่เป็นไอคอน SVG คนละหน้าตา
      ปุ่มปิดของแถบคุกกี้และ modal ภาษาใช้ไอคอนของตัวเองอยู่แล้ว
      จึงประกาศ .close แบบเดิมไว้เอง ให้ตำแหน่งและน้ำหนักสีเท่าของเดิม */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.close:hover {
    color: #000;
    text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
    opacity: .75;
}

/* 4. textarea
      Bootstrap 4 มี textarea.form-control{height:auto} คอยกันความสูงคงที่ที่ CSS อื่นตั้งไว้
      (social.css ของธีมเดิมตั้ง .form-control{height:44px}) Bootstrap 5 ตัดกฎนี้ออก
      textarea จึงถูกบีบเหลือ 44px ทั้งที่สั่ง rows ไว้ */
textarea.form-control {
    height: auto;
}

/* 5. สีข้อความตัวอย่างในช่องกรอก (placeholder)
      Bootstrap 4 = #6c757d (เทาอมฟ้า)
      Bootstrap 5 = rgba(33,37,41,.75) เข้มกว่าและอมดำ ทำให้ฟอร์มทุกหน้าดูต่างจากเดิม */
.form-control::-moz-placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* 6. การ์ด (card)
      Bootstrap 4: .card-header padding .75rem 1.25rem · .card-body padding 1.25rem · มุมโค้ง .25rem
      Bootstrap 5: .card-header padding .5rem 1rem  · .card-body padding 1rem  · มุมโค้ง .375rem
      หน้าที่ใช้ accordion แบบการ์ด (faq) จะเตี้ยลงข้อละ 8px ถ้าไม่ดึงค่าเดิมกลับมา
      มุมด้านในของ header/footer (Bootstrap 4 = .25rem - 1px) ต้องตั้งผ่านตัวแปรด้วย
      ไม่งั้น .card-footer:last-child ยังโค้ง 5px ตามค่า Bootstrap 5 (เห็นที่มุมล่างการ์ดหน้า /route-info)
      สีเส้นขอบ/พื้นหัวการ์ด: Bootstrap 4 = rgba(0,0,0,.125) / rgba(0,0,0,.03) · Bootstrap 5 = .175 / rgba(33,37,41,.03)
      (เส้นใต้หัวข้อ faq เข้มกว่าเดิม — เจอเซสชัน 18 จาก pixel diff) */
.card {
    --bs-card-border-radius: .25rem;
    --bs-card-inner-border-radius: calc(.25rem - 1px);
    --bs-card-border-color: rgba(0, 0, 0, .125);
    --bs-card-cap-bg: rgba(0, 0, 0, .03);
    border-radius: .25rem;
}

.card-header {
    padding: .75rem 1.25rem;
}

.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    padding: .75rem 1.25rem;
}

/* 7. แบ่งหน้า (pagination)
      Bootstrap 4: .page-link มี padding .5rem .75rem · line-height 1.25 · margin-left -1px
      Bootstrap 5: ตัด line-height ออก ปุ่มจึงสืบ line-height ของหน้ามาใช้ (หน้า blog = 40px)
      ทำให้แถบแบ่งหน้าสูง 54px แทน 35.5px และมุมโค้งเปลี่ยนจาก .25rem เป็น .375rem */
.page-link {
    padding: .5rem .75rem;
    margin-left: -1px;
    /* Bootstrap 5 ตั้ง --bs-pagination-font-size: 1rem (16px) ส่วน Bootstrap 4 ไม่ตั้ง
       จึงสืบขนาดตัวอักษรของหน้า (ธีมนี้คือ 14px) ปุ่มเลยกว้างและสูงกว่าเดิม */
    font-size: inherit;
    line-height: 1.25;
}

.pagination {
    border-radius: .25rem;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

/* ปุ่มแบ่งหน้าที่กดไม่ได้ (Previous ตอนอยู่หน้าแรก / Next ตอนหน้าสุดท้าย)
   Bootstrap 4 = ตัวอักษรเทา พื้นขาว · Bootstrap 5 = พื้นเทา #e9ecef */
.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}

/* 9. ตารางที่เขียน border ไว้ในแอตทริบิวต์ HTML (เนื้อหาจากหลังบ้าน CKEditor)
      Bootstrap 5 reboot สั่ง `tbody, td, tfoot, th, thead, tr { border-width: 0 }` กับทุกตารางในหน้า
      Bootstrap 4 ไม่มีกฎนี้ ตาราง <table border="1"> ของบทความจึงเคยมีเส้นตามค่าเริ่มต้นของเบราว์เซอร์
      ผลตอนไม่ดึงกลับ: เส้นตารางหายทั้งตาราง และแต่ละแถวเตี้ยลง 1px (ตาราง 39 แถว = หน้าเลื่อน 38px)
      เล็งเฉพาะตารางที่มีแอตทริบิวต์ border จึงไม่กระทบตารางที่ใช้คลาส .table ของ Bootstrap */
table[border] > * > tr > td,
table[border] > * > tr > th {
    border-width: 1px;
    border-style: inset;
}

/* 10. ระยะเยื้องของรายการ <ul>/<ol>
       Bootstrap 4 ปล่อยค่าเริ่มต้นของเบราว์เซอร์ (padding-left: 40px)
       Bootstrap 5 reboot เปลี่ยนเป็น 2rem (32px) — ทุกรายการในเว็บจึงเลื่อนซ้าย 8px
       และคอลัมน์ในรายการกว้างขึ้น 4px จนข้อความที่เคยตัดบรรทัดกลายเป็นบรรทัดเดียว */
ul,
ol {
    padding-left: 40px;
}

/* 11. ระยะขอบในของช่องตาราง .table
       Bootstrap 4: .table th/.table td { padding: .75rem }
       Bootstrap 5: --bs-table-cell-padding-y = .5rem (แถวเตี้ยลงแถวละ 8px)
       ตารางเที่ยวรถของหน้าตารางเดินรถมี 16-19 แถว หน้าจึงสั้นกว่าเดิมนับร้อย px */
.table > :not(caption) > * > * {
    padding: .75rem;
}

/* 12. เส้นใต้หัวตาราง .table
       Bootstrap 4: .table thead th { border-bottom: 2px solid #dee2e6 }
       Bootstrap 5: ใช้เส้น 1px เท่าแถวอื่น — ตารางจึงเตี้ยลงตารางละ 1px */
.table > thead > tr > th {
    border-bottom-width: 2px;
}

/* 13. <hr> ที่วางไว้ใน .row ตรงๆ (ไม่ได้อยู่ในคอลัมน์)
       Bootstrap 5 สั่ง .row > * { width: 100%; margin-top: 0; padding: 0 gutter } กับลูกทุกตัวของ row
       เส้นคั่นจึงกลายเป็นเต็มความกว้างและกินที่แนวตั้งเพิ่ม 17px ทั้งที่ Bootstrap 4 มันกว้าง 0 */
.row > hr {
    width: 0;
    padding-right: 0;
    padding-left: 0;
    margin-top: 1rem;
}

/* 14. ฟอร์มแบบ Bootstrap 4
       - `.form-group { margin-bottom: 1rem }` ถูกตัดออกไปใน Bootstrap 5 (เปลี่ยนไปใช้ .mb-3 แทน)
       - `label { margin-bottom: .5rem }` ก็ถูกตัดออกเช่นกัน
       มาร์กอัปของเว็บเดิมใช้ 2 คลาสนี้ทั้งหน้าเข้าสู่ระบบ/สมัคร/ลืมรหัสผ่าน
       ไม่ดึงกลับ ทุกช่องกรอกจะชิดกันขึ้นช่องละ 8px และการ์ดทั้งใบเตี้ยลง 48px */
.form-group {
    margin-bottom: 1rem;
}

label {
    margin-bottom: .5rem;
}

/* 15. ช่องติ๊ก .form-check
       Bootstrap 4 ใช้ checkbox ตามค่าเริ่มต้นของเบราว์เซอร์ (13x13px) วางแบบ absolute เยื้องซ้าย 1.25rem
       Bootstrap 5 วาดกล่องเอง (1em = 14px) และเปลี่ยนมาใช้ flex + padding 1.5em
       ผลคือแถวยอมรับเงื่อนไขในหน้าสมัครสมาชิกสูงขึ้น 10px และทั้งหน้าเลื่อนตาม */
.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
    /* Bootstrap 5 ตั้ง min-height: 1.5rem กับ margin-bottom: .125rem ไว้ให้กล่องติ๊กที่มันวาดเอง
       ของเดิมไม่มีทั้งคู่ (แถวเลยสูงเกินมา 2-3px) */
    min-height: 0;
    margin-bottom: 0;
}

.form-check .form-check-input {
    position: absolute;
    width: auto;
    height: auto;
    margin-top: .3rem;
    margin-left: -1.25rem;
    appearance: auto;
    -webkit-appearance: checkbox;
    vertical-align: baseline;
    background-color: initial;
    border: initial;
    border-radius: initial;
}

.form-check .form-check-label {
    margin-bottom: 0;
}

/* 16. ช่องกรอก .form-control
       Bootstrap 4: border 1px solid #ced4da · มุมโค้ง .25rem · สีข้อความ #495057
       Bootstrap 5: border ใช้ #dee2e6 (จางกว่า) · มุมโค้ง .375rem · สีข้อความ #212529
       เห็นชัดที่หน้าเข้าสู่ระบบ/สมัคร/ลืมรหัสผ่าน ที่ปล่อยให้ช่องกรอกใช้ค่าเริ่มต้นของ Bootstrap
       (วัดจากภาพเทียบ production แล้ว เส้นขอบต่างจริงทุกช่อง) */
.form-control {
    color: #495057;
    border-color: #ced4da;
    border-radius: .25rem;
}

/* 17. สีเส้นคั่น <hr>
       Bootstrap 4: border-top 1px solid rgba(0,0,0,.1)
       Bootstrap 5: border-top 1px solid สีตัวอักษร (#222) + opacity .25 — เข้มกว่าเดิมจนเห็นชัด
       (วัดจากภาพเทียบ production หน้า /route · /station) */
hr {
    border-top-color: rgba(0, 0, 0, .1);
    opacity: 1;
}

/* 18. พื้นหลังและสีตัวอักษรของช่องตาราง
       Bootstrap 4: <td>/<th> โปร่งใส — สีของ <tr> หรือกล่องแม่ (เช่น tr:nth-child(even) #f2f2f2) โผล่ให้เห็น
                    สีตัวอักษรรับต่อจาก .table (#212529)
       Bootstrap 5: ทุกช่องทาสี var(--bs-table-bg) (#fff) ทับสีของแถวจนหายหมด และตั้งสีตัวอักษรเองเป็น #000
       (วัดจากภาพเทียบ production หน้า /route-info/{key} ตารางสรุปใต้แผนที่) */
.table {
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    color: inherit;
}