/**
 * Mobile Menu Enhancements for KONI Aceh Website
 * Membuat menu mobile lebih soft dan simple
 * Copyright (c) 2025 KONI Aceh
 */

/* Mengubah border menjadi lebih halus */
@media (max-width: 991px) {
    /* Header mobile dengan border lebih tipis dan halus */
    .header-mobile {
        border-bottom: 1px solid rgba(227, 6, 19, 0.3) !important;
    }
    
    /* Menu mobile dengan border lebih tipis */
    .main-nav__list {
        border-top: 1px solid rgba(227, 6, 19, 0.2) !important;
    }
    
    /* Menu item dengan pemisah lebih halus */
    .main-nav__list > li:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Menu aktif dengan highlight lebih halus */
    .main-nav__list > li.active {
        background-color: rgba(227, 6, 19, 0.03) !important;
        border-left: 2px solid rgba(227, 6, 19, 0.5) !important;
    }
    
    /* Sub menu tanpa border tebal */
    .main-nav__sub {
        border-top: 1px solid rgba(227, 6, 19, 0.3) !important;
    }
    
    /* Sub menu level 2 & 3 dengan border lebih halus */
    .main-nav__sub-2,
    .main-nav__sub-3 {
        border-left: 1px solid rgba(227, 6, 19, 0.3) !important;
    }
    
    /* Megamenu dengan border lebih soft */
    .main-nav__megamenu {
        border-top: 1px solid rgba(227, 6, 19, 0.3) !important;
    }
    
    /* Title dalam megamenu dengan border lebih halus */
    .main-nav__megamenu .main-nav__title,
    .main-nav__ul .main-nav__title {
        border-bottom: 1px solid rgba(227, 6, 19, 0.1) !important;
    }
      /* Fix any other border styling in mobile menu - Memastikan tidak transparent */
    body .header-mobile,
    html .header-mobile,
    .site-wrapper .header-mobile,
    div.header-mobile {
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(227, 6, 19, 0.3) !important;
        opacity: 1 !important;
    }
    
    /* Memastikan header mobile inner juga solid dan tidak transparent */
    body .header-mobile__inner,
    html .header-mobile__inner,
    .site-wrapper .header-mobile__inner,
    div.header-mobile__inner {
        background-color: #ffffff !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Menghilangkan semua efek transparent atau overlay pada header mobile */
    .header-mobile,
    .header-mobile__inner {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }

    /* Dropdown menu in mobile mode with softer borders */
    body .main-nav__list > li > .main-nav__sub,
    html .main-nav__list > li > .main-nav__sub,
    .site-wrapper .main-nav__list > li > .main-nav__sub,
    div .main-nav__list > li > .main-nav__sub,
    .main-nav .main-nav__list > li > .main-nav__sub {
        border-top: 1px solid rgba(227, 6, 19, 0.3) !important;
    }
    
    /* Mobile menu with soft shadows instead of hard borders */
    .main-nav {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Mobile menu item spacing for better readability */
    .main-nav__list > li > a {
        padding: 12px 20px !important;
    }
    
    /* Remove any hard borders from dropdown indicators */
    .main-nav__toggle::after, 
    .main-nav__toggle-2::after {
        opacity: 0.7 !important;
    }
    
    /* Ensuring language selector dropdown is also soft */
    .nav-account__item > ul.main-nav__sub {
        border-top: 1px solid rgba(255, 209, 0, 0.5) !important;
    }
    
    /* Remove olympic rings indicator on active items in mobile - cleaner look */
    .main-nav__list > li.active > a::after {
        display: none !important;
    }
    
    /* Softer indicator for active items */
    .main-nav__list > li.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: linear-gradient(to bottom, rgba(227, 6, 19, 0.7), rgba(255, 209, 0, 0.7)) !important;
        border-radius: 0 3px 3px 0;
    }
}