/* ==========================================================================
   CarAsset — Desktop Navigation (navigation.css)
   ========================================================================== */

.ca-navigation__list {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ca-navigation__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-block: var(--ca-space-2);
    color: var(--ca-color-dark-gray);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--ca-transition-fast);
}

.ca-navigation__link::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -4px;
    height: 2px;
    border-radius: var(--ca-radius-pill);
    background-color: var(--ca-color-green);
    transform: scaleX(0);
    transition: transform var(--ca-transition-fast);
}

.ca-navigation__link:hover {
    color: var(--ca-color-green);
}

.ca-navigation__link:hover::after {
    transform: scaleX(1);
}

.ca-navigation__link--active {
    color: var(--ca-color-navy);
    font-weight: 600;
}

.ca-navigation__link--active::after {
    transform: scaleX(1);
    background-color: var(--ca-color-navy);
}

.ca-navigation__link:focus-visible {
    outline: none;
    box-shadow: var(--ca-shadow-focus);
    border-radius: var(--ca-radius-sm);
}

/* Desktop-small safety */
@media (max-width: 1180px) {
    .ca-navigation__list {
        gap: var(--ca-space-4);
    }
}