/** MRC site-wide UI layer. Keep changes grouped by component and breakpoint. */

/* Minimal above-the-fold shell while legacy theme CSS loads asynchronously. */
html,
body {
    margin: 0;
    background: #fff;
}

#header-container {
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    min-height: 100px;
    background: #fff;
}

@media (max-width: 767px) {
    #header-container { background: #002147; }
}

/* Balance the Code Snippets adviser launcher with the 50px Help control. */
#mrcOpenAdvisor.mrc-float-btn {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 25px !important;
}

#mrcOpenAdvisor.mrc-float-btn svg,
#mrcOpenAdvisor.mrc-float-btn img {
    width: 17px !important;
    height: 17px !important;
}

/* Performance-first homepage hero: local poster, YouTube loaded on interaction. */
.mrc-video > .mrc-hero-building-picture {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

.mrc-video > .mrc-hero-building-picture > .mrc-hero-building {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center 52%;
}

.mrc-video-feature {
    padding-top: clamp(42px, 6vw, 78px) !important;
    padding-bottom: clamp(52px, 7vw, 92px) !important;
    background: #f4f6f8;
}

.mrc-video-feature .mrc-section-head {
    margin-bottom: 28px;
}

.mrc-video-feature .mrc-video {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(0, 33, 71, 0.14);
}

.mrc-video > .mrc-video-poster {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #001022 !important;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
}

.mrc-video-poster > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    transition: transform 300ms ease, filter 300ms ease;
}

.mrc-video-poster__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(0, 33, 71, 0.88);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    transform: translate(-50%, -50%);
    transition: background-color 180ms ease, transform 180ms ease;
}

.mrc-video-poster__play > span {
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
}

.mrc-video-poster:hover > img,
.mrc-video-poster:focus-visible > img {
    transform: scale(1.015);
    filter: brightness(0.92);
}

.mrc-video-poster:hover .mrc-video-poster__play,
.mrc-video-poster:focus-visible .mrc-video-poster__play {
    background: #16616d;
    transform: translate(-50%, -50%) scale(1.06);
}

.mrc-video-poster:focus-visible {
    outline: 4px solid #48a9b7 !important;
    outline-offset: -4px;
}

@media (max-width: 600px) {
    .mrc-video-poster__play { width: 60px; height: 60px; }
}

/* Global header identity: use the supplied vector logo for normal and sticky headers. */
#header-container .dfd-header-logos img,
.header_wrap .dfd-header-logos img {
    content: url('../images/mont-rose-college.svg') !important;
    width: 220px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain;
}

@media (max-width: 767px) {
    #header-container .dfd-header-logos img,
    .header_wrap .dfd-header-logos img {
        width: 180px !important;
        max-height: 68px !important;
        filter: brightness(0) invert(1) !important;
    }
}

/* Primary navigation: retain readable type on compact desktop screens. */
@media (min-width: 1025px) and (max-width: 1366px) {
    #main_mega_menu > .main_menu > .menu-item-depth-0 > .main-menu-link,
    #main_mega_menu > .main_menu > .menu-item-depth-0 > .main-menu-link > span {
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
}

/* Right-side navigation drawer. */
#sidr.sidr.right {
    left: auto !important;
    max-width: 88vw;
    transition: right 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: right;
}

#sidr .sidr-dropdown-menu a { letter-spacing: 0 !important; }
body:not(.sidr-opened) #sidr.sidr.right { right: -100vw !important; }

#sidr .sidr-inner > .dfd-sidr-close {
    top: 14px !important;
    right: 14px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    line-height: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 50% !important;
    background: #002147 !important;
    color: #fff !important;
    box-shadow: none !important;
    overflow: hidden;
}

#sidr .sidr-inner > .dfd-sidr-close::before { font-size: 16px !important; line-height: 1 !important; }

#sidr .sidr-inner > .dfd-sidr-close:hover,
#sidr .sidr-inner > .dfd-sidr-close:focus-visible {
    background: #16616d !important;
}

#sidr .sidr-dropdown-menu li.has-submenu > a {
    position: relative;
    padding-right: 58px;
    cursor: pointer;
}

#sidr .sidr-dropdown-toggler {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#sidr .sidr-dropdown-toggler::before {
    content: "" !important;
    display: block !important;
    width: 8px;
    height: 8px;
    background: transparent !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform 180ms ease;
}

#sidr .sidr-dropdown-menu li.has-submenu > a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
#sidr .sidr-dropdown-menu li.has-submenu.active > a .sidr-dropdown-toggler { transform: none; }
#sidr .sidr-dropdown-menu li.has-submenu.active > a .sidr-dropdown-toggler::before { transform: rotate(225deg); }

@media (prefers-reduced-motion: reduce) {
    #sidr, #sidr ul, #sidr .sidr-dropdown-toggler {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Header search trigger, placed directly beside the existing hamburger. */
.header-col-right,
.right-col {
    position: relative !important;
    overflow: visible !important;
}

.mrc-header-search-toggle {
    position: absolute;
    top: 50%;
    right: 58px;
    z-index: 3;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #002147;
    color: #fff;
    cursor: pointer;
}

.mrc-header-search-toggle:hover,
.mrc-header-search-toggle:focus-visible {
    background: #16616d;
    transform: translateY(-50%);
}

.mrc-header-search-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Keep the existing accessibility toolbar in the header instead of fixed to the viewport. */
#header-container {
    overflow: visible !important;
}

#header-container > #pojo-a11y-toolbar {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    transition: opacity 160ms ease, visibility 160ms ease !important;
}

body.mrc-header-scrolled #header-container > #pojo-a11y-toolbar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#header-container > #pojo-a11y-toolbar.pojo-a11y-toolbar-open {
    right: 0 !important;
}

#header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
    position: static !important;
    width: 50px !important;
    height: 50px !important;
}

#header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle-link {
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: #002147 !important;
    color: #fff !important;
}

#header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle-link:hover,
#header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle-link:focus-visible {
    background: #16616d !important;
}

#header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle-link svg {
    width: 25px !important;
    height: 25px !important;
}

#header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
    position: absolute !important;
    top: 58px !important;
    right: 0 !important;
    display: none !important;
}

#header-container > #pojo-a11y-toolbar.pojo-a11y-toolbar-open .pojo-a11y-toolbar-overlay {
    display: block !important;
}

.mrc-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 20, 45, 0.96);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.mrc-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mrc-search-overlay__inner {
    width: min(860px, 100%);
}

.mrc-search-overlay h2 {
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15;
    text-align: center;
}

.mrc-search-overlay__form {
    display: flex;
    align-items: stretch;
    min-height: 72px;
    padding: 7px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.mrc-search-overlay__form:focus-within {
    border-color: #48a9b7;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(72, 169, 183, 0.22);
}

.mrc-search-overlay__form input {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #002147 !important;
    font-size: clamp(20px, 1.8vw, 22px) !important;
    font-weight: 500;
    line-height: 56px !important;
    outline: 0 !important;
    -webkit-appearance: none;
    appearance: none;
}

.mrc-search-overlay__form input:focus,
.mrc-search-overlay__form input:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.mrc-search-overlay__form input::placeholder {
    color: #667487 !important;
    opacity: 1;
    font-size: inherit !important;
    line-height: 56px !important;
    font-weight: 500 !important;
}

.mrc-search-overlay__form button {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 148px;
    min-height: 56px;
    padding: 0 24px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0 !important;
    border-radius: 12px !important;
    background: #16616d !important;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 160ms ease, transform 160ms ease;
}

.mrc-search-overlay__form button:hover,
.mrc-search-overlay__form button:focus-visible {
    background: #0f4f59 !important;
    color: #fff !important;
}

.mrc-search-overlay__form button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.mrc-search-overlay__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 50% !important;
    background: #002147 !important;
    color: #fff !important;
    font-size: 34px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}

/* Mobile visitors should see content immediately. The homepage previously
 * hid 37 blocks until scroll-driven reveal effects completed, inflating Speed
 * Index and causing unnecessary non-composited animation work. */
@media (max-width: 767px) {
    .mrc-homepage .mrc-reveal,
    .mrc-homepage .mrc-reveal.mrc-is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .mrc-homepage > .mrc-section:not(:first-child) {
        content-visibility: auto;
        contain-intrinsic-size: auto 720px;
    }
}

.mrc-search-overlay__close span {
    display: block;
    margin-top: -3px;
    line-height: 1;
}

.mrc-search-overlay__close:hover,
.mrc-search-overlay__close:focus-visible {
    background: #16616d !important;
}

body.mrc-search-open { overflow: hidden; }

@media (max-width: 600px) {
    .header-builder-wrraper.mobile .right-col { padding-right: 52px !important; }
    .header-builder-wrraper.mobile .mrc-header-search-toggle { right: 108px; width: 48px; height: 48px; }
    #header-container > #pojo-a11y-toolbar { right: 0 !important; width: 48px !important; height: 48px !important; }
    #header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle,
    #header-container > #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle-link { width: 48px !important; height: 48px !important; }
    .mrc-search-overlay { padding: 20px; }
    .mrc-search-overlay__close { top: 16px; right: 16px; }
    .mrc-search-overlay__form { min-height: 64px; padding: 5px; border-radius: 15px; }
    .mrc-search-overlay__form input { height: 52px !important; min-height: 52px !important; max-height: 52px !important; padding: 0 14px !important; font-size: 18px !important; line-height: 52px !important; }
    .mrc-search-overlay__form input::placeholder { line-height: 52px !important; }
    .mrc-search-overlay__form button { min-width: 58px; min-height: 52px; padding: 0 17px !important; border-radius: 10px !important; }
    .mrc-search-overlay__form button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

/* Compact mobile sticky header. At the top of the page the logo remains white
 * on navy; once sticky, return to the original full-colour SVG on white. */
@media (max-width: 767px) {
    body.mrc-header-scrolled #header-container {
        min-height: 56px !important;
        height: 56px !important;
        background: #fff !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile,
    body.mrc-header-scrolled .header-builder-wrraper.mobile .header,
    body.mrc-header-scrolled .header-builder-wrraper.mobile .header-wrap,
    body.mrc-header-scrolled .header-builder-wrraper.mobile .header-bottom-panel,
    body.mrc-header-scrolled .header-builder-wrraper.mobile .header-bottom-panel > .row,
    body.mrc-header-scrolled .header-builder-wrraper.mobile .header-bottom-panel > .row > .columns {
        height: 56px !important;
        min-height: 56px !important;
        line-height: 56px !important;
        background: #fff !important;
    }

    body.mrc-header-scrolled #header-container .header-builder-wrraper.mobile .dfd-header-logos img {
        width: 120px !important;
        max-height: 44px !important;
        filter: none !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile .right-col {
        padding-right: 0 !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile .mrc-header-search-toggle {
        right: 56px !important;
        width: 40px !important;
        height: 40px !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile .mrc-header-search-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile .dl-trigger.mobile-menu {
        top: 8px !important;
        right: -2px !important;
        left: auto !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile .dl-trigger.mobile-menu .icon-wrap {
        left: 50% !important;
        right: auto !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile .dl-trigger.mobile-menu .dfd-middle-line {
        margin-left: -10px !important;
    }

    body.mrc-header-scrolled .header-builder-wrraper.mobile .dl-trigger.mobile-menu .dfd-top-line,
    body.mrc-header-scrolled .header-builder-wrraper.mobile .dl-trigger.mobile-menu .dfd-bottom-line {
        margin-left: -12px !important;
    }
}

/* Homepage typography and section alignment refinements. */
.mrc-homepage .mrc-course h3 {
    font-family: Montserrat, Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

.mrc-video-feature .mrc-section-head,
.mrc-video-feature .mrc-section-head__copy {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    text-align: center !important;
}

.mrc-video-feature .mrc-eyebrow {
    justify-content: center;
}

.mrc-homepage #mrc-news-title,
#mrc-latest-news .mrc-title {
    font-family: "Libre Baskerville", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.045em !important;
}

@media (min-width: 681px) {
    .mrc-homepage #mrc-news .mrc-section-head__copy {
        max-width: 900px !important;
    }
}

.mrc-events-layout h3,
.mrc-latest-grid h3 {
    letter-spacing: 0 !important;
}

#mrc-latest-news .mrc-section-head {
    align-items: center !important;
}

.mrc-event-date {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    line-height: 1 !important;
    text-align: center !important;
}

.mrc-event-date small {
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
}

@media (max-width: 680px) {
    .mrc-engagement__item p {
        display: none !important;
    }
}

/* Keep course-card actions on one consistent baseline. */
.mrc-course-grid > .mrc-course:not(.mrc-course--help):not(.mrc-course--apply) {
    display: flex !important;
    flex-direction: column !important;
}

.mrc-course-grid > .mrc-course:not(.mrc-course--help):not(.mrc-course--apply) > .mrc-link {
    margin-top: auto !important;
}

/* The desktop sticky header is 60px tall; keep its alternate logo within it. */
@media (min-width: 768px) {
    #header-container.small .header-builder-wrraper.desktop .mobile-sticky-logos.sticky-logo-wrap {
        top: 50% !important;
        height: 60px !important;
        line-height: 60px !important;
        transform: translateY(-50%) !important;
    }

    #header-container.small .header-builder-wrraper.desktop .mobile-sticky-logos.sticky-logo-wrap > a {
        height: 60px !important;
        line-height: 60px !important;
    }

    #header-container.small .header-builder-wrraper.desktop .mobile-sticky-logos img.sticky-logo {
        width: 170px !important;
        max-height: 54px !important;
        object-fit: contain !important;
    }
}

/* Give the desktop navigation clear separation without crowding the search control. */
@media (min-width: 1101px) {
    .header-builder-wrraper.desktop .mega-menu > ul > li {
        margin-right: 3px !important;
        margin-left: 3px !important;
    }
}

/* Keep event and news actions aligned at the bottom of equal-height cards. */
.mrc-events-side .mrc-news,
.mrc-latest-grid .mrc-latest-card {
    display: flex !important;
    flex-direction: column !important;
}

.mrc-events-side .mrc-news__copy,
.mrc-latest-grid .mrc-latest-card__copy {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
}

.mrc-events-side .mrc-news__copy > .mrc-link,
.mrc-latest-grid .mrc-latest-card__copy > .mrc-link {
    margin-top: auto !important;
}

/* Refine the featured event for clearer, more compact reading. */
.mrc-event-feature {
    position: relative !important;
    overflow: hidden;
}

.mrc-event-feature::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background: linear-gradient(180deg, rgba(0, 16, 34, 0.28) 0%, rgba(0, 16, 34, 0.10) 45%, rgba(0, 16, 34, 0.20) 100%);
    pointer-events: none;
}

.mrc-event-feature > * {
    position: relative;
    z-index: 1;
}

.mrc-event-feature h3 {
    font-size: 29px !important;
    line-height: 1.12 !important;
}

.mrc-event-feature .mrc-btn {
    min-height: 0 !important;
    padding: 8px 18px !important;
}

.mrc-video-feature .mrc-intro {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

.mrc-course-grid .mrc-course__tag {
    align-self: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
}