/*==================================================
BILIN FRAMEWORK

Header v2.1
==================================================*/


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

.site-header{
    position:sticky;
    top:0;
    z-index:9999;
    background:#ffffff;
    border-bottom:1px solid #ECECEC;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
    transition:.35s ease;
}


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

.header-grid{
    display:grid;
    grid-template-columns:130px minmax(0,1fr) 220px;
    align-items:center;
    min-height:88px;
    gap:6px;
}


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

.header-logo{
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

.header-logo a{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.header-logo img{
    max-height:48px;
    width:auto;
}

.site-title{
    font-size:30px;
    font-weight:800;
    color:#E45535;
}


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

.header-nav{
    display:flex;
    justify-content:center;
    min-width:0;
}

.primary-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    list-style:none;
    margin:0;
    padding:0;
    flex-wrap:nowrap;
    white-space:nowrap;
}

.primary-menu li{
    position:relative;
    list-style:none;
    margin:0;
}

.primary-menu > li > a{
    position:relative;
    display:flex;
    align-items:center;
    padding:0 3px;
    border-radius:10px;
    color:#12394A;
    font-size:18px;
    font-weight:700;
    transition:
        color .30s ease,
        background .30s ease;
}

.primary-menu a:hover{
    color:#0AA5CF;
}

.primary-menu a::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-10px;
    width:0;
    height:3px;
    background:#0AA5CF;
    border-radius:10px;
    transition:.30s ease;
}

.primary-menu a:hover::after{
    width:100%;
}

.primary-menu > li:hover > a{
    background:#F4FAFC;
}


/*==================================================
Dropdown Menu
==================================================*/

.primary-menu .sub-menu{
    position:absolute;
    top:100%;
    right:0;
    min-width:240px;
    background:#ffffff;
    border:1px solid #EEF3F6;
    border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,.10);
    padding:18px 0 12px;
    margin:0;
    list-style:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
    z-index:999;
    overflow:hidden;
}

.primary-menu li:hover > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.primary-menu .sub-menu li{
    width:100%;
}

.primary-menu .sub-menu a{
    display:block;
    padding:12px 20px;
    font-size:15px;
    font-weight:600;
    color:#12394A;
    white-space:nowrap;
}

.primary-menu .sub-menu a:hover{
    background:#F4FAFC;
    color:#0AA5CF;
}

.primary-menu .sub-menu a::after{
    display:none;
}

.primary-menu .sub-menu::before{
    content:"";
    position:absolute;
    top:-10px;
    right:24px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:10px solid #ffffff;
}


/*==================================================
Menu Arrow
==================================================*/

.primary-menu .menu-item-has-children > a{
    display:flex;
    align-items:center;
    gap:6px;
}

.primary-menu .menu-item-has-children > a::before{
    content:"⌄";
    font-size:11px;
    color:#8AA5B0;
    transition:.25s ease;
    order:2;
}

.primary-menu .menu-item-has-children:hover > a::before{
    transform:rotate(180deg);
    color:#0AA5CF;
}


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

.header-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    white-space:nowrap;
}


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

.header-search{
    display:flex;
    align-items:center;
    position:relative;
    direction:rtl;
}

.header-search input[type="search"]{
    width:0;
    height:42px;
    padding:0;
    margin:0;
    border:1px solid #E3ECEF;
    border-radius:22px;
    background:#F4F8FA;
    color:#12394A;
    font-family:inherit;
    font-size:14px;
    outline:none;
    opacity:0;
    visibility:hidden;
    transition:
        width .30s ease,
        padding .30s ease,
        margin .30s ease,
        opacity .25s ease,
        visibility .25s ease;
}

.header-search input[type="search"]::placeholder{
    color:#8AA5B0;
}

.header-search input[type="search"]:focus{
    border-color:#0AA5CF;
    background:#ffffff;
    box-shadow:0 0 0 3px rgba(10,165,207,.08);
}

/*----------------------------------
Open Search
----------------------------------*/

.header-search:hover input[type="search"],
.header-search:focus-within input[type="search"],
.header-search.search-open input[type="search"]{
    width:180px;
    padding:0 18px;
    margin-right:8px;
    opacity:1;
    visibility:visible;
}

/*----------------------------------
Search Button
----------------------------------*/

.header-search .search-btn{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#F4F8FA;
    color:#12394A;
    font-family:inherit;
    font-size:0;
    cursor:pointer;
    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease;
}

.header-search .search-btn::before{
    content:"⌕";
    font-size:25px;
    line-height:1;
}

.header-search:hover .search-btn,
.header-search:focus-within .search-btn,
.header-search.search-open .search-btn{
    background:#0AA5CF;
    color:#ffffff;
}

.header-search .search-btn:hover{
    background:#0889AB;
    color:#ffffff;
    transform:translateY(-1px);
}


/*==================================================
Login
==================================================*/

.login-btn{
    text-decoration:none;
    color:#12394A;
    font-weight:700;
    transition:.30s ease;
}

.login-btn:hover{
    color:#0AA5CF;
}


/*==================================================
Register
==================================================*/

.register-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    white-space:nowrap;
    border-radius:12px;
    background:#0AA5CF;
    color:#ffffff;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    transition:.30s ease;
}

.register-btn:hover{
    background:#0889AB;
    color:#ffffff;
}


/*==================================================
Mobile Button
==================================================*/

.mobile-toggle{
    display:none;
    border:none;
    background:none;
    font-size:34px;
    cursor:pointer;
}


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

@media (max-width:1100px){

    .header-grid{
        grid-template-columns:auto minmax(0,1fr) auto;
    }

    .primary-menu{
        gap:18px;
    }

}


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

@media (max-width:992px){

    .header-grid{
        grid-template-columns:1fr auto;
        min-height:80px;
    }

    .header-nav{
        display:none;
    }

    .header-actions{
        display:none;
    }

    .mobile-toggle{
        display:flex;
        justify-self:end;
    }

}


/*==================================================
Mobile Navigation
==================================================*/

@media (max-width:992px){

    .site-header{
        position:sticky;
    }

    .header-grid{
        position:relative;
    }

    .header-nav{
        position:absolute;
        top:100%;
        right:0;
        left:0;
        display:block;
        background:#ffffff;
        border-top:1px solid #EEF3F6;
        border-bottom:1px solid #E8EEF1;
        box-shadow:0 18px 35px rgba(0,0,0,.08);
        padding:12px 20px 20px;
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
        z-index:998;
    }

    .site-header.menu-open .header-nav{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .primary-menu{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:4px;
        width:100%;
        white-space:normal;
    }

    .primary-menu > li{
        width:100%;
    }

    .primary-menu > li > a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding:13px 12px;
        border-radius:10px;
        font-size:15px;
    }

    .primary-menu > li > a::after{
        display:none;
    }

    .primary-menu > li:hover > a{
        background:#F4FAFC;
    }


    /*----------------------------------
    Mobile Dropdown
    ----------------------------------*/

    .primary-menu .sub-menu{
        position:static;
        width:100%;
        min-width:0;
        margin:0;
        padding:4px 12px 8px;
        border:0;
        border-radius:0;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
        overflow:visible;
    }

    .primary-menu .sub-menu::before{
        display:none;
    }

    .primary-menu .sub-menu a{
        padding:10px 16px;
        font-size:14px;
    }


    /*----------------------------------
    Mobile Toggle
    ----------------------------------*/

    .mobile-toggle{
        position:relative;
        z-index:1001;
        width:46px;
        height:46px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:0;
        border-radius:12px;
        background:#F4F8FA;
        color:#12394A;
        cursor:pointer;
        padding:0;
        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease;
    }

    .mobile-toggle:hover{
        background:#0AA5CF;
        color:#ffffff;
    }

    .mobile-toggle-icon{
        position:relative;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:22px;
        height:22px;
    }

    .mobile-toggle-icon span{
        display:block;
        width:22px;
        height:2px;
        border-radius:2px;
        background:currentColor;
        transition:
            transform .25s ease,
            opacity .20s ease;
    }


    /*----------------------------------
    Open State → X
    ----------------------------------*/

    .site-header.menu-open .mobile-toggle-icon span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .site-header.menu-open .mobile-toggle-icon span:nth-child(2){
        opacity:0;
    }

    .site-header.menu-open .mobile-toggle-icon span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

}


/*==================================================
Small Mobile
==================================================*/

@media (max-width:576px){

    .site-title{
        font-size:28px;
        font-weight:800;
        color:#E45535;
        white-space:nowrap;
    }

}