/*=====================================================
        VIVCON POLYCAB HEADER (smooth, scroll-linked)

        header#pq-header is permanently position:fixed
        (set in style.css). This file only interpolates
        its internal sizing continuously via --scroll-progress,
        which js/header-scroll.js updates every frame.
======================================================*/

:root{

    --header-height:90px;
    --header-height-small:56px;

    --topbar-height:44px;

    --logo-scale-small:.68;

    --contact-scale-small:.8;

    /* Driven every frame by js/header-scroll.js, 0 at top of page, 1 once fully shrunk */
    --scroll-progress:0;

}

/*----------------------------------------------------*/

header#pq-header{

    z-index:999;

}

/*----------------------------------------------------*/
/* Top contact/social bar collapses away as you scroll */

header#pq-header .pq-top-header{

    height:calc(var(--topbar-height) * (1 - var(--scroll-progress)));

    overflow:hidden;

    opacity:calc(1 - var(--scroll-progress));

}

/*----------------------------------------------------*/

header#pq-header .pq-bottom-header{

    height:calc(var(--header-height) - (var(--header-height) - var(--header-height-small)) * var(--scroll-progress));

    background:#fff;

    display:flex;

    align-items:center;

    box-shadow:0 18px 45px rgba(0,0,0,calc(.08 * var(--scroll-progress)));

    will-change:height,box-shadow;

}

/*----------------------------------------------------*/

header#pq-header .navbar{

    height:100%;

    display:flex;

    align-items:center;

}

/*----------------------------------------------------*/

header#pq-header .navbar-brand{

    display:flex;

    align-items:center;

    height:100%;

}

header#pq-header .navbar-brand img.logo{

    height:60px;

    width:auto;

    transform-origin:left center;

    transform:scale(calc(1 - (1 - var(--logo-scale-small)) * var(--scroll-progress)));

    will-change:transform;

}

/*----------------------------------------------------*/

header#pq-header .pq-header-info-box{

    transform-origin:right center;

    transform:scale(calc(1 - (1 - var(--contact-scale-small)) * var(--scroll-progress)));

    will-change:transform;

}

/*----------------------------------------------------*/

header#pq-header .pq-menu-search-block{

    transform-origin:right center;

    transform:scale(calc(1 - (1 - .92) * var(--scroll-progress)));

    will-change:transform;

}

/*----------------------------------------------------*/

header#pq-header .navbar-nav{

    height:100%;

    display:flex;

    align-items:center;

}

header#pq-header .navbar-nav>li{

    height:100%;

    display:flex;

    align-items:center;

}

header#pq-header .navbar-nav>li>a{

    display:flex;

    align-items:center;

    height:100%;

    padding:0 18px;

    transition:color .3s ease;

}