{##
 # TODO: Need to organize and possibly simplfy/optimize the CSS for the nav button/hamburger and nav flyout into the following sections:
 # 1) Desktop breakpoint, sidebar visible,nav flyout hidden
 # 2) Desktop breakpoint, sidebar visible, nav flyout visible (top-level menu item selected)
 # 3) Desktop breakpoint, sidebar visible, nav flyout visible, back button visible (> first-level submenu selected)
 # 4) Intermediate breakpoint, sidebar hidden, nav button visible, nav flyout hidden
 # 5) Intermediate breakpoint, sidebar hidden, nav button active, nav flyout visible (displaying top-level menu)
 # 6) Intermediate breakpoint, sidebar hidden, back button visible, nav flyout visible (>= first-level submenu selected)
 # 7) Mobile breakpoint, sidebar hidden, nav button visible, nav flyout hidden
 #    • Same as intermediate breakpoint but with item sizes and positions tweaked for mobile; nav flyout 100vw
 # 8) Mobile breakpoint, sidebar hidden, nav button active, nav flyout visible (displaying top-level menu)
 # 9) Mobile breakpoint, sidebar hidden, back button visible, nav flyout visible (>= first-level submenu selected)
 #}

:root {
    --nav-flyout-left: var(--nav-sidebar-width);
    --nav-flyout-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1);
}
.accessibility-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
/* When displaying the sidebar, adjust the document body left margin to account for the sidebar */
@media only screen and (min-width: 1001px) {
    body {
        position: relative;
        margin-left: var(--nav-sidebar-width);
    }
    body.full-width-footer footer {
        width: calc(100% + var(--nav-sidebar-width));
        margin-left: calc(-1 * var(--nav-sidebar-width));
    }
}
.nav-sidebar {
    position: absolute;
    left: calc(-1 * var(--nav-sidebar-width));
    height: 100%;
    z-index: 10001;
}
.nav-sidebar-outer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: var(--nav-sidebar-width);
    height: 100vh;
    box-sizing: border-box;
    color: #000000;
    background: var(--nav-sidebar-color-bkgd);
    font-size: 14px;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */

    /* box-sizing: content-box; */
}
.nav-sidebar-outer::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}
.nav-sidebar:has(li.has-submenu.selected) .nav-sidebar-outer {
    /* border-right: var(--nav-flyout-border-left-width) solid var(--nav-sidebar-color-bkgd-hover); */
    box-shadow: 2px 0px 0px var(--nav-sidebar-color-bkgd-hover);
}
body.full-width-footer .nav-sidebar-outer {
    position: sticky;
    top: calc(100% - 100vh);
    margin-bottom: var(--footer-height);
}
.nav-sidebar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 25px;
    padding: 20px 0 30px 0;
}
.nav-sidebar-logo {
}
.nav-sidebar-logo a {
    display: block;
}
.nav-sidebar-logo a img { 
    width: auto;
    height: 44px;
}
#nav-main,
#nav-sidebar-cta {
    padding: 0 var(--nav-sidebar-menu-padding-horz);
}
#nav-main > ul,
#nav-sidebar-cta > ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style-type: none;

    box-sizing: content-box;
    margin-right: calc(-1 * var(--nav-sidebar-menu-padding-horz));
    padding-right: var(--nav-sidebar-menu-padding-horz);
}
#nav-main > ul > li,
#nav-sidebar-cta > ul > li {
    width: 100%;

    box-sizing: content-box;
    margin-right: calc(-1 * var(--nav-sidebar-menu-padding-horz));
    padding-right: var(--nav-sidebar-menu-padding-horz);
}
#nav-main > ul > li a *,
#nav-sidebar-cta > ul > li a * {
    font-size: 1em;
    line-height: 1.2;
}
#nav-main > ul > li a p,
#nav-sidebar-cta > ul > li a p {
    margin: 0;
}

#nav-main > ul > li a,
#nav-sidebar-cta > ul > li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin: 0;
    padding: 10px;
    color: #000000;
    /* border-radius: 15px; */
    border-radius: var(--border-radius-md);
    font-size: 1em;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
}
#nav-main > ul > li.selected > a {
    color: var(--color-blue);
    background-color: var(--nav-sidebar-color-bkgd-hover);
}
#nav-main .nav-item-icon,
#nav-sidebar-cta .nav-item-icon {
    width: 33px;
    height: 33px;
    background-color: #000000;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
#nav-main .nav-item-icon {
    background-color: #000000;
}
#nav-main > ul > li.selected > a > .nav-item-icon {
    background-color: var(--color-blue);
}
#nav-main .nav-item-icon img,
#nav-sidebar-cta .nav-item-icon img {
    width: 100%;
    height: auto;
    opacity: 0; /* Hide the image; we will use the image as a mask instead so we can recolor it */
}
#nav-sidebar-cta > ul > li > a,
#nav-flyout #nav-flyout-cta > ul > li > a {
    color: #ffffff;
    background-color: var(--color-blue);
}
#nav-sidebar-cta > ul > li.selected > a,
#nav-flyout #nav-flyout-cta > ul > li:has(a:hover) > a {
    color: #ffffff;
    background-color: var(--color-blue-hover);
}
#nav-sidebar-cta .nav-item-icon,
#nav-flyout #nav-flyout-cta .nav-item-icon {
    background-color: #ffffff;
}
#nav-sidebar-cta > ul > li.selected > a > .nav-item-icon,
#nav-flyout #nav-flyout-cta > ul > li:has(a:hover) > a > .nav-item-icon {
    background-color: var(--nav-sidebar-color-bkgd-hover);
}


/**
 * NAV BUTTON/HAMBURGER
 */
#nav-button {
    display: none;
    position: fixed;
    top: 22px;
    left: calc(var(--nav-flyout-left) + 20px);
    width: 40px;
    height: 40px;
    z-index: 10001; /* 1 level above #nav-flyout */
}
/* Show nav button if it has been tapped/clicked or set to .is-active programmatically; also if the nav button is being used as the back button */
#nav-button:has(button.hamburger.is-active, button.hamburger.is-back),
#nav-button:has(button.hamburger.is-active-debug, button.hamburger.is-back-debug) {
    display: block;
}
/* Adjust the left position of the nav button on desktop breakpoint when it's being used as the back button */
#nav-button:has(button.hamburger.is-back:not(.is-active)),
#nav-button:has(button.hamburger.is-back-debug:not(.is-active-debug)) {
    left: calc(var(--nav-flyout-left) + 20px + 8px);
}
#nav-button > button.hamburger {
    padding: 0;
}
#nav-button > button.hamburger:hover,
#nav-button > button.hamburger:focus,
#nav-button > button.hamburger:active {
    background: none;
    border: none;
    border-radius: 0;
}
#nav-button > button.hamburger .hamburger-box {
    width: 36px;
}
#nav-button > button.hamburger .hamburger-inner,
#nav-button > button.hamburger .hamburger-inner::before,
#nav-button > button.hamburger .hamburger-inner::after {
    width: 36px;
    height: 5px;
}
/* Additional back/left chevron arrangement of hamburger SVG elements */
/* Supplement styling for back/left checvon (.is-back) when .is-active (squeeze "x" hamburger style) is not present */
#nav-button > button.hamburger.hamburger--squeeze.is-back:not(.is-active) .hamburger-inner,
#nav-button > button.hamburger.hamburger--squeeze.is-back-debug:not(.is-active) .hamburger-inner {
    transform: rotate(45deg);
}
#nav-button > button.hamburger.hamburger--squeeze.is-back:not(.is-active) .hamburger-inner::before,
#nav-button > button.hamburger.hamburger--squeeze.is-back-debug:not(.is-active) .hamburger-inner::before {
    /* top: 0; */
    opacity: 0;
}
#nav-button > button.hamburger.hamburger--squeeze.is-back:not(.is-active) .hamburger-inner::after,
#nav-button > button.hamburger.hamburger--squeeze.is-back-debug:not(.is-active) .hamburger-inner::after {
    /* bottom: 0; */
    transform: rotate(-90deg);
}
#nav-button > button.hamburger.is-back .hamburger-inner,
#nav-button > button.hamburger.is-back-debug .hamburger-inner {
    /*
    left: 8px;
    top: 20px;
    width: 28px;
    */
    /*
    left: 12px;
    top: 17px;
    width: 22px;
    */
    left: 0px;
    top: 17px;
    width: 22px;
}
#nav-button > button.hamburger.is-back .hamburger-inner::before,
#nav-button > button.hamburger.is-back-debug .hamburger-inner::before {
    /*
    left: 0;
    top: 0;
    width: 28px;
    */
    left: 0;
    top: 0;
    width: 22px;  
}
#nav-button > button.hamburger.is-back .hamburger-inner::after,
#nav-button > button.hamburger.is-back-debug .hamburger-inner::after {
    /*
    left: -12px;
    bottom: 12px;
    width: 28px;
    */
    left: -9px;
    bottom: 9px;
    width: 22px;
}


/**
 * SUBMENU ITEMS
 */
/* SUBMENU FLYOUT */
#nav-flyout {
    display: block;   
    position: fixed;
    top: 0;
    left: calc(var(--nav-flyout-left) + (-1 * var(--nav-sidebar-submenu-width)));
    width: var(--nav-sidebar-submenu-width);
    height: 100vh;
    overflow: hidden;
    background-color: var(--nav-sidebar-color-bkgd);
    /* border-left: var(--nav-flyout-border-left-width) solid var(--nav-sidebar-color-bkgd-hover); */
    /* border-radius: 0 15px 15px 0; */
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    padding: var( --nav-flyout-padding);
    z-index: 10000;
    font-size: 16px;

    left: calc(var(--nav-flyout-left) + (-1 * var(--nav-sidebar-submenu-width)));
    /* transition: left 0.4s ease; */

    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: start;
    gap: 25px;
}
#nav-flyout.hide-animation {
    animation: 0.4s nav-flyout-out;
}
/* Adds padding-top to flyout submenu when #nav-button is visible */
.header:has(#nav-button > button.hamburger.is-active, #nav-button > button.hamburger.is-back) #nav-flyout,
.header:has(#nav-button > button.hamburger.is-active-debug, #nav-button > button.hamburger.is-back-debug) #nav-flyout {
    padding-top: calc(48px + 24px); /* #nav-button top + #nav-button height */
}
/* Show #nav-flyout when .visible class is present or the nav button/hamburger has been selected */
#nav-flyout.visible,
.header:has(#nav-button > button.hamburger.is-active) #nav-flyout,
#nav-flyout.visible-debug,
.header:has(#nav-button > button.hamburger.is-active-debug) #nav-flyout {
    left: var(--nav-flyout-left);
    opacity: 1;
    animation: 0.4s nav-flyout-in;

    padding-left: 12px;

    box-shadow: var(--nav-flyout-shadow);
}
#nav-flyout::-webkit-scrollbar {
    /* display: none;  /* Older Safari and Chromium */
}
#nav-flyout:has(.selected),
.header:has(#nav-main li.has-submenu.selected) #nav-flyout {
    left: var(--nav-flyout-left);
    box-shadow: var(--nav-flyout-shadow);
}


/* MENU ITEMS/SUBMENU ITEMS */
.nav-flyout-nav-outer {
    position: relative; /* For relatively-absolute positioning of call-to-action buttons */
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: start;
    gap: 25px;
    /* Accommodate focus outline on menu/submenu items */
    margin: -2px;
    padding: 2px;

    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */

    height: 100%;
}
.nav-flyout-nav-outer::-webkit-scrollbar {
    display: none;  /* Older Safari and Chromium */
}
#nav-flyout ul {
    position: relative;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* Animate submenus sliding left/right into flyout menu */
#nav-flyout .submenu > .submenu-outer > ul {
    transition: left 0.4s ease;
}
#nav-flyout ul > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
#nav-flyout ul > li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: 10px;
    width: 100%;
    height: calc(33px + 5px + 5px);
    margin: 0;
    padding: 5px 10px;
    /* border-radius: 15px; */
    border-radius: var(--border-radius-md);
    box-sizing: border-box;
    color: #000000;
    font-size: 1em;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;

    /* margin-left: -8px; */
}
#nav-flyout ul > li a * {
    font-size: 1em;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    flex: 1 1 auto;
}
.nav-item-title,
#nav-flyout ul > li a p {
    margin: 0;

    width: 100%;
    text-overflow: ellipsis;
}
#nav-flyout li:has(.submenu) > a::after {
    content: '';
    display: block;
    width: 10px;
    height: 33px;
    flex: 0 0 auto;
    /* -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 6.7 11.7'%3E%3C!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; %7D .st1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st1' d='M.8,11.7c-.2,0-.4,0-.6-.2-.3-.3-.3-.9,0-1.2l4.4-4.4L.3,1.4C0,1.1,0,.6.3.3.6,0,1.1,0,1.4.3l5,5c.3.3.3.9,0,1.2L1.4,11.4c-.2.2-.4.2-.6.2Z'/%3E%3Crect class='st0' width='6.7' height='11.7'/%3E%3C/svg%3E"); /* Right chevron SVG */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    /* mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 6.7 11.7'%3E%3C!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; %7D .st1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st1' d='M.8,11.7c-.2,0-.4,0-.6-.2-.3-.3-.3-.9,0-1.2l4.4-4.4L.3,1.4C0,1.1,0,.6.3.3.6,0,1.1,0,1.4.3l5,5c.3.3.3.9,0,1.2L1.4,11.4c-.2.2-.4.2-.6.2Z'/%3E%3Crect class='st0' width='6.7' height='11.7'/%3E%3C/svg%3E"); /* Right chevron SVG */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #000000;
}
/* NAV FLYOUT CTA */
/* See also above */
#nav-flyout-cta {
    /* position: absolute; /* Absolute positioning will be applied by the JavaScript function that gets/sets the calculated top position */
    left: 0px;
    width: 100%;
    transition: left 0.4s ease;
}
#nav-flyout-cta > ul > li > a {
}
/* SUBMENUS/ITEMS */
#nav-flyout .submenu {
    position: relative;
    height: 0px;

    position: absolute;
    top: 0px;
    left: 0px;

    left: calc(-1 * var(--nav-flyout-padding));
}
#nav-flyout .submenu-outer {
    position: relative;
    top: calc(-1 * var(--nav-flyout-padding));
    left: 100%;
    width: var(--nav-sidebar-submenu-width);
    padding: var(--nav-flyout-padding);
    overflow: visible;

    visibility: hidden;
}
#nav-flyout .submenu-outer::-webkit-scrollbar {
    display: none;  /* Older Safari and Chromium */
}
#nav-flyout .submenu-outer > ul {
}
#nav-flyout .submenu-outer > ul > li {
}


/* FIRST-LEVEL MENU/ITEMS */
#nav-flyout > ul {
    gap: 10px;
}
#nav-flyout > ul > li {
}
#nav-flyout > ul > li > a {
}
#nav-flyout .nav-item-icon {
    width: 33px;
    height: 33px;
    flex: 0 0 auto;
    background-color: #000000;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
#nav-flyout .nav-item-icon img {
    width: 100%;
    height: auto;
    opacity: 0; /* Hide the image; we will use the image as a mask instead so we can recolor it */
}
#nav-flyout > ul > li > .submenu {
    left: calc((-1 * var(--nav-flyout-padding)) - var(--nav-flyout-border-left-width));
}
#nav-flyout > ul > li > .submenu > .submenu-outer {
    /*
    position: fixed;
    left: calc(var(--nav-sidebar-width) + var(--nav-sidebar-submenu-width));
    padding: 20px;
    */
}
#nav-flyout > ul > li > .submenu > .submenu-outer::-webkit-scrollbar {
}
#nav-flyout > ul > li > .submenu > .submenu-outer > ul {
}
#nav-flyout > ul > li > .submenu > .submenu-outer > ul > li {
}


/* INTERACTIVE STATES */
#nav-flyout li:hover > a,
#nav-flyout li:has(a:focus) > a,
#nav-flyout li:has(a:active) > a {
    color: var(--color-blue);
    background-color: var(--nav-sidebar-color-bkgd-hover);
}
#nav-flyout li:hover > a > .nav-item-icon,
#nav-flyout li:has(a:focus) > a > .nav-item-icon,
#nav-flyout li:has(a:active) > a > .nav-item-icon {
    background-color: var(--color-blue);
}
#nav-flyout li:has(.submenu):hover > a::after,
#nav-flyout li:has(.submenu):has(a:focus) > a::after,
#nav-flyout li:has(.submenu):has(a:active) > a::after {
    background-color: var(--color-blue);
}
#nav-flyout ul:has(> li.selected) {
    left: calc(-1 * var(--nav-sidebar-submenu-width));
}
#nav-flyout li.selected > .submenu > .submenu-outer {
    visibility: visible;
}
#nav-flyout:has(ul > li.selected) #nav-flyout-cta {
    left: calc(-1 * var(--nav-sidebar-submenu-width));
}


/**
 * RESPONSIVE STYLES
 */
/* INTERMEDIATE */
@keyframes nav-flyout-in {
    0% {
        left: calc(var(--nav-flyout-left) + (-1 * var(--nav-sidebar-submenu-width)));
        opacity: 0;
    }
    0.1% {
        left: calc(var(--nav-flyout-left) + (-1 * var(--nav-sidebar-submenu-width)));
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
@keyframes nav-flyout-out {
    0% {
        left: var(--nav-flyout-left);
        opacity: 1;
    }
    99.9% {
        left: calc(var(--nav-flyout-left) + (-1 * var(--nav-sidebar-submenu-width)));
        opacity: 1;
    }
    100% {
        left: calc(var(--nav-flyout-left) + (-1 * var(--nav-sidebar-submenu-width)));
        opacity: 0;
    }
}
@media only screen and (min-width: 1001px) {
    #nav-flyout-cta {
        display: none;
    }
}
@media only screen and (max-width: 1000px) {
    :root {
        --nav-flyout-left: 0px;
    }
    .nav-sidebar {
        display: none;
    }
    #nav-button {
        display: block;
        top: 48px;
    }
    #nav-flyout {
        padding-top: calc(48px + 24px + 28px); /* #nav-button top + #nav-button height + some gap that looks similar to sidebar gap between logo and menu items */

        left: calc(var(--nav-flyout-left) + (-1 * var(--nav-sidebar-submenu-width)));
        opacity: 0;
        /* animation: 0.4s nav-flyout-out; */
    }
    .header:has(#nav-button > button.hamburger.is-active, #nav-button > button.hamburger.is-back) #nav-flyout,
    .header:has(#nav-button > button.hamburger.is-active-debug, #nav-button > button.hamburger.is-back-debug) #nav-flyout {
        padding-top: calc(48px + 24px + 28px); /* #nav-button top + #nav-button height + some gap that looks similar to sidebar gap between logo and menu items */
    }
    #nav-flyout:has(.selected),
    .header:has(#nav-main li.has-submenu.selected) #nav-flyout {
        left: var(--nav-flyout-left);
        box-shadow: var(--nav-flyout-shadow);
    }
    /* Animate all menus (top-level and submenus) sliding left/right into flyout menu */
    #nav-flyout ul {
        transition: left 0.4s ease;
    }
    #nav-flyout > ul {
        margin-left: calc(var(--nav-flyout-padding) - 30px); /* Align first-level menu item icons with hamburger */
    }
    #nav-flyout > ul > li > .submenu > .submenu-outer {
        /*
        left: var(--nav-sidebar-submenu-width);
        */
    }
}
@media only screen and (max-width: 800px) {
    #nav-button {
        display: block;
        top: 25px;
        transform: scale(0.9);
    }
    #nav-flyout {
        padding-top: calc(25px + 24px + 28px); /* #nav-button margin-top + #nav-button height + some gap that looks similar to sidebar gap between logo and menu items */
    }
    .header:has(#nav-button > button.hamburger.is-active, #nav-button > button.hamburger.is-back) #nav-flyout,
    .header:has(#nav-button > button.hamburger.is-active-debug, #nav-button > button.hamburger.is-back-debug) #nav-flyout {
        padding-top: calc(25px + 24px + 28px); /* #nav-button margin-top + #nav-button height + some gap that looks similar to sidebar gap between logo and menu items */
    }
}
/* MOBILE */
/* @media only screen and (max-width: 320px) { */
@media only screen and (max-width: 480px) {
    :root {
        --nav-sidebar-submenu-width: 100vw;
    }
}