/* ==========================================================================
   Breadcrumb กลางของทุกระบบ MRTA (component <x-mrta-breadcrumb>) - ตาม mockup ของทีม
   แถบฟ้าอ่อนเต็มความกว้างใต้ header: หมุดแดง > ลิงก์เทาอมฟ้า > หน้าปัจจุบันสีน้ำเงิน
   ไฟล์นี้ต้องเหมือนกันทุกตัวอักษรใน 7 ระบบ (news / belib / auth / portal / booking-2 / learnext / knowledge)
   ค่าทุกตัวกำหนดเองครบ ไม่พึ่ง css/bootstrap ของระบบไหน - หน้าตาจึงเท่ากันทุกระบบ

   สี (WCAG 2.2 AA - ตัวหนังสือต้องได้ 4.5:1 ขึ้นไปบนพื้นแถบ #d6e6f8):
     พื้นแถบ             #d6e6f8  (เข้มกว่า header สว่าง #eaf4fe เล็กน้อย ตาม mockup)
     ลิงก์ก่อนหน้า        #2e4766  7.48:1  (สีเทาใน mockup #8fa6c0 ได้แค่ 1.97:1 - ใช้เทาอมฟ้าโทนเดียวกันที่เข้มพอ)
     หน้าปัจจุบัน         #0b3a94  8.08:1  (น้ำเงินใน mockup #2a61c5 ได้ 4.57:1 - เข้มขึ้นนิดเผื่อระยะ)
     ลิงก์ตอน hover/focus #002777  10.62:1 + ขีดเส้นใต้
   หมุด / ลูกศรเป็นของตกแต่ง (aria-hidden ใน component)
   ========================================================================== */

nav.mrta-bc {
    display: block; /* อยู่ในลำดับปกติของหน้า (ไม่ใช้ fixed/sticky) */
    margin: 0;
    padding: 0;
    border: 0;
    background: #d6e6f8;
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
}

/* ol = แนวเดียวกับ .container ของ bootstrap 5 (ช่วงความกว้างชุดเดียวกัน ขอบซ้ายขวา 12px) */
nav.mrta-bc .mrta-bc-inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 9.6px;
    width: 100%;
    min-height: 48px;
    margin: 0 auto;
    padding: 6px 12px;
    list-style: none;
    font-size: 14px;
    line-height: 21px;
}
@media (min-width: 576px)  { nav.mrta-bc .mrta-bc-inner { max-width: 540px; } }
@media (min-width: 768px)  { nav.mrta-bc .mrta-bc-inner { max-width: 720px; } }
@media (min-width: 992px)  { nav.mrta-bc .mrta-bc-inner { max-width: 960px; } }
@media (min-width: 1200px) { nav.mrta-bc .mrta-bc-inner { max-width: 1140px; } }
@media (min-width: 1400px) { nav.mrta-bc .mrta-bc-inner { max-width: 1320px; } }

/* full: กว้างเต็มจอ (สูงสุด 1920) ตัวหนังสือ 16px - หน้าที่มี hero เต็มจอ
   เยื้องซ้ายเท่าหัวเรื่องใหญ่ของ hero (.nw-hero-inner / .el-hero .fe-hero-text / .bk-hero-inner: 8.5vw, จอ < 768: 4.7vw)
   ตัวหนังสือ breadcrumb จึงเริ่มแนวเดียวกับหัวเรื่อง - แก้ระยะของ hero เมื่อไรให้แก้ตรงนี้ด้วย */
nav.mrta-bc.mrta-bc--full .mrta-bc-inner {
    max-width: 1920px;
    padding: 6px clamp(16px, 8.5vw, 164px);
    font-size: 16px;
    line-height: 24px;
}

/* lg: ตัวหนังสือ 16px แต่วางแนว .container (belib / auth) */
nav.mrta-bc.mrta-bc--lg .mrta-bc-inner {
    font-size: 16px;
    line-height: 24px;
}
@media (max-width: 767.98px) {
    nav.mrta-bc.mrta-bc--full .mrta-bc-inner { padding-left: clamp(16px, 4.7vw, 92px); padding-right: clamp(16px, 4.7vw, 92px); }
}

/* แต่ละชั้น = ลูกศรคั่น + ข้อความ (ชั้นแรกไม่มีลูกศร) */
nav.mrta-bc .mrta-bc-item {
    display: inline-flex;
    align-items: flex-start; /* ชื่อยาวตัดหลายบรรทัด (จอมือถือ) ลูกศรอยู่ระดับบรรทัดแรก */
    gap: 9.6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #2e4766;
}
nav.mrta-bc .mrta-bc-item::marker { content: none; }

nav.mrta-bc a {
    color: #2e4766; /* 7.48:1 บนพื้น #d6e6f8 (AAA) */
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 2px;
    font: inherit;
}
nav.mrta-bc a:hover,
nav.mrta-bc a:focus-visible {
    color: #002777;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* กรอบโฟกัสสำรอง (ระบบที่โหลด accessibility.css จะใช้กรอบกลางของระบบแทน) */
nav.mrta-bc a:focus-visible {
    outline: 2px solid #002777;
    outline-offset: 2px;
}

/* "หน้าหลัก" = หมุด 15px + ช่อง 8px (ระยะนี้ hero หลายหน้าใช้คำนวณเยื้องหัวเรื่อง ห้ามเปลี่ยน) */
nav.mrta-bc .mrta-bc-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
nav.mrta-bc .mrta-bc-pin {
    display: block;
    flex: none;
    width: 15px;
    height: 17.14px;
}

/* ลูกศรคั่น = กล่องเท่า <i class="fa-solid fa-angle-right"> ของ FA7 (กว้าง 1.25em สูง 1em ที่ 0.7em ของตัวหนังสือ) */
nav.mrta-bc .mrta-bc-sep {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1em;
    font-size: .7em;
    margin-top: calc((1lh - 1em) / 2); /* กึ่งกลางของบรรทัดแรก (1lh = line-height ของแถบ) */
    fill: currentColor;
    overflow: visible;
}

/* หน้าปัจจุบัน (และลูกศรที่นำหน้า) สีน้ำเงิน 5.10:1 ตาม mockup */
nav.mrta-bc .mrta-bc-item--current { color: #0b3a94; }
nav.mrta-bc .mrta-bc-current { color: #0b3a94; }
nav.mrta-bc .mrta-bc-text { color: #2e4766; }