/**
 * Universal Navigation Styles for W33Keys
 * Ensures consistent navigation styling across all pages
 */

/* Base navigation widget styles */
.w33keys-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

/* Ensure hero sections have proper spacing after navigation */
.hero-section, 
section:first-of-type {
    padding-top: 80px !important;
}

/* Adjust main content for sticky navigation */
main {
    padding-top: 0 !important;
}

/* Platform-specific page adjustments */
body.pc-page main,
body.xbox-page main,
body.ps-page main,
body.switch-page main {
    padding-top: 20px !important;
}

/* Legal pages adjustments */
body.privacy-page main,
body.terms-page main,
body.about-page main,
body.contact-page main {
    padding-top: 80px !important;
}

/* Download page specific adjustments */
body.download-page main {
    padding-top: 0 !important;
}

/* Ensure proper scroll offset for anchor links */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* ZAP-Hosting Navigation Enhancement */
.dropdown-item[data-page="zap-hosting"],
.mobile-nav-sublink[data-page="zap-hosting"] {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(220, 38, 38, 0.1)) !important;
    border-left: 3px solid #ea580c !important;
    position: relative;
    overflow: hidden;
}

.dropdown-item[data-page="zap-hosting"]:hover,
.mobile-nav-sublink[data-page="zap-hosting"]:hover {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.2), rgba(220, 38, 38, 0.2)) !important;
    transform: translateX(5px) !important;
}

.dropdown-item[data-page="zap-hosting"]::before,
.mobile-nav-sublink[data-page="zap-hosting"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.dropdown-item[data-page="zap-hosting"]:hover::before,
.mobile-nav-sublink[data-page="zap-hosting"]:hover::before {
    left: 100%;
}

/* ZAP-Hosting Icon Enhancement */
.dropdown-item[data-page="zap-hosting"] i,
.mobile-nav-sublink[data-page="zap-hosting"] i {
    text-shadow: 0 0 8px rgba(234, 88, 12, 0.5);
    animation: zapGlow 2s ease-in-out infinite alternate;
}

@keyframes zapGlow {
    from {
        text-shadow: 0 0 8px rgba(234, 88, 12, 0.5);
    }
    to {
        text-shadow: 0 0 12px rgba(234, 88, 12, 0.8), 0 0 16px rgba(220, 38, 38, 0.4);
    }
}

/* Active state for ZAP-Hosting */
.dropdown-item[data-page="zap-hosting"].active,
.mobile-nav-sublink[data-page="zap-hosting"].active {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.3), rgba(220, 38, 38, 0.3)) !important;
    border-left-width: 4px !important;
    box-shadow: inset 0 0 10px rgba(234, 88, 12, 0.2);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hero-section, 
    section:first-of-type {
        padding-top: 70px !important;
    }
    
    html {
        scroll-padding-top: 70px;
    }
}

/* Navigation widget color theme adjustments for different pages */
body.pc-page .nav-link.active {
    color: #3b82f6 !important;
}

body.xbox-page .nav-link.active {
    color: #22c55e !important;
}

body.ps-page .nav-link.active {
    color: #3b82f6 !important;
}

body.switch-page .nav-link.active {
    color: #ef4444 !important;
}

/* Ensure proper visibility of navigation elements */
.nav-link {
    transition: all 0.3s ease !important;
}

.dropdown-menu {
    z-index: 60 !important;
}

/* Fix for any layout issues caused by removing old navigation */
.container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Admin Login Button specific styling */
.admin-btn, .admin-btn-mobile {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.3s ease !important;
}

.admin-btn:hover, .admin-btn-mobile:hover {
    background: linear-gradient(135deg, #5b21b6, #7c3aed) !important;
    box-shadow: 0 6px 12px -2px rgba(139, 92, 246, 0.4) !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

/* Ensure admin button doesn't conflict with nav-link styles */
.nav-link.admin-btn {
    margin-left: 1rem !important;
    padding: 0.5rem 1rem !important;
}

/* Hidden admin buttons - ensure they're completely hidden by default */
#hidden-admin-btn,
#hidden-admin-btn-mobile {
    display: none;
}

/* When made visible, ensure proper display with higher specificity */
#hidden-admin-btn[style*="inline-flex"],
#hidden-admin-btn.show-admin {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#hidden-admin-btn-mobile[style*="block"],
#hidden-admin-btn-mobile.show-admin {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}