/* Custom styles for Elisabeth's Portfolio */
/* Add any styles here that can't be achieved with Tailwind utilities */

/* Desktop nav links: animated sliding underline on hover / active page.
   Uses an ::after pseudo-element that grows from width 0 to 100%. */
.nav-link {
    position: relative;
    padding-bottom: 2px;
    color: #374151; /* gray-700 */
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #111827; /* gray-900 */
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #111827; /* gray-900 */
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Current page stays dark to reinforce the permanent underline */
.nav-link.active {
    color: #111827; /* gray-900 */
}