/* =========================
   1. SHARED BASE STYLES
========================= */
.clean-menu-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.clean-menu-scroll {
    display: flex;
    flex-wrap: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    transition: all 0.3s ease;
}

.clean-menu-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.menu-item {
    flex: 0 0 auto;
    text-decoration: none;
    font-family: "Sofia Pro", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #000000;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Hover & Active States (Including Home) */
.menu-item:hover,
.menu-item.active {
    color: #A5A5A5 !important;
}

/* =========================
   2. DESKTOP (Static)
========================= */
@media (min-width: 768px) {
    .clean-menu-wrapper {
        justify-content: flex-start; /* Center the whole menu */
    }

    .clean-menu-scroll {
        overflow: visible !important;
        gap: 20px; 
        justify-content: center;
        flex: 0 1 auto;
    }

    .menu-item {
        font-size: 0.8vw;
    }

    .menu-arrow {
        display: none !important; /* Force hide arrows on desktop */
    }
}

/* =========================
   3. MOBILE (Scrollable)
========================= */
@media (max-width: 767px) {
    .clean-menu-scroll {
        overflow-x: auto;
        flex: 1;
        gap: 24px;
        padding: 12px 0;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .menu-item {
        font-size: 13px;
        scroll-snap-align: center;
    }

    /* Arrows logic */
    .menu-arrow {
        flex: 0 0 30px;
        display: none; /* Hidden unless .has-scroll is added by JS */
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }

    .clean-menu-wrapper.has-scroll .menu-arrow {
        display: flex;
    }
}

/* =========================
   4. ARROW GRAPHICS (Chevrons)
========================= */
.chevron {
    display: block;
    width: 16px;
    height: 16px;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
}

.menu-arrow.right .chevron {
    transform: rotate(-45deg);
}

.menu-arrow.left .chevron {
    transform: rotate(135deg);
}

.menu-arrow:hover .chevron {
    border-color: #A5A5A5;
}

/* Visual state for disabled arrows at start/end */
.menu-arrow[style*="opacity: 0.3"] {
    cursor: default;
}