/*
====================================================================
                 SAJAL MENU LINE - MAIN SETTINGS
====================================================================

BHAI, AGAR AAPKO MENU KI HEIGHT/SIZE CHANGE KARNI HO TO
SIRF IS SECTION KI VALUES CHANGE KARNA.

IMPORTANT:
- "SAJAL MENU LINE" naam ko search karke ye section mil jayega.
- Baaki CSS ko change karne ki zarurat nahi hai.

====================================================================
*/

:root {

    /* ===== SAJAL MENU LINE: MAIN HEADER HEIGHT ===== */
    --sajal-header-height: 85px;

    /* ===== SAJAL MENU LINE: MENU ITEM HEIGHT ===== */
    --sajal-menu-height: 40px;

    /* ===== SAJAL MENU LINE: LOGO MAX HEIGHT ===== */
    --sajal-logo-height: 54px;

    /* ===== SAJAL MENU LINE: MENU FONT SIZE ===== */
    --sajal-menu-font-size: 13px;

    /* ===== SAJAL MENU LINE: LEFT/RIGHT MENU SPACE ===== */
    --sajal-menu-padding: 10px;

    /* ===== SAJAL MENU LINE: MOBILE HEADER HEIGHT ===== */
    --sajal-mobile-header-height: 80px;

    /* ===== SAJAL MENU LINE: MOBILE MENU ITEM HEIGHT ===== */
    --sajal-mobile-menu-height: 44px;

    /* ===== SAJAL MENU LINE: MOBILE LOGO HEIGHT ===== */
    --sajal-mobile-logo-height: 44px;

    /* ===== SAJAL MENU LINE: ACTIVE/HOVER GREEN ===== */
    --sajal-green: #008044;
}


/*
====================================================================
                 SAJAL MENU LINE - HEADER
====================================================================
*/

header,
header.wp-block-template-part,
.wp-block-template-part > header,
.hostinger-ai-header,
.hostinger-ai-site-header,
.hostinger-ai-header-wrapper {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* SAJAL MENU LINE - HEADER HEIGHT */
header > .wp-block-group,
header.wp-block-template-part > .wp-block-group,
.hostinger-ai-site-header > .wp-block-group,
.hostinger-ai-header > .wp-block-group {
    min-height: var(--sajal-header-height) !important;
    height: var(--sajal-header-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}


/*
====================================================================
                 SAJAL MENU LINE - LOGO
====================================================================
*/

header .wp-block-site-logo,
header .hostinger-ai-site-logo {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

header .wp-block-site-logo img,
header .hostinger-ai-site-logo img {
    max-height: var(--sajal-logo-height) !important;
    width: auto !important;
    height: auto !important;
}


/*
====================================================================
                 SAJAL MENU LINE - MENU
====================================================================
*/

.wp-block-navigation,
.hostinger-ai-site-navigation {
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.wp-block-navigation .wp-block-navigation-item__content,
.hostinger-ai-site-navigation .wp-block-navigation-item__content {

    /* SAJAL MENU LINE - ITEM HEIGHT */
    min-height: var(--sajal-menu-height) !important;
    height: var(--sajal-menu-height) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* SAJAL MENU LINE - HORIZONTAL PADDING */
    padding-left: var(--sajal-menu-padding) !important;
    padding-right: var(--sajal-menu-padding) !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    color: #fff !important;
    text-decoration: none !important;

    /* SAJAL MENU LINE - FONT SIZE */
    font-size: var(--sajal-menu-font-size) !important;

    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    transition: background .2s ease, color .2s ease !important;
}


/*
====================================================================
                 SAJAL MENU LINE - ACTIVE PAGE
====================================================================
*/

.wp-block-navigation .sajal-current-page,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.hostinger-ai-site-navigation .sajal-current-page,
.hostinger-ai-site-navigation .current-menu-item > .wp-block-navigation-item__content,
.hostinger-ai-site-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.hostinger-ai-site-navigation .wp-block-navigation-item__content[aria-current="page"] {
    background: var(--sajal-green) !important;
    color: #fff !important;
}

/* Home will NOT stay green when another page is active */
.wp-block-navigation > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content,
.hostinger-ai-site-navigation > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
    background: transparent !important;
}


/*
====================================================================
                 SAJAL MENU LINE - HOVER
====================================================================
*/

.wp-block-navigation .wp-block-navigation-item__content:hover,
.hostinger-ai-site-navigation .wp-block-navigation-item__content:hover {
    background: var(--sajal-green) !important;
    color: #fff !important;
}


/*
====================================================================
                 SAJAL MENU LINE - DROPDOWN
====================================================================
*/

.wp-block-navigation .wp-block-navigation__submenu-container {
    background: #111 !important;
    border: 0 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    min-height: var(--sajal-menu-height) !important;
    height: var(--sajal-menu-height) !important;
}


/*
====================================================================
                 SAJAL MENU LINE - WHATSAPP / SUBMIT
====================================================================
*/

.sajal-menu-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.sajal-whatsapp,
.sajal-submit {
    height: var(--sajal-menu-height) !important;
    min-height: var(--sajal-menu-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.sajal-whatsapp {
    gap: 5px !important;
    padding: 0 8px !important;
}

.sajal-whatsapp svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    display: block !important;
}

.sajal-submit {
    padding: 0 14px !important;
    background: var(--sajal-green) !important;
}

.sajal-submit:hover {
    background: #006b39 !important;
}


/*
====================================================================
                 SAJAL MENU LINE - MOBILE
====================================================================
*/

@media (max-width: 850px) {

    /* SAJAL MENU LINE - MOBILE HEADER */
    header > .wp-block-group,
    header.wp-block-template-part > .wp-block-group,
    .hostinger-ai-site-header > .wp-block-group,
    .hostinger-ai-header > .wp-block-group {
        min-height: var(--sajal-mobile-header-height) !important;
        height: var(--sajal-mobile-header-height) !important;
    }

    /* SAJAL MENU LINE - MOBILE LOGO */
    header .wp-block-site-logo img,
    header .hostinger-ai-site-logo img {
        max-height: var(--sajal-mobile-logo-height) !important;
    }

    .sajal-menu-actions {
        display: none !important;
    }

    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        padding: 6px !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .wp-block-navigation__responsive-container-open svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Mobile opened menu */
    .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        background: rgba(8,8,8,.98) !important;
        color: #fff !important;
        padding: 54px 12px 20px !important;
        box-sizing: border-box !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {

        /* SAJAL MENU LINE - MOBILE ITEM HEIGHT */
        min-height: var(--sajal-mobile-menu-height) !important;
        height: var(--sajal-mobile-menu-height) !important;

        width: 100% !important;
        justify-content: flex-start !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
        font-size: 14px !important;

        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open
    .sajal-current-page {
        background: var(--sajal-green) !important;
    }

    .wp-block-navigation__responsive-container-close {
        width: 36px !important;
        height: 36px !important;
        top: 10px !important;
        right: 10px !important;
    }
}


/*
====================================================================
                 SAJAL MENU LINE - SMALL MOBILE
====================================================================
*/

@media (max-width: 480px) {

    /* SAJAL MENU LINE - SMALL PHONE HEADER */
    header > .wp-block-group,
    header.wp-block-template-part > .wp-block-group {
        min-height: 54px !important;
        height: 54px !important;
    }

    header .wp-block-site-logo img,
    header .hostinger-ai-site-logo img {
        max-height: 40px !important;
    }
}