/* ==========================================================
   STOP FRAILTY - NAVBAR
   Modern Glass Navigation
   Part 1 of 3
========================================================== */

/* ==============================
   ROOT VARIABLES
============================== */

:root {

    --nav-bg: rgba(20,22,28,.78);
    --nav-bg-solid: rgba(15,17,22,.96);

    --nav-border: rgba(255,255,255,.08);

    --nav-text: #ffffff;
    --nav-text-muted: rgba(255,255,255,.78);

    --nav-accent: #4CAF50;

    --nav-hover-bg: rgba(255,255,255,.06);

    --dropdown-bg: rgba(255,255,255,.98);
    --dropdown-text: #1d1d1f;

    --shadow-lg: 0 12px 40px rgba(0,0,0,.18);

    --radius: 16px;
    --radius-pill: 999px;

    --transition: .28s ease;
}

/* ==============================
   HEADER
============================== */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:2000;

    background:var(--nav-bg);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid var(--nav-border);

    transition:
        background .3s ease,
        box-shadow .3s ease;

}

.header::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,.06),
        transparent
    );

}

.header.scrolled{

    background:var(--nav-bg-solid);

    box-shadow:
        0 8px 30px rgba(0,0,0,.18);

}

/* ==============================
   NAVBAR
============================== */

.navbar{

    max-width:1550px;

    margin:auto;

    padding:16px 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

}

/* ==============================
   LOGO
============================== */

.logo{

    flex-shrink:0;

    min-width:145px;

    color:#fff;

    text-decoration:none;

    font-size:1.75rem;

    font-weight:800;

    line-height:1.05;

    letter-spacing:1.5px;

    transition:
        transform var(--transition),
        opacity var(--transition);

}

.logo:hover{

    opacity:.9;

    transform:translateY(-1px);

}

.header.scrolled .logo{

    transform:scale(.95);

}

/* ==============================
   NAV LINKS
============================== */

.nav-links{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.nav-links ul{

    display:flex;

    align-items:center;

    gap:clamp(18px,2vw,34px);

    list-style:none;

}

.nav-links li{

    position:relative;

}

.nav-links a{

    position:relative;

    display:flex;

    align-items:center;

    color:var(--nav-text-muted);

    text-decoration:none;

    font-size:clamp(.95rem,1vw,1.05rem);

    font-weight:600;

    letter-spacing:.3px;

    transition:
        color var(--transition),
        opacity var(--transition);

}

/* ==============================
   UNDERLINE
============================== */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--nav-accent);

    transition:width .28s ease;

}

.nav-links a:hover{

    color:#fff;

}

.nav-links a:hover::after{

    width:100%;

}

/* Active page */

.nav-links a.active{

    color:#fff;

}

.nav-links a.active::after{

    width:100%;

}

/* ==============================
   DROPDOWN
============================== */

.dropdown {
  position: relative;
}



.dropbtn{

    cursor:pointer;

}

.dropdown-content{

    position:absolute;

    left:50%;

    top:calc(100% + 12px);

    transform:
        translateX(-50%)
        translateY(10px);

    min-width:260px;

    padding:12px;

    border-radius:18px;

    background:var(--dropdown-bg);

    box-shadow:var(--shadow-lg);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index:999;

}

.dropdown-content.show{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);

}

@media(min-width:769px){

.dropdown:hover .dropdown-content{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);

}

}

.dropdown-content a{

    display:block;

    padding:14px 16px;

    border-radius:12px;

    color:var(--dropdown-text);

    font-size:.95rem;

    font-weight:600;

    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease;

}

.dropdown-content a:hover{

    background:rgba(76,175,80,.08);

    color:#1f7a38;

    transform:translateX(4px);

}




/* ==========================================================
   PART 2 OF 3
   USER PROFILE • BUTTONS • MOBILE MENU
========================================================== */

/* ==============================
   USER PROFILE
============================== */

.user-profile{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.welcome-text{

    color:#fff;

    font-size:.95rem;

    font-weight:500;

}

/* ==============================
   PROFILE IMAGE
============================== */

.profile-pic{

    width:44px;
    height:44px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.14);

    cursor:pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.profile-pic:hover{

    transform:scale(1.06);

    border-color:var(--nav-accent);

    box-shadow:
        0 0 0 4px rgba(76,175,80,.12),
        0 8px 20px rgba(0,0,0,.22);

}

/* ==============================
   BUTTONS
============================== */

.login-btn,
.logout-btn,
.signup-btn,
.upgrade-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:42px;

    padding:10px 18px;

    border-radius:999px;

    font-size:.92rem;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .2s ease,
        box-shadow .2s ease;

}

/* Login / Logout */

.login-btn,
.logout-btn{

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.06);

    color:#fff;

}

.login-btn:hover,
.logout-btn:hover{

    background:rgba(255,255,255,.14);

    border-color:rgba(255,255,255,.22);

    transform:translateY(-1px);

}

/* Sign Up */

.signup-btn{

    background:#5154db;

    color:#fff !important;

    border:none;

}

.signup-btn:hover{

    background:#3f41b3;

    transform:translateY(-1px);

}

/* Upgrade */

.upgrade-btn{

    background:#4CAF50;

    color:#fff !important;

    border:none;

}

.upgrade-btn:hover{

    background:#388E3C;

    transform:translateY(-1px);

}

/* ==============================
   ACCESSIBILITY
============================== */

a:focus-visible,
button:focus-visible{

    outline:3px solid var(--nav-accent);

    outline-offset:3px;

    border-radius:8px;

}

/* ==============================
   MOBILE ICONS
============================== */

.menuicon,
.closeicon{

    display:none;

    width:30px;
    height:30px;

    cursor:pointer;

    transition:
        transform .25s ease,
        opacity .25s ease;

}

.menuicon:hover,
.closeicon:hover{

    transform:scale(1.08);

    opacity:.9;

}

/* ==============================
   MOBILE OVERLAY
============================== */

.nav-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:9990;

}

.nav-overlay.show{

    opacity:1;

    visibility:visible;

}

/* Prevent scrolling */

body.menu-open{

    overflow:hidden;

}




/* ==========================================================
   PART 3 OF 3
   MOBILE RESPONSIVE + FINISHING TOUCHES
========================================================== */

/* ==============================
   MOBILE
============================== */

@media (max-width:768px){

    .navbar{

        padding:16px 20px;

    }

    /* Hamburger */

    .menuicon{

        display:block;

    }

    /* Off-canvas menu */

    .nav-links{

        position:fixed;

        top:0;
        right:0;

        width:82%;
        max-width:340px;

        height:100vh;

        padding:90px 28px 40px;

        background:rgba(15,17,22,.98);

        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        overflow-y:auto;

        transform:translateX(100%);

        transition:transform .35s ease;

        box-shadow:-10px 0 30px rgba(0,0,0,.25);

        z-index:9999;

    }

    .nav-links.show{

        transform:translateX(0);

    }

    /* Close icon */

    .closeicon{

        display:block;

        position:absolute;

        top:28px;
        right:24px;

    }

    /* Navigation list */

    .nav-links ul{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .nav-links li{

        width:100%;

        opacity:0;

        transform:translateX(20px);

        transition:
            opacity .3s ease,
            transform .3s ease;

    }

    .nav-links.show li{

        opacity:1;

        transform:translateX(0);

    }

    /* Stagger animation */

    .nav-links.show li:nth-child(1){transition-delay:.05s;}
    .nav-links.show li:nth-child(2){transition-delay:.10s;}
    .nav-links.show li:nth-child(3){transition-delay:.15s;}
    .nav-links.show li:nth-child(4){transition-delay:.20s;}
    .nav-links.show li:nth-child(5){transition-delay:.25s;}
    .nav-links.show li:nth-child(6){transition-delay:.30s;}

    /* Links */

    .nav-links a{

        width:100%;

        display:flex;

        align-items:center;

        padding:14px 16px;

        border-radius:12px;

        font-size:1rem;

    }

    .nav-links a:hover{

        background:var(--nav-hover-bg);

    }

    .nav-links a::after{

        display:none;

    }

    /* Mobile dropdown */

    .dropdown{

        width:100%;

        padding-bottom:0;

    }

    .dropdown-content{

        position:static;

        width:100%;

        min-width:100%;

        margin-top:8px;

        padding:8px;

        background:rgba(255,255,255,.05);

        border:1px solid rgba(255,255,255,.08);

        border-radius:14px;

        box-shadow:none;

        max-height:0;

        overflow:hidden;

        opacity:0;

        visibility:visible;

        transform:none;

        transition:
            max-height .35s ease,
            opacity .25s ease,
            padding .25s ease;

    }

    .dropdown.active .dropdown-content{

        display:flex;

        flex-direction:column;

        gap:6px;

        max-height:600px;

        opacity:1;

    }

    .dropdown-content a{

        color:#fff;

        font-size:.92rem;

    }

    .dropdown-content a:hover{

        background:rgba(255,255,255,.08);

        color:#fff;

        transform:none;

    }

    /* User profile */

    .user-profile{

        gap:8px;

        flex-wrap:wrap;

    }

    .welcome-text{

        display:none;

    }

    .profile-pic{

        width:40px;
        height:40px;

    }

    .login-btn,
    .logout-btn,
    .signup-btn,
    .upgrade-btn{

        padding:8px 14px;

        min-height:38px;

        font-size:.85rem;

    }

}

/* ==============================
   LARGE DESKTOPS
============================== */

@media (min-width:1600px){

    .navbar{

        max-width:1700px;

    }

}

/* ==============================
   REDUCED MOTION
============================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ==============================
   UTILITIES
============================== */

.hidden{

    display:none !important;

}