/* ============================================================
   CHAITANYA PRINT
   HEAD.CSS
   FINAL GLOBAL HEADER + NAVIGATION
   ============================================================

   File:
   /public_html/assets/css/head.css

   Supports:
   - Desktop navigation
   - Services hover dropdown
   - Services click dropdown
   - Mobile navigation
   - Mobile services accordion
   - Active service states
   - Accessibility
   - Responsive layouts
   - Smooth animations
   - Header branding
   - CTA buttons

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


/* ============================================================
   DESIGN TOKENS
============================================================ */

:root{

    --cp-head-orange:#ea580c;
    --cp-head-orange-light:#f97316;
    --cp-head-orange-dark:#c2410c;

    --cp-head-orange-soft:#fff7ed;
    --cp-head-orange-border:#fed7aa;

    --cp-head-navy:#0f172a;
    --cp-head-navy-light:#1e293b;

    --cp-head-text:#334155;
    --cp-head-muted:#64748b;

    --cp-head-border:#e2e8f0;
    --cp-head-border-soft:#f1f5f9;

    --cp-head-white:#ffffff;
    --cp-head-soft:#f8fafc;

    --cp-head-height:76px;

    --cp-head-radius:14px;
    --cp-head-radius-lg:18px;

    --cp-head-shadow:
        0 20px 55px
        rgba(15,23,42,.13);

    --cp-head-shadow-soft:
        0 10px 30px
        rgba(15,23,42,.08);

}


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

.cp-site-header{

    position:relative;

    z-index:5000;

    width:100%;

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

    border-bottom:
        1px solid
        rgba(
            226,
            232,
            240,
            .95
        );

    box-shadow:
        0 1px 0
        rgba(
            15,
            23,
            42,
            .02
        );

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


/* Optional sticky header */

.cp-site-header.is-sticky{

    position:sticky;

    top:0;

}


/* ============================================================
   HEADER INNER
============================================================ */

.cp-header-inner{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    min-height:
        var(--cp-head-height);
}


/* ============================================================
   BRAND
============================================================ */

.cp-header-brand{

    display:inline-flex;

    align-items:center;

    gap:10px;

    flex:0 0 auto;

    color:
        var(--cp-head-navy);

    text-decoration:none;

    font-size:23px;

    font-weight:900;

    line-height:1;

    letter-spacing:-.04em;

    transition:
        transform .18s ease,
        opacity .18s ease;
}


.cp-header-brand:hover{

    transform:
        translateY(-1px);

}


.cp-header-brand-logo{

    width:44px;

    height:44px;

    flex:
        0 0 44px;

    overflow:hidden;

    border:
        1px solid
        var(--cp-head-border);

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 5px 16px
        rgba(
            15,
            23,
            42,
            .07
        );
}


.cp-header-brand-logo img{

    width:100%;

    height:100%;

    object-fit:cover;

}


.cp-header-brand strong{

    color:
        var(--cp-head-orange);

}


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

.cp-main-nav{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:4px;

    min-width:0;
}


/* ============================================================
   NAV LINKS
============================================================ */

.cp-nav-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:46px;

    padding:
        10px 14px;

    border:
        1px solid
        transparent;

    border-radius:12px;

    background:
        transparent;

    color:
        var(--cp-head-text);

    font-size:14px;

    font-weight:800;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.cp-nav-link:hover,
.cp-nav-link:focus-visible{

    color:
        var(--cp-head-orange);

    background:
        var(--cp-head-orange-soft);

    border-color:
        var(--cp-head-orange-border);

    transform:
        translateY(-1px);

}


/* ============================================================
   ACTIVE NAV
============================================================ */

.cp-nav-link.is-active,
.cp-nav-link[aria-current="page"]{

    color:
        var(--cp-head-orange);

    background:
        var(--cp-head-orange-soft);

    border-color:
        var(--cp-head-orange-border);

}


/* ============================================================
   LOGIN / CTA
============================================================ */

.cp-nav-link.cp-nav-login{

    min-height:44px;

    padding:
        10px 16px;

    background:
        linear-gradient(
            135deg,
            var(--cp-head-orange-light),
            var(--cp-head-orange)
        );

    border-color:
        transparent;

    color:#ffffff;

    box-shadow:
        0 8px 20px
        rgba(
            234,
            88,
            12,
            .20
        );
}


.cp-nav-link.cp-nav-login:hover{

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #fb923c,
            #ea580c
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 27px
        rgba(
            234,
            88,
            12,
            .28
        );
}


/* ============================================================
   SERVICES WRAPPER
============================================================ */

.cp-services-nav{

    position:relative;

}


/*
 * Invisible mouse bridge.
 * Prevents dropdown disappearing when cursor
 * moves from button to dropdown.
 */

.cp-services-nav::after{

    content:"";

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    height:15px;

}


/* ============================================================
   SERVICES TOGGLE
============================================================ */

.cp-services-toggle{

    appearance:none;

    -webkit-appearance:none;

    font-family:inherit;

}


.cp-services-arrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:16px;

    height:16px;

    transition:
        transform .2s ease;

}


.cp-services-arrow svg{

    width:12px;

    height:12px;

}


/* ============================================================
   SERVICES ACTIVE STATE
============================================================ */

.cp-services-nav:hover
.cp-services-toggle,

.cp-services-nav.is-open
.cp-services-toggle,

.cp-services-toggle[aria-expanded="true"]{

    color:
        var(--cp-head-orange);

    background:
        var(--cp-head-orange-soft);

    border-color:
        var(--cp-head-orange-border);

    box-shadow:
        0 8px 20px
        rgba(
            234,
            88,
            12,
            .07
        );

}


.cp-services-nav:hover
.cp-services-arrow,

.cp-services-nav.is-open
.cp-services-arrow,

.cp-services-toggle[aria-expanded="true"]
.cp-services-arrow{

    transform:
        rotate(180deg);

}


/* ============================================================
   SERVICES DROPDOWN
============================================================ */

.cp-services-menu{

    position:absolute;

    top:
        calc(100% + 11px);

    left:0;

    z-index:6000;

    width:340px;

    max-width:
        calc(100vw - 28px);

    max-height:
        min(
            475px,
            calc(100vh - 120px)
        );

    overflow-y:auto;

    overflow-x:hidden;

    margin:0;

    padding:9px;

    border:
        1px solid
        var(--cp-head-border);

    border-radius:
        var(--cp-head-radius-lg);

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

    box-shadow:
        var(--cp-head-shadow);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(10px)
        scale(.985);

    transform-origin:
        top left;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

}


/* ============================================================
   DESKTOP HOVER
============================================================ */

@media(min-width:901px){

    .cp-services-nav:hover
    > .cp-services-menu{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ============================================================
   CLICK / JS OPEN
============================================================ */

.cp-services-nav.is-open
> .cp-services-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);

}


/* ============================================================
   MENU HEADER
============================================================ */

.cp-services-menu-head{

    padding:
        9px 10px
        8px;

    margin-bottom:5px;

    border-bottom:
        1px solid
        var(--cp-head-border-soft);

}


.cp-services-menu-kicker{

    color:
        var(--cp-head-orange);

    font-size:8px;

    font-weight:900;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.cp-services-menu-title{

    margin-top:3px;

    color:
        var(--cp-head-navy);

    font-size:13px;

    font-weight:900;

}


/* ============================================================
   SERVICE LINKS
============================================================ */

.cp-service-nav-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    width:100%;

    min-height:45px;

    padding:
        9px 11px;

    margin:
        2px 0;

    border:
        1px solid
        transparent;

    border-radius:10px;

    background:
        transparent;

    color:
        #1e293b;

    font-size:13px;

    font-weight:700;

    line-height:1.35;

    text-decoration:none;

    white-space:normal;

    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        padding-left .16s ease,
        transform .16s ease;

}


/* ORANGE INDICATOR */

.cp-service-nav-link::before{

    content:"";

    position:absolute;

    left:5px;

    top:50%;

    width:3px;

    height:0;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            var(--cp-head-orange-light),
            var(--cp-head-orange)
        );

    transform:
        translateY(-50%);

    transition:
        height .16s ease;

}


/* ============================================================
   SERVICE HOVER
============================================================ */

.cp-service-nav-link:hover,
.cp-service-nav-link:focus-visible{

    padding-left:17px;

    border-color:
        var(--cp-head-orange-border);

    background:
        linear-gradient(
            90deg,
            #fff7ed 0%,
            #ffffff 100%
        );

    color:
        var(--cp-head-orange);

    transform:
        translateX(2px);

}


.cp-service-nav-link:hover::before,
.cp-service-nav-link:focus-visible::before{

    height:23px;

}


/* ============================================================
   CURRENT SERVICE
============================================================ */

.cp-service-nav-link.is-current,
.cp-service-nav-link[aria-current="page"]{

    border-color:
        var(--cp-head-orange-border);

    background:
        var(--cp-head-orange-soft);

    color:
        var(--cp-head-orange);

}


.cp-service-nav-link.is-current::before,
.cp-service-nav-link[aria-current="page"]::before{

    height:23px;

}


/* ============================================================
   SERVICE ARROW
============================================================ */

.cp-service-link-arrow{

    flex:
        0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    width:23px;

    height:23px;

    border-radius:7px;

    background:
        var(--cp-head-soft);

    color:
        #94a3b8;

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

}


.cp-service-link-arrow svg{

    width:11px;

    height:11px;

}


.cp-service-nav-link:hover
.cp-service-link-arrow{

    color:
        var(--cp-head-orange);

    background:
        #ffedd5;

    transform:
        translateX(2px);

}


/* ============================================================
   VIEW ALL SERVICES
============================================================ */

.cp-services-all{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:41px;

    margin-top:7px;

    padding:
        8px 12px;

    border-radius:9px;

    background:
        var(--cp-head-navy);

    color:#ffffff;

    font-size:10px;

    font-weight:900;

    text-decoration:none;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;

}


.cp-services-all:hover{

    background:
        var(--cp-head-orange);

    color:#ffffff;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(
            234,
            88,
            12,
            .18
        );

}


/* ============================================================
   DROPDOWN SCROLLBAR
============================================================ */

.cp-services-menu{

    scrollbar-width:thin;

    scrollbar-color:
        #cbd5e1
        transparent;

}


.cp-services-menu::-webkit-scrollbar{

    width:6px;

}


.cp-services-menu::-webkit-scrollbar-track{

    background:
        transparent;

}


.cp-services-menu::-webkit-scrollbar-thumb{

    background:
        #cbd5e1;

    border-radius:
        999px;

}


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

.cp-mobile-menu-button{

    display:none;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    flex:
        0 0 44px;

    padding:0;

    border:
        1px solid
        var(--cp-head-border);

    border-radius:11px;

    background:#ffffff;

    color:
        var(--cp-head-navy);

    cursor:pointer;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


.cp-mobile-menu-button:hover{

    color:
        var(--cp-head-orange);

    background:
        var(--cp-head-orange-soft);

    border-color:
        var(--cp-head-orange-border);

}


.cp-mobile-menu-button svg{

    width:21px;

    height:21px;

}


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

@media(max-width:900px){

    :root{

        --cp-head-height:68px;

    }


    .cp-header-inner{

        min-height:
            var(--cp-head-height);

    }


    .cp-header-brand{

        font-size:20px;

    }


    .cp-header-brand-logo{

        width:39px;

        height:39px;

        flex-basis:39px;

    }


    .cp-mobile-menu-button{

        display:inline-flex;

    }


    /* MAIN MOBILE NAV */

    .cp-main-nav{

        position:absolute;

        top:
            calc(100% + 8px);

        left:0;

        right:0;

        z-index:5900;

        display:none;

        width:100%;

        max-height:
            calc(100vh - 88px);

        overflow-y:auto;

        overflow-x:hidden;

        padding:10px;

        border:
            1px solid
            var(--cp-head-border);

        border-radius:16px;

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

        box-shadow:
            0 22px 60px
            rgba(
                15,
                23,
                42,
                .16
            );

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

    }


    .cp-main-nav.is-open{

        display:block;

        animation:
            cpMobileNavIn
            .18s ease both;

    }


    @keyframes cpMobileNavIn{

        from{

            opacity:0;

            transform:
                translateY(-6px);

        }

        to{

            opacity:1;

            transform:
                translateY(0);

        }

    }


    .cp-main-nav
    > .cp-nav-link,

    .cp-main-nav
    > .cp-services-nav{

        width:100%;

    }


    .cp-main-nav
    > .cp-nav-link{

        justify-content:flex-start;

        width:100%;

        min-height:45px;

        margin:2px 0;

        padding:
            11px 12px;

        font-size:13px;

    }


    /* SERVICES BUTTON MOBILE */

    .cp-services-toggle{

        justify-content:
            space-between;

        width:100%;

        min-height:45px;

        margin:2px 0;

        padding:
            11px 12px;

        font-size:13px;

    }


    .cp-services-nav::after{

        display:none;

    }


    /* SERVICE DROPDOWN MOBILE */

    .cp-services-menu{

        position:static;

        top:auto;

        left:auto;

        width:100%;

        max-width:none;

        max-height:none;

        overflow:visible;

        margin:
            4px 0
            8px;

        padding:7px;

        border:
            1px solid
            var(--cp-head-border);

        border-radius:12px;

        background:
            var(--cp-head-soft);

        box-shadow:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:none;

        display:none;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

    }


    .cp-services-nav.is-open
    > .cp-services-menu{

        display:block;

        animation:
            cpServicesMobileIn
            .17s ease both;

    }


    @keyframes cpServicesMobileIn{

        from{

            opacity:0;

            transform:
                translateY(-4px);

        }

        to{

            opacity:1;

            transform:
                translateY(0);

        }

    }


    .cp-services-menu-head{

        padding:
            8px 9px;

    }


    .cp-service-nav-link{

        min-height:42px;

        padding:
            8px 10px;

        font-size:12px;

    }


    .cp-service-nav-link:hover{

        padding-left:15px;

    }


    .cp-services-all{

        min-height:39px;

    }

}


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

@media(max-width:520px){

    .cp-header-inner{

        gap:10px;

    }


    .cp-header-brand{

        font-size:18px;

    }


    .cp-main-nav{

        left:-2px;

        right:-2px;

        width:
            calc(100% + 4px);

    }


    .cp-services-menu-title{

        font-size:12px;

    }

}


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

@media(max-width:370px){

    .cp-header-brand{

        font-size:16px;

    }


    .cp-header-brand-logo{

        width:35px;

        height:35px;

        flex-basis:35px;

    }


    .cp-mobile-menu-button{

        width:40px;

        height:40px;

        flex-basis:40px;

    }

}


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

.cp-nav-link:focus-visible,
.cp-services-toggle:focus-visible,
.cp-service-nav-link:focus-visible,
.cp-mobile-menu-button:focus-visible,
.cp-services-all:focus-visible{

    outline:
        3px solid
        rgba(
            249,
            115,
            22,
            .30
        );

    outline-offset:2px;

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .cp-nav-link,

    .cp-header-brand,

    .cp-services-arrow,

    .cp-services-menu,

    .cp-service-nav-link,

    .cp-service-link-arrow,

    .cp-mobile-menu-button,

    .cp-services-all{

        transition:none!important;

        animation:none!important;

    }


    .cp-main-nav.is-open,

    .cp-services-nav.is-open
    > .cp-services-menu{

        animation:none!important;

    }

}