/* ========================= */
/* NAVBAR  —  COOK WITH SINGH (light theme) */
/* colors theme.css ke tokens se aate hain */
/* ========================= */

/* NAVBAR */
.cs-navbar{
    overflow:visible;
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);

    width:calc(100% - 60px);
    max-width:1450px;
    height:72px;
    padding:0 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(251,252,245,0.72);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid var(--line);
    border-radius:26px;

    z-index:99999;
    box-shadow:var(--shadow-soft);

    transition:transform .4s ease, background .4s ease;
}

/* ========================= */
/* LEFT */
/* ========================= */
.cs-left{
    display:flex;
    align-items:center;
    gap:18px;
    z-index:2;
}

/* IMAGE LOGO */
.cs-logo-image-wrap{
    position:relative;
    width:48px;
    height:48px;
    box-shadow:0 0 18px rgba(251,175,71,0.18);
    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg, var(--green-100), var(--surface));
    border:1px solid var(--line);
    overflow:hidden;
    transition:0.5s ease;
}
.cs-logo-image-wrap:hover{
    transform:translateY(-4px) rotate(-2deg);
}

/* GLOW */
.logo-glow{
    position:absolute;
    width:100%;
    height:100%;
    background:radial-gradient(circle, rgba(251,175,71,0.45), transparent 70%);
    animation:pulseGlow 3s ease-in-out infinite;
}

/* IMG */
.cs-logo-img{
    width:85%;
    height:85%;
    object-fit:cover;
    border-radius:16px;
    position:relative;
    z-index:2;
}

/* ========================= */
/* TEXT LOGO */
/* ========================= */
.cs-logo-text{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    line-height:1;
    position:relative;
}

.text-line{
    font-family:var(--font-head);
    font-weight:700;
    font-size:0.78rem;
    letter-spacing:2px;
    color:var(--green-900);
    position:relative;
    overflow:hidden;
}

.text-line::before{
    content:'';
    position:absolute;
    left:-120%;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(46,74,35,0.15), transparent);
    animation:textShine 5s linear infinite;
}

.text-line.shades{
    color:var(--amber);
    margin-top:4px;
}

/* ========================= */
/* NAV LINKS  (center + spaced) */
/* ========================= */
.cs-nav-links{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);

    display:flex;
    align-items:center;
    gap:34px;

    z-index:9999;
}

.nav-link{
    position:relative;
    text-decoration:none;
    color:var(--muted);
    font-family:var(--font-body);
    font-weight:600;
    padding:10px 6px;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:1.5px;
    border-radius:12px;
    transition:0.4s ease;
    overflow:hidden;
}

.nav-link span{
    position:relative;
    z-index:2;
}

.nav-link::before{
    content:'';
    position:absolute;
    inset:-2px -10px;
    background:var(--green-100);
    border-radius:12px;
    opacity:0;
    transition:0.4s ease;
}

.nav-link:hover::before{
    opacity:0;
}

.nav-link:hover{
    color:var(--green-900);
    transform:translateY(-2px);
}

.nav-link::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:2px;
    width:0%;
    height:2px;
    background:var(--amber);
    border-radius:10px;
    transition:0.4s ease;
    transform:translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after{
    width:60%;
}

/* ========================= */
/* CONNECT BUTTON */
/* ========================= */
.connect-btn{
    position:relative;
    height:44px;
    padding:0 18px 0 10px;
    border-radius:999px;

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
    overflow:hidden;

    background:linear-gradient(135deg, var(--amber), var(--amber-deep));
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:0 10px 26px -10px rgba(251,175,71,0.7);
    transition:0.35s ease;

    z-index:2;
}

.connect-btn:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 14px 34px -10px rgba(251,175,71,0.85);
}

/* AVATAR */
.connect-avatar{
    position:relative;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.4);
    backdrop-filter:blur(8px);
    overflow:hidden;
}

/* RING */
.avatar-ring{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.7);
    animation:avatarPulse 2s ease-in-out infinite;
}

/* ICON */
.connect-avatar i{
    position:relative;
    z-index:2;
    font-size:12px;
    color:#2E4A23;
    animation:iconFloat 2.5s ease-in-out infinite;
}

/* TEXT */
.btn-text{
    position:relative;
    z-index:2;
    color:#2E4A23;
    font-size:0.82rem;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-family:var(--font-body);
}

/* SHINE */
.btn-shine{
    position:absolute;
    top:-30px;
    left:-60px;
    width:40px;
    height:120px;
    background:rgba(255,255,255,0.45);
    transform:rotate(25deg);
    filter:blur(10px);
    animation:shineMove 4s linear infinite;
}

@keyframes shineMove{
    0%{ left:-80px; }
    100%{ left:220%; }
}

@keyframes avatarPulse{
    0%,100%{ transform:scale(1); opacity:0.7; }
    50%{ transform:scale(1.3); opacity:0; }
}

@keyframes iconFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-2px); }
}

/* ========================= */
/* RIGHT */
/* ========================= */
.cs-right{
    display:flex;
    align-items:center;
    gap:12px;
    z-index:2;
}

/* ========================= */
/* MENU TOGGLE */
/* ========================= */
.menu-toggle{
    display:none;
    width:54px;
    height:54px;
    border:none;
    outline:none;
    background:var(--green-100);
    border:1px solid var(--line);
    border-radius:16px;
    cursor:pointer;
    position:relative;
    transition:0.4s ease;
    z-index:999999;
}

.menu-toggle span{
    position:absolute;
    left:50%;
    width:24px;
    height:2px;
    background:var(--green-900);
    border-radius:20px;
    transition:0.4s ease;
}

.menu-toggle span:nth-child(1){ transform:translate(-50%, -8px); }
.menu-toggle span:nth-child(2){ transform:translate(-50%, 0); }
.menu-toggle span:nth-child(3){ transform:translate(-50%, 8px); }

/* ACTIVE */
.menu-toggle.active span:nth-child(1){ transform:translate(-50%, 0) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:translate(-50%, 0) rotate(-45deg); }

/* ========================= */
/* MOBILE CONNECT */
/* ========================= */
.mobile-connect-btn{
    display:none;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */
@media(max-width:1100px){

    .cs-nav-links{
        position:fixed;
        top:110px;
        left:50%;
        transform:translateX(-50%) translateY(-40px);
        width:calc(100% - 40px);
        padding:24px;
        border-radius:28px;
        background:rgba(251,252,245,0.97);
        backdrop-filter:blur(18px);
        border:1px solid var(--line);
        box-shadow:var(--shadow);
        flex-direction:column;
        gap:14px;
        opacity:0;
        visibility:hidden;
        transition:0.45s ease;
        display:flex !important;
        z-index:99999;
    }

    .cs-nav-links.active{
        opacity:1;
        visibility:visible;
        transform:translateX(-50%) translateY(0);
    }

    .nav-link{
        width:100%;
        text-align:center;
        padding:18px;
        border-radius:18px;
    }

    .nav-link::before{
        inset:0;
        border-radius:18px;
    }

    .connect-btn{ display:none; }
    .menu-toggle{ display:block; }

    .mobile-connect-btn{
        display:flex;
        width:100%;
        height:58px;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        background:linear-gradient(135deg, var(--amber), var(--amber-deep));
        border-radius:18px;
        color:#2E4A23;
        font-weight:800;
        letter-spacing:1.2px;
        text-transform:uppercase;
        margin-top:8px;
    }
}

@media(max-width:700px){

    .cs-navbar{
        width:calc(100% - 20px);
        padding:0 16px;
        height:80px;
        top:10px;
    }

    .cs-logo-image-wrap{
        width:54px;
        height:54px;
    }

    .text-line{
        font-size:0.8rem;
        letter-spacing:1.5px;
    }
}

/* ========================= */
/* ANIMATIONS */
/* ========================= */
@keyframes pulseGlow{
    0%,100%{ opacity:0.4; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.2); }
}

@keyframes textShine{
    0%{ left:-120%; }
    100%{ left:120%; }
}

/* ACTIVE LINK */
.nav-link.active{
    color:var(--green-900);
}
.nav-link.active::before{
    opacity:0;
}