/* ══════════════════════════════════════════════════
   แถบเมนูบนแบบพื้นสว่าง (mockup ทีมงาน 2026-10) - ไฟล์เดียวกันทุกระบบ: portal / auth / belib / booking / news / knowledge
   โหลดต่อจาก header.css (หน้าบ้าน tpl_home / tpl_page) - แก้ที่นี่แล้วก๊อปไฟล์ไปทุกระบบ
   learnext ก็ใช้ไฟล์นี้ (public/front/theme_mrta/css/ โหลดต่อจาก site-header.css) - markup ชุดเดียวกัน
   แต่ตัวครอบเป็น #navbar_top.navbar-mrta แทน header.site-header ทุกกฎจึงเขียนเป็น :is(.site-header, .navbar-mrta)

   เหตุผล: พื้นน้ำเงินทึบทำให้โลโก้สีเดิม (กรมท่า + แดง) มองไม่เห็น และพื้นภาพ header.png วัดคอนทราสต์ไม่ได้ (WCAG 1.4.3)
     พื้นฟ้าอ่อนทึบ: โลโก้สีเดิมทุกขนาดจอ (ไม่ต้องดัดแปลงโลโก้) / ตัวหนังสือกรมท่า 12.1:1 / ขีดใต้เมนูที่เลือกสีแดง
   drawer เมนูของจอเล็ก (.nav-drawer) ยังเป็นพื้นกรมท่าตัวขาวตามเดิม - กฎเมนูจึงอยู่ใน min-width: 1200px
   ══════════════════════════════════════════════════ */

.site-header,
.site-header.site-header--transparent,
.navbar-mrta {
    position: sticky;
    top: 0;
    background: #eaf4fe !important;
    border-bottom: 1px solid #d3e0f1;
    box-shadow: none;
}

/* ── แถบมือถือ (< 1200): ไอคอนค้นหา / เมนู สีกรมท่า ── */
:is(.site-header, .navbar-mrta) .nav-mobile-controls .nav-icon-btn {
    color: #002777;
    background: transparent;
}

:is(.site-header, .navbar-mrta) .nav-mobile-controls .nav-icon-btn:hover {
    background: #d6e6fa;
}

@media (min-width: 1200px) {
    /* เมนูหลัก: ตัวกรมท่า / เมนูที่เลือกมีขีดใต้สีแดง */
    :is(.site-header, .navbar-mrta) .nav-pill,
    :is(.site-header, .navbar-mrta) .nav-pill.active {
        color: #002777 !important; /* ชนะ .nav-pill.active { color: white !important } ของ header.css */
        background: transparent;
    }

    /* ขีดใต้ (โผล่ตอนชี้ / เมนูที่เลือก - header.css) สีแดง 5.3:1 */
    :is(.site-header, .navbar-mrta) .nav-pill::after {
        background: #c8102e;
    }

    /* ไอคอนค้นหา / การเข้าถึง / กระดิ่ง: ไอคอนกรมท่าบนพื้นแถบ (เดิมวงกลมขาวมีเงา) */
    :is(.site-header, .navbar-mrta) .site-navbar #navAccessibility,
    :is(.site-header, .navbar-mrta) .site-navbar #navSearchToggle,
    :is(.site-header, .navbar-mrta) .site-navbar .nav-right .notif-dropdown .nav-icon-btn {
        background: transparent;
        color: #002777;
        font-size: 20px;
        box-shadow: none;
    }

    :is(.site-header, .navbar-mrta) .site-navbar #navAccessibility:hover,
    :is(.site-header, .navbar-mrta) .site-navbar #navSearchToggle:hover,
    :is(.site-header, .navbar-mrta) .site-navbar .nav-right .notif-dropdown .nav-icon-btn:hover {
        background: #d6e6fa;
        transform: none;
    }

    /* เข้าสู่ระบบ: เส้นขอบกรมท่า / ชี้แล้วพื้นกรมท่าตัวขาว */
    :is(.site-header, .navbar-mrta) .site-navbar .nav-login-btn {
        color: #002777;
        background: transparent;
        border-color: #002777;
    }

    :is(.site-header, .navbar-mrta) .site-navbar .nav-login-btn:hover,
    :is(.site-header, .navbar-mrta) .site-navbar .nav-login-btn:focus-visible {
        color: #fff;
        background: #002777;
    }

    /* EN | TH: ภาษาที่ใช้อยู่กรมท่าตัวหนา / อีกภาษาเทาน้ำเงิน 7.7:1 (AAA) */
    :is(.site-header, .navbar-mrta) .nav-lang,
    :is(.site-header, .navbar-mrta) .nav-lang .on {
        color: #002777;
    }

    :is(.site-header, .navbar-mrta) .txt-lang,
    :is(.site-header, .navbar-mrta) .nav-lang .sep {
        color: #3c4c70;
    }

    :is(.site-header, .navbar-mrta) .txt-lang.on {
        color: #002777;
    }

    /* ผู้ใช้ที่ล็อกอิน: ชื่อกรมท่า / แต้มตัวเลขแดง 5.3:1 */
    :is(.site-header, .navbar-mrta) .nav-user,
    :is(.site-header, .navbar-mrta) .nav-user:focus,
    :is(.site-header, .navbar-mrta) .nav-user-name,
    :is(.site-header, .navbar-mrta) .nav-user-points {
        color: #002777;
    }

    :is(.site-header, .navbar-mrta) .nav-user-name {
        font-size: 15px;
        font-weight: 600;
    }

    :is(.site-header, .navbar-mrta) .nav-user-points-number {
        color: #8f1218; /* เดิม #c8102e (5.9:1) - WCAG AAA 7:1 บนแถบบนพื้นสว่าง */
    }

    :is(.site-header, .navbar-mrta) .nav-user:hover {
        color: #002777; /* learnext ตั้ง .navbar-mrta .nav-user:hover เป็นสีขาว */
        background: #d6e6fa;
    }
}