/**
 * Responsive Navbar Fix for TDY Template
 * Prevents menu items from wrapping and falling outside navbar background
 */

/* 1. Ensure header maintains consistent height and background */
#sp-header {
    position: relative;
    z-index: 999;
}

#sp-header .sp-megamenu-wrapper {
    background-color: inherit;
    width: 100%;
}

/* 2. Fix flex layout to prevent wrapping */
#sp-header .row {
    flex-wrap: nowrap !important;
}

#sp-logo {
    flex-shrink: 0;
}

/* Ensure logo maintains aspect ratio with proportional scaling */
#sp-logo img,
#sp-logo .logo img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

#sp-menu {
    flex: 1 1 auto;
    min-width: 0; /* Allow flex item to shrink below content size */
}

#sp-menu .sp-column {
    width: 100%;
    flex-wrap: nowrap !important;
    gap: 10px;
}

/* 3. Default menu styling */
.sp-megamenu-parent {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* 4. Compressed state (992px - 1399px) */
@media (min-width: 992px) and (max-width: 1399px) {
    /* Reduce menu item padding */
    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        padding: 0 12px !important;
        font-size: 14px;
        white-space: nowrap;
    }
    
    /* Tighter spacing for navbar-compressed state */
    #sp-header.navbar-compressed .sp-megamenu-parent > li > a,
    #sp-header.navbar-compressed .sp-megamenu-parent > li > span {
        padding: 0 10px !important;
    }
    
    /* Reduce header modules spacing */
    #sp-header .header-modules {
        gap: 5px !important;
        margin-left: 10px !important;
    }
    
    /* Reduce module spacing */
    #sp-header .header-modules .sp-module {
        margin-left: 10px !important;
    }
    
    /* Adjust offcanvas toggler */
    #sp-header #offcanvas-toggler {
        margin-left: 10px !important;
    }
}

/* 5. More aggressive compression (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        padding: 0 10px !important;
        font-size: 14px;
    }
    
    /* Even tighter module spacing */
    #sp-header .header-modules .sp-module {
        margin-left: 8px !important;
    }
}

/* 6. Maximum compression (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        padding: 0 8px !important;
        font-size: 13px;
    }
    
    /* Very tight module spacing */
    #sp-header .header-modules {
        gap: 3px !important;
        margin-left: 8px !important;
    }
    
    #sp-header .header-modules .sp-module {
        margin-left: 5px !important;
    }
    
    /* Hide search module on very small screens */
    #sp-header .header-modules .search {
        display: none !important;
    }
}

/* 7. Normal state for larger screens */
@media (min-width: 1400px) {
    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        /* Let theme defaults apply */
        font-size: inherit;
    }
    
    /* Ensure normal flex behavior */
    #sp-header.navbar-normal #sp-menu .sp-column {
        flex-wrap: wrap;
    }
}

/* 8. Ensure dropdown menus work properly */
.sp-megamenu-parent .sp-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

/* 9. Prevent text wrapping in menu items */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    white-space: nowrap;
    display: block;
}

/* 10. Special handling for screens where content overflows */
@media (min-width: 992px) and (max-width: 1250px) {
    /* Priority-based hiding of elements */
    #sp-header .header-modules .search {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1150px) {
    /* Hide profile username but keep icon */
    .sp-profile-wrapper .sp-sign-in .user-text {
        display: none !important;
    }
    
    /* Reduce container padding */
    #sp-header .container-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1050px) {
    /* Last resort - activate mobile menu earlier */
    #offcanvas-toggler {
        display: flex !important;
    }
    
    .sp-megamenu-wrapper {
        display: none !important;
    }
    
    .header-modules {
        display: none !important;
    }
}