/* ==========================================================
   Kasi Mattress
   Header
   File: assets/css/layout/header.css
   Version: 8.1.0
   ========================================================== */


/* ==========================================================
   Header Variables
========================================================== */

:root{

    --km-header-height:80px;
    --km-header-gap:clamp(16px,2vw,28px);
    --km-logo-height:clamp(48px,4vw,60px);

}


/* ==========================================================
   Header
========================================================== */

.km-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:900;

    background:#fff;

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

    box-shadow:0 2px 14px rgba(0,0,0,.05);

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

}


/* ==========================================================
   Container
========================================================== */

.km-header .km-container{

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

}


/* ==========================================================
   Layout
========================================================== */

.km-header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

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

    width:100%;

    height:100%;

}


/* ==========================================================
   Desktop Logo
========================================================== */

.km-logo{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    flex:0 0 auto;

    min-width:0;

    text-decoration:none;

}

.km-logo img{

    display:block;

    width:auto;

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

    max-width:100%;

    object-fit:contain;

}


/* ==========================================================
   Mobile Drawer Logo
   ----------------------------------------------------------
   Kept here so the mobile logo has its own sizing rules and
   does not depend on the desktop .km-logo dimensions.
========================================================== */

.km-mobile-logo{

    display:inline-flex;

    align-items:center;

    justify-content:flex-start;

    flex:0 0 auto;

    min-width:0;

    max-width:190px;

    text-decoration:none;

}

.km-mobile-logo img{

    display:block;

    width:auto;

    height:42px;

    max-width:190px;

    object-fit:contain;

}

.km-mobile-logo-text{

    display:inline-flex;

    align-items:center;

    color:var(--text);

    font-weight:var(--font-weight-bold);

    line-height:1.2;

    text-decoration:none;

}


/* ==========================================================
   Desktop Navigation
========================================================== */

.km-navigation{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1 1 auto;

    min-width:0;

}


/* ==========================================================
   Header Actions
========================================================== */

.km-header-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:14px;

    flex:0 0 auto;

}

.km-header-actions .km-btn{

    white-space:nowrap;

    flex-shrink:0;

}


/* ==========================================================
   Hamburger
========================================================== */

.km-menu-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    flex:0 0 44px;

    margin:0;

    padding:0;

    border:none;

    background:transparent;

    border-radius:50%;

    color:var(--text);

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

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

}

.km-menu-toggle:hover{

    background:#f5f5f5;

    color:var(--primary);

}

.km-menu-toggle:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}

.km-menu-toggle:active{

    transform:scale(.95);

}

.km-menu-toggle i{

    display:block;

    font-size:20px;

    line-height:1;

}


/* ==========================================================
   Compact Desktop
   1200 ↓
========================================================== */

@media (max-width:1200px){

    :root{

        --km-header-height:76px;

        --km-logo-height:56px;

    }

    .km-header-inner{

        gap:20px;

    }

}


/* ==========================================================
   Small Desktop
   1100 ↓
========================================================== */

@media (max-width:1100px){

    .km-header-actions .km-btn{

        padding-inline:18px;

    }

}


/* ==========================================================
   Mobile Header
   992 ↓
========================================================== */

@media (max-width:992px){

    :root{

        --km-header-height:72px;

        --km-logo-height:52px;

    }

    .km-navigation{

        display:none;

    }

    .km-header-actions{

        gap:8px;

    }

    .km-menu-toggle{

        display:inline-flex;

    }

}


/* ==========================================================
   Small Mobile
   600 ↓
========================================================== */

@media (max-width:600px){

    :root{

        --km-header-height:68px;

        --km-logo-height:50px;

    }

    .km-header-inner{

        gap:12px;

    }

    .km-header-actions{

        gap:4px;

    }

    .km-menu-toggle{

        width:42px;

        height:42px;

        flex-basis:42px;

    }

    .km-menu-toggle i{

        font-size:19px;

    }

}


/* ==========================================================
   Reduced Motion
========================================================== */

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

    .km-header,
    .km-menu-toggle{

        transition:none;

    }

}