/* =======================================================
   KiraEdu Responsive Navigation System
======================================================= */

:root{
    --nav-bg:#161714;
    --nav-bg-soft:rgba(22,23,20,.94);
    --nav-surface:#24251f;
    --nav-text:#f8fafc;
    --nav-muted:#cbd5e1;

    --nav-gold:#d4af37;
    --nav-gold-dark:#a87908;
    --nav-gold-soft:#fff8df;

    --nav-border:rgba(212,175,55,.22);
    --nav-shadow:0 18px 50px rgba(15,23,42,.18);
}

/* =======================================================
   Global page background
======================================================= */

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(
            circle at top left,
            rgba(212,175,55,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fffdf7 0%,
            #f8f5ec 45%,
            #f4f1e8 100%
        );

    color:#0f172a;
}

/* =======================================================
   Main navbar
======================================================= */

.ke-navbar{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    background:var(--nav-bg-soft);
    border-bottom:1px solid var(--nav-border);
    box-shadow:0 10px 35px rgba(2,6,23,.18);

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

    transition:
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.ke-nav-container{
    width:min(calc(100% - 48px),1280px);
    min-height:82px;
    margin-inline:auto;

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

    position:relative;

    transition:min-height .28s ease;
}

/* =======================================================
   Brand
======================================================= */

.ke-brand{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:var(--nav-text);
    text-decoration:none;
    flex-shrink:0;

    position:relative;
    z-index:4;
}

.ke-brand-icon{
    width:46px;
    height:46px;
    border-radius:15px;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            135deg,
            #f4d66b,
            var(--nav-gold),
            var(--nav-gold-dark)
        );

    color:#171711;
    box-shadow:
        0 10px 28px rgba(212,175,55,.26),
        inset 0 1px 0 rgba(255,255,255,.45);

    transition:
        transform .24s ease,
        box-shadow .24s ease;
}

.ke-brand:hover .ke-brand-icon{
    transform:translateY(-2px) rotate(-3deg);

    box-shadow:
        0 16px 34px rgba(212,175,55,.36),
        inset 0 1px 0 rgba(255,255,255,.45);
}

.ke-brand strong{
    display:block;

    color:var(--nav-text);
    font-family:var(--font-heading);
    font-size:23px;
    line-height:1;
    letter-spacing:-.02em;
}

.ke-brand small{
    display:block;

    color:var(--nav-muted);
    font-size:11px;
    font-weight:700;
    margin-top:4px;
}

/* =======================================================
   Desktop navigation links
======================================================= */

.ke-nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    flex:1;
}

.ke-nav-links a{
    position:relative;

    color:#e5e7eb;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;

    padding:10px 0;

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

.ke-nav-links a::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:2px;

    width:0;
    height:2px;
    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #facc15,
            var(--nav-gold)
        );

    transform:translateX(-50%);
    transition:width .22s ease;
}

.ke-nav-links a:hover,
.ke-nav-links a.active{
    color:#f8d95f;
    transform:translateY(-1px);
}

.ke-nav-links a:hover::after,
.ke-nav-links a.active::after{
    width:72%;
}

/* =======================================================
   Right-side actions
======================================================= */

.ke-nav-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-shrink:0;

    position:relative;
    z-index:4;
}

.ke-nav-actions form{
    margin:0;
}

.ke-nav-actions .btn{
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
}

.ke-nav-actions .btn:hover{
    transform:translateY(-2px);
}

.ke-navbar .btn-outline{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.22);
    color:white;
}

.ke-navbar .btn-outline:hover{
    background:rgba(212,175,55,.14);
    border-color:var(--nav-gold);
    color:#f8d95f;
}

.ke-navbar .btn-primary{
    background:
        linear-gradient(
            135deg,
            #f2d56a,
            var(--nav-gold),
            var(--nav-gold-dark)
        );

    color:#171711;
    border:0;

    box-shadow:0 10px 24px rgba(212,175,55,.22);
}

.ke-navbar .btn-primary:hover{
    box-shadow:0 16px 32px rgba(212,175,55,.34);
}

/* =======================================================
   User pill
======================================================= */

.ke-user-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:7px 13px 7px 7px;
    border-radius:999px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,175,55,.30);

    color:white;
    text-decoration:none;
    font-weight:800;

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.ke-user-pill:hover{
    transform:translateY(-2px);
    background:rgba(212,175,55,.14);
    border-color:var(--nav-gold);
    box-shadow:0 12px 28px rgba(0,0,0,.20);
}

.ke-user-avatar{
    width:35px;
    height:35px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            135deg,
            #f2d56a,
            var(--nav-gold-dark)
        );

    color:#171711;

    font-size:13px;
    font-weight:900;
}

/* =======================================================
   Mobile menu button
======================================================= */

.ke-nav-toggle{
    display:none;

    width:44px;
    height:44px;
    padding:0;
    border-radius:14px;

    border:1px solid rgba(212,175,55,.28);
    background:rgba(255,255,255,.07);
    color:white;

    cursor:pointer;

    position:relative;
    z-index:5;

    transition:
        background .22s ease,
        border-color .22s ease,
        transform .22s ease;
}

.ke-nav-toggle:hover{
    background:rgba(212,175,55,.14);
    border-color:var(--nav-gold);
    transform:translateY(-1px);
}

.ke-nav-toggle span{
    position:absolute;
    left:50%;

    width:20px;
    height:2px;
    border-radius:999px;

    background:currentColor;

    transform:translateX(-50%);
    transition:
        transform .24s ease,
        top .24s ease,
        opacity .18s ease;
}

.ke-nav-toggle span:nth-child(1){
    top:14px;
}

.ke-nav-toggle span:nth-child(2){
    top:21px;
}

.ke-nav-toggle span:nth-child(3){
    top:28px;
}

.ke-nav-toggle.is-open span:nth-child(1){
    top:21px;
    transform:translateX(-50%) rotate(45deg);
}

.ke-nav-toggle.is-open span:nth-child(2){
    opacity:0;
}

.ke-nav-toggle.is-open span:nth-child(3){
    top:21px;
    transform:translateX(-50%) rotate(-45deg);
}

/* =======================================================
   Scrolled state
======================================================= */

.ke-navbar.nav-scrolled{
    background:rgba(20,21,18,.985);
    border-bottom-color:rgba(212,175,55,.36);

    box-shadow:
        0 16px 44px rgba(2,6,23,.24),
        0 1px 0 rgba(212,175,55,.10);
}

.ke-navbar.nav-scrolled .ke-nav-container{
    min-height:70px;
}

.ke-navbar.nav-hidden{
    transform:none;
    opacity:1;
    visibility:visible;
}

/* =======================================================
   Homepage state
======================================================= */

body.home-page .ke-navbar{
    position:absolute;
    top:0;
    left:0;

    background:
        linear-gradient(
            180deg,
            rgba(2,6,23,.72),
            rgba(2,6,23,.26),
            transparent
        );

    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:none;
}

body.home-page .ke-navbar.nav-scrolled{
    position:fixed;

    background:rgba(20,21,18,.97);
    border-bottom-color:rgba(212,175,55,.34);
    box-shadow:var(--nav-shadow);
}

/* =======================================================
   Inner-page state
======================================================= */

body:not(.home-page) .ke-navbar{
    position:sticky;
    top:0;

    background:rgba(20,21,18,.97);
    border-bottom:1px solid rgba(212,175,55,.26);
    box-shadow:0 12px 38px rgba(15,23,42,.18);
}

body:not(.home-page) main{
    padding-top:0;
}



.ke-menu-toggle
.ke-mobile-menu
.ke-mobile-links
.ke-mobile-actions
.ke-mobile-profile
body.ke-menu-open


/* =======================================================
   Tablet navigation
======================================================= */

@media(max-width:1120px){

    .ke-nav-container{
        gap:16px;
    }

    .ke-nav-links{
        gap:15px;
    }

    .ke-nav-links a{
        font-size:13px;
    }

    .ke-user-name{
        display:none;
    }
}

/* =======================================================
   Mobile navigation
======================================================= */

@media(max-width:900px){

    body.ke-menu-open{
        overflow:hidden;
    }

    .ke-nav-container{
        width:min(calc(100% - 30px),1280px);
        min-height:74px;
        gap:12px;
    }

    .ke-nav-toggle{
        display:block;
        margin-left:auto;
    }

    .ke-nav-actions{
        gap:8px;
    }

    .ke-nav-actions .ke-user-pill{
        padding:6px;
    }

    .ke-nav-actions .btn-sm{
        padding:10px 12px;
        font-size:12px;
    }

    .ke-nav-links{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;

        width:100%;
        max-height:calc(100vh - 100px);
        overflow-y:auto;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:6px;

        padding:18px;

        background:
            radial-gradient(
                circle at top right,
                rgba(212,175,55,.14),
                transparent 38%
            ),
            rgba(24,25,21,.985);

        border:1px solid rgba(212,175,55,.24);
        border-radius:22px;

        box-shadow:
            0 28px 70px rgba(2,6,23,.38);

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

        opacity:0;
        visibility:hidden;
        pointer-events:none;

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

        transform-origin:top;

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;
    }

    .ke-nav-links.is-open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;

        transform:
            translateY(0)
            scale(1);
    }

    .ke-nav-links a{
        width:100%;

        padding:14px 16px;
        border-radius:14px;

        color:#f8fafc;
        background:rgba(255,255,255,.035);

        font-size:14px;
        line-height:1.35;
    }

    .ke-nav-links a:hover,
    .ke-nav-links a.active{
        color:#f8d95f;
        background:rgba(212,175,55,.12);
        transform:none;
    }

    .ke-nav-links a::after{
        display:none;
    }
}

/* =======================================================
   Small phones
======================================================= */

@media(max-width:600px){

    .ke-nav-container{
        width:min(calc(100% - 22px),1280px);
        min-height:70px;
    }

    .ke-brand{
        gap:9px;
    }

    .ke-brand-icon{
        width:40px;
        height:40px;
        border-radius:13px;
    }

    .ke-brand strong{
        font-size:20px;
    }

    .ke-brand small{
        display:none;
    }

    .ke-nav-toggle{
        width:41px;
        height:41px;
        border-radius:13px;
    }

    .ke-nav-actions .ke-user-pill{
        display:none;
    }

    .ke-nav-actions .btn-outline{
        padding:9px 10px;
        font-size:11px;
    }
}

/* =======================================================
   Very small phones
======================================================= */

@media(max-width:420px){

    .ke-brand strong{
        font-size:18px;
    }

    .ke-nav-actions .btn-primary{
        display:none;
    }

    .ke-nav-actions .btn-outline{
        padding:8px 9px;
    }

    .ke-nav-links{
        padding:14px;
        border-radius:18px;
    }
}

/* =======================================================
   Reduced motion
======================================================= */

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

    .ke-navbar,
    .ke-nav-container,
    .ke-brand-icon,
    .ke-nav-links,
    .ke-nav-links a,
    .ke-user-pill,
    .ke-nav-toggle,
    .ke-nav-toggle span{
        transition:none !important;
    }
}