/* FORCE MENU STYLES [LOCKED]
   Status: FINALIZED
   DO NOT MODIFY LAYOUT */
.main-nav {
    background-color: #203e78 !important;
    /* Biru Tua Wajib */
    background: #203e78 !important;
}

.main-nav .container {
    background-color: #203e78 !important;
}

.main-nav a {
    color: #ffffff !important;
    /* Teks Putih */
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 20px 25px !important;
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
}

/* HOVER EFFECT */
.main-nav a:hover {
    background-color: #f39c12 !important;
    color: #ffffff !important;
}

/* DESKTOP MENU SINGLE LINE FIX */
@media (min-width: 769px) {
    .main-nav .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .main-nav a {
        white-space: nowrap !important;
        padding: 20px 15px !important;
        /* Adjusted padding for better fit */
    }
}

/* MOBILE SWIPEABLE MENU */
@media (max-width: 768px) {
    body .site-header .main-nav .container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    /* Hide scrollbar */
    body .site-header .main-nav .container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Menu Items */
    body .site-header .main-nav a {
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        width: auto !important;
        padding: 20px 25px !important;
        margin: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        float: none !important;
        font-size: 14px !important;
    }

    body .site-header .main-nav a:last-child {
        border-right: none !important;
        padding-right: 20px !important;
    }
}