/* UPDATED HEADER 02/10/2026 G.BOULT */
.skip-nav-link {
    display: block;
    position: fixed;
    top: -1000rem;
    left: 0%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    overflow: hidden;
    text-decoration: none; 
    offset-anchor: 160px;
    background-color: #fff;
    color: #2b2b2b;
    font-weight: 700;
    &:focus,
    &:focus-visible {
        top: 0;
        width: auto;
        transform: none;
        height: auto;
        padding: 0.9375rem;
        overflow: visible;
        z-index: 9002;
    }
}

header#masthead {
    height: 100px;
}
header#masthead .logoHolder {
    top: 15px;
}
header#masthead .logoHolder,
header#masthead .logoHolder a,
header#masthead .logoHolder a svg {
    width: 70px;
    height: 70px;
}
header#masthead .logoHolder a svg {
    transition: all 0.2s ease;
}
header#masthead .topBar {
    top: 59px;
    height: 30px;
}
header#masthead .topBar a.apply {
    display: flex;
    align-items: center;
}
header#masthead .topBar .applyBTN,
header#masthead .topBar a.apply,
header#masthead .topBar .applyBTN:before {
    height: 30px;
}
header#masthead .topBar .applyBTN:before {
    width: 30px;
    background-size: 30px auto;
    left: -26px;
}
header#masthead .topBar a {
    line-height: 1;
}
header#masthead .topBar:after {
    transform: skewX(-24deg);
    right: calc(-2000px - 3px);
}
a.mobileMenuBTN {
    margin-left: 8px;
    display: block;
}
nav#mainMenu {
    top: 0px;
    height: 59px;
    z-index: 15;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
nav#mainMenu ul {
    display: none;
    height: 59px;
}
nav#mainMenu button.search-btn {
    appearance: none;
    border: none;
    background: none;
    color: #fff;
}
nav#mainMenu a.textLink.favourites {
    margin-left: 15px;
}
nav#mainMenu a.textLink,
nav#mainMenu button.search-btn,
nav#mainMenu a.searchBTN.mob {
    height: 100%;
    flex: 0 0 30px;
    width: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
nav#mainMenu a.textLink {
    font-size: 1.25rem;
}
nav#mainMenu button.search-btn {
    display: none;
}
nav#mainMenu button.search-btn svg path {
    transition: fill 200ms ease-in-out;
}
nav#mainMenu button.search-btn:hover svg path {
    fill: #C0A160;
}
nav#mainMenu ul li a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    border-radius: 6px;
}
a.textLink {
    color: #fff;
    transition: color 200ms ease-in-out;
}
nav#mainMenu a.textLink:hover {
    color: #C0A160;
}
nav#mainMenu > ul > li > a {
    line-height: 59px;
}
nav#mainMenu ul li a:after {
    bottom: 19px;
}
nav#mainMenu ul li a:hover:after, nav#mainMenu ul li:hover > a:after, nav#mainMenu ul li:hover > .menu-parent-wrapper a:after, nav#mainMenu ul li a.active:after, nav#mainMenu ul li.open a:after {
    left: 6px;
    right: 6px;
    opacity: 1;
}
nav#mainMenu ul ul {
    top: 59px;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    display: flex;
    flex-direction: column;
    background-color: #C0A160;
    height: auto!important;
}
nav#mainMenu ul > li {
    float: none;
    display: flex;
}
nav#mainMenu ul li a {
    line-height: normal;
    display: flex;
    align-items: center;
}
nav#mainMenu ul li.has-submenu .menu-parent-wrapper {
    position: relative;
    display: inline-flex;
}
nav#mainMenu ul li.has-submenu  button {
    position: absolute;
    left: 50%;
    width: 24px;
    height: 24px;
    bottom: 0px;
    transform: translateX(-50%);
    background: transparent;
    appearance: none;
    border: none;
    padding: 0;
    color: #ffffff;
    display: none;
    font-size: 12px;
}
nav#mainMenu ul li:last-child.has-submenu button {
    left: calc(50% + 3px)
}
nav#mainMenu ul li.has-submenu button:before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
}
body.keyboard-navigation nav#mainMenu ul li button {
    display: block;
}
nav#mainMenu ul li.has-submenu:hover ul,
nav#mainMenu ul li.open > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
nav#mainMenu ul ul.col2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
nav#mainMenu ul ul.col2 .col {
    float: none;
    width: 100%;
}
nav#mainMenu ul ul.col3 {
    width: 650px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    left: 50%;
    transform: translate(-50%, 3px);
}
nav#mainMenu ul li.has-submenu:hover ul.col3, 
nav#mainMenu ul li.open > ul.col3 {
    transform: translate(-50%, 0);
}
header#masthead .topBar {
    display: flex;
    background-color: #2b2b2b;
    right: 12px;
}
header#masthead .topBar:after {
    right: -1999px;
    background-color: #d2d2d2;
    z-index: 3;
}
header#masthead .topBar .applyBTN,
header#masthead .topBar .applyBTN:hover {
    background-color: transparent;
}
header#masthead .topBar .applyBTN .apply {
    background-color: #C0A160;
    transform: skewX(-24deg);
    z-index: 6;
    position: relative;
    transition: 
        height 200ms ease-in-out,
        background-color 400ms cubic-bezier(0.19, 1, 0.22, 1);
}
header#masthead .topBar .applyBTN .apply:hover,
header#masthead .topBar .openEventsBTN .events:hover,
header#masthead .topBar .courseGuidesBTN .guides:hover {
    background-color: #fff;
}
header#masthead .topBar .applyBTN .apply span {
    transform: skewX(24deg);
    display: block;
}
header#masthead .topBar .openEventsBTN,
header#masthead .topBar .courseGuidesBTN {
    position: relative;
    font-weight: bold;
    height: 65px;
    display: none;
}
header#masthead .topBar .openEventsBTN .events,
header#masthead .topBar .courseGuidesBTN .guides {
    background-color: #D1D1D1;
    transform: skewX(-24deg);
    z-index: 6;
    position: relative;
    transition: background-color 400ms cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    align-items: center;
}
header#masthead .topBar .openEventsBTN .events span,
header#masthead .topBar .courseGuidesBTN .guides span {
    transform: skewX(24deg);
    display: block;
}
header#masthead .topBar .openEventsBTN a,
header#masthead .topBar .courseGuidesBTN a {
    padding: 0 40px 0 45px;
}
header#masthead:after, 
.mobileMenuAdditions .innerHeader:after {
    height: 100px;
}
nav#mainMenu ul li a:after {
    transition: bottom 200ms ease;
}




.mobile-header_dropdown {
    position: relative;
    margin-left: 3px;
    z-index: 3;
}
.mobile-header_dropdown__toggle {
        appearance: none;
        border: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 30px;
        padding: 0;
        background-color: #d1d1d1;
        font-size: 1.25rem;
        letter-spacing: 2px;
        transform: skewX(-24deg);
}
.mobile-header_dropdown__toggle span {
    transform: skewX(24deg);
    display: flex;
}
.mobile-header_dropdown__toggle:focus-visible {
    outline: 2px solid var(--cw);
    outline-offset: -4px;
}
.mobile-header_dropdown__menu {
    position: absolute;
    top: 100%;
    right: -12px;
    z-index: 100;
    width: 213px;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: 
        opacity 250ms ease,
        transform 250ms ease;
    background-color: #d2d2d2;
    clip-path: polygon(
        14% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}
.mobile-header_dropdown__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(3px);
    pointer-events: auto;
}
header#masthead .topBar .mobile-header_dropdown__menu a {
    display: block;
    float: none;
    padding: 6px 20px;
    font-weight: 700;
    text-align: right;
}



/* Search Area */
.searchBox {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: unset;
    width: 850px;
    top: 9px;
    right: -10px;
    background-color: #404040;
    transition:
        opacity 400ms ease,
        visibility 0s linear 400ms,
        top 250ms ease,
        height 250ms ease;
    &.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 400ms ease,
            visibility 0s linear 0s,
            top 250ms ease,
            height 250ms ease;
    }
}
.searchBox input.searchInput {
    width: calc(100% - 50px - 30px);
    padding: 5px 50px 5px 30px;
    left: 0;
    color: #fff;
}
.searchBox input.searchInput::-webkit-input-placeholder {
	color:#fff;
}
.searchBox input.searchInput:moz-placeholder {
	color:#fff;
}
.searchBox input.searchInput::-moz-placeholder {
	color:#fff;
}
.searchBox input.searchInput:-ms-input-placeholder {
	color:#fff;	
}
.searchBox .closeBTN {
    display: flex;
    height: 100%;
    width: 30px;
    align-items: center;
    justify-content: center;
    border: none;
    appearance: none;
    background: none;
    color: #ffffff;
    z-index: 11;
    position: absolute;
    transition: color 200ms ease-in-out;
}
.searchBox button.searchBTN {
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
}
.searchBox button.searchBTN svg path {
    transition: fill 200ms ease-in-out;
}
.searchBox .closeBTN:hover,
.searchBox .closeBTN:focus-visible {
    color: #C0A160;
}
.searchBox button.searchBTN:hover svg path,
.searchBox button.searchBTN:focus-visible svg path {
    fill: #C0A160;
}



#introduction {
    padding-top: 0px;
    scroll-margin-top: 160px;
}
#introduction .holder .introMessage {
    margin-top: 20px;
}




/* Changes to mobile menu */
.mobileMenuAdditions .innerHeader {
    height: 100px;
}
.mobileMenuAdditions .innerHeader .logoHolder {
    top: 15px;
}
.mobileMenuAdditions .innerHeader .logoHolder,
.mobileMenuAdditions .innerHeader .logoHolder a {
    width: 70px;
}
.mobileMenuAdditions .innerHeader .topBar {
    top: 59px;
}
.mobileMenuAdditions .innerHeader .topBar,
.mobileMenuAdditions .innerHeader .topBar .applyBTN,
.mobileMenuAdditions .innerHeader .topBar .applyBTN:before {
    height: 30px;
}
.mobileMenuAdditions .innerHeader .topBar .applyBTN:before {
    background-size: 30px auto;
    left: -26px;
    width: 30px;
}
.mobileMenuAdditions .innerHeader .topBar {
    display: flex;
    background-color: #2b2b2b;
    right: -8px;
    z-index: 13;
}
.mobileMenuAdditions .innerHeader .topBar a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    height: 30px;
}
.mobileMenuAdditions .innerHeader .topBar .openEventsBTN,
.mobileMenuAdditions .innerHeader .topBar .courseGuidesBTN {
    display: none;
}
.mobileMenuAdditions .innerHeader .topBar .openEventsBTN a,
.mobileMenuAdditions .innerHeader .topBar .courseGuidesBTN a {
    height: 65px;
    display: flex;
    align-items: center;
    background-color: #D1D1D1;
    transform: skewX(-24deg);
    color: #2b2b2b;
    font-weight: 700;
    padding: 0 40px 0 45px;
}
.mobileMenuAdditions .innerHeader .topBar .applyBTN {
    background-color: transparent;
}
.mobileMenuAdditions .innerHeader .topBar .applyBTN a {
    background-color: #C0A160;
}
.mobileMenuAdditions .innerHeader .topBar .applyBTN a,
.mobileMenuAdditions .innerHeader .topBar:after {
    transform: skewX(-24deg);
}
.mobileMenuAdditions .innerHeader .topBar:after {
    background-color: #D1D1D1;
}
#menud .mobileMenuAdditions .innerHeader .topBar a span {
    display: block;
    transform: skewX(24deg);
}
.mobileMenuAdditions .innerHeader a.mobMenuBTNClose {
    top: 10px
}
.mobile_menu_header {
    position: absolute;
    top: 0;
    height: 59px;
    right: 40px;
}
.mobile_menu_header a {
    height: 100%;
    flex: 0 0 30px;
    width: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 1.25rem;
    color: #ffffff;
}
#menud .mobile-header_dropdown__menu a {
    display: block;
    float: none;
    padding: 6px 18px;
    font-weight: 700;
    text-align: right;
    color: #2b2b2b;
    span {
        transform: skewX(0)!important;
    }
}
a.mobileMenuBTN:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}









@media (min-width:768px) {
    header#masthead .topBar {
        right: 30px;
    }
    #introduction .holder .introMessage {
        margin-top: 30px;
    }
    .mobile-header_dropdown__menu {
        right: -30px;
    }
    header#masthead .topBar .mobile-header_dropdown__menu a {
        padding: 6px 35px;
    }
    #sectionMenu ul li.has-submenu .menu-parent-wrapper a:focus-visible .title {
        outline: 2px solid #ffffff;
        outline-offset: -2px;
    }
}
@media (min-width:1024px) {
    header#masthead {
        height: 150px;
    }
    header#masthead:after, .mobileMenuAdditions .innerHeader:after {
        height: 150px;
    }
    body.fixedHeader header#masthead:after, body.fixedHeader .mobileMenuAdditions .innerHeader:after {
        height: 100px;
    }
    header#masthead .logoHolder {
        top: 1.406rem;
    }
    header#masthead .logoHolder,
    header#masthead .logoHolder a,
    header#masthead .logoHolder a svg,
    .mobileMenuAdditions .innerHeader .logoHolder, 
    .mobileMenuAdditions .innerHeader .logoHolder a,
    .mobileMenuAdditions .innerHeader .logoHolder a svg {
        width: 105px;
        height: 105px;
    }
    header#masthead .topBar {
        height: 65px;
        right: 50px;
        transition: 
            height 200ms ease-in-out,
            top 200ms ease-in-out;
    }
    header#masthead .topBar:after {
        background-color: #C0A160;
        right: calc(-2000px - 3px);
    }
    header#masthead .topBar a.apply,
    header#masthead .topBar .applyBTN,
    header#masthead .topBar .applyBTN:before {
        height: 65px; 
        transition: all 200ms ease-in-out;
    }
    header#masthead .topBar .applyBTN:before {
        left: -51px;
        background-size: 64px auto;
        width: 64px;
        transition: 
            left 200ms ease-in-out,
            height 200ms ease-in-out;
    }
    header#masthead .topBar .openEventsBTN, 
    header#masthead .topBar .courseGuidesBTN {
        display: flex;
        transition: height 200ms ease-in-out;
    }
    header#masthead .topBar .applyBTN .apply,
    header#masthead .topBar .openEventsBTN, 
    header#masthead .topBar .courseGuidesBTN,
    .mobileMenuAdditions .innerHeader .topBar .applyBTN a,
    .mobileMenuAdditions .innerHeader .topBar .openEventsBTN, 
    .mobileMenuAdditions .innerHeader .topBar .courseGuidesBTN {
        font-size: 1.25rem;
    }
    .mobile-header_dropdown {
        display: none;
    }
    header#masthead .topBar a {
        transition: line-height 200ms ease-in-out;
    }
    #introduction .holder .introMessage {
        margin-top: 40px;
    }
    .mobileMenuAdditions .innerHeader .topBar .openEventsBTN,
    .mobileMenuAdditions .innerHeader .topBar .courseGuidesBTN {
        display: flex;
    }
    .mobileMenuAdditions .innerHeader .topBar, 
    .mobileMenuAdditions .innerHeader .topBar .applyBTN,
    .mobileMenuAdditions .innerHeader .topBar a, 
    .mobileMenuAdditions .innerHeader .topBar .applyBTN:before {
        height: 65px;
    }
    .mobileMenuAdditions .innerHeader .topBar .applyBTN:before {
        left: -51px;
        background-size: 64px auto;
        width: 64px;
    }
    .mobileMenuAdditions .innerHeader {
        height: 150px;
    }
    #sectionMenu .menuOpeners .menuItem:before {
        top: 0;
        height: 100%;
    }
}
@media (min-width:1100px) {
    body.fixedHeader header#masthead {
        height: 100px;
    }
    body.fixedHeader #sectionMenu.page {
        top: 100px;
    }
    body.fixedHeader nav#mainMenu {
        top: 0;
        height: 45px;
    }
    body.fixedHeader header#masthead .topBar {
        top: 45px;
    }
    body.fixedHeader header#masthead .topBar .applyBTN,
    body.fixedHeader header#masthead .topBar,
    body.fixedHeader header#masthead .topBar a.apply,
    body.fixedHeader header#masthead .topBar .applyBTN:before,
    body.fixedHeader header#masthead .topBar .openEventsBTN, 
    body.fixedHeader header#masthead .topBar .courseGuidesBTN {
        height: 45px;
    }
    body.fixedHeader header#masthead .topBar .applyBTN:before {
        left: -54px;
    }
    body.fixedHeader header#masthead .logoHolder, 
    body.fixedHeader header#masthead .logoHolder a,
    body.fixedHeader header#masthead .logoHolder a svg {
        width: 76px;
        height: 76px;
    }
    header#masthead .overflow_clip {
        overflow-x: clip;
        position: absolute;
        inset: 0;
    }
    body.fixedHeader nav#mainMenu ul li.has-submenu  button {
        bottom: -5px;
    }
    body.fixedHeader .searchBox {
        top: 4px;
        height: 38px;
    }

    /* Get section menu sorted too */
    #sectionMenu .menuOpeners .menuItem:before {
        top: 0;
        height: 100%;
    }
    #sectionMenu.page ul .sf-mega {
        display: flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(3px);
        transition: 
            transform 250ms ease,
            opacity 250ms ease,
            visibility 250ms ease;
    }
    #sectionMenu.page ul li.has-submenu:hover > .sf-mega,
    #sectionMenu.page ul li.has-submenu.open > .sf-mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    #sectionMenu .menuOpeners:hover > .menuItem a .overlay {
        background-color: rgba(43, 43, 43, 0.85);
    }
    #sectionMenu .menuOpeners:hover > .menuItem a .background {
        transform: scale(1.1);
    }
    #sectionMenu .menuOpeners .menuItem .title {
        position: relative;
        top: auto;
        transform: none;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #sectionMenu ul li.has-submenu .menu-parent-wrapper {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
    }
    #sectionMenu ul li.has-submenu .menu-parent-wrapper a {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }
    #sectionMenu ul li.has-submenu  button {
        position: absolute;
        left: 50%;
        width: 24px;
        height: 20px;
        bottom: 0px;
        transform: translateX(-50%);
        background: transparent;
        appearance: none;
        border: none;
        padding: 0;
        color: #ffffff;
        display: none;
        font-size: 12px;
        z-index: 5;
    }
    #sectionMenu ul li:last-child.has-submenu button {
        left: calc(50% + 3px)
    }
    #sectionMenu ul li.has-submenu button:before {
        content: "\f078";
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
    }
    body.keyboard-navigation #sectionMenu ul li button {
        display: block;
    }
}

@media (max-width:1199px) {
    .searchBox {
        display: none;
    }
}
@media (min-width:1200px) {
    header#masthead .topBar {
        right: 57px;
    }
    nav#mainMenu ul {
        display: flex;
        align-items: stretch;
    }
    a.mobileMenuBTN,
    nav#mainMenu a.searchBTN.mob {
        display: none;
    }
    nav#mainMenu button.search-btn {
        display: flex;
    }
    body.fixedHeader nav#mainMenu {
        top: 0;
        height: 45px;
    }
    body.fixedHeader nav#mainMenu ul {
        height: 45px;
    }
    body.fixedHeader nav#mainMenu ul ul {
        top: 45px;
    }
    body.fixedHeader nav#mainMenu ul li a:after {
        bottom: 11px;
    }
    header#masthead .overflow_clip {
        overflow: visible;
    }
    #menud,
    html.mm-blocking #mm-blocker {
        display: none!important;
    }
    html.mm-opening .mm-menu~.mm-slideout {
        transform: none!important;
    }
    html.mm-blocking body,
    html.mm-blocking {
        overflow: visible!important;
    }
}
@media (min-width:1400px) {
    #introduction {
        padding-top: 70px;
    }
}
@media (min-width:1500px) {
    header#masthead .topBar {
        right: 65px;
    }
}
@media (min-width:2000px) {
    nav#mainMenu ul ul.col3 {
        left: 0;
        transform: translate(0, 3px);
    }
    nav#mainMenu ul li.has-submenu:hover ul.col3, 
    nav#mainMenu ul li.open > ul.col3 {
        transform: translate(0, 0);
    }
}