/* @group Site Nav
------------------------------------ */

:root {
    --heightSiteNav: 8.7rem;
    --heightBorderSiteNav: .8rem;
}

.site-nav {
    position: fixed;
    z-index: var(--z-index-site-nav);
    top: 0;
    width: 100%;
    background: var(--background);
    transition: all var(--transitionDelay);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    border-top: var(--heightBorderSiteNav) solid var(--colorBorderSiteNav);

    /* General */
    --transitionDelay: .6s;
    --colorBorderSiteNav: var(--blue);
    /* Background */
    --background: var(--cream);
    /* CTA */
    --buttonText: var(--green);
    --buttonBackground: transparent;
    --buttonTextHover: var(--lightCream);
    --buttonBackgroundHover: var(--green);
    /* Logo */
    --widthLogo: 10.5rem;
    --widthLogoMobile: 14.8rem;
}

.site-nav * {
    transition: all var(--transitionDelay);
}

.site-nav a {
    text-decoration: none;
    font: inherit;
    --transitionDelay: .3s;
}

.site-nav+.container,
.site-nav+.bp-spacer {
    margin-top: calc(var(--heightSiteNav) + var(--heightBorderSiteNav));
}

.site-nav .row {
    height: var(--heightSiteNav);
    align-items: center;
    justify-content: center;
}

.site-nav .logo {
    width: var(--widthLogo);
    height: auto;
}

.site-nav .logo img {
    object-fit: contain;
}

.site-nav .bttn-wrapper .bp-button {
    --_color: var(--buttonText);
    --_bg: none var(--buttonBackground);
}

@media only screen and (min-width: 961px) {
    :root {
        --heightSiteNav: 12.9rem;
        --heightBorderSiteNav: 1.7rem;
    }

    .site-nav {
        --widthLogo: 19.9rem;
        --buttonBackground: var(--lightCream);
    }

    .site-nav .logo-wrapper {
        margin: 0 auto;
        text-align: center;
    }

    .site-nav .bttn-wrapper {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
    }

    .site-nav .bttn-wrapper .bp-button:hover {
        --_color: var(--buttonTextHover);
        --_bg: none var(--buttonBackgroundHover);
    }
}

@media only screen and (min-width: 0) and (max-width: 960px) {
    .site-nav .logo {
        width: var(--widthLogoMobile);
    }
    .site-nav .content-box {
        display: flex;
        align-items: center;
    }

    .site-nav .content-box :is(.logo-wrapper, .bttn-wrapper) {
        flex: 0 1 50%;
    }

    .site-nav .bttn-wrapper {
        text-align: right;
    }

    .site-nav .bttn-wrapper .bp-button {
        --paddingInline: 0;
        --paddingBlock: 0;
        border-radius: 0;
    }
}

/* @end */