/*==================================================
THE KIPSOEN NATIONAL POLYTECHNIC
HEADER V5
Professional Responsive Header
==================================================*/


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

:root{

    /* Layout */

    --header-max-width:1440px;

    --header-height:74px;

    --header-gap:2rem;

    --header-padding:clamp(1rem,2vw,2rem);

    /* Branding */

    --logo-height:54px;

    --title-size:clamp(1rem,1vw + .4rem,1.25rem);

    --tagline-size:.82rem;

    /* Navigation */

    --nav-height:74px;

    --nav-font:.90rem;

    --nav-gap:.35rem;

    --nav-padding:.9rem;

    /* Buttons */

    --button-height:46px;

    --button-radius:999px;

    /* Effects */

    --transition:.30s ease;

    --shadow:

        0 10px 35px rgba(0,0,0,.08);

    --dropdown-shadow:

        0 18px 45px rgba(0,0,0,.10);

}

/*==================================================
RESET
==================================================*/

.header *,
.topbar *{

    box-sizing:border-box;

}

.header img,
.topbar img{

    display:block;

    max-width:100%;

}

.header ul,
.topbar ul{

    margin:0;

    padding:0;

    list-style:none;

}

.header a,
.topbar a{

    color:inherit;

    text-decoration:none;

}

.header button{

    font:inherit;

    background:none;

    border:none;

    cursor:pointer;

}

/*==================================================
COMMON CONTAINER
==================================================*/

.header__container{

    width:min(100% - 1rem,var(--header-max-width));

    padding-inline:.5rem;

    margin-inline:auto;

}

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

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:#fff;

    box-shadow:0 2px 18px rgba(0,0,0,.08);

    transition:transform .35s ease;

}

.site-header.header-hidden{

    transform:translateY(calc(-100% - 25px));

}

/*==================================================
TOP BAR
==================================================*/

.topbar{

    background:var(--primary-color);

    color:#fff;

    font-size:.85rem;

}

.topbar__inner{

    min-height:42px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

}

.topbar__left{

    flex:1;

}

.topbar__contact{

    display:flex;

    align-items:center;

    gap:1.5rem;

    flex-wrap:wrap;

}

.topbar__contact li{

    display:flex;

    align-items:center;

    gap:.45rem;

}

.topbar__contact i{

    color:var(--secondary-color);

}

.topbar__right{

    display:flex;

    justify-content:flex-end;

}

.topbar__social{

    display:flex;

    gap:.5rem;

}

.topbar__social a{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:all var(--transition);

}

.topbar__social a:hover{

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

}

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

.header{

    background:#ffffff;

    box-shadow:0 1px 0 rgba(0,0,0,.06);

}

.header__main{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--header-gap);

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

}

/*==================================================
BRANDING
==================================================*/

/*==================================================
BRANDING
==================================================*/

.header__branding{

    flex:0 1 340px;

    min-width:300px;

    max-width:360px;

    display:flex;

    align-items:center;

}

.header__branding-link{

    display:flex;

    align-items:center;

    gap:1rem;

}

.header__branding-logo{

    flex-shrink:0;

}

.header__branding-logo img,

.header__branding-logo .custom-logo{

    width:auto;

    height:var(--logo-height);

}

.header__branding-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    flex:1;

    min-width:0;

}

/*==================================================
TITLE
==================================================*/

.header__title{

    margin:0;

    color:var(--primary-color);

    font-size:clamp(.92rem,.75vw + .35rem,1.05rem);

    font-weight:600;

    letter-spacing:-.02em;

    line-height:1.2;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}
.header__title a{

    color:inherit;

}

.header__tagline{

    margin-top:.2rem;

    color:#7b7b7b;

    font-size:clamp(.70rem,.65vw,.80rem);

    font-weight:400;

    line-height:1.35;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

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

.header__navigation{

    flex:1 1 auto;

    min-width:0;

    display:flex;

    justify-content:center;

    overflow:visible;

}

.header__navigation-inner{

    width:100%;

}

.header__desktop{

    display:flex;

    justify-content:center;

    width:100%;

}

/*==================================================
PRIMARY MENU
==================================================*/

.header__menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:clamp(.15rem,.5vw,.6rem);

    flex-wrap:nowrap;

}

.header__menu > li{

    position:relative;

    flex-shrink:0;

}

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

.header__menu > li > a{

    display:flex;

    align-items:center;

    justify-content:center;

    height:var(--nav-height);

    padding-inline:clamp(.35rem,.65vw,.75rem);
    
    font-size:clamp(.80rem,.72vw,.88rem);

    font-weight:500;

    color:#222;

    transition:color var(--transition);

    white-space:nowrap;

}

/*==================================================
ACTIVE MENU
==================================================*/

.header__menu > li > a{

    position:relative;

}

.header__menu > li > a::after{

    content:"";

    position:absolute;

    left:12px;

    right:12px;

    bottom:18px;

    height:3px;

    border-radius:999px;

    background:var(--secondary-color);

    transform:scaleX(0);

    transition:transform var(--transition);

}

.header__menu > li:hover > a,

.header__menu > li.current-menu-item > a,

.header__menu > li.current-menu-parent > a,

.header__menu > li.current-menu-ancestor > a{

    color:var(--primary-color);

}

.header__menu > li:hover > a::after,

.header__menu > li.current-menu-item > a::after,

.header__menu > li.current-menu-parent > a::after,

.header__menu > li.current-menu-ancestor > a::after{

    transform:scaleX(1);

}

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

.header__actions{

    flex:0 0 auto;

}

.header__actions-inner{

    display:flex;

    align-items:center;

    gap:.85rem;

}

/*==================================================
SEARCH BUTTON
==================================================*/

.header__search{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f5f7fb;

    color:var(--primary-color);

    transition:all var(--transition);

}

.header__search:hover{

    background:var(--primary-color);

    color:#ffffff;

}

.header__search i{

    font-size:1rem;

}

/*==================================================
APPLY BUTTON
==================================================*/

.header__apply{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:40px;

    padding:0 1.25rem;

    border-radius:999px;

    background:var(--primary-color);

    color:#fff;

    font-size:.90rem;

    font-weight:600;

    transition:all var(--transition);

}

.header__apply:hover{

    background:var(--secondary-color);

    color:#111;

}

/*==================================================
DROPDOWNS
==================================================*/

.header__menu .sub-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:260px;

    background:#ffffff;

    border-radius:16px;

    padding:.75rem 0;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:all var(--transition);

    z-index:100;

}

.header__menu li:hover > .sub-menu,

.header__menu li:focus-within > .sub-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.header__menu .sub-menu li{

    position:relative;

}

.header__menu .sub-menu a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:.85rem 1.4rem;

    color:#333;

    transition:all var(--transition);

}

.header__menu .sub-menu a:hover{

    background:var(--primary-color);

    color:#ffffff;

    padding-left:1.8rem;

}

.header__menu .sub-menu .sub-menu{

    top:0;

    left:100%;

    margin-left:.4rem;

}

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

.header{

    background:#ffffff;

}

.site-header{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

/*==================================================
LARGE DESKTOP
==================================================*/

@media (min-width:1400px){

    .header__toggle{

        display:none;

    }

    .header__desktop{

        display:flex;

    }

    .header__search{

        display:flex;

    }

}

/*==================================================
DESKTOP / LAPTOP
==================================================*/

@media (max-width:1399px){

    .header__search{

        display:none;

    }

}

/*==================================================
TABLET
==================================================*/

@media (max-width:1320px){

    .header__main{

        gap:1rem;

    }

    .header__desktop{

        display:none;

    }

    .header__toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:46px;

        height:46px;

        border-radius:10px;

        background:#f5f7fb;

        color:var(--primary-color);

        transition:all var(--transition);

    }

    .header__toggle:hover{

        background:var(--primary-color);

        color:#ffffff;

    }

    .header__toggle i{

        font-size:1.5rem;

    }

    .header__actions{

        display:none;

    }

}

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

@media (max-width:991px){

    .topbar__address{

        display:none;

    }

    .header__branding-logo img,

    .header__branding-logo .custom-logo{

        height:52px;

    }

    .header__title{

        font-size:1rem;

    }

    .header__tagline{

        font-size:.75rem;

    }

}

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

@media (max-width:767px){

    .topbar{

        display:none;

    }

    .header__main{

        min-height:72px;

    }

    .header__branding-link{

        gap:.75rem;

    }

    .header__branding-logo img,

    .header__branding-logo .custom-logo{

        height:46px;

    }

    .header__tagline{

        display:none;

    }

}

/*==================================================
OFFCANVAS
==================================================*/

.header__offcanvas{

    width:380px;

    max-width:90vw;

    height:100vh;

}

.header__offcanvas-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.25rem;

    border-bottom:1px solid #ececec;

}

.header__offcanvas-title{

    margin:0;

    font-size:1.15rem;

    color:var(--primary-color);

}

.header__offcanvas-close{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f5f7fb;

}

.header__offcanvas-body{

    padding:0;

    overflow-y:auto;

    overflow-x:hidden;

    height:calc(100vh - 78px);

    -webkit-overflow-scrolling:touch;

}

.mobile-menu{

    display:flex;

    flex-direction:column;

    min-height:max-content;

}

.mobile-menu > li{

    border-bottom:1px solid #ececec;

}

.mobile-menu > li > a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:1rem 1.5rem;

    font-weight:600;

}

.mobile-menu .sub-menu{
    display:none;
    margin:0;
    padding:0 0 .5rem;
    background:#f8fafc;
}

.mobile-menu .sub-menu a{
    display:block;
    padding:.75rem 1.5rem .75rem 2.25rem;
    color:#3b4552;
    font-size:.95rem;
}

.mobile-menu .sub-menu .sub-menu a{
    padding-left:3.25rem;
    background:#f1f5f9;
}

.mobile-menu .sub-menu a:hover,
.mobile-menu .sub-menu a:focus-visible{
    color:var(--primary-color);
    background:#eef4fa;
}

.header__offcanvas-divider{

    height:1px;

    background:#ececec;

    margin:1rem 0;

}

.header__offcanvas-actions{

    display:flex;

    flex-direction:column;

    gap:1rem;

    padding:1.5rem;

    margin-top:auto;

}

.header__offcanvas-search,

.header__offcanvas-apply{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:.5rem;

    height:46px;

    border-radius:999px;

    font-weight:600;

}

.header__offcanvas-search{

    background:#f5f7fb;

    color:var(--primary-color);

}

.header__offcanvas-apply{

    background:var(--primary-color);

    color:#ffffff;

}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==================================================
PRINT
==================================================*/

@media print{

    .topbar,
    .header__actions,
    .header__toggle{

        display:none !important;

    }

    .header{

        position:static;

        box-shadow:none;

    }

}

/*==================================================
SEARCH OVERLAY
==================================================*/

body.teknp-search-open{
    overflow:hidden;
}

.teknp-search-overlay{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:clamp(1rem, 5vw, 4rem) 1rem;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
}

.teknp-search-overlay[hidden]{
    display:none;
}

.teknp-search-overlay.is-open{
    opacity:1;
    visibility:visible;
}

.teknp-search-overlay__backdrop{
    position:absolute;
    inset:0;
    background:rgba(7,24,39,.78);
    backdrop-filter:blur(5px);
}

.teknp-search-overlay__dialog{
    position:relative;
    width:min(760px, 100%);
    background:#fff;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
    overflow:hidden;
    transform:translateY(-12px);
    transition:transform .2s ease;
}

.teknp-search-overlay.is-open .teknp-search-overlay__dialog{
    transform:translateY(0);
}

.teknp-search-overlay__inner{
    padding:1.5rem;
}

.teknp-search-overlay__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.25rem;
}

.teknp-search-overlay__title{
    margin:0;
    color:var(--primary-color);
    font-size:1.2rem;
    font-weight:700;
}

.teknp-search-overlay__close{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#f2f5f8;
    color:var(--primary-color);
    cursor:pointer;
}

.teknp-search-overlay__close:hover,
.teknp-search-overlay__close:focus-visible{
    background:var(--primary-color);
    color:#fff;
}

.teknp-search-form{
    display:grid;
    grid-template-columns:1fr auto;
    gap:.75rem;
}

.teknp-search-form__field{
    min-width:0;
    display:flex;
    align-items:center;
    gap:.75rem;
    min-height:54px;
    padding:0 1rem;
    border:1px solid #d9e0e7;
    border-radius:12px;
    background:#fff;
}

.teknp-search-form__field:focus-within{
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px rgba(0,76,153,.1);
}

.teknp-search-form__field i{
    flex:0 0 auto;
    color:var(--primary-color);
}

.teknp-search-form__field input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#1f2933;
    font-size:1rem;
}

.teknp-search-form__submit{
    min-height:54px;
    padding:0 1.5rem;
    border:0;
    border-radius:12px;
    background:var(--primary-color);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:all var(--transition);
}

.teknp-search-form__submit:hover,
.teknp-search-form__submit:focus-visible{
    background:var(--secondary-color);
    color:#fff;
}

@media (max-width:575.98px){
    .teknp-search-overlay__inner{
        padding:1.15rem;
    }

    .teknp-search-form{
        grid-template-columns:1fr;
    }

    .teknp-search-form__submit{
        width:100%;
    }
}