/* ===== NAVBAR STYLES ===== */
/* Extracted from custom.css for better maintainability */

/* ===== STICKY NAVBAR STYLES ===== */
/* Make the navbar sticky/floating */
.sticky-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease-in-out !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Add top margin to body to prevent content from being hidden behind sticky navbar */
body {
    margin-top: 3.25rem !important; /* Standard Bulma navbar height */
}

/* Enhanced mobile burger menu for sticky navbar */
.sticky-navbar .navbar-burger {
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: block !important;
    height: 3.25rem !important;
    position: relative !important;
    width: 3.25rem !important;
    margin-left: auto !important;
}

/* Improve dropdown visibility on sticky navbar */
.sticky-navbar .navbar-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 0 6px 6px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    min-width: 200px !important;
    white-space: nowrap !important;
    z-index: 1001 !important;
}

/* Ensure nested dropdowns work well with sticky navbar */
.sticky-navbar .navbar-dropdown .nested-dropdown {
    position: relative !important;
}

/* Ensure proper navbar container setup */
.sticky-navbar .navbar-brand,
.sticky-navbar .navbar-menu,
.sticky-navbar .navbar-start {
    /* Allow dropdowns to extend beyond container */
    overflow: visible !important;
}

/* Fallback: prevent document-level horizontal scroll only if needed */
body {
    overflow-x: hidden !important;
}

/* But allow the navbar to have visible overflow for dropdowns */
.sticky-navbar {
    overflow-x: visible !important;
}

/* Ensure dropdowns stay within reasonable bounds as fallback */
.sticky-navbar .navbar-dropdown {
    max-width: 90vw !important;
}

/* Comprehensive horizontal scroll prevention */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
}

/* But ensure the sticky navbar can still show dropdowns */
.sticky-navbar,
.sticky-navbar .navbar-menu,
.sticky-navbar .navbar-start {
    overflow-x: visible !important;
}

/* Ensure main dropdowns don't extend beyond viewport */
.sticky-navbar .navbar-dropdown {
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Improve search form styling in sticky navbar */
.sticky-navbar .navbar-end .field {
    margin-bottom: 0 !important;
}

.sticky-navbar .navbar-end .navbar-item {
    padding: 0.5rem 1rem !important;
}

/* Enhanced search input styling */
.sticky-navbar #searchTerm {
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
    min-width: 200px !important;
}

.sticky-navbar #searchButton {
    border-radius: 0 4px 4px 0 !important;
    border-left: none !important;
    transition: all 0.2s ease !important;
}

.sticky-navbar #searchButton:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced search input focus states */
.sticky-navbar .is-focused #searchTerm {
    border-color: #00d1b2 !important;
    box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25) !important;
}

.sticky-navbar .is-focused #searchButton {
    border-color: #00d1b2 !important;
}

/* Add visual feedback for keyboard navigation */
.navbar-item:focus,
.navbar-link:focus,
.navbar-burger:focus {
    outline: 2px solid #00d1b2 !important;
    outline-offset: 2px !important;
}

/* Improve dropdown accessibility */
.navbar-dropdown .navbar-item:focus {
    background-color: #f5f5f5 !important;
    outline: none !important;
}

/* Loading state for search button */
.sticky-navbar #searchButton.is-loading {
    color: transparent !important;
}

.sticky-navbar #searchButton.is-loading::after {
    animation: spinAround 500ms infinite linear !important;
    border: 2px solid #dbdbdb !important;
    border-radius: 50% !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    content: "" !important;
    display: block !important;
    height: 1em !important;
    position: relative !important;
    width: 1em !important;
    margin: 0 auto !important;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 1023px) {
    /* Burger menu visibility */
    .navbar-burger {
        display: block !important;
    }
    
    /* Default: hide navbar menu */
    .sticky-navbar .navbar-menu,
    .navbar-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background-color: white !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        border-radius: 0 0 6px 6px !important;
        z-index: 9999 !important;
        width: 100% !important;
    }    
    /* Show when active - Proper mobile menu styling */
    nav.navbar.sticky-navbar #navBarMenu.navbar-menu.is-active,
    nav.navbar.sticky-navbar .navbar-menu.is-active,
    .sticky-navbar #navBarMenu.is-active,
    .sticky-navbar .navbar-menu.is-active,
    #navBarMenu.navbar-menu.is-active,
    .navbar-menu.is-active {
        display: block !important;
        background-color: white !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 0 6px 6px !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* Smooth scrolling for better UX */
        scroll-behavior: smooth !important;
        /* Better scrollbar styling */
        scrollbar-width: thin !important;
        scrollbar-color: #00d1b2 #f5f5f5 !important;
    }
    
    /* Style menu items properly */
    #navBarMenu.is-active .navbar-item {
        color: #4a4a4a !important;
        background-color: transparent !important;
        padding: 0.5rem 1rem !important;
        display: block !important;
        line-height: 1.5 !important;
    }
    
    /* Ensure navbar-link elements (dropdown parents) are also left-aligned on mobile */
    #navBarMenu.is-active .navbar-item .navbar-link {
        color: #4a4a4a !important;
        background-color: transparent !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        display: block !important;
        line-height: 1.5 !important;
        text-align: left !important;
        justify-content: flex-start !important;
        border: none !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #navBarMenu.is-active .navbar-item:hover {
        background-color: #f5f5f5 !important;
        color: #363636 !important;
    }
    
    #navBarMenu.is-active .navbar-item:hover .navbar-link {
        background-color: transparent !important;
        color: #363636 !important;
    }
      /* Mobile dropdown behavior */
    .navbar-dropdown {
        display: none;
    }
    
    .navbar-item.has-dropdown.is-active .navbar-dropdown {
        display: block !important;
    }
    
    /* Override nested-menu.css mobile rules - ensure dropdowns are hidden by default on mobile too */
    .navbar.sticky-navbar .navbar-dropdown .nested-dropdown-content,
    .sticky-navbar .navbar-dropdown .nested-dropdown-content,
    .navbar-dropdown .nested-dropdown-content {
        display: none !important;
        position: static !important;
        background-color: #f8f9fa !important;
        margin-left: 1rem !important;
        padding: 0.5rem 0 !important;
        border-left: 3px solid #00d1b2 !important;
        border-radius: 0 6px 6px 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        /* Better mobile nested dropdown styling */
        box-shadow: inset 2px 0 4px rgba(0, 209, 178, 0.1) !important;
        transition: all 0.2s ease !important;
    }
    
    /* Show nested dropdown when parent is active on mobile */
    .navbar.sticky-navbar .navbar-dropdown .nested-dropdown.is-active .nested-dropdown-content,
    .sticky-navbar .navbar-dropdown .nested-dropdown.is-active .nested-dropdown-content,
    .navbar-dropdown .nested-dropdown.is-active .nested-dropdown-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: #f8f9fa !important;
        /* Smooth slide-down animation */
        transform: translateY(0) !important;
    }
    
    Enhanced styling for nested dropdown items on mobile
    .navbar-dropdown .nested-dropdown-content .navbar-item {
        padding: 0.75rem 1.5rem !important;
        border-bottom: 1px solid #e8e8e8 !important;
        transition: all 0.15s ease !important;
        position: relative !important;
    }
    
    .navbar-dropdown .nested-dropdown-content .navbar-item:last-child {
        border-bottom: none !important;
    }
    
    .navbar-dropdown .nested-dropdown-content .navbar-item:hover {
        background-color: #e8f5e8 !important;
        padding-left: 2rem !important;
        color: #00d1b2 !important;
    }
    
    Add visual indicator for expanded nested dropdown
    .navbar-dropdown .nested-dropdown.is-active > .navbar-link-nested::after {
      /*  content: "\f107" !important; *//* Font Awesome down arrow */
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        position: absolute !important;
        right: 1rem !important;
        transform: rotate(0deg) !important;
        transition: transform 0.2s ease !important;
    }
    
    .navbar-dropdown .nested-dropdown:not(.is-active) > .navbar-link-nested::after {
      
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        position: absolute !important;
        right: 1rem !important;
        transform: rotate(0deg) !important;
        transition: transform 0.2s ease !important;
    }
    
    /* Ensure consistent alignment for all mobile navbar items */
    #navBarMenu.is-active .navbar-item,
    #navBarMenu.is-active .navbar-item > a,
    #navBarMenu.is-active .navbar-item > .navbar-link,
    #navBarMenu.is-active .navbar-item.has-dropdown,
    #navBarMenu.is-active .navbar-item.has-dropdown > .navbar-link {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0.5rem 1rem !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        background: transparent !important;
        color: #4a4a4a !important;
        font-weight: normal !important;
        line-height: 1.5 !important;
    }
    
    /* Ensure hover states are consistent */
    #navBarMenu.is-active .navbar-item:hover,
    #navBarMenu.is-active .navbar-item > a:hover,
    #navBarMenu.is-active .navbar-item > .navbar-link:hover,
    #navBarMenu.is-active .navbar-item.has-dropdown:hover,
    #navBarMenu.is-active .navbar-item.has-dropdown > .navbar-link:hover {
        background-color: #f5f5f5 !important;
        color: #363636 !important;
    }
    
    /* Override any Bulma center or right alignment on mobile */
    #navBarMenu.is-active .navbar-item.has-dropdown,
    #navBarMenu.is-active .navbar-item.has-dropdown .navbar-link {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
    }
    
    /* Force remove any default Bulma dropdown arrow positioning that might cause indentation */
    #navBarMenu.is-active .navbar-item.has-dropdown {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure dropdown parent container has no extra spacing */
    #navBarMenu.is-active .navbar-item.has-dropdown > .navbar-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Remove any potential right-side elements like arrows from mobile view */
    #navBarMenu.is-active .navbar-link::after {
        display: none !important;
    }
    
    /* Remove Bulma's default dropdown arrow entirely on mobile */
    #navBarMenu.is-active .navbar-item.has-dropdown .navbar-link::after,
    #navBarMenu.is-active .navbar-link::before,
    #navBarMenu.is-active .navbar-link::after {
        content: none !important;
        display: none !important;
        border: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Ensure dropdown parent items have same visual appearance as regular items */
    #navBarMenu.is-active .navbar-item.has-dropdown > .navbar-link {
        padding: 0.5rem 1rem !important;
        font-weight: normal !important;
    }
    
    /* Style nested dropdown links consistently on mobile */
    #navBarMenu.is-active .navbar-link-nested {
        color: #4a4a4a !important;
        background-color: transparent !important;
        padding: 0.5rem 1rem !important;
        display: block !important;
        line-height: 1.5 !important;
        text-align: left !important;
        justify-content: flex-start !important;
        border: none !important;
        border-left: none !important;
        text-decoration: none !important;
        font-weight: normal !important;
    }
    
    #navBarMenu.is-active .navbar-link-nested:hover {
        background-color: #f5f5f5 !important;
        color: #363636 !important;
    }
    
    /* Override nested-menu.css mobile styles for better alignment */
    #navBarMenu.is-active .nested-dropdown .navbar-link-nested {
        background-color: transparent !important;
        border-left: none !important;
        padding: 0.5rem 1rem !important;
    }
    
    #navBarMenu.is-active .nested-dropdown.is-active .navbar-link-nested {
        background-color: transparent !important;
        border-left: none !important;
    }
    
    /* Show only when parent is active on mobile */
    .navbar.sticky-navbar .navbar-dropdown .nested-dropdown.is-active .nested-dropdown-content,
    .sticky-navbar .navbar-dropdown .nested-dropdown.is-active .nested-dropdown-content,
    .navbar-dropdown .nested-dropdown.is-active .nested-dropdown-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Adjust body margin for mobile */
    body {
        margin-top: 3.25rem !important;
    }
    
    /* Mobile search form adjustments */
    .sticky-navbar .navbar-end .navbar-item {
        padding: 1rem !important;
        border-top: 1px solid #dbdbdb !important;
    }
    
    .sticky-navbar #searchTerm {
        min-width: 100% !important;
        margin-bottom: 0.5rem !important;
        border-radius: 4px !important;
        border: 1px solid #dbdbdb !important;
    }
    
    .sticky-navbar #searchButton {
        width: 100% !important;
        border-radius: 4px !important;
        border: 1px solid #dbdbdb !important;
    }
    
    .sticky-navbar .field.has-addons {
        display: block !important;
    }
    
    .sticky-navbar .field.has-addons .control {
        width: 100% !important;
    }
}

/* ===== NAVBAR RESPONSIVE FIXES ===== */

/* Show navbar menu on desktop by default */
@media screen and (min-width: 1024px) {
    .navbar-menu {
        display: flex !important;
    }
    
    /* Ensure navbar-burger is hidden on desktop - enhanced specificity */
    .sticky-navbar .navbar-burger,
    .navbar .navbar-burger,
    .navbar-burger {
        display: none !important;
    }
    
    /* Make sure dropdowns work properly on desktop */
    .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
        display: block !important;
        opacity: 1 !important;        visibility: visible !important;
    }
      /* Nested dropdown positioning for desktop */
    .nested-dropdown {
        position: relative;
    }
}

/* Add subtle animation when navbar appears */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sticky-navbar {
    animation: slideDown 0.3s ease-out !important;
}

/* ===== FINAL WORKING DROPDOWN SOLUTION ===== */

/* Reset any previous styles that might interfere - using maximum specificity */
.navbar.sticky-navbar .navbar-dropdown .nested-dropdown-content,
.sticky-navbar .navbar-dropdown .nested-dropdown-content,
.navbar-dropdown .nested-dropdown-content {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    min-width: 200px !important;
    z-index: 1001 !important;
    background: white !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem 0 !important;
    transform: translateX(0) !important;
    transition: none !important;
    pointer-events: auto !important;
}

/* Show nested dropdown ONLY on hover - maximum specificity */
.navbar.sticky-navbar .navbar-dropdown .nested-dropdown:hover .nested-dropdown-content,
.sticky-navbar .navbar-dropdown .nested-dropdown:hover .nested-dropdown-content,
.navbar-dropdown .nested-dropdown:hover .nested-dropdown-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: white !important;
}

/* Ensure nested dropdown parent has relative positioning */
.navbar-dropdown .nested-dropdown {
    position: relative !important;
}

/* Ensure all parent containers allow overflow */
.sticky-navbar,
.sticky-navbar .navbar-menu,
.sticky-navbar .navbar-start,
.sticky-navbar .navbar-dropdown {
    overflow: visible !important;
}

/* ===== RESPONSIVE NAVBAR BEHAVIOR ===== */

/* Force show navbar menu on desktop */
@media screen and (min-width: 1024px) {
    .navbar-menu {
        display: flex !important;
    }
    
    /* Hide navbar-burger on desktop - maximum specificity */
    .sticky-navbar .navbar-burger,
    .navbar .navbar-burger, 
    .navbar-burger,
    #navBarButton {
        display: none !important;
    }
    
    /* Ensure dropdowns work on desktop - override nested-menu.css */
    .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
        display: block !important;
    }
    
    /* Maximum specificity for desktop nested dropdown hover */
    .navbar.sticky-navbar .navbar-dropdown .nested-dropdown:hover .nested-dropdown-content,
    .sticky-navbar .navbar-dropdown .nested-dropdown:hover .nested-dropdown-content,
    .navbar-dropdown .nested-dropdown:hover .nested-dropdown-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure non-hovered dropdowns stay hidden on desktop */
    .navbar.sticky-navbar .navbar-dropdown .nested-dropdown:not(:hover) .nested-dropdown-content,
    .sticky-navbar .navbar-dropdown .nested-dropdown:not(:hover) .nested-dropdown-content,
    .navbar-dropdown .nested-dropdown:not(:hover) .nested-dropdown-content {
        display: none !important;
        opacity: 0 !important;        visibility: hidden !important;
    }
}

/* ===== NAVBAR SEARCH FORM STYLES ===== */

/* Search form elements - ensure consistency */
#searchTerm {
    border-radius: 12px 0 0 12px !important;
}

#searchButton {
    border-radius: 0 12px 12px 0 !important;
}

/* Mobile adjustments for navbar search form */
@media screen and (max-width: 768px) {
    .sticky-navbar #searchTerm {
        border-radius: 12px !important;
    }
    
    .sticky-navbar #searchButton {
        border-radius: 12px !important;
    }
}

/* ===== IMPROVED MOBILE SCROLLING AND VISIBILITY ===== */

/* Better mobile navbar menu height for very small screens */
@media screen and (max-height: 600px) {
    .sticky-navbar .navbar-menu.is-active,
    #navBarMenu.navbar-menu.is-active {
        max-height: 85vh !important;
    }
    
    /* Reduce padding on very small screens to fit more content */
    #navBarMenu.is-active .navbar-item,
    #navBarMenu.is-active .navbar-item > .navbar-link {
        padding: 0.4rem 1rem !important;
    }
    
    .navbar-dropdown .nested-dropdown-content .navbar-item {
        padding: 0.6rem 1.5rem !important;
    }
}

/* Enhanced scrollbar styling for all mobile sizes */
.navbar-menu.is-active {
    /* Firefox */
    scrollbar-width: thin !important;
    scrollbar-color: #00d1b2 rgba(245, 245, 245, 0.8) !important;
}

/* Webkit scrollbar improvements */
.navbar-menu.is-active::-webkit-scrollbar {
    width: 8px !important;
    background: transparent !important;
}

.navbar-menu.is-active::-webkit-scrollbar-track {
    background: rgba(245, 245, 245, 0.5) !important;
    border-radius: 4px !important;
    margin: 4px !important;
}

.navbar-menu.is-active::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d1b2, #00b09b) !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

.navbar-menu.is-active::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00b09b, #009688) !important;
}

/* Add subtle scroll indicators */
.navbar-menu.is-active::before {
    content: "" !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #00d1b2, transparent) !important;
    z-index: 1 !important;
    opacity: 0.6 !important;
}

.navbar-menu.is-active::after {
    content: "" !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #00d1b2, transparent) !important;
    z-index: 1 !important;
    opacity: 0.6 !important;
}

/* Improve nested dropdown visibility indicators */
.navbar-dropdown .nested-dropdown.is-active > .navbar-link-nested {
    background-color: rgba(0, 209, 178, 0.1) !important;
    border-left: 3px solid #00d1b2 !important;
    padding-left: calc(1rem - 3px) !important;
}

/* Add smooth transitions for all dropdown actions */
.navbar-dropdown,
.nested-dropdown-content,
.navbar-item {
    transition: all 0.2s ease !important;
}

/* Improve visual hierarchy for nested items */
.navbar-dropdown .nested-dropdown-content .navbar-item {
    position: relative !important;
}