/* Header nav underline: inactive links get a hover underline that grows
   from the center outward; the active page's link is permanently orange
   with a slightly wider, more offset underline. */
.nav-link {
    position: relative;
    padding-bottom: 4px;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transform: translateX(-50%);
    transition: width 0.25s ease-out;
}

.nav-link:not(.nav-link--active):hover {
    color: var(--color-accent);
}

.nav-link:not(.nav-link--active):hover::after {
    width: 100%;
}

.nav-link--active {
    color: var(--color-accent) !important;
}

.nav-link--active::after {
    width: 70%;
}