/**
 * Desktop Navigation Styles
 *
 * Row 2 navigation bar with department toggle, menu, search, and cart.
 */

/* ===========================================
   DESKTOP NAV CONTAINER (Row 2)
   =========================================== */
.desktop-nav {
    display: none;
    position: relative;
    z-index: var(--z-sticky-header, 200);
    background: #1A1A1A;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Scrolled: solid black */
.header-sticky-wrapper.is-scrolled .desktop-nav {
    background: #1A1A1A;
    border-bottom: 1px solid #1A1A1A;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: block;
    }
}

.desktop-nav-container {
    max-width: 100%;
    margin: 0 auto;
    padding: var(--nav-padding-y) var(--nav-padding-x);
    display: flex;
    align-items: center;
    gap: var(--nav-container-gap);
}

/* ===========================================
   NAV MENU WRAPPER
   =========================================== */
.nav-menu-wrapper,
.desktop-nav .nav-menu-wrapper,
.homepage-sticky-wrapper .nav-menu-wrapper {
    display: flex;
    align-items: center;
    flex: 1 1 0; /* flex-basis: 0 forces it to fill only available space, not content size */
    min-width: 0;
}

.navigation-menu-wrapper,
.desktop-nav .navigation-menu-wrapper,
.homepage-sticky-wrapper .navigation-menu-wrapper {
    display: flex;
    align-items: center;
    gap: var(--nav-menu-gap);
    height: auto;
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%; /* Constrain to parent width */
}

/* Menu item alignment - all nav items on same baseline */
.navigation-menu-wrapper > div,
.navigation-menu-wrapper > .nav-item-wrapper,
.desktop-nav .navigation-menu-wrapper > div,
.desktop-nav .navigation-menu-wrapper > .nav-item-wrapper,
.homepage-sticky-wrapper .navigation-menu-wrapper > div,
.homepage-sticky-wrapper .navigation-menu-wrapper > .nav-item-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    height: auto;
    flex-shrink: 0; /* Individual items don't shrink, but gaps do */
}

/* ===========================================
   NAV LINKS
   =========================================== */
.nav-link {
    font-size: var(--nav-link-font-size);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--nav-link-letter-spacing);
    color: var(--header-text, #fff);
    text-decoration: none;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.nav-link-text {
    display: inline;
}

.nav-link:hover {
    color: #666;
}

/* ===========================================
   DESKTOP NAV RIGHT (Search + Cart)
   =========================================== */
.desktop-nav-right {
    display: flex;
    align-items: center;
    gap: var(--nav-right-gap);
    margin-left: auto;
    flex-shrink: 0;
}

/* ===========================================
   SEARCH BAR (Row 2 right side)
   =========================================== */
.desktop-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--nav-search-padding-y) var(--nav-search-padding-x);
    border-radius: 45px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(17.25px);
    -webkit-backdrop-filter: blur(17.25px);
    cursor: pointer;
    min-width: var(--nav-search-min-width);
    transition: all var(--transition-fast, 0.15s ease);
}

.desktop-search-bar:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.desktop-search-bar svg {
    width: var(--nav-search-icon-size);
    height: var(--nav-search-icon-size);
    stroke: var(--header-text, #fff);
    stroke-width: 1.4;
    fill: none;
    flex-shrink: 0;
}

.desktop-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--nav-search-font-size);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    outline: none;
    min-width: 0;
}

.desktop-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Hide old elements (moved to Row 1 or removed) */
.desktop-nav-department-toggle {
    display: none !important;
}

/* ===========================================
   LEGACY: SEARCH TRIGGER (Pill style) - now hidden
   =========================================== */
.desktop-search-trigger {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 45px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    cursor: pointer;
    min-width: auto;
    transition: all var(--transition-fast, 0.15s ease);
}

.desktop-search-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.desktop-search-trigger svg {
    width: 14px;
    height: 14px;
    stroke: var(--header-text, #fff);
    stroke-width: 1.5;
    fill: none;
}

.desktop-search-trigger span {
    color: var(--header-text-muted, rgba(255, 255, 255, 0.8));
    font-size: 11px;
}

/* ===========================================
   LEGACY DESKTOP NAV STYLES
   =========================================== */
.desktop-nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 12px 0;
}

.desktop-nav-item {
    position: relative;
}

.desktop-nav-link {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dropdown-text, #2D1F1F);
    text-decoration: none;
    padding: 8px 0;
    display: block;
}

.desktop-nav-link:hover {
    color: #666;
}

/* Legacy desktop dropdown */
.desktop-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dropdown-bg, #fff);
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    z-index: var(--z-dropdown, 100);
}

.desktop-nav-item:hover .desktop-dropdown {
    display: block;
}

.desktop-dropdown a {
    display: block;
    padding: 8px 20px;
    font-size: 13px;
    color: var(--dropdown-text, #2D1F1F);
    text-decoration: none;
}

.desktop-dropdown a:hover {
    background: #f5f5f5;
}

/* ===========================================
   RESPONSIVE BREAKPOINTS
   Explicit values for each breakpoint to ensure menu fits
   =========================================== */

/* 1024px-1199px: Compact - tight but readable spacing */
@media (min-width: 1024px) and (max-width: 1199px) {
    .desktop-nav-container {
        padding: 8px 12px;
        gap: 8px;
    }

    .navigation-menu-wrapper {
        gap: 8px;
    }

    .nav-link {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .desktop-nav-right {
        gap: 8px;
    }

    .desktop-search-bar {
        gap: 5px;
        padding: 5px 10px;
        min-width: 70px;
    }

    .desktop-search-bar svg {
        width: 13px;
        height: 13px;
    }

    .desktop-search-input {
        font-size: 10px;
    }
}

/* 1200px-1399px: Medium - balanced spacing */
@media (min-width: 1200px) and (max-width: 1399px) {
    .desktop-nav-container {
        padding: 8px 16px;
        gap: 10px;
    }

    .navigation-menu-wrapper {
        gap: 12px;
    }

    .nav-link {
        font-size: 11px;
        letter-spacing: 0.3px;
    }

    .desktop-nav-right {
        gap: 10px;
    }

    .desktop-search-bar {
        gap: 6px;
        padding: 5px 12px;
        min-width: 80px;
    }

    .desktop-search-bar svg {
        width: 14px;
        height: 14px;
    }

    .desktop-search-input {
        font-size: 11px;
    }
}

/* 1400px-1599px: Full - comfortable spacing */
@media (min-width: 1400px) and (max-width: 1599px) {
    .desktop-nav-container {
        padding: 10px 24px;
        gap: 14px;
    }

    .navigation-menu-wrapper {
        gap: 16px;
    }

    .nav-link {
        font-size: 12px;
        letter-spacing: 0.4px;
    }

    .desktop-nav-right {
        gap: 14px;
    }

    .desktop-search-bar {
        gap: 7px;
        padding: 6px 14px;
        min-width: 110px;
    }

    .desktop-search-bar svg {
        width: 15px;
        height: 15px;
    }

    .desktop-search-input {
        font-size: 12px;
    }
}

/* 1600px+: Extra large - generous spacing */
@media (min-width: 1600px) {
    .desktop-nav-container {
        padding: 10px 32px;
        gap: 18px;
    }

    .navigation-menu-wrapper {
        gap: 20px;
    }

    .nav-link {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .desktop-nav-right {
        gap: 18px;
    }

    .desktop-search-bar {
        gap: 8px;
        padding: 8px 16px;
        min-width: 150px;
    }

    .desktop-search-bar svg {
        width: 16px;
        height: 16px;
    }

    .desktop-search-input {
        font-size: 13px;
    }
}

/* ===========================================
   DESKTOP NAV DROPDOWN HOVER
   Explicitly show dropdowns on hover
   =========================================== */
@media (min-width: 1024px) {
    .desktop-nav .hover-box {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        min-width: 280px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        padding: 16px 0;
        z-index: 9999;
        border-radius: 8px;
    }

    .desktop-nav .nav-item-wrapper:hover > .hover-box,
    .desktop-nav .nav-item-wrapper:hover > .hover-box.hidden {
        display: block !important;
    }
}