/* White navigation treatment; scoped to the shared site header. */
#header {
    --header-accent: #e48b36;
    background: #fff;
    color: #30343b;
    box-shadow: 0 1px 0 rgba(30, 36, 44, .07), 0 3px 14px rgba(30, 36, 44, .035);
}

#header #logo,
#header #logo.active {
    background-image: url('../img/logo.png') !important;
}

@supports (mask-image: url('')) or (-webkit-mask-image: url('')) {
    #header #logo,
    #header #logo.active {
        background-image: none !important;
        background-color: var(--header-accent);
        -webkit-mask: url('../img/w_logo.png') center / contain no-repeat;
        mask: url('../img/w_logo.png') center / contain no-repeat;
    }
}

#header .nav-item > a,
#header.active .nav-item > a {
    padding-left: 0;
    padding-right: 0;
    color: #30343b;
    font-weight: 500;
    transition: color 220ms ease;
}

#header .nav-item > a::after {
    bottom: 13px;
    width: 50%;
    max-width: 64px;
    height: 2px;
    border-radius: 2px;
    background: var(--header-accent);
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 260ms cubic-bezier(.22, .61, .36, 1), opacity 180ms ease;
}

#header .nav-item:hover > a,
#header .nav-item:focus-within > a,
#header .nav-item.is-current > a {
    color: #df792e;
}

#header .nav-item:hover > a::after,
#header .nav-item:focus-within > a::after,
#header .nav-item.is-current > a::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

#header .header-bg {
    background: #fff;
}

#header.active .header-bg {
    box-shadow: 0 10px 20px -14px rgba(30, 36, 44, .18);
}

#header .nav-item > ul a {
    color: #535961;
    border-radius: 4px;
    transition: color 180ms ease, background-color 180ms ease;
}

#header .nav-item > ul a:hover,
#header .nav-item > ul a:focus-visible,
#header .nav-item > ul a[aria-current='page'] {
    color: #df792e;
    background-color: #fff7ee;
}

#header #translateBtn {
    color: #535961;
    transition: color 180ms ease, background-color 180ms ease;
}

#header #translateBtn:hover {
    color: #df792e;
    background: #fff7ee;
}

#header #toggler span,
#header #toggler.active span {
    background-color: #30343b;
}

#header a:focus-visible,
#header button:focus-visible,
#header select:focus-visible {
    outline: 2px solid #df792e;
    outline-offset: 4px;
}

#header .main-nav a[aria-current='page'],
#header .main-nav li.is-current > .container > div > a {
    color: #df792e;
}

@media (prefers-reduced-motion: reduce) {
    #header *,
    #header *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}