/**
 * @fileoverview Navigation Overlay Fix - Modeled on arura.ai-2025
 * @fullpath /public/assets/css/navigation-fix.css
 * @description Fixed overlay navigation (not scrollable div) - modeled on arura.ai-2025
 */

/* ============================================================================
   DESKTOP NAVIGATION (992px+)
   ============================================================================ */

/* Desktop: Natural inline-block layout, no overflow restrictions */
@media (min-width: 992px) {
    .tt-main-menu {
        display: inline-block;
        min-height: 80px;
        overflow: visible;
    }

    .tt-menu-collapse {
        display: inline-block !important;
        overflow: visible;
    }

    .tt-menu-nav {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: visible;
    }
}

/* ============================================================================
   HEADER Z-INDEX FIX (all viewports)
   ============================================================================ */

/* Ensure header stays on top of overlay menu */
@media (max-width: 991px) {
    #header {
        position: relative;
        z-index: 99999 !important;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    }
}

/* ============================================================================
   MOBILE NAVIGATION OVERLAY (max-width: 991px)
   ============================================================================ */

/* Mobile: Overlay menu design - FIXED POSITION for true overlay */
@media (max-width: 991px) {
    .tt-main-menu {
        display: block;
        float: none !important;
        min-height: 60px;
    }

    /* Mobile menu collapse - FIXED POSITION overlay panel */
    .tt-menu-collapse {
        position: fixed !important;  /* FIXED not absolute - true overlay */
        display: block;
        top: 62px;  /* Below header */
        left: 0;
        bottom: 0;
        width: 50%;
        height: calc(100vh - 62px);
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #000000 !important;
        text-align: left;
        color: #DDD;
        -webkit-box-shadow: 15px 0 22px -14px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 15px 0 22px -14px rgba(0, 0, 0, 0.4);
        box-shadow: 15px 0 22px -14px rgba(0, 0, 0, 0.4);
        z-index: 99998 !important;  /* High z-index for overlay */
        visibility: hidden;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-overflow-scrolling: touch;
    }

    .tt-menu-collapse.tt-m-menu {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    /* When mobile menu is open */
    body.tt-m-menu-open .tt-menu-collapse {
        visibility: visible;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    /* Disable page scroll ONLY when mobile menu is open */
    html.tt-m-menu-noscroll {
        overflow-y: hidden !important;
    }

    /* Dark overlay cover when menu is open */
    .tt-m-menu-cover {
        position: fixed !important;  /* FIXED for true overlay */
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 99997 !important;  /* Behind menu but above content */
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }

    body.tt-m-menu-open .tt-m-menu-cover {
        visibility: visible;
        opacity: 1;
    }

    /* Mobile menu navigation list */
    .tt-menu-nav {
        overflow: visible;
        padding: 20px 0;
    }

    .tt-menu-nav > li {
        display: block;
        float: none;
        margin: 0;
        border-bottom: 1px solid #2f333c;
    }

    .tt-menu-nav > li > a {
        background-color: transparent;
        margin: 0;
        padding: 10px 20px;
        color: #CCC !important;
        display: block;
    }

    .tt-menu-nav > li > a:hover {
        background-color: transparent;
        color: #FFF !important;
    }

    .tt-menu-nav > li.active > a {
        background-color: transparent;
        color: #FFF !important;
    }
}

/* Smaller mobile screens */
@media (max-width: 767px) {
    .tt-menu-collapse {
        width: 85% !important;
    }
}

@media (max-width: 320px) {
    .tt-menu-collapse {
        width: 100% !important;
    }
}