/* Menu fixes CSS */

/* Fix 1: Move the underline animation below the text */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px !important; /* Position the line below the text */
    left: 0;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease;
    z-index: 1 !important; /* Ensure the line appears below text */
}

/* Don't display underline on dropdown toggle links - unless it's active */
.nav-link.dropdown-toggle::after {
    content: none !important; /* Remove default pseudo-element */
}

/* Add back the underline for active dropdown toggles */
.nav-link.dropdown-toggle.active::after,
.dropdown.has-active-item > .nav-link.dropdown-toggle::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important; /* Position below the text */
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    z-index: 1 !important;
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5) !important; /* Match the glow effect */
    transition: none !important; /* No transition for active state */
    transform: translateY(100%) !important; /* Move down to ensure it's below text */
}

/* Fix 2: Add arrow to dropdown items using Material Icons */
.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    padding-right: 5px !important;
    height: 100% !important; /* Make sure all nav links have the same height */
    box-sizing: border-box !important;
    vertical-align: top !important;
    position: relative !important; /* Ensure proper positioning for active state */
    z-index: 2 !important; /* Keep text above underline */
}

/* Add Material Icon after dropdown */
.dropdown-toggle::before {
    font-family: 'Material Icons' !important;
    content: 'expand_more' !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    position: relative !important;
    font-size: 18px !important;
    margin-left: 6px;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: baseline !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* More modern bounce effect */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    z-index: 2 !important; /* Ensure icon is above the underline */
}

/* Add animation for dropdown arrow rotation */
.dropdown-toggle:hover::before,
.dropdown.open .dropdown-toggle::before {
    transform: rotate(180deg) !important;
}

/* Disable arrow rotation on mobile */
@media (max-width: 768px) {
    .dropdown-toggle:hover::before,
    .dropdown.open .dropdown-toggle::before {
        transform: none !important;
    }
}

/* Fix 3: Prevent menu from closing when clicking dropdowns on mobile */
@media (max-width: 768px) {
    /* Mobile menu styling improvements */
    .nav-menu {
        background-color: var(--primary-color) !important;
        width: 100% !important;
        height: 100vh !important;
        padding: 0 !important;
    }
    
    .nav-menu.active {
        height: 100vh !important;
        width: 100% !important;
    }
    
    .nav-menu ul {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .dropdown-toggle {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .dropdown-toggle::before {
        margin-left: 8px !important;
        font-size: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        line-height: 1 !important;
        transform: translateY(-4px) !important;
    }
    
    /* Make dropdown menus fill the width on mobile */
    .dropdown-menu {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: rgba(1, 136, 194, 0.8) !important; /* slightly darker blue with transparency */
        display: none !important; /* Ensure it's completely hidden when not active */
        height: 0 !important; /* No height when closed */
        overflow: hidden !important; /* Hide any overflow */
    }
    
    /* Only show the dropdown menu when parent has .open class */
    .dropdown.open .dropdown-menu {
        display: block !important;
        height: auto !important; /* Auto height when open */
        overflow: visible !important;
    }
    
    /* Make dropdown items have proper spacing */
    .dropdown-menu a {
        padding: 1rem !important;
        text-align: center !important;
        margin: 0 !important;
        position: relative !important; /* For hover line effect */
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle separator */
    }
    
    .dropdown-menu li:first-child a {
        border-top: none !important; /* Remove top border for first item */
    }
    
    /* Add proper padding for all links in mobile menu */
    .nav-link {
        padding: 1rem 0 !important; /* Remove horizontal padding */
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* Make nav items take full width */
    .nav-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle separator */
    }
    
    .nav-item:last-child {
        border-bottom: none !important; /* Remove border for last item */
    }
    
    /* Fix the highlight button on mobile */
    .nav-menu .nav-link.highlight-btn,
    .nav-link.highlight-btn {
        margin: 0.5rem auto !important;
        width: 80% !important;
        padding: 12px 24px !important;
        border-radius: 50px !important;
        background: white !important;
        background-color: white !important;
        color: var(--primary-color) !important;
        font-weight: 600 !important;
        box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .nav-menu .nav-link.highlight-btn:hover,
    .nav-link.highlight-btn:hover {
        background: rgba(255, 255, 255, 0.9) !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: var(--secondary-color) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 40px rgba(255, 255, 255, 0.4) !important;
    }

    /* Make the Webshop (christmas) button match the highlight button size on mobile */
    .nav-menu .christmas-btn,
    .christmas-btn {
        margin: 0.5rem auto !important;
        width: 80% !important;
        padding: 12px 24px !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.2 !important; /* match visual height with highlight button */
    }
    
    .nav-menu.active {
        padding-bottom: 1rem !important;
        overflow-y: auto;
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    /* Add slight separation between dropdown sections */
    .dropdown {
        margin-bottom: 2px !important;
    }
    
    /* Fix X close button position */
    .hamburger.active {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1002;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        padding: 12px;
        backdrop-filter: blur(5px);
    }
    
    /* Additional mobile menu fixes for proper display */
    .nav-menu.active {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    /* Ensure no extra spacing in dropdown items */
    .dropdown-menu li {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Reset any margins that might be causing extra space */
    .nav-item, .dropdown {
        margin-bottom: 0 !important;
    }
    
    /* Fix dropdown menu to remove any white space */
    .dropdown-menu {
        position: static !important; /* Ensure it's in the normal flow */
        box-shadow: none !important; /* Remove any shadows that might add space */
    }
    
    /* Fix arrows for mobile view */
    .nav-menu .dropdown-toggle::before {
        transition: transform 0.3s ease !important;
    }
}

/* Final mobile layout adjustments */
@media (max-width: 768px) {
    /* Override any conflicting styles */
    .nav-menu ul, .nav-menu ul li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Fix hamburger menu button */
    .hamburger.active {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 1002 !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        padding: 12px !important;
        backdrop-filter: blur(5px) !important;
    }
    
    /* Make sure dropdown items are not indented */
    .dropdown-menu {
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Make dropdown toggles stand out */
    .dropdown-toggle {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    
    /* Eliminate any excessive padding */
    .nav-menu, .nav-menu ul, .nav-item, .dropdown, .dropdown-menu {
        padding: 0 !important;
    }
}

/* Ensure all nav items are aligned properly */
.nav-item {
    display: flex !important;
    align-items: center !important;
}

/* Fix alignment of all nav links */
.nav-link {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Set consistent padding for all menu items */
.nav-link {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Enhance dropdown animation - desktop only */
@media (min-width: 769px) {
    .dropdown-menu {
        transform-origin: top center;
        transform: scaleY(0);
        opacity: 0;
        transition: 
            transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            opacity 0.2s ease !important;
        display: block !important; /* Always block for desktop animations */
        height: auto !important; /* Auto height for desktop */
        max-height: none !important; /* No max-height limit on desktop */
    }
    
    .dropdown:hover .dropdown-menu,
    .dropdown.open .dropdown-menu {
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto !important;
    }
}

/* Mobile dropdown animation */
@media (max-width: 768px) {
    .dropdown-menu {
        display: block !important; /* Changed from none to block */
        max-height: 0;
        transition: max-height 0.3s ease-out !important;
        overflow: hidden !important;
        opacity: 0;
        pointer-events: none; /* Prevent interaction when hidden */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .dropdown.open .dropdown-menu {
        max-height: 1000px; /* Large enough to fit content */
        transition: max-height 0.5s ease-in !important;
        opacity: 1;
        pointer-events: auto; /* Enable interaction when visible */
    }
}

/* Add hover line animation to dropdown menu items */
.dropdown-menu a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 5px !important;
    left: 10% !important;
    width: 0 !important;
    height: 2px !important;
    background-color: white !important;
    transition: width 0.3s ease !important;
    z-index: 1 !important;
}

.dropdown-menu a:hover::after {
    width: 80% !important; /* Not 100% to keep it within padding */
}

/* Desktop specific dropdown item hover effect */
@media (min-width: 769px) {
    .dropdown-menu a {
        position: relative !important;
    }
    
    .dropdown-menu a::after {
        bottom: 5px !important;
        left: 10% !important;
    }
}

/* Enhanced desktop view styling for better alignment */
@media (min-width: 769px) {
    /* Ensure all menu items are aligned properly in desktop view */
    .nav-menu > ul {
        height: 100% !important;
        align-items: center !important;
    }

    .nav-item {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .dropdown {
        display: flex !important;
        align-items: center !important;
    }
    
    .dropdown-toggle {
        padding-bottom: 0.5rem !important;
        padding-top: 0.5rem !important;
    }
    
    .dropdown-toggle::before {
        position: relative !important;
        top: -1px !important;
        display: inline-flex !important;
        align-items: center !important;
        transform: none !important;
    }
    
    /* Fix highlight button alignment */
    .nav-menu .nav-link.highlight-btn,
    .nav-link.highlight-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 12px 24px !important;
        border-radius: 50px !important;
        background: white !important;
        background-color: white !important;
        color: var(--primary-color) !important;
        font-weight: 600 !important;
        box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .nav-menu .nav-link.highlight-btn:hover,
    .nav-link.highlight-btn:hover {
        background: rgba(255, 255, 255, 0.9) !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: var(--secondary-color) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 40px rgba(255, 255, 255, 0.4) !important;
    }
}

/* Fix for mobile dropdown menus and alignment issues */
@media (max-width: 768px) {
    /* Fix menu structure */
    .nav-menu.active {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .nav-menu ul {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nav-item {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nav-link {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding: 1rem 0 !important;
        text-align: center !important;
    }
    
    /* Fix dropdown styling */
    .dropdown {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .dropdown-toggle {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Make dropdown menus proper */
    .dropdown-menu {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: rgba(1, 136, 194, 0.8) !important;
        position: static !important;
        /* display is controlled by the animation section */
    }
    
    /* Fix dropdown items */
    .dropdown-menu li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .dropdown-menu a {
        width: 100% !important;
        display: block !important;
        padding: 1rem 0 !important;
        text-align: center !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .dropdown-menu li:first-child a {
        border-top: none !important;
    }
}

/* Additional fixes for nested menu items */
@media (max-width: 768px) {
    /* Keep animations for modern feel */
    .dropdown-menu {
        transform: none !important;
        /* max-height and opacity are controlled by dropdown state */
    }
    
    /* Fix nested list padding */
    .dropdown-menu ul {
        padding-left: 0 !important;
    }
    
    /* Clean up dropdown items */
    .dropdown-menu a {
        position: relative !important;
        font-weight: normal !important; /* Make dropdown items slightly different */
        background-color: rgba(1, 136, 194, 0.6) !important;
        padding: 0.8rem 0 !important; /* Slightly less padding for dropdown items */
    }
    
    /* Fix dropdown hover effect */
    .dropdown-menu a::after {
        bottom: 5px !important;
        left: 10% !important;
    }
    
    /* Fix dropdown menu appearance */
    .dropdown-menu {
        height: auto !important;
        overflow: hidden !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Make sure dropdown toggle has proper spacing */
    .dropdown-toggle {
        padding: 1rem 0 !important;
    }
}

/* Modern Mobile Menu Enhancements */
@media (max-width: 768px) {
    /* Improved mobile dropdown appearance */
    .dropdown-menu {
        background-color: rgba(1, 136, 194, 0.9) !important; /* Slightly darker for better contrast */
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1) !important; /* Inner shadow for depth */
        border-radius: 0 0 4px 4px !important; /* Rounded bottom corners */
        overflow: hidden !important;
        height: auto !important; /* Allow height to be determined by max-height */
        will-change: max-height, opacity; /* Performance optimization for animations */
    }
    
    /* Enhance dropdown toggle visual feedback */
    .dropdown-toggle:active {
        background-color: rgba(255, 255, 255, 0.1) !important; /* Feedback when pressed */
    }
    
    /* Ensure all dropdown items are properly hidden when collapsed */
    .dropdown-menu a {
        transform: translateY(-5px); /* Slight shift for animation */
        transition: transform 0.3s ease, opacity 0.2s ease !important;
        opacity: 0;
    }
    
    .dropdown.open .dropdown-menu a {
        transform: translateY(0);
        opacity: 1;
        transition-delay: 0.1s; /* Slight delay after dropdown opens */
    }
    
    /* Staggered animation for dropdown items */
    .dropdown.open .dropdown-menu li:nth-child(1) a { transition-delay: 0.05s; }
    .dropdown.open .dropdown-menu li:nth-child(2) a { transition-delay: 0.1s; }
    .dropdown.open .dropdown-menu li:nth-child(3) a { transition-delay: 0.15s; }
    .dropdown.open .dropdown-menu li:nth-child(4) a { transition-delay: 0.2s; }
    .dropdown.open .dropdown-menu li:nth-child(5) a { transition-delay: 0.25s; }
    
    /* Fix for any z-index issues */
    .dropdown {
        position: relative !important;
        z-index: 10 !important;
    }
}

/* Mobile Menu Animation Refinements */
@media (max-width: 768px) {
    /* Modern hamburger animation */
    .hamburger span {
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    opacity 0.2s ease;
    }
    
    /* Ensure menu visibility is controlled properly */
    .nav-menu {
        visibility: hidden;
        opacity: 0;
        transition: 
            visibility 0s linear 0.3s,
            opacity 0.3s ease,
            transform 0.3s ease;
        transform: translateX(100%); /* Start off-screen */
    }
    
    .nav-menu.active {
        visibility: visible;
        opacity: 1;
        height: 100vh !important;
        min-height: 100vh !important;
        transition: 
            visibility 0s linear 0s,
            opacity 0.3s ease,
            transform 0.3s ease;
        transform: translateX(0); /* Slide in */
    }
    
    /* Fix for any residual dropdown item visibility */
    .dropdown:not(.open) .dropdown-menu {
        visibility: hidden !important;
    }
    
    .dropdown.open .dropdown-menu {
        visibility: visible !important;
    }
}

/* Critical fix to prevent dropdown items from showing when closed */
@media (max-width: 768px) {
    /* Force dropdown menu to be hidden when parent is not open */
    .dropdown:not(.open) .dropdown-menu {
        display: block !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
}

/* Base style for active menu items - visibility controlled by media queries */
.nav-link.active {
    position: relative !important; /* Ensure proper positioning */
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px !important; /* Position below the text */
    left: 0;
    width: 100% !important; /* Full width for active page */
    height: 2px; /* Consistent height */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque */
    z-index: 1 !important; /* Keep below text */
    transition: none !important; /* No transition for active state */
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); /* Subtle glow effect */
    pointer-events: none !important; /* Make sure it doesn't interfere with clicks */
    display: none !important; /* Hide by default, show in desktop media query */
}

/* Only animate the underline on hover for non-active links */
.nav-link:not(.active):hover::after {
    width: 100%;
}

/* Mobile-specific styling for active menu items */
@media (max-width: 768px) {
    .nav-link.active {
        background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle background highlight */
        font-weight: bold !important; /* Make text bolder */
    }
    
    /* Hide underline completely on mobile */
    .nav-link.active::after {
        display: none !important;
    }
    
    /* Special case for dropdown items that are active */
    .dropdown-menu a.active {
        background-color: rgba(255, 255, 255, 0.15) !important;
        font-weight: bold !important;
        /* No underline, just background highlight */
    }
    
    /* Completely hide the underline for dropdown menu items */
    .dropdown-menu a.active::after {
        display: none !important;
    }
}

/* Desktop styling for active dropdown items */
@media (min-width: 769px) {
    .dropdown-menu a.active {
        background-color: rgba(255, 255, 255, 0.1) !important;
        font-weight: bold !important;
        position: relative !important; /* Ensure proper positioning */
    }
    
    /* Remove underline from dropdown subitems completely */
    .dropdown-menu a.active::after {
        display: none !important;
    }
    
    /* Subtle highlight for dropdown toggle when a child item is active */
    .dropdown.has-active-item > .dropdown-toggle {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
        position: relative !important; /* Ensure proper positioning */
    }
    
    /* Fix position of underline on dropdown toggles when active */
    .dropdown-toggle.active::after,
    .dropdown.has-active-item > .nav-link.dropdown-toggle::after {
        content: '' !important;
        position: absolute !important;
        bottom: -8px !important; /* Move further below text */
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        z-index: 1 !important;
        transform: none !important; /* Remove any transforms that might affect position */
        display: block !important;
    }
}

/* Enhanced mobile dropdown active styles */
@media (max-width: 768px) {
    /* Style for active dropdown toggle or dropdown with active item */
    .dropdown-toggle.active,
    .dropdown.has-active-item > .dropdown-toggle {
        background-color: rgba(255, 255, 255, 0.1) !important;
        font-weight: bold !important;
    }
    
    /* Hide the underline completely for dropdown toggles on mobile */
    .dropdown-toggle.active::after,
    .dropdown.has-active-item > .nav-link.dropdown-toggle::after {
        display: none !important;
    }
}

/* Fix for dropdown toggle underline positioning on desktop */
@media (min-width: 769px) {
    /* Position the active underline properly for dropdown toggles */
    .nav-link.dropdown-toggle.active::after,
    .dropdown.has-active-item > .nav-link.dropdown-toggle::after {
        bottom: -8px !important; /* Position further down to ensure it's below text */
        transform: none !important; /* Reset transform */
        height: 2px !important;
        display: block !important; /* Make sure it's visible */
        z-index: 1 !important; /* Keep it below text */
    }
    
    /* Ensure proper z-index for dropdown toggles */
    .dropdown-toggle {
        position: relative !important;
        z-index: 2 !important; /* Text above the underline */
    }
    
    /* Make sure dropdown toggle text is always above the line */
    .dropdown-toggle span,
    .dropdown-toggle > * {
        position: relative !important;
        z-index: 3 !important;
    }
    
    /* Fix z-index for dropdown menu */
    .dropdown-menu {
        z-index: 10 !important; /* Ensure dropdown menu appears above everything */
    }
}

/* Desktop-only active indicators */
@media (min-width: 769px) {
    /* Show underline for active items only on desktop */
    .nav-link.active::after {
        content: '' !important;
        position: absolute !important;
        bottom: -5px !important;
        left: 0 !important;
        width: 100% !important;
        height: 3px !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        z-index: 1 !important;
        transition: none !important;
        box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5) !important;
        pointer-events: none !important;
        display: block !important; /* Explicitly show on desktop */
    }
}