@charset "UTF-8";

/**
 * Desktop Navigation - Horizontal Scrolling with Arrow Controls
 * 
 * Purpose: Horizontal scrolling navigation menu with arrow buttons
 * Dependencies: desktop-nav.modern.css
 * 
 * Features:
 * - Horizontal scrollable menu
 * - Hidden scrollbar
 * - Arrow buttons for navigation
 * - Dynamic arrow visibility based on scroll position
 * - Smooth scrolling behavior
 * 
 * @charset UTF-8
 * @version 1.0.0
 * @date 2026-01-25
 */

/* ============================================================
   NAVIGATION CONTAINER
   ============================================================ */

.nx-main-navigation {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Ensure dropdowns can overflow */
    overflow: visible;
}

/* Ensure parent containers allow dropdown overflow */
.nx-desktop-nav {
    overflow: visible !important;
    /* Remove height constraints */
    height: auto !important;
    max-height: none !important;
    contain: none;
}

.nx-desktop-nav .nx-container {
    overflow: visible !important;
    contain: none;
}

/* ============================================================
   NAVIGATION MENU WRAPPER (Scrollable Container)
   ============================================================ */

.nx-nav-menu-wrapper {
    flex: 1;
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: visible !important; /* Allow dropdowns to overflow vertically */
    position: relative;
    /* Remove height constraints */
    height: auto !important;
    max-height: none !important;
    min-height: auto;
    /* Prevent clipping */
    contain: none;
    /* Ensure wrapper doesn't clip dropdowns */
    clip: auto;
    clip-path: none;
    -webkit-clip-path: none;
}

.nx-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: visible !important; /* Allow dropdowns to overflow */
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    /* Remove any height constraints that might clip dropdowns */
    height: auto !important;
    max-height: none !important;
    min-height: auto;
    /* Prevent clipping of absolutely positioned children */
    contain: none;
    /* Ensure no clipping occurs */
    clip: auto;
    clip-path: none;
    -webkit-clip-path: none;
    /* Ensure dropdowns can render outside */
    align-items: flex-start; /* Align items to top so dropdowns can extend below */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.nx-nav-menu::-webkit-scrollbar {
    display: none;
}

/* ============================================================
   NAVIGATION ITEMS
   ============================================================ */

.nx-nav-item {
    flex-shrink: 0;
    position: relative;
}

.nx-nav-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.275rem 0.375rem;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.nx-nav-item .nx-nav-link span {
    font-weight: 500;
}

.nx-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.nx-nav-link.nx-active {
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
}

/* Active parent category (has active child) */
.nx-nav-item.nx-active-parent > .nx-nav-link {
    color: var(--bs-primary, #0d6efd);
    font-weight: 500;
}

/* ============================================================
   ARROW BUTTONS
   ============================================================ */

.nx-nav-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.5s ease, background-color 0.2s ease, transform 0.2s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nx-nav-arrow:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.nx-nav-arrow:active {
    transform: scale(0.95);
}

.nx-nav-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--bs-primary, #0d6efd);
}

/* Show arrow when it's needed */
.nx-nav-arrow.nx-nav-arrow-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Left arrow positioning */
.nx-nav-arrow-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
}

.nx-nav-arrow-left.nx-nav-arrow-visible {
    transform: translateY(-50%);
}

.nx-nav-arrow-left:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Right arrow positioning */
.nx-nav-arrow-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
}

.nx-nav-arrow-right.nx-nav-arrow-visible {
    transform: translateY(-50%);
}

.nx-nav-arrow-right:hover {
    transform: translateY(-50%) scale(1.1);
}

/* ============================================================
   DROPDOWN MENUS (Preserve existing functionality)
   ============================================================ */

.nx-has-submenu {
    position: relative; /* Keep relative for dropdown positioning */
}

.nx-dropdown-icon {
    transition: transform 0.2s ease;
}

.nx-has-submenu:hover .nx-dropdown-icon {
    transform: rotate(180deg);
}

.nx-submenu {
    position: fixed; /* Use fixed to escape scroll container clipping */
    top: 0;
    left: 0;
    margin: 0; /* No margin at all */
    padding: 0; /* No padding on submenu itself */
    margin-top: 0; /* Ensure no top margin gap */
    min-width: 200px;
    max-height: 400px; /* Maximum height for submenu */
    background: white;
    border-radius: 0 0 0.5rem 0.5rem; /* Only bottom corners rounded, top corners square to connect with menu item */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0); /* No transform offset - starts at exact position */
    /* Ensure submenu connects directly with nav item */
    border-top: none; /* No border on top */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10000; /* Very high z-index to ensure visibility */
    /* Enable scrolling when content exceeds max-height */
    overflow-y: auto;
    overflow-x: hidden;
    /* Force dropdown to be positioned outside scroll context */
    will-change: transform, opacity;
    /* Ensure it's not clipped */
    clip-path: none;
    -webkit-clip-path: none;
    /* Ensure dropdown renders above everything */
    isolation: isolate;
    /* Hide by default - JavaScript will show and position it */
    display: none;
    pointer-events: none;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.nx-submenu::-webkit-scrollbar {
    width: 6px;
}

.nx-submenu::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0.5rem;
}

.nx-submenu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.nx-submenu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Enable pointer events when visible */
.nx-submenu[style*="display: block"] {
    pointer-events: auto;
}

/* Ensure parent containers don't clip dropdowns vertically */
.nx-nav-menu {
    overflow-y: visible !important;
    /* Remove any containment that might clip */
    contain: none;
}

.nx-nav-menu-wrapper {
    overflow-x: hidden; /* Prevent wrapper from scrolling */
    overflow-y: visible !important; /* Allow dropdowns to overflow */
    contain: none;
}

.nx-main-navigation {
    overflow-y: visible !important; /* Allow dropdowns to overflow */
    contain: none;
}

/* Ensure navigation items can contain dropdowns properly */
.nx-nav-item {
    /* Allow dropdowns to overflow */
    overflow: visible !important;
    contain: none;
    /* Ensure items don't clip their children */
    clip: auto;
    clip-path: none;
}

/* Critical: Ensure menu items with submenus allow overflow */
.nx-nav-item.nx-has-submenu {
    overflow: visible !important;
    z-index: 1; /* Ensure hover state works */
}

.nx-nav-item.nx-has-submenu:hover {
    z-index: 1001; /* Higher than dropdown to ensure hover works */
}

/* Dropdown visibility is now controlled by JavaScript */
.nx-has-submenu:hover .nx-submenu {
    /* JavaScript handles positioning and visibility */
}

.nx-submenu-content {
    padding: 0; /* No padding at all - let items handle their own padding */
    margin: 0; /* Remove any margin */
    margin-top: 0 !important; /* Force no top margin gap */
    padding-top: 0 !important; /* Force no top padding to connect directly with menu item */
}

.nx-submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nx-submenu-item {
    margin: 0;
}

.nx-submenu-item:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.nx-submenu-item:first-child .nx-submenu-link {
    padding-top: 0; /* No top padding - submenu positioned 48px closer */
}

.nx-submenu-item:last-child .nx-submenu-link {
    padding-bottom: 0.5rem; /* Last item gets bottom padding */
}

.nx-submenu-link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nx-submenu-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--bs-primary, #0d6efd);
}

.nx-submenu-link.nx-active {
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, 0.1);
}

.nx-submenu-item.nx-active {
    background-color: rgba(13, 110, 253, 0.05);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (min-width: 1024px) {
    .nx-nav-menu {
        gap: 0.75rem;
    }
    
    .nx-nav-link {
        padding: 0.275rem 0.375rem;
    }
}

@media (min-width: 1440px) {
    .nx-nav-menu {
        gap: 0.875rem;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.nx-nav-arrow:focus {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.nx-nav-arrow:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
   NOTES
   ============================================================ */

/**
 * Scroll Behavior:
 * - Menu scrolls horizontally when content overflows
 * - Scrollbar is hidden for clean appearance
 * - Smooth scrolling enabled for better UX
 * 
 * Arrow Visibility:
 * - Left arrow: visible when not at start
 * - Right arrow: visible when not at end
 * - Both hidden when content fits in container
 * - Opacity transition: 0.5s for smooth appearance
 * 
 * Dropdown Preservation:
 * - All existing dropdown functionality preserved
 * - Hover states work correctly
 * - Submenu positioning maintained
 * 
 * Performance:
 * - Uses CSS transforms for smooth animations
 * - Debounced scroll event handlers
 * - Efficient scroll position detection
 */