/* Header Style Classes for Design Settings */

/* Modern Gradient Header */
.header-modern-gradient {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    color: white;
}

/* Dark Theme Header */
.header-dark-theme {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    color: white;
}

/* Minimal Center Header */
.header-minimal-center {
    background: #F8FAFC;
    color: #1F2937;
    border-bottom: 1px solid #E5E7EB;
}

.header-minimal-center .container {
    text-align: center;
}

/* Colorful Gradient Header */
.header-colorful-gradient {
    background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 50%, #45B7D1 100%);
    color: white;
}

/* Professional Header */
.header-professional {
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: white;
    border-bottom: 3px solid #3498DB;
}

/* Neon Glow Header */
.header-neon-glow {
    background: linear-gradient(135deg, #0F0F23 0%, #1A1A2E 100%);
    color: #00FFFF;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    border-bottom: 2px solid #00FFFF;
}

.header-neon-glow .site-name,
.header-neon-glow .nav-link {
    text-shadow: 0 0 10px currentColor;
}

/* Ocean Wave Header */
.header-ocean-wave {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.header-ocean-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="rgba(255,255,255,0.1)"/></svg>') no-repeat center bottom;
    background-size: cover;
    z-index: 1;
}

.header-ocean-wave > * {
    position: relative;
    z-index: 2;
}

/* Sunset Header */
.header-sunset {
    background: linear-gradient(135deg, #FF9A8B 0%, #A8E6CF 50%, #FFD3A5 100%);
    color: #2C3E50;
}

/* Forest Header */
.header-forest {
    background: linear-gradient(135deg, #134E5E 0%, #71B280 100%);
    color: white;
}

/* Custom Header - will be styled dynamically via JavaScript */
.header-custom {
    /* Background and color will be set via inline styles */
}

/* Icon Style Classes */
.icon-default {
    stroke-width: 2;
    fill: none;
}

.icon-rounded {
    stroke-width: 0;
    fill: currentColor;
}

.icon-outline {
    stroke-width: 1;
    fill: none;
}

.icon-bold {
    stroke-width: 3;
    fill: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-minimal-center .container {
        text-align: left;
    }
    
    .header-neon-glow {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    }
    
    .header-ocean-wave::before {
        background-size: 200% 100%;
    }
}

/* Animation effects for interactive elements */
.header-neon-glow .nav-link:hover {
    text-shadow: 0 0 15px currentColor;
    transition: text-shadow 0.3s ease;
}

.header-colorful-gradient .nav-link:hover,
.header-ocean-wave .nav-link:hover,
.header-sunset .nav-link:hover,
.header-forest .nav-link:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.header-professional .nav-link:hover {
    color: #3498DB;
    transition: color 0.3s ease;
}

/* Ensure proper contrast for all header styles */
.header-modern-gradient a,
.header-dark-theme a,
.header-colorful-gradient a,
.header-professional a,
.header-neon-glow a,
.header-ocean-wave a,
.header-forest a,
.header-custom a {
    color: inherit;
}

.header-minimal-center a,
.header-sunset a {
    color: #2C3E50;
}

/* Button styles for different header themes */
.header-neon-glow .btn-primary {
    background: transparent;
    border: 2px solid #00FFFF;
    color: #00FFFF;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.header-neon-glow .btn-primary:hover {
    background: #00FFFF;
    color: #0F0F23;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.header-professional .btn-primary {
    background: #3498DB;
    border-color: #3498DB;
}

.header-professional .btn-primary:hover {
    background: #2980B9;
    border-color: #2980B9;
}