/* Site-specific overrides loaded after third-party styles. */

/* Mobile menu icon matched to the light gray used in the NHDC logo. */
.menu-nav,
.menu-nav.open {
    position: relative;
    background-image: none;
    background-color: transparent;
    transform: none;
}

.menu-nav::before,
.menu-nav::after {
    content: "";
    position: absolute;
    left: 2px;
    width: 28px;
    transition: transform 250ms ease, opacity 250ms ease, background 250ms ease;
}

.menu-nav::before {
    top: 6px;
    height: 20px;
    background: linear-gradient(
        to bottom,
        #BCBEC0 0,
        #BCBEC0 3px,
        transparent 3px,
        transparent 8px,
        #BCBEC0 8px,
        #BCBEC0 11px,
        transparent 11px,
        transparent 16px,
        #BCBEC0 16px,
        #BCBEC0 19px
    );
}

.menu-nav::after {
    top: 15px;
    height: 3px;
    background: #BCBEC0;
    opacity: 0;
}

.menu-nav.open::before {
    top: 15px;
    height: 3px;
    background: #BCBEC0;
    transform: rotate(45deg);
}

.menu-nav.open::after {
    opacity: 1;
    transform: rotate(-45deg);
}

/* One-pixel mobile menu separators in the NHDC logo gray. */
#navigation-mobile {
    border-bottom: 0;
}

#menu-nav-mobile {
    border-top: 1px solid #BCBEC0;
    border-bottom: 1px solid #BCBEC0;
}

#navigation-mobile li {
    border-top: 0;
}

#navigation-mobile li + li {
    border-top: 1px solid #BCBEC0;
}

#menu-nav-mobile li.current,
#menu-nav-mobile li.active {
    background: #FFF;
}

#menu-nav-mobile li.current a,
#menu-nav-mobile li.active a,
#menu-nav-mobile li a:hover,
#menu-nav-mobile li a:focus {
    background: #FFF;
    color: #8CC63F;
}

/* Fancybox gallery: vertical thumbnails on desktop, horizontal on mobile. */
.fancybox-bg {
    background: #FFF;
}

.fancybox-is-open .fancybox-bg {
    opacity: 1;
}

.fancybox-thumbs {
    width: 110px;
    background: #FFF;
}

.fancybox-show-thumbs .fancybox-inner {
    right: 110px;
}

.fancybox-thumbs__list a {
    max-width: 100%;
}

.fancybox-thumbs__list a::before {
    border-color: #8CC63F;
}

.fancybox-caption {
    background: none;
    color: #666;
}

.fancybox-progress {
    background: #8CC63F;
}

@media (min-width: 768px) {
    .fancybox-thumbs {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 110px;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .fancybox-thumbs__list,
    .fancybox-thumbs-x .fancybox-thumbs__list {
        width: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        white-space: normal;
    }

    .fancybox-thumbs__list a {
        float: none;
        display: block;
        width: 100px;
        height: 75px;
        max-width: calc(100% - 4px);
        margin: 2px;
    }
}

@media (max-width: 767px) {
    .fancybox-thumbs {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 90px;
        padding: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    .fancybox-show-thumbs .fancybox-inner {
        right: 0;
        bottom: 90px;
    }

    .fancybox-thumbs .fancybox-thumbs__list {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        width: max-content !important;
        min-width: 100%;
        height: 82px;
        overflow: visible;
        white-space: nowrap;
    }

    .fancybox-thumbs__list a {
        float: none;
        display: block;
        flex: 0 0 100px;
        width: 100px;
        height: 75px;
        max-width: none;
        margin: 2px;
        vertical-align: top;
    }

    .fancybox-caption {
        left: 12px;
        right: 12px;
        bottom: 10px;
        width: auto;
        padding: 10px 12px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.78);
        color: #333;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .fancybox-caption__body {
        max-height: 5.5em;
        overflow-y: auto;
        line-height: 1.45;
    }
}