/**
 * Componentes del Header
 * Variavista Business Theme
 * 
 * Estilos para todos los componentes del header:
 * - Links del topbar
 * - Icon pills
 * - Social links
 * - Navigation links
 * - Mega menu
 * - Botones CTA
 * 
 * @package Variavista
 * @version 2.7.0
 */

/* ========================================
   TOPBAR - LINKS Y COMPONENTES
   ======================================== */

.header-top-link {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.header-top-link--primary:hover {
    background-color: rgba(var(--vv-primary-rgb), 0.18);
    border-color: rgba(var(--vv-primary-rgb), 0.38);
}

.header-top-link--secondary:hover {
    background-color: rgba(var(--vv-secondary-rgb), 0.18);
    border-color: rgba(var(--vv-secondary-rgb), 0.38);
}

/* ========================================
   ICON PILLS
   ======================================== */

.header-icon-pill {
    background: linear-gradient(to bottom right, var(--vv-primary), var(--vv-secondary));
    box-shadow: 0 20px 40px rgba(var(--vv-primary-rgb), 0.25);
}

.header-icon-pill--inverse {
    background: linear-gradient(to bottom right, var(--vv-secondary), var(--vv-primary));
    box-shadow: 0 20px 40px rgba(var(--vv-secondary-rgb), 0.25);
}

/* ========================================
   SOCIAL LINKS
   ======================================== */

.header-social-link {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.header-social-link--primary:hover {
    background-color: rgba(var(--vv-primary-rgb), 0.2);
    border-color: rgba(var(--vv-primary-rgb), 0.4);
}

.header-social-link--secondary:hover {
    background-color: rgba(var(--vv-secondary-rgb), 0.2);
    border-color: rgba(var(--vv-secondary-rgb), 0.4);
}

/* ========================================
   NAVIGATION LINKS
   ======================================== */

/* Los colores se definen dinámicamente vía inline CSS o CSS variables */
.header-nav-link {
    transition: color 0.2s ease;
}

/* ========================================
   MEGA MENU
   ======================================== */

.header-mega-item {
    transition: all 0.2s ease;
}

.header-mega-item--primary:hover {
    background-color: rgba(var(--vv-primary-rgb), 0.12);
}

.header-mega-item--secondary:hover {
    background-color: rgba(var(--vv-secondary-rgb), 0.12);
}

.header-mega-item:hover .header-mega-icon {
    transform: scale(1.1);
}

.header-mega-title { 
    transition: color 0.2s ease; 
}

.header-mega-item--primary:hover .header-mega-title { 
    color: var(--vv-primary); 
}

.header-mega-item--secondary:hover .header-mega-title { 
    color: var(--vv-secondary); 
}

/* ========================================
   BOTONES CTA
   ======================================== */

.header-link-cta {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.header-link-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.header-link-cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.header-link-cta:hover::after {
    width: 300px;
    height: 300px;
}

/* CTA Glow Effect */
.header-cta-glow {
    background: linear-gradient(to right, var(--vv-primary), var(--vv-secondary));
}

/* ========================================
   HAMBURGER ICON (Mobile)
   ======================================== */

/* Contenedor del icono - altura y gap fijos para mantener las líneas juntas */
.hamburger-icon-container {
    height: 20px !important;
    justify-content: flex-start !important;
    gap: 5px !important;
}

.hamburger-bar {
    width: 100%;
    height: 3px;
    background-color: currentColor;
}

/* ========================================
   MOBILE MENU COMPONENTS
   ======================================== */

.header-mobile-blob-primary {
    background: radial-gradient(circle, var(--vv-primary) 0%, transparent 70%);
}

.header-mobile-blob-secondary {
    background: radial-gradient(circle, var(--vv-secondary) 0%, transparent 70%);
}

.header-mobile-blob-center {
    background: radial-gradient(circle, var(--vv-primary-alt) 0%, transparent 70%);
}

.header-mobile-cta {
    position: relative;
    z-index: 10;
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 1024px) {
    /* Simplificar efectos en móvil */
    .header-link-cta::after {
        display: none;
    }
    
    .header-mega-item:hover .header-mega-icon {
        transform: scale(1.05);
    }
}