/* 
   Web Assets Custom Overrides
   Specifically for fixing mobile navigation and premium UI tweaks
*/

@media (max-width: 991px) {
    /* Ensure header container centers items properly */
    #header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        min-height: 80px;
        padding-left: 15px !important;
        padding-right: 15px !important;
        position: relative !important; /* Crucial for absolute positioning of nav-footer */
    }

    /* Reset logo padding for vertical centering */
    #header .logo {
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        max-width: 65% !important;
    }

    #header .logo img {
        max-height: 55px;
        width: auto !important;
        object-fit: contain;
    }

    /* Hamburger Button Positioning and Style */
    .mainmenu-navigation {
        margin: 0 !important;
        float: none !important;
        position: static !important; /* Don't anchor the nav-footer here */
    }

    .mainmenu-navigation .navigation {
        position: static !important; /* Don't anchor the nav-footer here */
        float: none !important;
    }

    .mainmenu-navigation .navigation .nav-header {
        display: block !important;
    }

    .mainmenu-navigation .navigation .nav-header button {
        background: var(--brand-primary) !important;
        border: none !important;
        color: #fff !important;
        width: 46px !important;
        height: 42px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        float: none !important;
        margin: 0 !important;
    }

    .mainmenu-navigation .navigation .nav-header button:active {
        transform: scale(0.92);
        box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb), 0.2) !important;
    }

    /* Mobile Menu Panel (nav-footer) */
    .mainmenu-navigation .navigation .nav-footer {
        position: absolute !important;
        top: 100% !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
        padding: 10px !important;
        z-index: 2000 !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        margin-top: 5px !important;
    }

    .mainmenu-navigation .navigation .nav-footer ul.nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mainmenu-navigation .navigation .nav-footer ul.nav li {
        width: 100% !important;
        border-bottom: 1px solid #f2f2f2 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .mainmenu-navigation .navigation .nav-footer ul.nav li:last-child {
        border-bottom: none !important;
    }

    .mainmenu-navigation .navigation .nav-footer ul.nav li a {
        padding: 14px 18px !important;
        display: block !important;
        font-weight: 600 !important;
        color: #2d3436 !important;
        font-size: 15px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: all 0.2s !important;
        border-radius: 8px;
    }

    .mainmenu-navigation .navigation .nav-footer ul.nav li a:hover,
    .mainmenu-navigation .navigation .nav-footer ul.nav li a.is-active {
        color: var(--brand-primary) !important;
        background: rgba(var(--brand-primary-rgb), 0.06) !important;
        padding-left: 22px !important;
    }

    /* Dropdown Expanders in Mobile */
    .dropdown-expander {
        float: right;
        background: none;
        border: none;
        padding: 10px;
        color: var(--brand-primary);
    }
}