/**
 * Site Navigation - Menu
 * 
 * Primary menu and menu item styles.
 * Mobile-first approach.
 */

.site-nav__menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: var(--spacing-sm) 0;
    gap: 0;
    flex-direction: column;
    align-items: stretch;
}

.site-nav__menu-item {
    position: relative;
    border-bottom: 1px solid var(--border-light);
}

.site-nav__menu-item:last-child {
    border-bottom: none;
}

.site-nav__menu-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.7rem;
    padding: var(--spacing-md);
    transition: var(--transition);
    position: relative;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    border-bottom: none;
    width: 100%;
}

.site-nav__menu-link:hover {
    color: var(--secondary-color);
    background: var(--bg-light);
}

.site-nav__menu-item.current-menu-item .site-nav__menu-link,
.site-nav__menu-item.current_page_item .site-nav__menu-link {
    color: var(--secondary-color);
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .site-nav__menu-list {
        flex-direction: row;
        gap: var(--spacing-xl);
        padding: 0;
    }

    .site-nav__menu-item {
        border-bottom: none;
    }

    .site-nav__menu-item:last-child {
        border-bottom: none;
    }

    .site-nav__menu-link {
        padding: var(--spacing-xs) 0;
        display: inline-block;
        width: auto;
        border-bottom: 2px solid transparent;
        background: none;
    }

    .site-nav__menu-link:hover {
        background: none;
        color: var(--secondary-color);
        border-bottom-color: var(--secondary-color);
    }

    .site-nav__menu-item.current-menu-item .site-nav__menu-link,
    .site-nav__menu-item.current_page_item .site-nav__menu-link {
        color: var(--secondary-color);
        border-bottom-color: var(--secondary-color);
    }

    .site-nav__menu-item:hover .site-nav__menu-link {
        color: var(--secondary-color);
        border-bottom-color: var(--secondary-color);
    }
}