/* FILE: css/components.css */

/* NAV LINK BASE */
.nav-links a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  padding: 6px 0;
}

/* RED UNDERLINE (HIDDEN INITIALLY) */
.nav-links a::after, .f-nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;

  width: 100%;
  height: 2px;
  background-color: #fc0a0a; /* red underline */

  transform: translateX(-50%) scaleX(0);
  transform-origin: center;

  transition: transform 0.35s ease;
}

/* HOVER STATE */
.nav-links a:hover::after {
  transform: translateX(-50%) scaleX(1);
}
/* active states */
/* ACTIVE NAV LINK (same as hover, but permanent) */
.nav-links a.active {
  opacity: 1;
  pointer-events: none; /* disable click */
}

/* force underline to stay visible */
.nav-links a.active::after {
  transform: translateX(-50%) scaleX(1);
}