/*
 * Sticky site header and mobile menu — pairs with public/js/nav.js.
 * Loaded after 2-expat.webflow.css so these rules win at equal specificity.
 *
 * The bar has three looks, and nav.js picks between them:
 *   (no class)       white bar, dark logo — the light pages, and the state the
 *                    HTML renders in, so it is right before any script runs
 *   .is-transparent  see-through over a dark hero, white logo
 *   .is-dark         dark green once that hero has scrolled past, white logo
 *
 * `:has(~ .hero-section-2)` joins the see-through selectors so a hero page
 * paints correctly on the very first frame, before nav.js has measured
 * anything. It only ever agrees with what nav.js is about to set.
 */

.navigation-bar {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    -webkit-transition: background-color 300ms ease;
    transition: background-color 300ms ease;
}

.navigation-bar:has(~ .hero-section-2),
.navigation-bar.is-transparent {
    background-color: transparent;
    border-bottom-color: transparent;
}

.navigation-bar.is-dark {
    background-color: #1d2b24;
    border-bottom-color: transparent;
}

/* Both logos are in the markup; only one is ever shown. */
.nav-logo-inverse {
    display: none;
}

.navigation-bar:has(~ .hero-section-2) .nav-logo-dark,
.navigation-bar.is-transparent .nav-logo-dark,
.navigation-bar.is-dark .nav-logo-dark {
    display: none;
}

.navigation-bar:has(~ .hero-section-2) .nav-logo-inverse,
.navigation-bar.is-transparent .nav-logo-inverse,
.navigation-bar.is-dark .nav-logo-inverse {
    display: block;
}

/* Burger / close button. Three bars that fold into a cross, so the open menu
   always shows the way out. */
.nav-toggle {
    position: relative;
    display: none;
    width: 44px;
    height: 44px;
    margin: 0 0 0 30px;
    padding: 0;
    border: 0;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.nav-toggle::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 6px;
    bottom: 6px;
    border-left: 1px solid rgba(52, 78, 65, 0.15);
}

.navigation-bar:has(~ .hero-section-2) .nav-toggle::before,
.navigation-bar.is-transparent .nav-toggle::before,
.navigation-bar.is-dark .nav-toggle::before {
    border-left-color: hsla(0, 0%, 100%, 0.15);
}

.nav-toggle-bar {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background-color: #344e41;
    -webkit-transition: top 250ms ease, -webkit-transform 250ms ease, opacity 150ms ease;
    transition: top 250ms ease, transform 250ms ease, opacity 150ms ease;
}

.navigation-bar:has(~ .hero-section-2) .nav-toggle-bar,
.navigation-bar.is-transparent .nav-toggle-bar,
.navigation-bar.is-dark .nav-toggle-bar {
    background-color: #fff;
}

.nav-toggle-bar:nth-child(1) {
    top: 14px;
}

.nav-toggle-bar:nth-child(2) {
    top: 21px;
}

.nav-toggle-bar:nth-child(3) {
    top: 28px;
}

.navigation-bar.is-open .nav-toggle-bar:nth-child(1) {
    top: 21px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.navigation-bar.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.navigation-bar.is-open .nav-toggle-bar:nth-child(3) {
    top: 21px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.nav-menu-item-mobile {
    display: none;
}

/* Desktop only: below 992px the links live in their own white panel, which
   already styles them. */
@media screen and (min-width: 992px) {
    .navigation-bar .text-white.nav-link,
    .navigation-bar .text-block-4,
    .navigation-bar .dropdown-icon {
        color: #344e41;
    }

    .navigation-bar:has(~ .hero-section-2) .text-white.nav-link,
    .navigation-bar.is-transparent .text-white.nav-link,
    .navigation-bar.is-dark .text-white.nav-link,
    .navigation-bar:has(~ .hero-section-2) .text-block-4,
    .navigation-bar.is-transparent .text-block-4,
    .navigation-bar.is-dark .text-block-4,
    .navigation-bar:has(~ .hero-section-2) .dropdown-icon,
    .navigation-bar.is-transparent .dropdown-icon,
    .navigation-bar.is-dark .dropdown-icon {
        color: #fff;
    }
}

@media screen and (max-width: 991px) {
    .nav-toggle {
        display: block;
    }

    .nav-menu-item-mobile {
        display: block;
    }

    /* An open panel always hangs off an opaque bar — otherwise it floats
       under a see-through header. Light pages just keep their white bar. */
    .navigation-bar.is-open:has(~ .hero-section-2),
    .navigation-bar.is-open.is-transparent {
        background-color: #1d2b24;
    }

    .navigation-bar .navigation-menu {
        display: none;
    }

    .navigation-bar.is-open .navigation-menu {
        display: block;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    /* Services opens inline instead of floating over the panel, so a long
       submenu pushes the rest of the list down and scrolls with it. */
    .navigation-menu .w-dropdown {
        display: block;
        width: 100%;
    }

    .navigation-menu .w-dropdown-toggle {
        display: block;
        padding-right: 30px;
    }

    /* The panel is white, so the bar's white caret and the hover-only 50%
       opacity both have to be undone for touch. */
    .navigation-menu .dropdown-icon {
        margin-right: 5px;
        color: #344e41;
    }

    .navigation-bar .navigation-menu-item,
    .navigation-menu .dropdown-link {
        opacity: 1;
    }

    .navigation-menu .dropdown-list.w--open {
        position: static;
        padding: 5px 0 5px 15px;
        border-width: 0;
        background-color: transparent;
    }
}