/* =============================================================================
   HOUTINI UNIFIED FOOTER MODULE
   Matches header glass morphism approach with sophisticated styling
   ============================================================================= */

/* =============================================================================
   FOOTER CONTAINER SYSTEM - Unified Approach
   ============================================================================= */

.houtini-footer-unified {
  position: relative;
  background: transparent;
  margin-top: var(--houtini-spacing-3xl);
  border-top: 1px solid var(--houtini-gray-200);
}

.houtini-footer-glass-container {
  background: var(--houtini-glass-bg-light);
  backdrop-filter: var(--houtini-glass-blur);
  -webkit-backdrop-filter: var(--houtini-glass-blur);
  border-top: 1px solid var(--houtini-glass-border-light);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  transition: all var(--houtini-transition-smooth);
}

.houtini-footer-inner {
  padding: var(--houtini-spacing-2xl) 0 var(--houtini-spacing-lg);
}

/* =============================================================================
   FOOTER BRAND SECTION - Matching Header Style
   ============================================================================= */

.houtini-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--houtini-spacing-sm);
  margin-bottom: var(--houtini-spacing-md);
  justify-content: center;
  text-align: center;
}

.houtini-footer-brand .houtini-logo {
  font-family: var(--houtini-font-family);
  font-size: var(--houtini-font-size-2xl);
  font-weight: var(--houtini-font-weight-bold);
  color: var(--houtini-primary);
  text-decoration: none;
  position: relative;
  transition: all var(--houtini-transition-normal);
}

.houtini-footer-brand .houtini-logo::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 50%;
  height: 3px;
  background: var(--houtini-gradient-rainbow);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: logoGlow 2s ease-in-out infinite alternate;
}

.houtini-footer-brand .houtini-code-animation {
  display: flex;
  gap: 8px;
  align-items: center;
}

.houtini-footer-brand .houtini-code-element {
  font-family: var(--houtini-font-mono);
  font-size: var(--houtini-font-size-sm);
  font-weight: var(--houtini-font-weight-medium);
  color: var(--houtini-secondary);
  background: rgba(0, 204, 136, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  animation: codeFloat 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.houtini-footer-brand .houtini-code-element:nth-child(1) { --delay: 0s; }
.houtini-footer-brand .houtini-code-element:nth-child(2) { --delay: 0.5s; }
.houtini-footer-brand .houtini-code-element:nth-child(3) { --delay: 1s; }

/* =============================================================================
   SOCIAL LINKS - Enhanced Matching Header Design
   ============================================================================= */

.houtini-footer-social {
  display: flex;
  justify-content: center;
  margin: var(--houtini-spacing-lg) 0;
}

.houtini-footer-social .social-links {
  display: flex;
  gap: var(--houtini-spacing-sm);
  align-items: center;
}

.houtini-footer-social .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--houtini-radius-sm);
  background: var(--houtini-gradient-btn-primary);
  color: white;
  text-decoration: none;
  font-size: var(--houtini-font-size-lg);
  transition: all var(--houtini-transition-smooth);
  box-shadow: var(--houtini-shadow-primary);
  position: relative;
  overflow: hidden;
}

.houtini-footer-social .social-links a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: all 0.6s ease;
}

.houtini-footer-social .social-links a:hover {
  background: var(--houtini-gradient-btn-primary-hover);
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--houtini-shadow-pink);
  color: white;
}

.houtini-footer-social .social-links a:hover::before {
  left: 100%;
}

/* FontAwesome icon specificity */
.houtini-footer-social .social-links .fab,
.houtini-footer-social .social-links .fas {
  font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

.houtini-footer-social .social-links .fas {
  font-weight: 900 !important;
}

/* =============================================================================
   FOOTER CONTENT GRID - Widget Areas
   ============================================================================= */

.houtini-footer-widgets {
  margin-bottom: var(--houtini-spacing-xl);
}

.houtini-footer-widgets .widget {
  margin-bottom: var(--houtini-spacing-md);
}

.houtini-footer-widgets .widget-title {
  font-family: var(--houtini-font-family);
  font-size: var(--houtini-font-size-lg);
  font-weight: var(--houtini-font-weight-semibold);
  color: var(--houtini-text-primary);
  margin-bottom: var(--houtini-spacing-sm);
  letter-spacing: var(--houtini-heading-tracking);
}

.houtini-footer-widgets .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.houtini-footer-widgets .widget ul li {
  margin-bottom: var(--houtini-spacing-xs);
}

.houtini-footer-widgets .widget ul li a {
  color: var(--houtini-text-secondary);
  text-decoration: none;
  font-size: var(--houtini-font-size-sm);
  transition: all var(--houtini-transition-normal);
  position: relative;
  display: inline-block;
  padding: 4px 0;
}

.houtini-footer-widgets .widget ul li a:hover {
  color: var(--houtini-cyan);
  text-shadow: var(--houtini-text-glow-cyan);
}

.houtini-footer-widgets .widget ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--houtini-gradient-primary);
  transition: width var(--houtini-transition-normal);
}

.houtini-footer-widgets .widget ul li a:hover::after {
  width: 100%;
}

/* =============================================================================
   FOOTER COPYRIGHT & LEGAL
   ============================================================================= */

.houtini-footer-bottom {
  text-align: center;
  padding-top: var(--houtini-spacing-lg);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.houtini-footer-copyright {
  color: var(--houtini-text-tertiary);
  font-size: var(--houtini-font-size-sm);
  margin-bottom: var(--houtini-spacing-sm);
}

.houtini-footer-legal {
  display: flex;
  justify-content: center;
  gap: var(--houtini-spacing-lg);
  flex-wrap: wrap;
}

.houtini-footer-legal a {
  color: var(--houtini-text-secondary);
  text-decoration: none;
  font-size: var(--houtini-font-size-sm);
  font-weight: var(--houtini-font-weight-medium);
  transition: all var(--houtini-transition-normal);
  position: relative;
  padding: 8px 0;
}

.houtini-footer-legal a:hover {
  color: var(--houtini-cyan);
  text-shadow: var(--houtini-text-glow-cyan);
  transform: translateY(-1px);
}

.houtini-footer-legal a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--houtini-gradient-primary);
  transition: width var(--houtini-transition-normal);
  border-radius: 1px;
}

.houtini-footer-legal a:hover::after {
  width: 100%;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

@media (max-width: 768px) {
  .houtini-footer-inner {
    padding: var(--houtini-spacing-xl) 0 var(--houtini-spacing-md);
  }
  
  .houtini-footer-brand {
    flex-direction: column;
    gap: var(--houtini-spacing-sm);
  }
  
  .houtini-footer-brand .houtini-logo {
    font-size: var(--houtini-font-size-xl);
  }
  
  .houtini-footer-social .social-links {
    justify-content: center;
  }
  
  .houtini-footer-legal {
    flex-direction: column;
    gap: var(--houtini-spacing-sm);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .houtini-footer-social .social-links a {
    width: 38px;
    height: 38px;
    font-size: var(--houtini-font-size-base);
  }
  
  .houtini-footer-legal a {
    padding: 12px;
    display: block;
    text-align: center;
  }
}

/* =============================================================================
   END RESPONSIVE FOOTER STYLES
   Dark mode styles moved to 07-dark-theme.css for consolidation
   ============================================================================= */

/* =============================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================================================= */

/* Scroll-triggered reveal animation */
.houtini-footer-unified {
  opacity: 0;
  transform: translateY(20px);
  animation: footerReveal 0.8s ease-out forwards;
}

@keyframes footerReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover lift effect for interactive elements */
.houtini-hover-lift {
  transition: transform var(--houtini-transition-normal);
}

.houtini-hover-lift:hover {
  transform: translateY(-2px);
}

/* Pulse effect for brand logo */
@keyframes brandPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.houtini-footer-brand:hover .houtini-logo {
  animation: brandPulse 1.5s ease-in-out infinite;
}