.top-nav .site-links .text-links {
     display: inline-block;
     color: var(--light-grey, #E6E7E8);
     text-align: center;
}
 .top-nav .site-links .text-links a {
     color: var(--light-grey, #E6E7E8);
     font-size: 0.875rem;
}
 .top-nav .site-links .text-links a:hover {
     color: #FFF;
}
 .top-nav .site-links .col2 div:last-child {
     justify-items: self-end;
     display: grid;
     margin-top: 0.5rem;
}
 .top-nav .col3 {
     padding: 0;
     white-space: nowrap;
}
 .top-nav .site-links a#depts {
     cursor: pointer;
     position: relative;
     top: 10%;
}
/** MAIN NAV **/
/* #nav-main = containing div = .main-navbar */
/* #menu-main-hz = nav element = .navbar-main */
/* .navbar-list = ul */
/* .navbar-list-item = li */
/* .navbar-label, .navbar-sub-label = label element */
/* .navbar-toggle = checkbox input */
/* .navbar-link = a */
/* .visually-hidden(span inside button), .has-submenu(li), .open(li) -> assigned by js */
 .main-navbar, .navbar-list {
     background-color: var(--lightest-grey, #f1f1f2);
}
 #menu-main-hz {
     width: 100%;
     margin: 0 auto;
}
 #menu-main-hz .navbar-label {
     text-transform: uppercase;
     font-weight: 600;
     font-size: var(--font-size-2);
}
 #menu-main-hz .navbar-label:hover {
     text-decoration: underline;
}
 #menu-main-hz .navbar-label {
     cursor: pointer;
}
 #menu-main-hz .navbar-list {
     position: relative;
     list-style: none;
     margin: 0;
     padding: 0;
     width: 100%;
     z-index: 28;
}
 #menu-main-hz .navbar-list, #menu-main-hz [id^=toggle] {
     display: none;
}
 #menu-main-hz [id^=toggle]:checked + .navbar-list {
     display: block;
     width: 100%;
}
 #menu-main-hz > ul {
     margin: 0;
     padding: 0;
     display: flex;
}
 #menu-main-hz .navbar-list-item {
     display: flex;
     margin-top: 0;
    /* overrides default <li> */
     margin-bottom: 0;
}
 #menu-main-hz > ul > li {
     position: relative;
     margin: unset;
}
 #menu-main-hz a, 
/*#menu-main-hz .current,*/
 .navbar-label {
     flex: 1;
     display: block;
     padding: 10px 0;
     text-decoration: none;
}
 #menu-main-hz > ul > li.navbar-list-item:first-child {
     margin-left: 1.25rem;
}
 #menu-main-hz a.navbar-link, #menu-main-hz .navbar-sub-label {
     display: block;
     text-decoration: none;
     word-wrap: break-word;
     font-size: 0.95rem;
     color: var(--off-black, #212121);
     font-weight: 500;
}
 #menu-main-hz li, #menu-main-hz li {
     color: var(--darkest-grey, #58595B);
     text-decoration: none;
}
/* needs testing...*/
 #menu-main-hz > ul > li > a {
     font-size: clamp(14px, 1.15vw, 1rem);
     color: var(--qu-blue, #002452); /* BS override */
}
 #menu-main-hz a:hover, #menu-main-hz a:hover {
     text-decoration: underline;
     color: var(--qu-blue, #002452);
    /*background-color: var(--light-grey, #D1D3D4);
     */
}
 #menu-main-hz .navbar-list-item:not([aria-haspopup]) a:hover, #menu-main-hz .navbar-list-item:not([aria-haspopup]) a:focus {
     color: var(--qu-blue, #002452);
     text-decoration: underline;
    /*background-color: var(--light-grey, #D1D3D4);
     */
     outline: 0;
     border: 0;
    /*border-bottom: 1px solid var(--medium-grey);
     -- MOVE this, only use @ small screen */
}
 #menu-main-hz .navbar-link:hover, #menu-main-hz .navbar-link:active, #menu-main-hz .current {
     text-decoration: underline;
     background-color: var(--light-grey, #E6E7E8);
}
 #menu-main-hz .navbar-list .navbar-list-item li a:hover {
     background-color: var(--grey, #D1D3D4);
}
 #menu-main-hz > ul > li > ul {
     list-style: none;
     display: none;
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     width: max-content;
     border: 0;
     outline: 0;
     padding: 0;
     margin: 0;
     background-color: var(--light-grey, #E6E7E8);
     z-index: 29;
    /* stopgap! */
}
 #menu-main-hz a:active {
     color: #002452;
     background-color: #D1D3D4;
     text-decoration: underline;
}
 #menu-main-hz [aria-current=page] {
     background-color: var(--dark-grey, #A7A9AC);
     color: var(--off-black);
     border-bottom: .25em solid var(--dark-grey, #808285);
}
/** MENU VISIBILITY **/
 @media all and (max-width: 1023px) {
     .main-navbar, .navbar-list, #menu-main-hz > ul > li > ul{
         background-color: #fff;
    }
     #menu-main-hz a {
         font-size:16px !important;
         color:var(--qu-blue);
         border-bottom: 1px solid #D1D3D4;
         padding-top:12px;
         padding-bottom:12px;
    }
     #menu-main-hz a:active {
         color:var(--qu-blue);
         background-color: #ffffff;
    }
    #menu-main-hz .navbar-list .navbar-list-item li a:hover, 
    #menu-main-hz .navbar-list .navbar-list-item li a:active{
         background-color: #ffffff;
    }
     #menu-main-hz.navbar-main-hh .navbar-list-item > a {
         width: calc(100% - 41px);
         border-bottom:none;
    }
     #menu-main-hz.navbar-main-hh .navbar-list-item > .icaret{
         width: 46px;
         height: 46px;
         text-align: center;
    }
     #menu-main-hz.navbar-main-hh .navbar-list-item > ul {
         position: relative;
         width:100%;
    }
    #menu-main-hz.navbar-main-hh .navbar-list-item > ul li a {
         padding-left:30px;
         padding-bottom:10px;
    }
     #menu-main-hz.navbar-main-hh .navbar-list-item {
         /*border-bottom: 1px solid #D1D3D4;*/
         flex-wrap:wrap;
    }
     #menu-main-hz.navbar-main-hh > ul > li.navbar-list-item:first-child {
         margin-left: 0;
    }
    /* older styles - might not use */
     #menu-main-hz {
         padding: 10px 0 10px;
    }
     #menu-main-hz .navbar-sub-label, #menu-main-hz .navbar-link {
         font-size: var(--font-size-fluid-0);
    }
     #menu-main-hz .navbar-list > li > a > span {
         display: none;
    }
    /* temp - until dropdowns work on mobile */
     #menu-main-hz .navbar-label::after, #menu-main-hz .navbar-sub-label::after {
         content:" +";
    }
    #menu-main-hz .nav-closed.navbar-label::after,#menu-main-hz .nav-opened.navbar-label::after{
        content: "";
        display: none;
    }
     #menu-main-hz.navbar-main-hh > .navbar-list > .navbar-list-item > .icaret{
         display: inline-block;
         padding:10px;
    }
}
/** Expanded for wider screens **/
 @media all and (min-width: 1024px) {
     #menu-main-hz > .navbar-label {
         display: none;
    }
     #menu-main-hz > .navbar-list {
         display: block;
    }
     #menu-main-hz > .navbar-list > .navbar-list-item {
         display: inline-block;
         position: relative;
         margin-left: 0.55rem;
    }
     #menu-main-hz.navbar-main-hh > .navbar-list > .navbar-list-item > a{
         display: inline-block;
         padding:10px 0;
    }
     #menu-main-hz > ul > li {
         display: flex;
         text-align: center;
         position: relative;
         margin: unset;
    }
     #menu-main-hz a, #menu-main-hz .current {
        /*flex: 1;
         display: block;
         padding: 10px 0.9vw;
         */
         white-space: nowrap;
    }
     #menu-main-hz .has-submenu button {
         display: inline-block;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         font-weight: 700;
         color: #fff;
    }
     #menu-main-hz > ul > li:hover > ul, #menu-main-hz > ul > li.open > ul {
         display: block;
    }
     #menu-main-hz > ul > li > ul a {
         color: var(--qu-blue, #002452); /* BS override */
         border: 0;
         text-align: left;
         border-bottom: 1px transparent;
         padding-inline: 10px;
         font-size: 14px;
    }
     #menu-main-hz .has-submenu > a::after {
         margin-left: 5px;
         line-height: 14px;
         content: '';
    }
     #menu-main-hz .has-submenu:hover > a:hover::after, #menu-main-hz .has-submenu > a:focus::after {
         content: '';
    }
     #menu-main-hz .has-submenu button {
         background-color: transparent;
         border: 0;
         font-size: .95rem;
         line-height: 1;
         padding: 3px;
         border-bottom: 1px transparent;
    }
     #menu-main-hz .has-submenu button > span {
         display: inline-block;
         width: .8em;
         height: .8em;
         background: url('/_images/icons/caret-down-solid-darkest-grey.svg') center no-repeat;
    }
     #menu-main-hz .has-submenu:hover button > span, #menu-main-hz .has-submenu button:focus > span {
         background: url('https://master.engineering.queensu.ca/_images/icons/caret-down-solid.svg') #D1D3D4 center no-repeat;
    }
     #menu-main-hz .has-submenu button, #menu-main-hz .has-submenu a:focus + button {
         background-color: #D1D3D4;
    }
     #menu-main-hz .has-submenu button, #menu-main-hz .has-submenu a:focus + button {
         background-color: var(--lightest-grey, #f1f1f2);
    }
     #menu-main-hz .has-submenu:hover button, #menu-main-hz .has-submenu button:hover, #menu-main-hz .has-submenu button:focus {
         background: #D1D3D4;
         border: 0;
         border-left: none;
    }
}
 #menu-main-hz .navbar-list-item .navbar-list {
     font-size: var(--font-size-fluid-0);
     background-color: #FFF;
     border: 1px solid var(--medium-grey, #A7A9AC);
}

/*** Sidebar nav styles ***/
 aside #nav-sidebar {
    /* moved positioning and size styles to layout_dev.css */
     background-color: var(--sl-color-secondary-200);
     position: relative;
}
 aside #nav-sidebar button.navToggle::after {
     content: "Sub Menu";/* default - updates on .change */
}
 aside #nav-sidebar button.navToggle.change::after {
     content: "Close";
}
 aside #nav-sidebar button.navToggle {
     cursor: pointer;
     border: none;
     border-radius: 0;
}
 aside #nav-sidebar button.navToggle svg {
     display: block;
     width: 2rem;
}
 .navToggle[data-state="closed"] :is(.top, .bottom) {
     animation: to-open-icon 1s forwards;
}
 .navToggle[data-state="opened"] :is(.top, .bottom) {
     animation: to-close-icon 1s forwards;
}
 .navToggle .hamburger {
     transition: rotate 800ms 100ms;
}
 .navToggle[data-state="opened"] .hamburger {
     rotate: 1turn;
}
 .navToggle .line.top {
     --rotation: -45deg;
     transform-origin: 33px 23px;
}
 .navToggle .hamburger .line.bottom {
     --rotation: 45deg;
     transform-origin: 30px 28px;
}
 @keyframes to-close-icon {
     0% {
         stroke-dashoffset: 0;
    }
     40% {
         stroke-dashoffset: 79.9;
    }
     60% {
         stroke-dashoffset: 79.9;
         rotate: calc(var(--rotation));
    }
     100% {
         stroke-dashoffset: 0;
         rotate: var(--rotation);
    }
}
 @keyframes to-open-icon {
     0% {
         stroke-dashoffset: 0;
         rotate: var(--rotation);
    }
     40% {
         stroke-dashoffset: 79.9;
         rotate: var(--rotation);
    }
     60% {
         stroke-dashoffset: 79.9;
    }
     100% {
         stroke-dashoffset: 0;
    }
}
 aside #nav-sidebar #menu-page-vt {
     -webkit-transition: max-height 0.7s;
     -moz-transition: max-height 0.7s;
     transition: max-height 0.7s;
}
 aside #nav-sidebar p {
     margin: .5rem 1rem auto;
     font-size: .85rem;
     border-bottom: 1px dashed var(--dark-grey);
     padding-bottom: .5rem;
}
 aside #nav-sidebar ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 aside #nav-sidebar ul li a {
     display: block;
     padding: 0.5rem 1rem;
     text-decoration: none;
     font-weight: 600;
     font-size: var(--font-size-fluid-0);/* clamp(.75rem, 2vw, 1rem) */
     background-color: var(--sl-color-secondary-200);
}
 aside #nav-sidebar ul li a:hover:not(.active), aside #nav-sidebar ul li a:focus {
     background-color: var(--sl-color-secondary-100);
}
 aside #nav-sidebar ul li a.active, aside #nav-sidebar ul li a.current {
     background-color: var(--sl-color-secondary-300);
     color: var(--qu-blue, #002452);
}
/* used by sidebar-nav.js to move sidebar links */
 .moveRight > nav {
     left: -100%;
}
 .moveLeft > nav {
     left: 0;
}