/* ============================================
   NAVIGATION CSS - Simplified & Reorganized
   ============================================ */

/* ============================================
   1. CSS VARIABLES - Change colors here
   ============================================ */
:root {
    /* Main Navigation Colors */
    --nav-bg-color: rgb(53, 91, 174);
    --nav-hover-color: #114a82;
    --nav-text-color: white;

    /* Dropdown Colors */
    --dropdown-bg-color: rgb(40, 68, 131);
    --dropdown-text-color: white;
    --dropdown-hover-bg: rgb(75, 113, 193);
    --dropdown-hover-text: white;
    --dropdown-hover-text-accent: #5bc16f; /* Complementary green */

    /* Typography */
    --nav-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --nav-font-size: 1.125rem;

    /* Effects */
    --nav-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --dropdown-shadow: 0 4px 6px rgba(0,0,0,0.1);

    /* Mobile */
    --mobile-search-bg: #ffffff;
    --mobile-search-text: #333333;
    --mobile-search-button-bg: #2563eb;
}

/* ============================================
   2. BASE NAVBAR STRUCTURE
   ============================================ */
.navbar {
    background-color: var(--nav-bg-color) !important;
    font-family: var(--nav-font-family) !important;
    position: relative !important;
    z-index: 1000 !important;
    width: 100% !important;
}

/* Ensure header allows dropdown overflow */
header {
    overflow: visible !important;
    position: relative !important;
}

/* Reset Tailwind margins on lists */
.navbar ul,
.navbar ol {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   3. MAIN NAVIGATION MENU
   ============================================ */
.navbar .nav-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.navbar .nav-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    width: 100% !important;
}

.navbar .nav-item {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide items that are moved to More menu */
.navbar .nav-item[style*="display: none"],
.navbar .nav-item[style*="display:none"] {
    display: none !important;
}

/* ============================================
   4. NAVIGATION LINKS
   ============================================ */
.navbar .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 15px 20px !important;
    color: var(--nav-text-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: var(--nav-font-size) !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
}

.navbar .nav-link:hover {
    background-color: var(--nav-hover-color) !important;
}

/* Items with dropdowns should use dropdown background color on hover */
.navbar .nav-item.has-dropdown:hover > .nav-link,
.navbar .nav-item.has-dropdown > .nav-link:hover,
.navbar .nav-item:has(.dropdown):hover > .nav-link,
.navbar .nav-item:has(.dropdown-left):hover > .nav-link {
    background-color: var(--dropdown-bg-color) !important;
}

/* ============================================
   5. DROPDOWN MENUS (Standard)
   ============================================ */
.navbar .dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: var(--dropdown-bg-color) !important;
    min-width: 200px !important;
    box-shadow: var(--dropdown-shadow) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Hidden by default */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important;
}

/* Show dropdown on hover */
.navbar .nav-item:hover > .dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ============================================
   6. DROPDOWN ITEMS
   ============================================ */
.navbar .dropdown li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.navbar .dropdown li:last-child {
    border-bottom: none !important;
}

.navbar .dropdown a,
.navbar .dropdown .dropdown-link {
    display: block !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    font-size: var(--nav-font-size) !important;
    position: relative !important;
    z-index: 1 !important;
    color: var(--dropdown-text-color) !important;
    transition: color 0.2s ease !important;
}

/* Background color layer */
.navbar .dropdown a::before,
.navbar .dropdown .dropdown-link::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: transparent !important;
    transition: background-color 0.2s ease !important;
    z-index: -1 !important;
}

/* DROPDOWN HOVER STATE - Background color change */
.navbar .dropdown a:hover,
.navbar .dropdown .dropdown-link:hover,
.navbar .dropdown li:hover > a {
    color: var(--dropdown-text-color) !important;
}

.navbar .dropdown a:hover::before,
.navbar .dropdown .dropdown-link:hover::before,
.navbar .dropdown li:hover > a::before {
    background-color: var(--dropdown-hover-bg) !important;
}

/* ============================================
   7. MORE MENU (Natural positioning in flex layout)
   ============================================ */
.navbar .more-menu {
    position: relative !important;
    display: none !important;
}

.navbar .more-menu.visible {
    display: block !important;
}

.navbar .dropdown-left {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    background-color: var(--dropdown-bg-color) !important;
    width: 350px !important;
    box-shadow: var(--dropdown-shadow) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Hidden by default */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important;
}

.navbar .more-menu:hover .dropdown-left {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* More menu items */
.navbar .dropdown-left li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    position: relative !important;
}

.navbar .dropdown-left li:last-child {
    border-bottom: none !important;
}

.navbar .dropdown-left a,
.navbar .dropdown-left .dropdown-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 10px !important;
    text-decoration: none !important;
    font-size: var(--nav-font-size) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    position: relative !important;
    z-index: 1 !important;
    color: var(--dropdown-text-color) !important;
    transition: color 0.2s ease !important;
}

/* Background color layer */
.navbar .dropdown-left a::before,
.navbar .dropdown-left .dropdown-link::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: transparent !important;
    transition: background-color 0.2s ease !important;
    z-index: -1 !important;
}

/* DROPDOWN HOVER STATE - Background color change */
.navbar .dropdown-left a:hover,
.navbar .dropdown-left .dropdown-link:hover,
.navbar .dropdown-left li:hover > a {
    color: var(--dropdown-text-color) !important;
}

.navbar .dropdown-left a:hover::before,
.navbar .dropdown-left .dropdown-link:hover::before,
.navbar .dropdown-left li:hover > a::before {
    background-color: var(--dropdown-hover-bg) !important;
}

/* Sub-dropdowns within More menu */
.navbar .dropdown-left .more-dropdown-item {
    position: relative !important;
}

.navbar .dropdown-left .dropdown-submenu {
    position: absolute !important;
    right: 100% !important;
    top: 0 !important;
    background-color: var(--dropdown-bg-color) !important;
    min-width: 350px !important;
    box-shadow: var(--dropdown-shadow) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Hidden by default */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 10000 !important;
}

.navbar .dropdown-left .more-dropdown-item:hover .dropdown-submenu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Left arrow indicator for items with submenus - positioned at start */
.navbar .dropdown-left .more-dropdown-item.has-dropdown > .dropdown-link::after,
.navbar .dropdown-left .more-dropdown-item:has(.dropdown-submenu) > .dropdown-link::after {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    order: -1 !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 2 !important;
}

/* ============================================
   8. DROPDOWN ARROWS (SVG)
   ============================================ */
.desktop-arrow-down,
.desktop-arrow-up {
    flex-shrink: 0 !important;
    color: var(--nav-text-color) !important;
    transition: transform 0.2s ease !important;
}

.dropdown-arrow-down,
.dropdown-arrow-up {
    flex-shrink: 0 !important;
    color: var(--nav-text-color) !important;
}

/* ============================================
   9. MOBILE MENU
   ============================================ */

/* Mobile toggle button */
.mobile-toggle {
    background: transparent !important;
    border: none !important;
    font-size: 36px !important;
    color: white !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1001 !important;
    transition: transform 0.3s ease !important;
}

.mobile-toggle.menu-open {
    transform: rotate(90deg) !important;
}

/* Hide mobile toggle on desktop */
@media (min-width: 769px) {
    .mobile-toggle {
        display: none !important;
    }
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: var(--nav-bg-color) !important;
    box-shadow: var(--nav-shadow) !important;
    z-index: 1000 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;

    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
}

.mobile-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.mobile-menu-content {
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-menu-item {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mobile-menu-item:last-child {
    border-bottom: none !important;
}

.mobile-menu-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    min-height: 44px !important;
    color: var(--nav-text-color) !important;
    text-decoration: none !important;
    font-size: var(--nav-font-size) !important;
    font-weight: 500 !important;
    background: transparent !important;
}

.mobile-menu-link:hover {
    background-color: var(--nav-hover-color) !important;
}

/* Mobile dropdown */
.mobile-dropdown {
    background-color: var(--nav-hover-color) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    opacity: 0 !important;
}

.mobile-dropdown[style*="display: block"] {
    max-height: 500px !important;
    opacity: 1 !important;
}

.mobile-dropdown a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px 14px 40px !important;
    min-height: 44px !important;
    color: var(--nav-text-color) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--nav-bg-color) !important;
}

.mobile-dropdown a:hover {
    background-color: var(--nav-bg-color) !important;
}

/* Mobile search */
.mobile-search-container {
    display: flex !important;
    padding: 16px 20px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mobile-search-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px 0 0 8px !important;
    background: var(--mobile-search-bg) !important;
    color: var(--mobile-search-text) !important;
    outline: none !important;
}

.mobile-search-input:focus {
    border-color: var(--mobile-search-button-bg) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

.mobile-search-button {
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: white !important;
    background: var(--mobile-search-button-bg) !important;
    border: 1px solid var(--mobile-search-button-bg) !important;
    border-radius: 0 8px 8px 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !important;
}

.mobile-search-button:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* ============================================
   10. MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Hide desktop navigation */
    .navbar {
        background: none !important;
        position: static !important;
    }

    .navbar .nav-container {
        display: none !important;
    }

    /* Hide More menu on mobile */
    .navbar .more-menu {
        display: none !important;
    }

    /* Show all nav items on mobile (unhide items moved to More menu) */
    .navbar .nav-item[style*="display: none"],
    .navbar .nav-item[style*="display:none"] {
        display: block !important;
    }

    /* Remove hover effects on mobile dropdowns */
    .mobile-dropdown a:hover::before,
    .navbar .dropdown a:hover::before,
    .navbar .dropdown .dropdown-link:hover::before,
    .navbar .dropdown-left a:hover::before,
    .navbar .dropdown-left .dropdown-link:hover::before {
        background-color: transparent !important;
    }
}