/* Custom Mobile Menu CSS */

/* Variables (adjust colors/sizes as needed) */
:root {
    --mobile-menu-breakpoint: 991px;
    --mobile-menu-width: 280px;
    --mobile-menu-bg: #f8f8f8;
    --mobile-menu-text-color: #333;
    --mobile-menu-icon-color: #555;
    --mobile-menu-hover-bg: #eee;
    --mobile-menu-current-bg: #e5e5e5;
    --mobile-menu-transition-speed: 0.4s;
    --mobile-menu-z-index: 9999; /* Much higher to ensure it's above everything */
    --mobile-trigger-z-index: 9998; /* Just below the menu itself */
    --icon-box-color: #555;
    --icon-box-bg: rgba(0,0,0,0.05);
    --icon-box-hover-bg: rgba(0,0,0,0.1);
    --desktop-header-transition: 0.3s ease;
}

/* Hide custom elements on desktop */
.custom-mobile-menu-trigger,
.custom-mobile-menu-overlay {
    display: none;
}

/* Desktop Navigation Styling to match mobile icon boxes */
@media (min-width: 992px) {
    /* Style the primary menu container */
    .primary-menu .menu-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    /* Style menu items */
    .primary-menu .menu-item {
        position: relative;
        margin: 0 2px;
    }
    
    /* Style the menu links */
    .primary-menu .menu-link.icon-box-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 10px;
        text-align: center;
        text-decoration: none;
        color: var(--mobile-menu-text-color);
        transition: background-color 0.3s ease, transform 0.3s ease;
        border-radius: 8px;
        min-width: 80px;
    }
    
    /* Create icon container */
    .primary-menu .menu-icon {
        margin-bottom: 8px;
        font-size: 1.2rem;
        color: var(--icon-box-color);
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        background-color: var(--icon-box-bg);
        border-radius: 50%;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    
    /* Ensure icon is properly centered inside container */
    .primary-menu .menu-icon i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: 1;
    }
    
    /* Hover effects */
    .primary-menu .menu-link.icon-box-link:hover {
        background-color: var(--mobile-menu-hover-bg);
        transform: translateY(-5px);
    }
    
    .primary-menu .menu-link.icon-box-link:hover .menu-icon {
        transform: scale(1.1) rotate(5deg);
        background-color: var(--icon-box-hover-bg);
    }
    
    /* Current/active item styling */
    .primary-menu .menu-item.current .menu-link.icon-box-link {
        background-color: var(--mobile-menu-current-bg);
        font-weight: 500;
    }
    
    .primary-menu .menu-item.current .menu-icon {
        background-color: var(--icon-box-hover-bg);
    }
    
    /* Ensure text is visible and properly sized */
    .primary-menu .menu-link.icon-box-link div:not(.menu-icon) {
        font-size: 0.8rem;
        margin-top: 2px;
        font-weight: 500;
        letter-spacing: 0.5px;
    }
    
    /* Prevent default Canvas styling from interfering */
    .primary-menu .menu-link.icon-box-link::after {
        display: none !important;
    }
    
    /* Animation for menu items on page load */
    .primary-menu .menu-item {
        animation: fadeInDown 0.5s ease forwards;
        opacity: 0;
    }
    
    @keyframes fadeInDown {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Delay each item slightly */
    .primary-menu .menu-item:nth-child(1) { animation-delay: 0.05s; }
    .primary-menu .menu-item:nth-child(2) { animation-delay: 0.1s; }
    .primary-menu .menu-item:nth-child(3) { animation-delay: 0.15s; }
    .primary-menu .menu-item:nth-child(4) { animation-delay: 0.2s; }
    .primary-menu .menu-item:nth-child(5) { animation-delay: 0.25s; }
    .primary-menu .menu-item:nth-child(6) { animation-delay: 0.3s; }
    .primary-menu .menu-item:nth-child(7) { animation-delay: 0.35s; }
    .primary-menu .menu-item:nth-child(8) { animation-delay: 0.4s; }
    .primary-menu .menu-item:nth-child(9) { animation-delay: 0.45s; }
    .primary-menu .menu-item:nth-child(10) { animation-delay: 0.5s; }
    .primary-menu .menu-item:nth-child(11) { animation-delay: 0.55s; }
    
    /* Adjust header height to accommodate the taller menu */
    #header:not(.mobile-sticky) #header-wrap {
        height: auto !important;
        padding: 15px 0;
        transition: padding var(--desktop-header-transition), height var(--desktop-header-transition);
    }
    
    /* Desktop Header Shrinking Styles */
    #header.desktop-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        z-index: 299 !important;
        background-color: #FFF !important;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
        animation: headerSlideDownDesktop 0.3s ease;
    }
    
    @keyframes headerSlideDownDesktop {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    /* Shrink the header when sticky */
    #header.desktop-sticky #header-wrap {
        padding: 5px 0 !important;
    }
    
    /* Make icons and menu items smaller in sticky mode */
    #header.desktop-sticky .primary-menu .menu-icon {
        width: 30px;
        height: 30px;
        font-size: 1rem;
        margin-bottom: 4px;
    }
    
    #header.desktop-sticky .primary-menu .menu-link.icon-box-link {
        padding: 8px 6px;
        min-width: 70px;
    }
    
    #header.desktop-sticky .primary-menu .menu-link.icon-box-link div:not(.menu-icon) {
        font-size: 0.7rem;
    }
}

/* --- Styles active below the breakpoint --- */
@media (max-width: 991px) {
    /* Fix header position so it appears below hero and stays sticky */
    #slider {
        z-index: 1; /* Lower than header */
    }
    
    #header {
        position: static !important; /* Initial position: static to appear in normal document flow */
        width: 100% !important;
        background-color: #FFF !important;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
        height: 70px !important;
    }
    
    /* Remove the body padding - not needed with position: static */
    body {
        padding-top: 0 !important;
    }
    
    /* Create sticky class that will be applied by JavaScript */
    #header.mobile-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        z-index: 299 !important;
        animation: headerSlideDown 0.3s ease;
    }
    
    @keyframes headerSlideDown {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* Make sure header-wrap has the right css */
    #header-wrap {
        width: 100%;
        height: 100% !important;
    }

    /* Hide desktop menu and old trigger on mobile */
    #header-wrap .primary-menu,
    .primary-menu-trigger { /* Hide original trigger */
        display: none !important;
    }

    /* Center the header content */
    .header-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Empty the container content to allow for clean centered menu trigger */
    #header .container-fluid {
        height: 100%;
    }

    /* Show and Style Custom Mobile Trigger */
    .custom-mobile-menu-trigger {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 1.8rem;
        color: var(--mobile-menu-icon-color);
        background: none;
        border: none;
        cursor: pointer;
        z-index: var(--mobile-trigger-z-index);
        width: 50px;
        height: 50px;
        margin: 0 auto;
        padding: 0;
        transition: transform 0.3s ease;
    }
    
    /* Add a hover effect to the trigger */
    .custom-mobile-menu-trigger:hover {
        transform: scale(1.1);
    }

    /* Add a small border around the hamburger icon for better visibility */
    .custom-mobile-menu-trigger i {
        padding: 10px;
        border-radius: 50%;
        background-color: rgba(0,0,0,0.05);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        transition: background-color 0.3s ease;
        line-height: 1;
    }
    
    .custom-mobile-menu-trigger:hover i {
        background-color: rgba(0,0,0,0.1);
    }

    /* Mobile Menu Overlay */
    .custom-mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        right: calc(-1 * var(--mobile-menu-width)); /* Start off-screen */
        width: var(--mobile-menu-width);
        height: 100vh;
        background-color: var(--mobile-menu-bg);
        z-index: var(--mobile-menu-z-index);
        transition: right var(--mobile-menu-transition-speed) ease-in-out;
        overflow-y: auto;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        padding-bottom: 50px; /* Extra padding at the bottom for better scrolling */
    }

    .custom-mobile-menu-overlay.active {
        right: 0; /* Slide in */
    }

    /* Close Button */
    .custom-mobile-menu-close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 2rem;
        color: var(--mobile-menu-icon-color);
        cursor: pointer;
        line-height: 1;
        transition: transform 0.3s ease, color 0.3s ease;
    }
    
    .custom-mobile-menu-close:hover {
        transform: rotate(90deg);
        color: #000;
    }

    /* Navigation List */
    .custom-mobile-menu-nav {
        padding-top: 60px; /* Space below close button */
        padding-bottom: 20px;
    }

    /* Menu Item Link */
    .custom-mobile-menu-item {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        text-decoration: none;
        color: var(--mobile-menu-text-color);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        transition: background-color 0.2s ease, transform 0.2s ease;
        margin: 0 10px;
        border-radius: 8px;
    }

    .custom-mobile-menu-item:last-child {
        border-bottom: none;
    }

    .custom-mobile-menu-item:hover {
        background-color: var(--mobile-menu-hover-bg);
        color: var(--mobile-menu-text-color);
        transform: translateX(5px);
    }

    .custom-mobile-menu-item.current {
        background-color: var(--mobile-menu-current-bg);
        font-weight: 600;
    }

    /* Icon Styling */
    .custom-mobile-menu-icon {
        margin-right: 15px;
        font-size: 1.2rem;
        color: var(--mobile-menu-icon-color);
        width: 30px; /* Increased size for better visibility */
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0,0,0,0.05);
        border-radius: 50%;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    
    /* Ensure mobile icon is properly centered */
    .custom-mobile-menu-icon i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: 1;
    }
    
    .custom-mobile-menu-item:hover .custom-mobile-menu-icon {
        transform: scale(1.1) rotate(5deg);
        background-color: rgba(0,0,0,0.1);
    }

    .custom-mobile-menu-item.current .custom-mobile-menu-icon {
        color: var(--mobile-menu-text-color);
        background-color: rgba(0,0,0,0.1);
    }

    /* Text Styling */
    .custom-mobile-menu-text {
        font-size: 1rem;
        font-weight: 500;
    }
    
    /* Add subtle animation to menu items when the menu opens */
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item {
        animation: slideInRight 0.3s ease forwards;
        opacity: 0;
    }
    
    @keyframes slideInRight {
        from {
            transform: translateX(20px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    /* Delay each item slightly more than the previous */
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(1) { animation-delay: 0.05s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(2) { animation-delay: 0.1s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(3) { animation-delay: 0.15s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(4) { animation-delay: 0.2s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(5) { animation-delay: 0.25s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(6) { animation-delay: 0.3s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(7) { animation-delay: 0.35s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(8) { animation-delay: 0.4s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(9) { animation-delay: 0.45s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(10) { animation-delay: 0.5s; }
    .custom-mobile-menu-overlay.active .custom-mobile-menu-item:nth-child(11) { animation-delay: 0.55s; }
}