@font-face {
    font-family: 'Dune Rise';
    src: url('../font/Dune_Rise.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
 * Fixed full-viewport backgrounds inside <main> (e.g. agenda page) paint after the
 * header in DOM order and can cover the nav. Keep the bar above those layers.
 */
.nav-bar-cus {
    position: relative;
    z-index: 100;
}

/* Web layout: main nav (desktop + mobile drawer) */
.nav-bar-cus .nav-bar-menu ul li a,
.nav-bar-cus .nav-bar-menu .nav-link {
    font-family: 'Dune Rise', 'Segoe UI', system-ui, sans-serif;
}

.nav-bar-cus .nav-bar-menu-mobile .nav-link,
.nav-bar-cus .nav-bar-menu-mobile .lang a {
    font-family: 'Dune Rise', 'Segoe UI', system-ui, sans-serif;
}

/*
 * Nav typography: fluid scale with viewport (clamp min / preferred / max).
 * TH: ข้อความเมนูย่อ-ขยายตามความกว้างหน้าจอ แทนขนาดคงที่ที่ใหญ่เกินบนมือถือ
 * EN: Menu text scales with screen width instead of oversized fixed rem/pt.
 */
@media (min-width: 1200px) {

    .nav-bar-cus .nav-bar-menu ul li a,
    .nav-bar-cus .nav-bar-menu .nav-link {
        font-size: clamp(0.78rem, 0.52rem + 0.55vw, 1.125rem);
    }
}

/*
 * Notebook / tight xl (≈1200–1650px): ลดฟอนต์+ระยะห่าง + ขยายคอลัมน์เมนู
 * กัน TH/EN (absolute) และโลโก้ขวาทับ LOG OUT กดไม่ได้
 * EN: Rebalance grid so nav has more room; make .lang flow inline; stack correctly.
 */
@media (min-width: 1200px) and (max-width: 1649.98px) {

    /* ขยายคอลัมน์กลาง (เมนู) ลดคอลัมน์ข้าง — Bootstrap ใช้ flex-basis % */
    header.nav-bar-cus .row > .col-xl-2 {
        flex: 0 0 auto;
        width: 16%;
    }

    header.nav-bar-cus .row > .col-xl-7 {
        flex: 0 0 auto;
        width: 76%;
        min-width: 0;
    }

    header.nav-bar-cus .row > .col-xl-3 {
        flex: 0 0 auto;
        width: 8%;
        position: relative;
        z-index: 1;
    }

    header.nav-bar-cus .nav-bar-menu {
        position: relative;
        z-index: 5;
        margin-left: clamp(0.25rem, 0.8vw, 1rem) !important;
        flex-wrap: nowrap;
    }

    .nav-bar-cus .nav-bar-menu ul {
        min-width: 0;
        column-gap: 0;
        flex-wrap: nowrap;
    }

    .nav-bar-cus .nav-bar-menu ul li {
        white-space: nowrap;
    }

    .nav-bar-cus .nav-bar-menu ul li a,
    .nav-bar-cus .nav-bar-menu .nav-link {
        font-size: clamp(0.86rem, 0.58rem + 0.35vw, 1.05rem) !important;
        margin-right: 0 !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
        letter-spacing: 0.01em;
    }

    header.nav-bar-cus .logo-right {
        position: relative;
        z-index: 1;
    }

    .nav-bar-cus .logo-right .layout-right-text {
        max-height: 32px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* Desktop nav: ให้เมนูกินเต็มคอลัมน์กลาง และแบ่งความกว้างแต่ละเมนูเท่ากัน */
@media (min-width: 1200px) {

    header.nav-bar-cus .nav-bar-menu {
        width: 100%;
        margin-left: 0 !important;
        justify-content: center !important;
    }

    header.nav-bar-cus .nav-bar-menu > .nav {
        flex: 1 1 0;
        width: auto;
        max-width: 100%;
        min-width: 0;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        flex-wrap: nowrap;
        justify-content: stretch !important;
    }

    header.nav-bar-cus .nav-bar-menu > .nav > li {
        flex: 1 1 0;
        min-width: 0;
    }

    header.nav-bar-cus .nav-bar-menu > .nav > li.nav-item--wide {
        flex-grow: 1.45;
    }

    header.nav-bar-cus .nav-bar-menu > .nav > li > .nav-link {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0 !important;
        text-align: center;
        white-space: nowrap;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch {
        position: static !important;
        right: auto !important;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        margin: 0 0 0 clamp(0.35rem, 0.7vw, 0.75rem) !important;
        padding: 0;
        background: transparent;
        box-shadow: none;
        white-space: nowrap;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 1.55rem;
        padding: 0.12rem 0.2rem !important;
        margin: 0 !important;
        background: transparent !important;
        border-radius: 0;
        font-size: clamp(0.72rem, 0.42rem + 0.28vw, 0.9rem) !important;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch .nav-link.active {
        color: #fff !important;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch__separator,
    header.nav-bar-cus .nav-bar-menu > .nav-language-switch .nav-language-switch__separator {
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.72rem;
        line-height: 1;
    }
}

@media (max-width: 1199.98px) {

    .nav-bar-cus .nav-bar-menu-mobile .nav-link {
        font-size: clamp(0.8rem, 0.48rem + 2.2vw, 1.15rem);
    }

    .nav-bar-cus .nav-bar-menu-mobile .lang a {
        font-size: clamp(0.72rem, 0.42rem + 1.6vw, 0.9rem);
    }

    /* Logo ในแถบบนมือถือ/แท็บเล็ต */
    .nav-bar-cus img.layout-left-text {
        width: auto;
        height: auto;
        max-height: clamp(28px, 8.5vw, 46px);
        object-fit: contain;
    }

    /* ปุ่ม hamburger */
    .nav-bar-cus #toggleMobileMenu .fas {
        font-size: clamp(1.1rem, 0.85rem + 1.4vw, 1.65rem);
        line-height: 1;
    }
}