/* ==================================
   NAVIGATION STYLES - PRODUCTION FIX V2
   Version: 2.0
   Purpose: Fix desktop navigation and logo issues
   ================================== */

/* ==================================
   MINIMIZED DESKTOP (769px-1024px)
   Fix: Navigation links must be visible and clickable
   ================================== */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* Force navigation links to show */
    .nav-links,
    ul.nav-links {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        transform: none !important;
        flex-direction: row !important;
        gap: 20px !important;
        background: transparent !important;
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        top: auto !important;
        right: auto !important;
    }

    /* Make links clickable */
    .nav-links > li,
    .nav-links .nav-item {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-links > li > a,
    .nav-links .nav-item > a {
        pointer-events: auto !important;
        cursor: pointer !important;
        display: block !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    /* Hide mobile menu button */
    .mobile-menu-toggle {
        display: none !important;
    }

    /* Ensure navigation container has proper layout */
    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
    }

    /* Logo adjustments */
    .logo-nav {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .logo-dots-nav {
        width: 35px !important;
        height: 35px !important;
        position: relative !important;
        display: block !important;
    }

    .logo-text-nav {
        font-size: 1.2em !important;
        display: inline-block !important;
    }
}

/* ==================================
   FULLSCREEN DESKTOP (1025px and above)
   Fix: Logo visibility and nav-hero gap
   ================================== */
@media only screen and (min-width: 1025px) {

    /* Ensure navigation is visible */
    nav,
    nav#navbar,
    #navbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }

    /* Force navigation links visible */
    .nav-links {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        transform: none !important;
    }

    /* Hide mobile menu */
    .mobile-menu-toggle {
        display: none !important;
    }

    /* Fix logo on home page - remove body class selector since it might not exist */
    .logo-nav {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Logo dots container */
    .logo-dots-nav {
        width: 40px !important;
        height: 40px !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* Individual dots - ensure they show */
    .logo-dots-nav div {
        position: absolute !important;
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Dot positions and colors */
    .logo-dots-nav div:nth-child(1) {
        top: 0 !important;
        left: 0 !important;
        background: #0066FF !important;
    }
    .logo-dots-nav div:nth-child(2) {
        top: 0 !important;
        left: 10px !important;
        background: #0066FF !important;
    }
    .logo-dots-nav div:nth-child(3) {
        top: 0 !important;
        left: 20px !important;
        background: #00B4D8 !important;
    }
    .logo-dots-nav div:nth-child(4) {
        top: 0 !important;
        left: 30px !important;
        background: #00B4D8 !important;
    }
    .logo-dots-nav div:nth-child(5) {
        top: 10px !important;
        left: 25px !important;
        background: #FFB700 !important;
    }
    .logo-dots-nav div:nth-child(6) {
        top: 20px !important;
        left: 15px !important;
        background: #FF6B35 !important;
    }
    .logo-dots-nav div:nth-child(7) {
        top: 30px !important;
        left: 10px !important;
        background: #FF69B4 !important;
    }

    /* Logo text styling - fix formatting */
    .logo-text-nav {
        font-size: 1.5em !important;
        font-weight: 300 !important;
        letter-spacing: -1px !important;
        background: linear-gradient(135deg, #1B3A61 0%, #0066FF 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Fix gap between navigation and hero section */
    .hero,
    #home,
    section.hero,
    #home.hero {
        margin-top: 80px !important; /* Standard spacing for fixed nav */
        padding-top: 40px !important; /* Internal padding */
    }

    /* Remove any borders or extra spacing */
    nav#navbar {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    /* Specific fix for home page if body has class */
    body.home .logo-nav,
    body[data-page="index"] .logo-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.home .logo-dots-nav,
    body[data-page="index"] .logo-dots-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.home .logo-text-nav,
    body[data-page="index"] .logo-text-nav {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: linear-gradient(135deg, #1B3A61 0%, #0066FF 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* ==================================
   DESKTOP CAPABILITY DETECTION
   For all desktop devices regardless of size
   ================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {

    /* Ensure desktop navigation */
    .nav-links {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    /* Logo visibility */
    .logo-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ==================================
   EMERGENCY OVERRIDES
   Maximum specificity for stubborn conflicts
   ================================== */
@media only screen and (min-width: 769px) {

    /* Force desktop navigation with maximum specificity */
    html body nav#navbar ul.nav-links,
    html body nav ul.nav-links,
    html body #navbar ul.nav-links {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force logo visibility with maximum specificity */
    html body nav#navbar .logo-nav,
    html body nav .logo-nav,
    html body #navbar .logo-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force hide mobile menu toggle */
    html body .mobile-menu-toggle {
        display: none !important;
    }
}