/*
 * ThroLine white navbar
 * Load this file after site.css so these shared-header rules take priority.
 */

:root {
    --header-height: 108px;
    --header-height-mobile: 88px;
}

html {
    scroll-padding-top: var(--header-height);
}

.site-header,
.site-header.scrolled {
    background: var(--brand-white);
    border-bottom: 1px solid rgba(18, 61, 104, .12);
    box-shadow: 0 8px 30px rgba(9, 44, 80, .10);
}

    .site-header.scrolled {
        box-shadow: 0 12px 34px rgba(9, 44, 80, .16);
    }

.navbar {
    min-height: var(--header-height);
    padding: 8px 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 270px;
    min-height: 90px;
    padding: 0;
}

    .navbar-brand img {
        width: 100%;
        height: 86px;
        object-fit: contain;
        object-position: left center;
    }

.nav-link,
.site-header.scrolled .nav-link {
    color: var(--brand-blue) !important;
}

    .nav-link:hover,
    .nav-link.active,
    .site-header.scrolled .nav-link:hover,
    .site-header.scrolled .nav-link.active {
        color: var(--brand-blue-deep) !important;
    }

.navbar-toggler,
.site-header.scrolled .navbar-toggler {
    border-color: rgba(18, 61, 104, .35);
    background: rgba(234, 243, 251, .6);
}

    .navbar-toggler span,
    .site-header.scrolled .navbar-toggler span {
        background: var(--brand-blue);
    }

    .navbar-toggler:focus {
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px rgba(18, 61, 104, .16);
    }

/* Allow for the taller fixed header on the main page and About page. */
.hero {
    padding-top: 158px;
}

.about-page-hero {
    padding-top: 158px;
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: var(--header-height-mobile);
    }

    .navbar {
        min-height: var(--header-height-mobile);
        padding: 6px 0;
    }

    .navbar-brand {
        width: 220px;
        min-height: 74px;
    }

        .navbar-brand img {
            height: 72px;
        }

    .navbar-collapse {
        margin: 6px -18px -6px;
        padding: 14px 20px 22px;
        background: var(--brand-white);
        border-top: 1px solid rgba(18, 61, 104, .12);
        box-shadow: 0 18px 35px rgba(9, 44, 80, .13);
    }

    .nav-link,
    .site-header .nav-link,
    .site-header.scrolled .nav-link {
        color: var(--brand-blue) !important;
    }

        .nav-link:hover,
        .nav-link.active,
        .site-header.scrolled .nav-link:hover,
        .site-header.scrolled .nav-link.active {
            color: var(--brand-blue-deep) !important;
        }

    .hero,
    .about-page-hero {
        padding-top: 132px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --header-height-mobile: 80px;
    }

    .navbar {
        min-height: var(--header-height-mobile);
    }

    .navbar-brand {
        width: 185px;
        min-height: 66px;
    }

        .navbar-brand img {
            height: 64px;
        }

    .hero,
    .about-page-hero {
        padding-top: 118px;
    }
}