/**
 * Modern Header Design
 * Premium header styling for desktop and mobile
 * Version: 2.0
 */

:root {
    --header-height: 72px;
    --header-bg: rgba(255, 255, 255, 0.98);
    --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --header-border: rgba(0, 0, 0, 0.05);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Blue Gradient Theme Colors (matching mobile) */
    --header-blue-primary: #3ACBE8;
    --header-blue-secondary: #1E88E5;
    --header-blue-accent: #0041C7;
    --header-blue-dark: #002B8C;
    --header-blue-light: #7DD3F0;
}

/* ===================================
   DESKTOP HEADER - MODERN & PREMIUM
   =================================== */
@media (min-width: 769px) {
    header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--header-height) !important;
        background: linear-gradient(135deg,
            var(--header-blue-secondary) 0%,
            var(--header-blue-accent) 50%,
            var(--header-blue-dark) 100%) !important;
        background-size: 200% 200% !important;
        animation: gradientShift 8s ease infinite !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 6px 24px rgba(0, 65, 199, 0.4) !important;
        z-index: 1000 !important;
        transition: all 0.3s var(--transition-smooth) !important;
    }

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

    /* Scrolled state - darker gradient with continued animation */
    header.scrolled {
        background: linear-gradient(135deg,
            var(--header-blue-secondary) 0%,
            var(--header-blue-accent) 50%,
            var(--header-blue-dark) 100%) !important;
        background-size: 200% 200% !important;
        animation: gradientShift 8s ease infinite !important;
        box-shadow: 0 6px 24px rgba(0, 65, 199, 0.4) !important;
    }

    /* Header Container - Premium Layout */
    header .header-container {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 2rem !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 2rem !important;
    }

    /* Logo - Premium Design */
    header .logo {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 1.35rem !important;
        color: white !important;
        transition: all 0.3s var(--transition-smooth) !important;
        padding: 0.5rem 1rem !important;
        border-radius: 12px !important;
        position: relative !important;
        overflow: hidden !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    /* Logo hover effect - subtle white gradient */
    header .logo::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
        transition: left 0.5s ease !important;
    }

    header .logo:hover::before {
        left: 100% !important;
    }

    header .logo:hover {
        transform: translateY(-2px) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    header .logo .material-icons {
        font-size: 2rem !important;
        color: white !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
        transition: all 0.3s var(--transition-smooth) !important;
    }

    header .logo:hover .material-icons {
        transform: scale(1.1) rotate(5deg) !important;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) !important;
    }

    /* Navigation - Modern Menu */
    header nav {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    header nav > ul {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* First UL - main menu (centered) */
    header nav > ul:first-child {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Second UL - user menu (right aligned) */
    header nav > ul:last-child {
        margin-left: auto !important;
    }

    header nav ul li {
        position: relative !important;
    }

    /* Navigation Links - Premium Buttons */
    header nav ul li a {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.75rem 1.25rem !important;
        color: white !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
        transition: all 0.3s var(--transition-smooth) !important;
        position: relative !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    /* Hover effect - white gradient background */
    header nav ul li a::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 10px !important;
        opacity: 0 !important;
        transition: opacity 0.3s var(--transition-smooth) !important;
    }

    header nav ul li a:hover::before {
        opacity: 1 !important;
    }

    header nav ul li a:hover {
        color: white !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    header nav ul li a .material-icons {
        font-size: 18px !important;
        color: white !important;
        transition: transform 0.3s var(--transition-smooth) !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
    }

    header nav ul li a:hover .material-icons {
        transform: scale(1.15) !important;
    }

    /* Active link indicator */
    header nav ul li a.active {
        color: white !important;
        background: rgba(255, 255, 255, 0.2) !important;
        font-weight: 600 !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }

    header nav ul li a.active::after {
        content: '' !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 50% !important;
        height: 3px !important;
        background: white !important;
        border-radius: 2px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }

    /* User Menu Button - White Glass Effect */
    header .user-menu button#userMenuBtn {
        background: rgba(255, 255, 255, 0.25) !important;
        color: white !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: all 0.3s var(--transition-smooth) !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    header .user-menu button#userMenuBtn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
        background: rgba(255, 255, 255, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }

    header .user-menu button#userMenuBtn:active {
        transform: scale(0.98) !important;
    }

    header .user-menu button#userMenuBtn .material-icons {
        color: white !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
    }

    /* Login Button - White Glass CTA */
    header nav ul li button.btn-primary {
        background: rgba(255, 255, 255, 0.25) !important;
        color: white !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
        padding: 0.75rem 1.75rem !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: all 0.3s var(--transition-smooth) !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    header nav ul li button.btn-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
        background: rgba(255, 255, 255, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }

    header nav ul li button.btn-primary .material-icons {
        font-size: 18px !important;
        color: white !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
    }

    /* User Menu Container */
    header .user-menu {
        position: relative !important;
    }

    /* User Dropdown - Premium Card */
    header #userDropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        background: white !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding: 0.5rem !important;
        min-width: 240px !important;
        margin-top: 0.75rem !important;
        backdrop-filter: blur(20px) !important;
        z-index: 9999 !important;
    }

    /* Hidden state */
    header #userDropdown.hidden {
        display: none !important;
    }

    /* Animation for visible dropdown */
    header #userDropdown:not(.hidden) {
        display: block !important;
        animation: dropdownSlide 0.3s var(--transition-smooth) !important;
    }

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

    header #userDropdown a,
    header #userDropdown button {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
        color: #4a5568 !important;
        text-decoration: none !important;
        border-radius: 10px !important;
        transition: all 0.2s var(--transition-smooth) !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }

    header #userDropdown a:hover,
    header #userDropdown button:hover {
        background: linear-gradient(135deg, rgba(58, 203, 232, 0.1), rgba(30, 136, 229, 0.1)) !important;
        color: #1E88E5 !important;
        transform: translateX(4px) !important;
    }

    header #userDropdown a .material-icons,
    header #userDropdown button .material-icons {
        font-size: 20px !important;
        color: #3ACBE8 !important;
    }

    header #userDropdown button {
        border: none !important;
        background: transparent !important;
        cursor: pointer !important;
        width: 100% !important;
        text-align: left !important;
    }

    header #userDropdown button:hover {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1)) !important;
        color: #EF4444 !important;
    }

    header #userDropdown button .material-icons {
        color: #EF4444 !important;
    }

    header #userDropdown hr {
        margin: 0.5rem 0 !important;
        border: none !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent) !important;
    }

    /* Hide mobile elements on desktop */
    header .mobile-menu-trigger,
    header .mobile-login-trigger,
    header #mobile-menu-overlay,
    header #mobile-menu {
        display: none !important;
    }
}

/* ===================================
   SCROLL BEHAVIOR & ANIMATIONS
   =================================== */
@media (min-width: 769px) {
    /* Smooth scroll reveal */
    header {
        animation: headerSlideDown 0.5s var(--transition-smooth) !important;
    }

    @keyframes headerSlideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Add subtle glow on hover for interactive elements */
    header nav ul li a,
    header .user-menu button,
    header nav ul li button {
        position: relative !important;
    }

    header nav ul li a::after,
    header .user-menu button::after,
    header nav ul li button::after {
        content: '' !important;
        position: absolute !important;
        inset: -2px !important;
        border-radius: inherit !important;
        background: linear-gradient(135deg, #3ACBE8, #1E88E5) !important;
        opacity: 0 !important;
        z-index: -1 !important;
        filter: blur(8px) !important;
        transition: opacity 0.3s var(--transition-smooth) !important;
    }

    header nav ul li a:hover::after,
    header .user-menu button:hover::after,
    header nav ul li button:hover::after {
        opacity: 0.3 !important;
    }
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    header .header-container {
        padding: 0 1.5rem !important;
        gap: 1rem !important;
    }

    header nav ul {
        gap: 0.25rem !important;
    }

    header nav ul li a {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
    }

    header .logo {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 1400px) {
    header .header-container {
        max-width: 1600px !important;
        padding: 0 3rem !important;
    }

    header nav ul {
        gap: 1rem !important;
    }

    header nav ul li a {
        padding: 0.85rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */
@media (min-width: 769px) {
    /* Use GPU acceleration for smooth animations */
    header,
    header .logo,
    header nav ul li a,
    header .user-menu button,
    header nav ul li button {
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform: translateZ(0) !important;
    }
}

/* ===================================
   ACCESSIBILITY
   =================================== */
@media (min-width: 769px) {
    /* Focus styles for keyboard navigation */
    header a:focus-visible,
    header button:focus-visible {
        outline: 3px solid #3ACBE8 !important;
        outline-offset: 2px !important;
        border-radius: 12px !important;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        header,
        header *,
        header *::before,
        header *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}