/**
 * Platty Menu - Navigation Component
 * BEM: .platty-menu-nav, .platty-menu-item
 */

/* ===================================
   MENU ITEM
   =================================== */
.platty-menu-item {
    position: relative;
    padding: 20px 0;
    margin-right: 30px;
    font-size: var(--platty-font-size-base);
    font-weight: var(--platty-font-weight-medium);
    color: var(--platty-menu-text);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--platty-transition-base);
    white-space: nowrap;
}

.platty-menu-item:last-child {
    margin-right: 0;
}

.platty-menu-item:hover,
.platty-menu-item.active {
    color: var(--platty-menu-hover);
}

/* Indicator bar under active/hover menu item */
.platty-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--platty-menu-hover);
    transform: scaleX(0);
    transition: transform var(--platty-transition-base) cubic-bezier(0.4, 0, 0.2, 1);
}

.platty-menu-item:hover::after,
.platty-menu-item.active::after {
    transform: scaleX(1);
}

/* Menu Item Wrapper (for megamenu) */
.platty-menu-item-wrapper {
    position: relative;
    display: inline-block;
    bottom: 2.15px;
}

/* Invisible bridge between menu item and dropdown */
/* Creates a tolerance area so mouse can travel to dropdown */
.platty-menu-item-wrapper::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 30px; /* Tolerance area - adjust based on dropdown distance */
    background: transparent;
    pointer-events: auto;
    z-index: calc(var(--platty-z-dropdown) - 1);
}

/* ===================================
   SMOOTH SCROLLING (MOBILE)
   =================================== */
.platty-menu-nav {
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.platty-menu-nav::-webkit-scrollbar {
    height: 0;
}

.platty-menu-nav {
    scrollbar-width: none;
}