/* ===== UnifiedMenu.razor.css ===== */

/* Base: allow dropdowns to overflow */
.unified-menu-wrapper,
.menu-container {
    overflow-x: visible !important;
}

/* Wrapper & container */
.unified-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--nav-bg, #fff);

}

    /* Ensure hidden-nav on wrapper still animates (desktop) */
    .unified-menu-wrapper.hidden-nav {
        transform: translateY(-100%);
        transition: transform 0.3s ease;
    }

/* Menu container */
.menu-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 4rem;
}

/* Menu header */
.menu-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .menu-header .logo {
        margin-top: 15px;
        display: inline-block;
        padding: 0.25rem;
        border-radius: 0.25rem;
    }

        .menu-header .logo img {
            height: 2rem;
            width: auto;
        }

    /* Desktop: hide mobile toggle */
    .menu-header .mobile-toggle-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        display: none;
    }

    .menu-header .search-input {
        flex: 1;
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

.menu-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* NavItem styles */
.menu-item {
    position: relative;
}

.menu-button {
    background: none;
    border: none;
    font-size: 1rem;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
}

.icon-chevron {
    transition: transform 0.3s ease;
}

    .icon-chevron.rotated {
        transform: rotate(180deg);
    }

/* Mega-menu dropdown */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--nav-bg, #fff);
    min-width: 200px;
    max-width: 800px;
    z-index: 2000;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 1rem;
    gap: 1.5rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

    .mega-menu::-webkit-scrollbar {
        width: 8px;
    }

    .mega-menu::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }

.menu-item .mega-menu.pointer-events-auto {
    pointer-events: auto;
    opacity: 1;
}

.mega-menu .menu-section {
    flex: 2;
}

.mega-menu .preview-column {
    flex: 1;
    text-align: center;
}

.preview-column img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    image-rendering: auto;
    border-radius: 6px;
}

/* Visually hidden for screen readers */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Hide mobile-specific elements by default */
.mobile-menu-close,
#mobile-menu > .sr-only {
    display: none;
}

/* ===== Mobile Styles (<1024px) ===== */
@media (max-width: 1023px) {
    .menu-header .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-right: 0;
    }

    /* Show mobile toggle button */
    .menu-header .mobile-toggle-button {
        display: inline-flex;
    }

    /* Hide desktop menu-links */
    .menu-links {
        display: none;
    }

        /* Mobile menu opened state */
        .menu-links.mobile-open {
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: var(--nav-bg, #fff);
            padding-top: 4rem;
            z-index: 1001;
            overflow-y: auto;
        }

            .menu-links.mobile-open .menu-item {
                width: 100%;
                border-bottom: 1px solid #eee;
            }

            .menu-links.mobile-open .mega-menu {
                position: static;
                overflow-y: auto;
                max-height: calc(100vh - 150px);
                overscroll-behavior: contain;
            }

            .menu-links.mobile-open .mobile-menu-close,
            #mobile-menu.mobile-open > .sr-only {
                display: block;
            }

    /* Allow JS scroll-hide on the header wrapper for mobile */
    /* (simply remove the transform override) */
    /*
    .unified-menu-wrapper {
        transform: none !important;
    }
    */

    /* Preserve mobile menu-links base state */
    .menu-links {
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

        .menu-links.mobile-open {
            pointer-events: auto;
            visibility: visible;
            opacity: 1;
        }

    /* Hide on scroll: mobile header wrapper */
    .unified-menu-wrapper.hidden-nav {
        transform: translateY(-100%);
        transition: transform 0.3s ease;
    }

    /* Hide on scroll: mobile full-screen menu */
    .menu-links.mobile-open.hidden-nav {
        transform: translateY(-100%);
        transition: transform 0.3s ease;
    }
}

/* Desktop Last-Item Submenu Fix */
@media (min-width: 1024px) {
    .menu-links > .menu-item:last-of-type .mega-menu {
        top: auto !important;
        bottom: 100% !important;
        transform-origin: bottom right !important;
    }

    .unified-menu-wrapper .menu-links {
        gap: 1rem;
    }
}

@media (max-width: 1023px) {
    /* —————————————
     Mobile header: full opaque & punchy shadow
     only while scrolling up
     ————————————— */
    .unified-menu-wrapper.scrolling-up-mobile {
        /* fully opaque so nothing behind shows */
        background-color: #fff !important;
        /* strong contrast border and shadow */
        border-bottom: 2px solid #0047ab !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
        /* ensure it sits on top */
        z-index: 1100 !important;
        /* smooth transition */
        transition: background-color 0.2s ease, border-bottom 0.2s ease, box-shadow 0.2s ease;
    }

        /* Optional: make the hamburger itself pop too */
        .unified-menu-wrapper.scrolling-up-mobile .mobile-toggle-button {
            background: #0047ab !important;
            color: #fff !important;
            border-radius: 4px !important;
            padding: 0.5rem !important;
            transition: background 0.2s, transform 0.2s;
            transform: scale(1.1);
        }
}