From 470ef0c14fc64927da40acc98a347aeaf458bffb Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Tue, 4 Nov 2025 20:05:53 -0600
Subject: [PATCH] [NIVEL 3] Issue #54 - Navbar Underline Animado Turquesa
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementación de underline animado en navbar según diseño RDash.

**Cambios en header.css:**
- Agregado position: relative a .primary-menu a
- Implementado ::after pseudo-element con gradiente turquesa
- Animation scaleX(0) → scaleX(1) en hover
- Underline permanente en links activos (.current-menu-item)
- Soporte prefers-reduced-motion

**Características:**
✅ Gradiente: #61c7cd → #4db8c4 (CSS variables)
✅ Width: 80%, height: 2px
✅ Transición: 0.3s ease (CSS variable --transition-base)
✅ Transform origin: center
✅ Active links: underline permanente
✅ Accessibility: reduced motion support

Closes #54

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../themes/apus-theme/assets/css/header.css   | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/wp-content/themes/apus-theme/assets/css/header.css b/wp-content/themes/apus-theme/assets/css/header.css
index 26234432..a78a6f72 100644
--- a/wp-content/themes/apus-theme/assets/css/header.css
+++ b/wp-content/themes/apus-theme/assets/css/header.css
@@ -135,6 +135,7 @@
   font-size: 1rem;
   border-radius: 4px;
   transition: background-color 0.3s ease, color 0.3s ease;
+  position: relative;
 }
 
 .primary-menu a:hover,
@@ -149,6 +150,24 @@
   outline-offset: 2px;
 }
 
+/* Underline animation - Issue #54 */
+.primary-menu a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) scaleX(0);
+  width: 80%;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-cyan-primary, #61c7cd) 0%, var(--color-cyan-dark, #4db8c4) 100%);
+  transition: transform var(--transition-base, 0.3s ease);
+  transform-origin: center;
+}
+
+.primary-menu a:hover::after {
+  transform: translateX(-50%) scaleX(1);
+}
+
 /* Current menu item */
 .primary-menu .current-menu-item > a,
 .primary-menu .current_page_item > a {
@@ -156,6 +175,12 @@
   background-color: rgba(0, 123, 255, 0.1);
 }
 
+/* Active link permanent underline */
+.primary-menu .current-menu-item > a::after,
+.primary-menu .current_page_item > a::after {
+  transform: translateX(-50%) scaleX(1);
+}
+
 /* Submenu styles (if needed) */
 .primary-menu .sub-menu {
   position: absolute;
@@ -471,6 +496,7 @@ body.mobile-menu-open {
 @media (prefers-reduced-motion: reduce) {
   .site-header,
   .primary-menu a,
+  .primary-menu a::after,
   .mobile-menu,
   .mobile-menu-overlay,
   .hamburger-icon .line,