/* =========================================
   NAVIGATION (Glassmorphism Pill v2)
   ========================================= */

.navbar-glass {
    position: fixed;
    top: 20px;
    left: 0 !important;
    right: 0 !important;
    transform: none !important; /* Remove the -50% translate */
    margin: 0 auto; /* This centers the max-width: 880px pill */    
    
    width: calc(100% - 40px) !important; /* 20px margin on each side */
    max-width: 880px;
    height: 68px; /* UPDATED: Taller overall height */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px; /* Increased padding for the bigger logos */
    
    /* Premium Glassmorphism (Mimicking Figma specs) */
    background: rgba(0, 0, 0, 0.25); /* More transparent to show blur */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Shape & Edge Lighting */
    border-radius: 60px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* The top glass highlight */
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5); /* Deep shadow to pop off page */
    
    z-index: 1000;
    /* Spring-like transition for the smart scroll reveal */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

/* --- The Smart Scroll Class --- */
/* JS will add this class when scrolling down */
.navbar-glass.nav-hidden {
    transform: translateY(-150px) !important; /* Moves it perfectly out of frame */
}

/* nav.css */

.nav-ai {
    /* Keep your existing fixed/absolute positioning */
    position: fixed; /* Or absolute, whichever we used for the floating effect */
    z-index: 9999;   /* Higher than the navbar-glass */
    cursor: pointer !important;
    pointer-events: auto !important; /* Forces it to receive clicks */
    transition: transform 0.4s ease-in-out, opacity 0.3s ease;
    will-change: transform;
}

/* When the 'hidden' class is active, slide it off-screen too */
.nav-ai.nav-hidden {
    transform: translateY(-150%); /* Matches the navbar's exit path */
    opacity: 0;
}

/* --- Logos --- */
.nav-logo, .nav-ai {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.nav-logo img, .nav-ai img {
    height: 40px; /* UPDATED: Bigger logos */
    width: auto;
}

/* --- Center Links & Typography --- */
.nav-links-center {
    /* THE CENTERING ENGINE: Now independent of other items */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.nav-links-center a {
    /* Using Geist Mono */
    font-family: 'Geist Mono', monospace;
    font-size: 14px;
    font-weight: 400; /* Regular weight for inactive */
    letter-spacing: 0.05em;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.nav-links-center a:hover {
    color: #A3A3A3;
}

.nav-links-center a.active {
    font-weight: 600; /* Semibold weight for active */
    color: #605AFF;   /* The specific purple/blue requested */
}

/* --- 1. DESKTOP FOUNDATION (Root Level) --- */

/* This button MUST be dead on desktop */
.nav-hamburger {
    display: none !important; /* Forces it to be invisible on large screens */
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Ensure bars are blocks, but hidden by the parent above */
.nav-hamburger .bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #FFFFFF;
}

/* --- 1. GLOBAL OVERLAY HIDE (Desktop) --- */
/* This ensures the mobile links are 100% invisible on desktop */
.nav-menu-overlay {
    display: none; /* Removed from layout entirely on desktop */
    pointer-events: none; /* Only allow clicks when active */
}

.nav-menu-overlay.is-active{
    pointer-events: auto !important; /* This allows the links to be clickable! */
}


/* ===============================================
   ------ SIDEBAR ACTIVE: GLOBAL NAV SYNC (including sri-AI icon -----
   =============================================== */

/* 1. Re-center the main glass pill */
body.sidebar-active .navbar-glass {
    /* Shifts the nav left to the center of the remaining space */
    transform: translateX(-190px) !important; 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Fix the AI icon positioning */
body.sidebar-active .nav-ai {
/* Combined Transform: 
       1. translateX: Moves it left to stay inside the pill curve.
       2. translateY: Nudges it up/down to stay on the 'Yellow Line'.
    */
    transform: translateX(-235px) translateY(-50%) !important; 
    
    /* Ensure the transition handles both axes smoothly */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- THE SMART SCROLL + SIDEBAR SYNC --- */

/* When the bar should be HIDDEN while the SIDEBAR is OPEN */
body.sidebar-active .navbar-glass.nav-hidden {
    /* We must combine BOTH the horizontal shift and the vertical hide */
    transform: translateX(-190px) translateY(-150px) !important; 
}

/* Do the same for the AI icon so it disappears too */
body.sidebar-active .nav-ai.nav-hidden {
    transform: translateX(-235px) translateY(-200%) !important; 
}


/* =========================================================
   ------ MOBILE RESPONSIVENESS AND OVERRIDES -----
   ========================================================= */

/* --- 2. MOBILE OVERRIDE (Inside your existing @media query) --- 
@media screen and (max-width: 768px) {
        .nav-menu-overlay {
    /*  display: block; /* Revives it for mobile */
    /*  position: fixed;
    /* ... keep all your other existing overlay code here ... 
    } 
}*/



/* --- MOBILE SIDEBAR OVERRIDES (768px and below) --- */
@media (max-width: 768px) {
    /* 1. Hide the Navbar completely when AI is active */
    body.sidebar-active .navbar-glass {
        transform: translateY(-150px) !important; /* Slide it up off-screen */
        opacity: 0;
        pointer-events: none;
    }

    /* 2. Hide the Floating AI CTA to clear the Send button */
    body.sidebar-active .nav-ai {
        transform: scale(0) !important; /* Shrink it to nothing */
        opacity: 0;
        pointer-events: none;
        transition: transform 0.4s ease, opacity 0.3s ease;
    }
}

.nav-ai {
    position: fixed;
    /* 1. VERTICAL CENTERING: 
       Pill top (20px) + (Pill height (68px) / 2) = 54px */
    top: 54px; 
    
    /* 2. HORIZONTAL ALIGNMENT: 
       Pill right edge (50% + 440px half-width) minus the padding (32px) */
    left: calc(50% + 440px - 32px);
    
    /* 3. CENTERING ENGINE: 
       -100% X shifts the icon to the left of the anchor point
       -50% Y centers it vertically on the 54px line */
    transform: translate(-100%, -50%);
    
    width: auto;
    height: 40px; /* Matches logo height */
    z-index: 2000;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Ensure nav-ai doesn't float off-screen on small laptops */
@media screen and (max-width: 920px) {
    .nav-ai {
        left: auto;
        right: 40px;
        transform: none;
    }
}


/* --- 2. MOBILE PILL ARCHITECTURE (768px and below) --- */
@media screen and (max-width: 768px) {

    /* HIDE the desktop text links */
    .nav-links-center {
        display: none !important;
    }

    /* THE FLOATING PILL: Centered and Floating */
    .navbar-glass {
        /* WE KILL THE TRANSFORM: This allows the AI Icon child to float to the bottom */
        transform: none !important; 
        
        /* NEW CENTERING: 20px margins on both sides */
        left: 20px !important;
        right: 20px !important;
        width: auto !important; /* Forces the pill to be defined by left/right margins */
        
        top: 20px !important;
        height: 64px !important;
        border-radius: 100px !important;
        padding: 0 20px !important;
        
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* REVIVE THE HAMBURGER: Only for the pill */
    .nav-hamburger {
        display: flex !important; /* Overrides the 'none' foundation */
        visibility: visible !important;
        width: 44px !important;
        height: 44px !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
    }

    /* TELEPORT THE AI CTA: Floating Fixed */
    .nav-ai {
        /* 1. DE-COUPLING FROM HEADER */
        position: fixed !important;
        bottom: 24px !important; /* Floating above the screen bottom */
        right: 24px !important;
        top: auto !important; /* Kills the desktop 'top: 0' anchor */
        /* 2. THE TRANSFORM RESET */
        transform: none !important; /* Kills the desktop 'translate(-100%, -50%)' */
        
        /* 2. DIMENSIONS & FLEX */
        width: 72px !important;
        height: 72px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        opacity: 1 !important;
        visibility: visible !important;

        /* 3. VISUALS (From Figma Style Panel) */
        background-color: #000000 !important;
        border: 1.1px solid #1B1B1B !important; /* The specific dark border */
        border-radius: 55px !important; /* Makes it a perfect circle (55.172px) */
        
        /* 4. THE DEPTH (Box Shadow) */
        box-shadow: 0 6.621px 19.863px 0 rgba(0, 0, 0, 0.70) !important;
        
        /* 5. STACKING */
        z-index: 100001 !important; /* Sits above all other sections */
        text-decoration: none;
        transition: transform 0.2s ease-in-out;
    }

    /* Scaling the inner icon to match the 31.5px frame */
    .nav-ai img {
        width: 32px !important; 
        height: auto;
    }

    /* Subtle interaction for a premium feel */
    .nav-ai:active {
        transform: scale(0.92);
    }

     /* --- THE MOBILE MENU OVERLAY --- */
    .nav-menu-overlay {
        display: flex !important; /* <--- ADD THIS LINE TO OVERRIDE LINE 130 */
        flex-direction: column;
        position: fixed;
        top: -100%; /* Hidden off-screen by default */
        left: 0;
        width: 100%;
        height: auto;
        background: #000000;
        
        /* Figma Visuals: Bottom border and deep shadow */
        border-bottom: 1px solid #242424;
        box-shadow: 0 18px 18px 0 rgba(15, 15, 15, 0.70);
        
        padding: 100px 40px 40px 40px; /* Extra top space so it sits under the pill logo */
        z-index: 998; /* Sits just behind the pill's layer */
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        pointer-events: none; /* Allows you to click/scroll "through" the black wall */
        visibility: hidden;   /* Fully hides it from the browser's view */
}

/* When active, slide it into view */
    .nav-menu-overlay.is-active {
    top: 0;
    opacity: 1;
    visibility: visible !important;   /* Wakes it up from 'hidden' */
    pointer-events: auto !important;  /* Allows you to click the links */
}

/* --- THE MENU LINKS --- */
    .menu-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0 !important;
}

    .menu-links a {
    font-family: 'Geist Mono', monospace;
    font-size: 24px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 0.05em;
    padding: 24px 0; /* Vertical spacing around the text */
    border-bottom: 1px solid #242424; /* The sleek divider line */
    transition: all 0.3s ease;
    display: block;
    width: 100%;
}

/* Remove divider from the last link */
.menu-links a:last-child {
    border-bottom: none;
}

    .menu-links a.active {
    color: #605AFF; /* Your signature brand color */
}         

.menu-links a:hover {
    padding-left: 8px; /* Subtle feedback */
    color: #A3A3A3;
}

/* HAMBURGER TO "X" TRANSFORMATION */
.nav-hamburger.is-active .bar:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.nav-hamburger.is-active .bar:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

/* Optional: Smooth transition for the bars */
.nav-hamburger .bar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

/* --- MOBILE SMART SCROLL REFINEMENT --- */

/* 1. OVERRIDE THE HIDDEN STATE FOR MOBILE */
.navbar-glass.nav-hidden {
    /* We use translateY only, keeping the 'none' for horizontal */
    transform: translateY(-150px) !important; 
    
    /* Ensure it remains centered via the left/right 20px logic */
    left: 20px !important;
    right: 20px !important;
}

/* 2. ENSURE SMOOTH TRANSITION */
.navbar-glass {
    /* Matches your desktop spring-like feel */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.3s ease,
                top 0.5s ease;
}

/* Hide the AI CTA downward for a cleaner mobile exit */
    .nav-ai.nav-hidden {
        transform: translateY(150%) !important; /* Changed from -150% to go DOWN */
        opacity: 0;
        pointer-events: none;
    }
}