/*
Theme Name: RaFi Bhai Child
Template: blocksy
Theme URI: https://rafi-bhai.local/
Description: RaFi Bhai custom child theme
Author: RaFi Bhai
Version: 1.0.0
*/


/*
|--------------------------------------------------------------------------
| Hide Blocksy Default Header
|--------------------------------------------------------------------------
*/

.ct-header {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| RaFi Header
|--------------------------------------------------------------------------
*/

.rafi-main-header {
    position: sticky;
    top: 0;
    z-index: 9999;

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}


/*
|--------------------------------------------------------------------------
| Header Inner
|--------------------------------------------------------------------------
*/

.rafi-header-inner {
    width: 100%;
    max-width: 1280px;

    min-height: 76px;

    margin: 0 auto;
    padding: 0 24px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 30px;
}


/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.rafi-logo {
    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}


.rafi-logo img {
    display: block;

    width: auto;
    height: 58px;

    max-width: 180px;

    object-fit: contain;
}


.rafi-logo-text {
    font-size: 28px;
    font-weight: 800;

    color: #1877f2;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| Desktop Navigation
|--------------------------------------------------------------------------
*/

.rafi-desktop-nav {
    display: flex;

    align-items: center;

    gap: 30px;

    margin-left: auto;
}


.rafi-desktop-nav a {
    position: relative;

    padding: 8px 2px;

    color: #1f2937;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.rafi-desktop-nav a:hover {
    color: #1877f2;
}


.rafi-desktop-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #1877f2;

    transition: width 0.2s ease;
}


.rafi-desktop-nav a:hover::after {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| User Area
|--------------------------------------------------------------------------
*/

.rafi-user-area {
    display: flex;

    align-items: center;

    gap: 10px;
}


/*
|--------------------------------------------------------------------------
| User Name
|--------------------------------------------------------------------------
*/

.rafi-user-name {
    max-width: 180px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #374151;

    font-size: 14px;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Login
|--------------------------------------------------------------------------
*/

.rafi-login-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 80px;

    height: 40px;

    padding: 0 18px;

    box-sizing: border-box;

    color: #1877f2;

    border: 1px solid #1877f2;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: all 0.2s ease;
}


.rafi-login-btn:hover {
    background: #1877f2;
    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Registration
|--------------------------------------------------------------------------
*/

.rafi-register-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 40px;

    padding: 0 18px;

    box-sizing: border-box;

    color: #ffffff;

    background: #1877f2;

    border: 1px solid #1877f2;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: background 0.2s ease;
}


.rafi-register-btn:hover {
    background: #166fe5;
    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Logout
|--------------------------------------------------------------------------
*/

.rafi-logout-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 40px;

    padding: 0 18px;

    color: #ffffff;

    background: #1877f2;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}


.rafi-logout-btn:hover {
    background: #166fe5;
    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Mobile Button
|--------------------------------------------------------------------------
*/

.rafi-mobile-menu-btn {
    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

    margin-left: auto;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    background: #ffffff;

    cursor: pointer;
}


.rafi-mobile-menu-btn span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: #1f2937;

    transition: all 0.2s ease;
}


/*
|--------------------------------------------------------------------------
| Mobile Menu
|--------------------------------------------------------------------------
*/

.rafi-mobile-menu {
    display: none;

    width: 100%;

    background: #ffffff;

    border-top: 1px solid #eeeeee;
}


.rafi-mobile-menu nav {
    display: flex;

    flex-direction: column;

    padding: 10px 20px 20px;
}


.rafi-mobile-menu nav > a {
    padding: 14px 5px;

    color: #1f2937;

    border-bottom: 1px solid #eeeeee;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;
}


.rafi-mobile-menu nav > a:hover {
    color: #1877f2;
}


/*
|--------------------------------------------------------------------------
| Mobile Auth
|--------------------------------------------------------------------------
*/

.rafi-mobile-auth {
    display: flex;

    flex-direction: column;

    gap: 10px;

    padding-top: 15px;
}


.rafi-mobile-auth a {
    display: block;

    padding: 12px;

    text-align: center;

    color: #1877f2;

    border: 1px solid #1877f2;

    border-radius: 8px;

    font-weight: 600;

    text-decoration: none;
}


.rafi-mobile-auth a:last-child {
    color: #ffffff;

    background: #1877f2;
}


.rafi-mobile-user {
    padding: 8px 0;

    color: #374151;

    font-weight: 700;

    text-align: center;
}


.rafi-mobile-logout {
    color: #ffffff !important;

    background: #1877f2;

    border-color: #1877f2 !important;
}


/*
|--------------------------------------------------------------------------
| Mobile Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .rafi-header-inner {
        min-height: 68px;

        padding: 0 16px;

        gap: 15px;
    }


    .rafi-logo img {
        height: 52px;

        max-width: 150px;
    }


    .rafi-desktop-nav,
    .rafi-user-area {
        display: none;
    }


    .rafi-mobile-menu-btn {
        display: block;
    }


    .rafi-mobile-menu.is-open {
        display: block;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

    .rafi-header-inner {
        min-height: 62px;

        padding: 0 12px;
    }


    .rafi-logo img {
        height: 48px;

        max-width: 140px;
    }


    .rafi-mobile-menu nav {
        padding-left: 15px;
        padding-right: 15px;
    }

}