/* ==========================================================
   Kasi Mattress
   Navigation
   File: assets/css/layout/navigation.css
   Module: Global Navigation
   Version: 6.0.0
   Status: LOCKED
========================================================== */


/* ==========================================================
   NAVIGATION LIST
========================================================== */

.km-nav-list{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:nowrap;

    gap:clamp(.5rem,1vw,1.5rem);

    margin:0;

    padding:0;

    list-style:none;

    width:100%;

}


/* ==========================================================
   NAVIGATION ITEM
========================================================== */

.km-nav-item{

    position:static;

    flex:0 1 auto;

}


/* ==========================================================
   TOP LEVEL LINKS
========================================================== */

.km-nav-item > a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 clamp(.45rem,.8vw,.9rem);

    height:var(--km-header-height);

    color:var(--text);

    font-size:clamp(.88rem,.9vw,.95rem);

    font-weight:600;

    white-space:nowrap;

    transition:
        color .25s ease,
        background .25s ease;

}

.km-nav-item > a:hover{

    color:var(--primary);

}

.km-nav-item > a.active{

    color:var(--primary);

}


/* ==========================================================
   ACTIVE BAR
========================================================== */

.km-nav-item > a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:18px;

    width:100%;

    height:3px;

    border-radius:999px;

    background:var(--accent);

    transform:scaleX(0);

    transition:.25s;

}

.km-nav-item > a:hover::after,

.km-nav-item > a.active::after{

    transform:scaleX(1);

}


/* ==========================================================
   MEGA MENU POSITION
========================================================== */

.km-mega-menu{

    position:absolute;

    top:calc(100% + 1px);

    left:50%;

    width:min(1280px,96vw);

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

    z-index:950;

}

.km-nav-item:hover > .km-mega-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

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

}

/* ==========================================================
   PANEL
========================================================== */

.km-mega-panel{

    background:#fff;

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

    border-radius:24px;

    box-shadow:0 24px 60px rgba(0,0,0,.12);

    overflow:hidden;

}

/* ==========================================================
   CONTENT
========================================================== */

.km-mega-content{

    display:flex;

    flex-direction:column;

    gap:2rem;

    padding:2rem;

}

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

.km-mega-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:2rem;

}

.km-mega-title{

    margin:0;

    font-size:1.6rem;

    font-weight:700;

    color:var(--text);

}

.km-mega-subtitle{

    margin:.5rem 0 0;

    color:var(--text-light);

    line-height:1.6;

}

/* ==========================================================
   VIEW ALL
========================================================== */

.km-mega-view-all{

    display:flex;

    align-items:center;

    gap:.6rem;

    color:var(--primary);

    font-weight:600;

    white-space:nowrap;

    transition:.25s;

}

.km-mega-view-all:hover{

    gap:1rem;

}

/* ==========================================================
   GRID
========================================================== */

.km-mega-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1.5rem;

}

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

.km-mega-links{

    display:flex;

    flex-wrap:wrap;

    gap:1rem 2rem;

    padding-top:1rem;

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

}

.km-mega-link{

    display:flex;

    align-items:center;

    gap:.5rem;

    color:var(--text);

    font-size:.95rem;

    transition:.25s;

}

.km-mega-link:hover{

    color:var(--primary);

    transform:translateX(4px);

}

.km-mega-link i{

    color:var(--accent);

    font-size:.8rem;

}

/* ==========================================================
   FOOTER
========================================================== */

.km-mega-footer{

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

    padding-top:1.5rem;

}

.km-mega-footer-items{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1.5rem;

}

.km-mega-footer-item{

    display:flex;

    align-items:center;

    gap:1rem;

}

.km-mega-footer-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#f5f8fc;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:1.1rem;

}

.km-mega-footer-title{

    display:block;

    font-weight:700;

    color:var(--text);

}

.km-mega-footer-text{

    display:block;

    margin-top:.2rem;

    color:var(--text-light);

}

/* ==========================================================
   Compact Desktop
========================================================== */

@media (max-width:1200px){

    .km-nav-list{

        gap:1rem;

    }

    .km-nav-item > a{

        padding-inline:.55rem;

        font-size:.9rem;

    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .km-mega-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .km-mega-footer-items{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .km-mega-menu{

        display:none;

    }

}

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

.km-mobile-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1998;

}


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

.km-mobile-nav{

    position:fixed;

    top:0;

    right:-360px;

    width:340px;

    max-width:92vw;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

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

    transition:right .30s ease;

    z-index:1999;

}


/* ==========================================================
   DRAWER OPEN
========================================================== */

body.km-menu-open .km-mobile-nav{

    right:0;

}

body.km-menu-open .km-mobile-overlay{

    opacity:1;

    visibility:visible;

}


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

.km-mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

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

}


/* ==========================================================
   CLOSE BUTTON
========================================================== */

.km-mobile-close{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}


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

.km-mobile-list{

    padding:14px 0;

}

.km-mobile-item{

    border-bottom:1px solid #f2f2f2;

}

.km-mobile-item > a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 24px;

    font-size:16px;

    font-weight:600;

    color:var(--text);

}

.km-mobile-item > a.active{

    color:var(--primary);

}

.km-mobile-item > a:hover{

    background:#fafafa;

}


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

.km-mobile-submenu{

    display:none;

    padding:0;

    margin:0;

    list-style:none;

    background:#fafafa;

}

.km-mobile-submenu a{

    display:block;

    padding:14px 38px;

    font-size:14px;

    color:#666;

}

.km-mobile-submenu a:hover{

    color:var(--primary);

}


/* ==========================================================
   SUBMENU OPEN
========================================================== */

.km-mobile-item.open > .km-mobile-submenu{

    display:block;

}


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

.km-mobile-whatsapp{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:auto 20px 24px;

    padding:15px;

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

    background:#25D366;

    color:#fff;

    font-weight:600;

}

.km-mobile-whatsapp:hover{

    background:#20bd5a;

}