/* Modern UI Enhancements for Header and Footer */

/* Import Google Fonts for better typography 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
*/

/* CSS Variables for consistent theming */
:root {
   --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   --header-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --footer-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
   --border-radius: 0.75rem;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base typography improvements */
body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1.6;
   color: #1f2937;
}

/* Header Enhancements */
.modern-header {
   backdrop-filter: blur(10px);
   background: rgba(255, 255, 255, 0.95);
   border-bottom: 1px solid rgba(229, 231, 235, 0.8);
   transition: var(--transition);
}

.modern-header.scrolled {
   background: rgba(255, 255, 255, 0.98);
   box-shadow: var(--header-shadow);
}

/* Logo and Brand Styling */
.brand-logo {
   background: var(--primary-gradient);
   background-size: 200% 200%;
   animation: gradientShift 6s ease infinite;
   transition: var(--transition);
}

.brand-logo:hover {
   transform: scale(1.05) rotate(2deg);
   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.brand-text {
   background: var(--primary-gradient);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size: 200% 200%;
   animation: gradientShift 6s ease infinite;
}

/* Navigation Enhancements */
.nav-link {
   position: relative;
   overflow: hidden;
   transition: var(--transition);
}

.nav-link::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s;
}

.nav-link:hover::before {
   left: 100%;
}

.nav-link:hover {
   color: #3b82f6;
   transform: translateY(-1px);
}

/* Button Enhancements */
.btn-primary {
   background: var(--primary-gradient);
   background-size: 200% 200%;
   animation: gradientShift 6s ease infinite;
   transition: var(--transition);
   position: relative;
   overflow: hidden;
}

.btn-primary::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s;
}

.btn-primary:hover::before {
   left: 100%;
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

/* Footer Enhancements */
.modern-footer {
   position: relative;
   overflow: hidden;
}

.modern-footer::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
   pointer-events: none;
}

.footer-section-title {
   position: relative;
   margin-bottom: 1.5rem;
}

.footer-section-title::after {
   content: '';
   position: absolute;
   bottom: -0.5rem;
   left: 0;
   width: 2rem;
   height: 2px;
   background: var(--success-gradient);
   border-radius: 1px;
}

.footer-link {
   position: relative;
   transition: var(--transition);
}

.footer-link::before {
   content: '';
   position: absolute;
   left: -0.5rem;
   top: 50%;
   transform: translateY(-50%);
   width: 0;
   height: 2px;
   background: var(--success-gradient);
   transition: width 0.3s ease;
}

.footer-link:hover::before {
   width: 0.5rem;
}

.footer-link:hover {
   color: #ffffff;
   transform: translateX(0.5rem);
}

/* Social Icons */
.social-icon {
   transition: var(--transition);
   position: relative;
   overflow: hidden;
}

.social-icon::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--primary-gradient);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.social-icon:hover::before {
   opacity: 1;
}

.social-icon:hover {
   transform: translateY(-3px) scale(1.1);
   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.social-icon svg {
   position: relative;
   z-index: 1;
   transition: var(--transition);
}

.social-icon:hover svg {
   color: white;
}

/* Mobile Menu Enhancements */
.mobile-menu {
   backdrop-filter: blur(10px);
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(229, 231, 235, 0.8);
   animation: slideDown 0.3s ease-out;
}

.mobile-menu-item {
   position: relative;
   overflow: hidden;
   transition: var(--transition);
}

.mobile-menu-item::before {
   content: '';
   position: absolute;
   left: -100%;
   top: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
   transition: left 0.5s;
}

.mobile-menu-item:hover::before {
   left: 100%;
}

/* Animations */
@keyframes gradientShift {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}

@keyframes slideDown {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Scroll-triggered animations */
.fade-in-up {
   animation: fadeInUp 0.6s ease-out forwards;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
   .modern-header {
      padding: 0 1rem;
   }
   
   .brand-text {
      font-size: 1.25rem;
   }
   
   .mobile-menu {
      margin: 0.5rem 1rem;
      border-radius: var(--border-radius);
   }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
   .modern-header {
      background: rgba(17, 24, 39, 0.95);
      border-bottom: 1px solid rgba(75, 85, 99, 0.8);
   }
   
   .modern-header.scrolled {
      background: rgba(17, 24, 39, 0.98);
   }
   
   .mobile-menu {
      background: rgba(17, 24, 39, 0.95);
      border: 1px solid rgba(75, 85, 99, 0.8);
   }
}

/* Loading states */
.loading {
   position: relative;
   overflow: hidden;
}

.loading::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   animation: loading 1.5s infinite;
}

@keyframes loading {
   0% { left: -100%; }
   100% { left: 100%; }
}

/* Focus states for accessibility */
.nav-link:focus,
.btn-primary:focus,
.footer-link:focus {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .brand-text {
      background: none;
      -webkit-text-fill-color: #000000;
      color: #000000;
   }
   
   .btn-primary {
      background: #000000;
      color: #ffffff;
   }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

/* Print styles */
@media print {
   .modern-header,
   .modern-footer {
      display: none;
   }
}

/* Logo visibility fixes - ensure logo is always visible */
.brand-logo {
   background: linear-gradient(135deg, #2563eb 0%, #9333ea 100%) !important;
   border-radius: 0.5rem !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 2rem !important;
   height: 2rem !important;
}

.brand-logo svg {
   color: white !important;
   width: 1.25rem !important;
   height: 1.25rem !important;
}

.brand-text {
   background: linear-gradient(135deg, #2563eb 0%, #9333ea 100%) !important;
   -webkit-background-clip: text !important;
   background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   color: transparent !important;
   font-size: 1.25rem !important;
   font-weight: 700 !important;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
   .brand-text {
      background: none !important;
      color: #2563eb !important;
      -webkit-text-fill-color: #2563eb !important;
   }
}