/* =========================================================
   MUHAMMAD SOHAIL AKHTAR
   PERSONAL ACADEMIC WEBSITE
   PREMIUM NAVIGATION SYSTEM
   Version 4.0
   ---------------------------------------------------------
   RESPONSIBILITY:
   • Fixed academic header
   • Logo / identity
   • Desktop navigation
   • Active navigation
   • Mobile navigation
   • Mobile menu animation
   • Header scroll state
   • Navigation accessibility
========================================================= */


/* =========================================================
   01. HEADER FOUNDATION
========================================================= */

.profile-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: var(--z-header);

    width: 100%;

    padding: 18px 0;

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

    border-bottom:
        1px solid transparent;

    backdrop-filter:
        blur(18px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(140%);

    transition:
        padding var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


/* =========================================================
   02. HEADER SCROLLED STATE
========================================================= */

.profile-header.scrolled {

    padding:
        10px 0;

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

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

    box-shadow:
        0 8px 30px
        rgba(15,35,60,.07);

}


/* =========================================================
   03. NAVBAR
========================================================= */

.navbar {

    width:
        100%;

}


.navbar-container {

    position:
        relative;

    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    min-height:
        58px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


/* =========================================================
   04. BRAND / LOGO
========================================================= */

.navbar-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    flex-shrink:
        0;

    color:
        var(--color-text-dark);

    transition:
        opacity var(--transition);

}


.navbar-logo:hover {

    opacity:
        .88;

}


/* =========================================================
   05. LOGO SYMBOL
========================================================= */

.logo-symbol {

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    border:
        1px solid
        var(--color-primary);

    border-radius:
        var(--radius-sm);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef4f9
        );

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        -.04em;

    box-shadow:
        0 5px 15px
        rgba(18,60,105,.07);

    overflow:
        hidden;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


/* Subtle shine */

.logo-symbol::before {

    content:
        "";

    position:
        absolute;

    top:
        -80%;

    left:
        -40%;

    width:
        45%;

    height:
        220%;

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

    transform:
        rotate(25deg)
        translateX(-120px);

    transition:
        transform 700ms ease;

}


/* Hover */

.navbar-logo:hover .logo-symbol {

    transform:
        translateY(-2px);

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);

    color:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(18,60,105,.16);

}


.navbar-logo:hover .logo-symbol::before {

    transform:
        rotate(25deg)
        translateX(180px);

}


/* =========================================================
   06. LOGO TEXT
========================================================= */

.logo-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;

    min-width:
        0;

}


.logo-main {

    display:
        block;

    color:
        var(--color-text-dark);

    font-family:
        var(--font-body);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    line-height:
        1.2;

    white-space:
        nowrap;

}


.logo-sub {

    display:
        block;

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

    font-family:
        var(--font-mono);

    font-size:
        7.5px;

    font-weight:
        400;

    letter-spacing:
        .04em;

    line-height:
        1.4;

    white-space:
        nowrap;

}


/* =========================================================
   07. NAVIGATION MENU
========================================================= */

.nav-menu {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        4px;

    margin-left:
        auto;

}


/* List item */

.nav-menu li {

    position:
        relative;

}


/* Links */

.nav-menu a {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 13px;

    border-radius:
        var(--radius-xs);

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

    font-family:
        var(--font-body);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .01em;

    white-space:
        nowrap;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);

}


/* =========================================================
   08. NAV HOVER
========================================================= */

.nav-menu a:hover {

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

}


/* =========================================================
   09. ACTIVE NAVIGATION
========================================================= */

.nav-menu a.active {

    color:
        var(--color-primary);

    background:
        var(--color-primary-light);

}


/* Active indicator */

.nav-menu a.active::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        4px;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--color-accent);

    transform:
        translateX(-50%);

}


/* =========================================================
   10. NAV LINK MICRO INTERACTION
========================================================= */

.nav-menu a::before {

    content:
        "";

    position:
        absolute;

    left:
        13px;

    right:
        13px;

    bottom:
        0;

    height:
        1px;

    background:
        var(--color-accent);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform var(--transition);

    opacity:
        .45;

}


.nav-menu a:hover::before {

    transform:
        scaleX(1);

}


/* Don't show hover line over active indicator */

.nav-menu a.active::before {

    transform:
        scaleX(0);

}


/* =========================================================
   11. MOBILE MENU BUTTON
========================================================= */

.menu-toggle {

    display:
        none;

    position:
        relative;

    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-sm);

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

    color:
        var(--color-primary);

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

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.menu-toggle:hover {

    background:
        var(--color-primary-light);

    border-color:
        var(--color-border-blue);

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

}


/* Hamburger bars */

.menu-toggle span {

    display:
        block;

    width:
        18px;

    height:
        1.5px;

    border-radius:
        999px;

    background:
        var(--color-primary);

    transform-origin:
        center;

    transition:
        transform 300ms ease,
        opacity 300ms ease;

}


/* =========================================================
   12. MOBILE MENU ACTIVE ICON
========================================================= */

.menu-toggle[aria-expanded="true"]
span:nth-child(1) {

    transform:
        translateY(6.5px)
        rotate(45deg);

}


.menu-toggle[aria-expanded="true"]
span:nth-child(2) {

    opacity:
        0;

}


.menu-toggle[aria-expanded="true"]
span:nth-child(3) {

    transform:
        translateY(-6.5px)
        rotate(-45deg);

}


/* =========================================================
   13. DESKTOP NAV DECORATION
========================================================= */

.navbar-container::after {

    content:
        "";

    position:
        absolute;

    right:
        0;

    top:
        0;

    width:
        80px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-accent)
        );

    opacity:
        .35;

    pointer-events:
        none;

}


/* =========================================================
   14. TABLET NAVIGATION
========================================================= */

@media (max-width: 1100px) {

    .navbar-container {

        width:
            min(
                calc(100% - 40px),
                var(--container-width)
            );

    }


    .nav-menu {

        gap:
            0;

    }


    .nav-menu a {

        padding:
            0 9px;

        font-size:
            11px;

    }


    .logo-sub {

        display:
            none;

    }

}


/* =========================================================
   15. MOBILE NAVIGATION
========================================================= */

@media (max-width: 850px) {

    .profile-header {

        padding:
            12px 0;

    }


    .profile-header.scrolled {

        padding:
            9px 0;

    }


    .navbar-container {

        width:
            calc(100% - 32px);

        min-height:
            52px;

    }


    /* Hide desktop navigation */

    .nav-menu {

        position:
            absolute;

        top:
            calc(100% + 8px);

        left:
            0;

        right:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            4px;

        max-height:
            calc(100vh - 90px);

        overflow-y:
            auto;

        padding:
            10px;

        border:
            1px solid
            var(--color-border);

        border-radius:
            var(--radius-md);

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

        box-shadow:
            0 20px 50px
            rgba(15,35,60,.12);

        backdrop-filter:
            blur(18px);

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

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-8px)
            scale(.98);

        transform-origin:
            top center;

        pointer-events:
            none;

        transition:
            opacity 250ms ease,
            visibility 250ms ease,
            transform 250ms ease;

    }


    /* Open menu */

    .nav-menu.active {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0)
            scale(1);

        pointer-events:
            auto;

    }


    .nav-menu li {

        width:
            100%;

    }


    .nav-menu a {

        width:
            100%;

        min-height:
            48px;

        justify-content:
            flex-start;

        padding:
            0 15px;

        border-radius:
            var(--radius-sm);

        font-size:
            13px;

    }


    .nav-menu a:hover {

        transform:
            translateX(2px);

    }


    /* Active indicator on right */

    .nav-menu a.active::after {

        left:
            auto;

        right:
            14px;

        bottom:
            50%;

        transform:
            translateY(50%);

    }


    /* Hide desktop underline */

    .nav-menu a::before {

        display:
            none;

    }


    /* Mobile menu button */

    .menu-toggle {

        display:
            flex;

    }


    /* Remove desktop decoration */

    .navbar-container::after {

        display:
            none;

    }

}


/* =========================================================
   16. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .navbar-container {

        width:
            calc(100% - 24px);

    }


    .logo-symbol {

        width:
            40px;

        height:
            40px;

        border-radius:
            9px;

        font-size:
            13px;

    }


    .logo-main {

        font-size:
            11px;

        letter-spacing:
            .06em;

    }


    .logo-sub {

        display:
            none;

    }


    .menu-toggle {

        width:
            42px;

        height:
            42px;

    }


    .nav-menu {

        top:
            calc(100% + 6px);

    }

}


/* =========================================================
   17. VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .navbar-container {

        width:
            calc(100% - 20px);

    }


    .logo-symbol {

        width:
            38px;

        height:
            38px;

    }


    .logo-main {

        font-size:
            10px;

    }


    .menu-toggle {

        width:
            40px;

        height:
            40px;

    }

}


/* =========================================================
   18. REDUCED MOTION
========================================================= */

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

    .profile-header,
    .navbar-logo,
    .logo-symbol,
    .logo-symbol::before,
    .nav-menu,
    .menu-toggle,
    .menu-toggle span,
    .nav-menu a,
    .nav-menu a::before {

        transition:
            none;

    }

}