{{# navbar.antlers.html #}}
<style>
    .dropdown-container {
        position: relative;
        display: inline-block;
    }
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transition:
            opacity 0.3s ease,
            transform 0.3s ease;
        z-index: 1000;
        min-width: 150px;
        padding: 10px 0;
        pointer-events: none;
    }
    .dropdown-menu.show {
        opacity: 1;
        color: #ffffff;
        pointer-events: all;
    }
    .dropdown-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .dropdown-menu li {
        padding: 8px 15px;
        cursor: pointer;
    }
    .dropdown-menu li:hover {
        background-color: #de3434;
    }
    /* Full-width dropdown styles */
    .nav-item.group {
        position: static;
    }

    /* Keep parent nav underline visible when dropdown is visible or being hovered */
    .nav-item:has(.full-width-dropdown.visible) .parent-nav::after,
    .nav-item:has(.full-width-dropdown:hover) .parent-nav::after,
    .parent-nav.keep-underline::after {
        transform: scaleX(1) !important;
    }

    .full-width-dropdown {
        position: absolute;
        background-color: rgba(3, 4, 94, 0.95);
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        opacity: 0.7;
        visibility: hidden;
        transform: translate(-50%, -50%);
        transform: translateY(-20px);
        transition:
            opacity 0.4s ease 0.1s,
            transform 0.4s ease 0.1s,
            visibility 0s linear 0.5s;
        z-index: 5;
        pointer-events: none;
    }
    .full-width-dropdown.visible {
        opacity: 0.7;
        visibility: visible;
        transform: translateY(0);
        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0s;
        pointer-events: all;
    }
    /* Make the nav position relative so dropdown is positioned relative to it */
    .site-nav {
        position: relative;
        z-index: 100;
    }
    /* Blur overlay for entire page - expands from nav bottom downward */
    .dropdown-overlay {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(5px) saturate(90%);
        -webkit-backdrop-filter: blur(5px) saturate(180%);
        opacity: 0;
        visibility: hidden;
        height: 0;
        top: var(--nav-height);
        bottom: 0;
        z-index: 45;
        pointer-events: none;
        overflow: hidden;
        will-change: transform;
        /* Force GPU acceleration */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        /* Force hardware acceleration */
        -webkit-perspective: 1000;
        perspective: 1000;
        transition:
            opacity 0.5s ease 0.2s,
            height 0.6s ease 0.1s,
            visibility 0s linear 0.7s;
    }

    /* Fallback for browsers that don't support backdrop-filter */
    @supports not (backdrop-filter: blur(30px)) {
        .dropdown-overlay {
            background-color: rgba(255, 255, 255, 0.85);
        }
    }

    .dropdown-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        height: calc(100vh - var(--nav-height));
        transition:
            opacity 0.4s ease 0.1s,
            height 0.5s ease,
            visibility 0s;
    }
</style>
<header>
    <nav
        class="bg-white bg-opacity-50 border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-white-800 site-nav"
        style="-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px)"
    >
        <div
            class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl"
        >
            <a href="/" class="flex items-center">
                <img
                    src="{{ background_image ?? '/bg_image/sici-logo.png' }}"
                    alt="{{ site:name }} Logo"
                    class="h-15 mr-3 self-center whitespace-nowrap dark:text-white"
                />
            </a>

            <div class="flex items-center lg:order-2">
                <button
                    data-collapse-toggle="mobile-menu-2"
                    type="button"
                    class="inline-flex items-center p-2 ml-1 text-lg text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                    aria-controls="mobile-menu-2"
                    aria-expanded="false"
                >
                    <span class="sr-only">Open main menu</span>
                    <svg
                        class="w-6 h-6"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                            clip-rule="evenodd"
                        ></path>
                    </svg>
                    <svg
                        class="hidden w-6 h-6"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd"
                        ></path>
                    </svg>
                </button>
            </div>

            <div
                class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1 text-md font-semibold"
                id="mobile-menu-2"
            >
                <ul
                    class="flex flex-col mt-4 lg:flex-row lg:space-x-8 lg:mt-0 items-center justify-center space-between"
                >
                    {{ nav:navbar include_home="true" }}
                    <li class="nav-item relative group">
                        {{ if children }}
                        <!-- Parent with dropdown -->
                        <button
                            class="flex items-center py-2 pr-4 pl-3 rounded hover:bg-white lg:hover:bg-transparent lg:border-0 lg:p-0 dark:text-gray-200 parent-nav nav-underline nav-item-uppercase {{ is_current || is_parent ? 'nav-active' : '' }}"
                            style="color: #03045e"
                            aria-haspopup="true"
                            data-dropdown-id="dropdown-{{ title | slugify }}"
                        >
                            {{ title }}
                        </button>
                        <!-- Full-width Dropdown menu -->
                        <div
                            class="full-width-dropdown rounded-b-md"
                            aria-expanded="false"
                            data-dropdown-id="dropdown-{{ title | slugify }}"
                        >
                            <div
                                class="rounded-md shadow-lg my-5 flex justify-center text-md mx-auto"
                            >
                                <div class="grid grid-cols-2 gap-2 w-fit">
                                    {{ children }}
                                    <a
                                        href="{{ url }}"
                                        class="menu-item block px-4 py-1 text-gray-100 rounded whitespace-normal break-words w-100"
                                    >
                                        {{ title }}
                                    </a>
                                    {{ /children }}
                                </div>
                            </div>
                        </div>
                        {{ else }}
                        <!-- Regular menu item -->
                        <a
                            href="{{ url }}"
                            class="block py-2 pr-4 pl-3 rounded hover:bg-white lg:hover:bg-transparent lg:border-0 lg:p-0 dark:text-gray-200 nav-underline nav-item-uppercase {{ is_current || is_parent ? 'nav-active' : '' }}"
                            style="color: #03045e"
                        >
                            {{ title }}
                        </a>
                        {{ /if }}
                    </li>
                    {{ /nav:navbar }}
                </ul>
            </div>
        </div>
    </nav>

    <!-- Dropdown overlays - moved outside nav, inside header to avoid duplication -->
    {{ nav:navbar include_home="true" }} {{ if children }}
    <div
        class="dropdown-overlay"
        data-dropdown-id="dropdown-{{ title | slugify }}"
    ></div>
    {{ /if }} {{ /nav:navbar }}
</header>
<script>
    $(document).ready(function () {
        var $nav = $(".site-nav");
        var hideTimer = null;
        var currentDropdown = null;
        var currentOverlay = null;
        var currentButton = null;

        // Function to update overlay positions
        function updateOverlayPosition() {
            var navHeight = $nav.outerHeight();
            document.documentElement.style.setProperty(
                "--nav-height",
                navHeight + "px",
            );

            // Update all overlays
            $(".dropdown-overlay").each(function () {
                $(this).css("top", navHeight + "px");
            });
        }

        // Update on page load
        updateOverlayPosition();
        $(window).on("resize", updateOverlayPosition);

        // Function to close overlay immediately without transition
        function closeOverlay($overlay, immediate) {
            if ($overlay && $overlay.length) {
                if (immediate) {
                    // Remove transition temporarily for instant close
                    $overlay.css("transition", "none");
                    $overlay.removeClass("active");
                    // Force reflow
                    void $overlay[0].offsetHeight;
                    // Restore transition
                    $overlay.css("transition", "");
                } else {
                    $overlay.removeClass("active");
                }
            }
        }

        // Function to close dropdown immediately
        function closeDropdown($dropdown, immediate) {
            if ($dropdown && $dropdown.length) {
                if (immediate) {
                    // Remove transition temporarily for instant close
                    $dropdown.css("transition", "none");
                    $dropdown
                        .removeClass("visible")
                        .attr("aria-expanded", "false");
                    // Force reflow
                    void $dropdown[0].offsetHeight;
                    // Restore transition
                    $dropdown.css("transition", "");
                } else {
                    $dropdown
                        .removeClass("visible")
                        .attr("aria-expanded", "false");
                }
            }
        }

        // Hover on dropdown buttons
        $('[aria-haspopup="true"]').hover(
            function () {
                // Clear any pending hide timers
                clearTimeout(hideTimer);

                // Mouse enter button
                var $button = $(this);
                var dropdownId = $button.data("dropdown-id");
                var $dropdown = $(
                    '.full-width-dropdown[data-dropdown-id="' +
                        dropdownId +
                        '"]',
                );
                var $overlay = $(
                    '.dropdown-overlay[data-dropdown-id="' + dropdownId + '"]',
                );

                // Add keep-underline class to maintain the underline
                $button.addClass("keep-underline");

                // Close current dropdown and overlay if different
                if (
                    currentDropdown &&
                    currentDropdown.length &&
                    currentDropdown[0] !== $dropdown[0]
                ) {
                    closeDropdown(currentDropdown, true); // Close immediately without transition
                    closeOverlay(currentOverlay, true); // Close immediately without transition
                    // Remove keep-underline from previous button
                    if (currentButton) {
                        currentButton.removeClass("keep-underline");
                    }
                }

                // Always reset this dropdown's overlay animation
                if ($overlay.length) {
                    $overlay.removeClass("active");
                    void $overlay[0].offsetHeight;
                }

                // Open dropdown
                if ($dropdown.length) {
                    $dropdown.addClass("visible").attr("aria-expanded", "true");
                    currentDropdown = $dropdown;
                    currentOverlay = $overlay;
                    currentButton = $button;

                    // Trigger overlay animation
                    setTimeout(function () {
                        if ($overlay.length) {
                            $overlay.addClass("active");
                        }
                    }, 10);
                }
            },
            function () {
                // Mouse leave button
                var $button = $(this);
                var dropdownId = $button.data("dropdown-id");
                var $dropdown = $(
                    '.full-width-dropdown[data-dropdown-id="' +
                        dropdownId +
                        '"]',
                );
                var $overlay = $(
                    '.dropdown-overlay[data-dropdown-id="' + dropdownId + '"]',
                );

                // Set timer to close if not hovering dropdown
                hideTimer = setTimeout(function () {
                    if ($dropdown.length && !$dropdown.is(":hover")) {
                        closeDropdown($dropdown, false); // Close with transition when leaving
                        closeOverlay($overlay, false); // Close with transition when leaving
                        $button.removeClass("keep-underline");
                        currentDropdown = null;
                        currentOverlay = null;
                        currentButton = null;
                    }
                }, 150);
            },
        );

        // Hover on dropdown menus
        $(".full-width-dropdown").hover(
            function () {
                // Mouse enter dropdown - clear closing timer
                clearTimeout(hideTimer);
            },
            function () {
                // Mouse leave dropdown
                var $dropdown = $(this);
                var dropdownId = $dropdown.data("dropdown-id");
                var $overlay = $(
                    '.dropdown-overlay[data-dropdown-id="' + dropdownId + '"]',
                );
                var $button = $(
                    '[aria-haspopup="true"][data-dropdown-id="' +
                        dropdownId +
                        '"]',
                );

                // Close immediately
                closeDropdown($dropdown, false); // Close with transition when leaving
                closeOverlay($overlay, false); // Close with transition when leaving
                if ($button.length) {
                    $button.removeClass("keep-underline");
                }
                currentDropdown = null;
                currentOverlay = null;
                currentButton = null;
            },
        );

        // Click overlay to close everything
        $(".dropdown-overlay").on("click", function () {
            var $overlay = $(this);
            var dropdownId = $overlay.data("dropdown-id");
            var $dropdown = $(
                '.full-width-dropdown[data-dropdown-id="' + dropdownId + '"]',
            );
            var $button = $(
                '[aria-haspopup="true"][data-dropdown-id="' + dropdownId + '"]',
            );

            closeDropdown($dropdown, false); // Close with transition when clicking
            closeOverlay($overlay, false); // Close with transition when clicking
            if ($button.length) {
                $button.removeClass("keep-underline");
            }
            currentDropdown = null;
            currentOverlay = null;
            currentButton = null;
        });

        // Close when clicking elsewhere
        $(document).on("click", function (e) {
            if (
                !$(e.target).closest(".nav-item").length &&
                !$(e.target).closest(".full-width-dropdown").length
            ) {
                closeDropdown(currentDropdown, false); // Close with transition when clicking outside
                closeOverlay(currentOverlay, false); // Close with transition when clicking outside
                if (currentButton && currentButton.length) {
                    currentButton.removeClass("keep-underline");
                }
                currentDropdown = null;
                currentOverlay = null;
                currentButton = null;
            }
        });

        // Additional: Close when pressing ESC key
        $(document).on("keydown", function (e) {
            if (e.key === "Escape") {
                closeDropdown(currentDropdown, false); // Close with transition when pressing ESC
                closeOverlay(currentOverlay, false); // Close with transition when pressing ESC
                if (currentButton && currentButton.length) {
                    currentButton.removeClass("keep-underline");
                }
                currentDropdown = null;
                currentOverlay = null;
                currentButton = null;
            }
        });
    });
</script>