@import url("theme_settings/theme_settings.css");
@import url("https://use.typekit.net/pkv5szk.css");

:root {
    /* Theme tokens — every reference includes a diagnostic fallback so
       a missing theme_settings.css is visually obvious during review. */
    --color-1:        var(--color-1-theme, #00ff00);
    --color-2:        var(--color-2-theme, #ff00ff);
    --color-over-1:   var(--color-over-1-theme, #000000);
    --color-over-2:   var(--color-over-2-theme, #ffffff);
    --color-1-isDark: var(--color-1-theme-isDark, 0);
    --color-2-isDark: var(--color-2-theme-isDark, 0);

    /* Breakpoint tokens — media queries can't read custom properties,
       so the rem values repeat in @media (min-width: …) below. */
    --size-sm: 48rem;     /* tablet */
    --size-md: 64rem;     /* desktop */
    --size-lg: 85.375rem; /* large desktop */
    --size-xl: 120rem;    /* max content width */
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: "basic-sans", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-nav,
.site-header,
.site-footer {
    font-family: "inter-18pt", sans-serif;
}

.swiper { width: 100%; }

.site-header,
.site-footer { flex: none; }

#content_main {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: var(--inside-content-max, var(--size-lg));
    padding: var(--inside-content-pad-y, 1.5rem) var(--inside-content-pad-x, clamp(0.5rem, 5%, 3rem));
    margin-inline: auto;
    background-color: #fff;
}

/* Homepage reset — the .site-homepage wrapper in index.jsp gates this. */
body:has(.site-homepage) #content_main {
    max-width: none;
    padding: 0;
    background-color: transparent;
}

/* CMS-rendered page title on inside pages. margin-block keeps the
   CMS-supplied inline margins (which center the title on wide
   viewports) intact. filter: brightness keeps a light theme color
   legible when --color-1 is itself the foreground. */
.pageTitle {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-size: 2rem;
    line-height: 1.25;
    margin-block: 0 1.5rem;
}

.site-header .site-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    background-color: var(--color-1);
    color: var(--color-over-1);
    text-decoration: none;
}
.site-header .site-skip-link:focus-visible {
    left: 0;
}

/* Screen-reader-only text. The CMS system stylesheet also defines
   .hidden-text with the same technique; declaring it here keeps the
   pattern available regardless of system-stylesheet load order. */
.hidden-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ────────────────────────────────────────────────────────────────
   Header
   ──────────────────────────────────────────────────────────────── */

.site-header {
    position: relative;
    background-color: #fff;
}

.site-header__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 0.75rem 0.75rem;
    width: 100%;
    max-width: 84rem;
    margin-inline: auto;
    box-sizing: border-box;
}

.site-header__identity-link {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    text-decoration: none;
}

.site-header__logo {
    display: block;
    width: min(18rem, 80%);
    height: auto;
    object-fit: contain;
}

@media (min-width: 48rem) {
    .site-header__top {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.75rem;
    }
    .site-header__logo {
        width: auto;
        height: 7.5rem;
    }
}

.site-header__post-nav {
    display: none;
}
@media (min-width: 48rem) {
    .site-header__post-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
        position: absolute;
        top: 1rem;
        right: max(0.75rem, calc((100% - 84rem) / 2 + 0.75rem));
        z-index: 3;
    }
}

#google_translate_element {
    background-color: #fff;
    padding: 0.25rem 0.5rem;
}


/* ────────────────────────────────────────────────────────────────
   Nav — mobile hamburger (base) and desktop bar (@ 64rem)
   ──────────────────────────────────────────────────────────────── */

body .site-nav a,
body .site-nav a:link,
body .site-nav a:visited,
body .site-nav a:hover,
body .site-nav a:active {
    color: inherit;
}

.site-nav--desktop { display: none; }

.site-nav--mobile {
    display: block;
    color: var(--color-over-2);
}
.site-nav--mobile .menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-1);
    cursor: pointer;
    z-index: 2;
}
.site-nav--mobile .menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'menu';
    text-transform: none;
    font-size: 2rem;
}
.site-nav--mobile .menu-toggle[aria-expanded="true"]::after {
    content: 'close';
}
.site-nav--mobile .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--color-2);
    z-index: 10;
}
.site-nav--mobile .nav-menu.show {
    display: block;
}
.site-nav--mobile .nav-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.site-nav--mobile .nav-item > .nav-item-inner {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding: 0.875rem 1rem;
    font-size: 1.125rem;
    color: var(--color-over-2);
}
.site-nav--mobile .nav-item > .dropdown-toggle {
    grid-column: 2;
    grid-row: 1;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
}
.site-nav--mobile .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'expand_more';
    text-transform: none;
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}
.site-nav--mobile .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Library-added .show reveal pattern per libraries/accessible-menu.md */
.site-nav--mobile .sub-menu-holder {
    display: none;
    grid-column: 1 / -1;
}
.site-nav--mobile .sub-menu-holder:has(.sub-menu.show) {
    display: block;
}
.site-nav--mobile .sub-menu-holder > .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(0, 0, 0, 0.08);
}
.site-nav--mobile .sub-menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.site-nav--mobile .sub-menu-item > a,
.site-nav--mobile .sub-menu-item > .nav-item-inner {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding: 0.75rem 1rem 0.75rem 2rem;
    color: var(--color-over-2);
    font-size: 1rem;
}
.site-nav--mobile .sub-menu-item > .dropdown-toggle {
    grid-column: 2;
    grid-row: 1;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
}
/* Level-3 — no holder wrapper; sub-menu itself carries .show */
.site-nav--mobile .sub-menu .sub-menu {
    display: none;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(0, 0, 0, 0.15);
}
.site-nav--mobile .sub-menu .sub-menu.show {
    display: block;
}
.site-nav--mobile .sub-menu .sub-menu .sub-menu-item > a {
    padding-left: 3rem;
}

/* Desktop — >= 64rem */
@media (min-width: 64rem) {
    .site-nav--mobile { display: none; }
    .site-nav--desktop { display: block; }

    .site-nav--desktop {
        background-color: var(--color-2);
        color: var(--color-over-2);
    }
    .site-nav--desktop .nav-menu {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        margin: 0;
        padding: 0 0.75rem;
        list-style: none;
        width: 100%;
        max-width: 84rem;
        margin-inline: auto;
        box-sizing: border-box;
    }

    .site-nav--desktop .nav-item {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    /* Level-1 overlay pattern per components/navigation.md — label and toggle
       share cell 1,1; label's margin-right matches the toggle's icon slot. */
    .site-nav--desktop .nav-item.dropdown > a.nav-item-inner,
    .site-nav--desktop .nav-item.dropdown > div.nav-item-inner {
        margin-right: 1.5rem;
    }
    .site-nav--desktop .nav-item.dropdown > .dropdown-toggle {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        padding: 0;
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .site-nav--desktop .nav-item.dropdown > .dropdown-toggle::after {
        font-family: 'Material Symbols Outlined';
        font-variation-settings: 'FILL' 1;
        content: 'expand_more';
        text-transform: none;
        font-size: 1.25rem;
        padding-right: 0.25rem;
    }
    .site-nav--desktop .nav-item.dropdown > a.nav-item-inner,
    .site-nav--desktop .nav-item.dropdown > div.nav-item-inner,
    .site-nav--desktop .nav-item:not(.dropdown) > a.nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        padding: 0.875rem 1rem;
        font-size: 1rem;
        color: var(--color-over-2);
        position: relative;
        z-index: 1;
    }
    /* CONTAINER labels are non-anchors; pass interaction to the toggle. */
    .site-nav--desktop .nav-item.dropdown > div.nav-item-inner {
        pointer-events: none;
    }

    /* Level-2 dropdown panel — absolutely positioned below its parent item. */
    .site-nav--desktop .sub-menu-holder {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 14rem;
        z-index: 10;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    }
    .site-nav--desktop .sub-menu-holder:has(.sub-menu.show) {
        display: block;
    }
    /* Right-half items open their panels right-aligned to avoid overflow. */
    .site-nav--desktop .drop-left .sub-menu-holder {
        left: auto;
        right: 0;
    }
    .site-nav--desktop .sub-menu-holder > .sub-menu {
        margin: 0;
        padding: 0.25rem 0;
        list-style: none;
    }
    .site-nav--desktop .sub-menu-item {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .site-nav--desktop .sub-menu-item > a,
    .site-nav--desktop .sub-menu-item > .nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        display: block;
        padding: 0.5rem 0.75rem;
        color: #000;
        font-size: 1rem;
    }
    .site-nav--desktop .sub-menu-item:has(> a:hover, > a:focus-visible, > .dropdown-toggle:hover, > .dropdown-toggle:focus-visible) {
        background-color: var(--color-1);
    }
    .site-nav--desktop .sub-menu-item:has(> a:hover, > a:focus-visible, > .dropdown-toggle:hover, > .dropdown-toggle:focus-visible) > .nav-item-inner,
    .site-nav--desktop .sub-menu-item:has(> a:hover, > a:focus-visible, > .dropdown-toggle:hover, > .dropdown-toggle:focus-visible) > .dropdown-toggle {
        color: var(--color-over-1);
    }
    .site-nav--desktop .sub-menu-item > .dropdown-toggle {
        grid-column: 2;
        grid-row: 1;
        width: 2rem;
        height: 100%;
        padding: 0;
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .site-nav--desktop .sub-menu-item > .dropdown-toggle::after {
        font-family: 'Material Symbols Outlined';
        font-variation-settings: 'FILL' 1;
        content: 'chevron_right';
        text-transform: none;
        font-size: 1.25rem;
    }
    .site-nav--desktop .drop-left .sub-menu-item.dropdown > .dropdown-toggle::after {
        content: 'chevron_left';
    }

    /* Level-3 flyout — no holder; behavior on .sub-menu directly. */
    .site-nav--desktop .sub-menu .sub-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 14rem;
        margin: 0;
        padding: 0.25rem 0;
        list-style: none;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    }
    .site-nav--desktop .sub-menu .sub-menu.show {
        display: block;
    }
    .site-nav--desktop .drop-left .sub-menu-item.dropdown > .sub-menu {
        right: 100%;
        left: auto;
    }
}

.site-nav--schools { display: none; }

@media (min-width: 48rem) {
    .site-nav--schools {
        display: block;
        position: relative;
    }
    .site-nav--schools .nav-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .site-nav--schools .nav-item {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
    }
    .site-nav--schools .nav-menu > .nav-item > .nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        padding: 0.5rem 2.75rem 0.5rem 1rem;
        background-color: var(--color-1);
        color: var(--color-over-1);
        border-radius: 8px;
        font-size: 1rem;
        pointer-events: none;
        z-index: 1;
    }
    .site-nav--schools .dropdown-toggle {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        padding: 0 0.75rem 0 0;
        background: transparent;
        border: 0;
        color: var(--color-over-1);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 2;
    }
    .site-nav--schools .dropdown-toggle::after {
        font-family: 'Material Symbols Outlined';
        font-variation-settings: 'FILL' 1;
        content: 'expand_more';
        text-transform: none;
        font-size: 1.25rem;
        transition: transform 0.2s ease;
    }
    .site-nav--schools .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
    .site-nav--schools .sub-menu-holder {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 10;
        margin-top: 0.5rem;
        background-color: color-mix(in srgb, var(--color-1) 88%, transparent);
        border-radius: 10px;
        padding: 1.25rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    .site-nav--schools .sub-menu-holder:has(.sub-menu.show) {
        display: block;
    }
    .site-nav--schools .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: auto auto;
        gap: 1.25rem 1.875rem;
        min-width: 25rem;
    }
    .site-nav--schools .sub-menu-item > .nav-item-inner {
        display: block;
        padding: 0;
        color: var(--color-over-1);
        text-align: right;
        pointer-events: auto;
    }
    body .site-nav--schools .sub-menu-item > .nav-item-inner:focus-visible {
        outline: 2px solid var(--color-over-1);
        outline-offset: 2px;
    }
}

/* ────────────────────────────────────────────────────────────────
   Hero video + Mission spotlight
   ──────────────────────────────────────────────────────────────── */

.site-hero {
    position: relative;
    width: 100%;
}

.site-hero__media {
    position: relative;
    width: 100%;
    background-color: #000;
}

.site-hero__video,
.site-hero__embed {
    display: block;
    width: 100%;
    height: auto;
}

.site-hero__embed iframe,
.site-hero__embed video,
.site-hero__embed object,
.site-hero__embed embed {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.site-hero__mission {
    background-color: var(--color-1);
    color: var(--color-over-1);
    padding: 1.5rem 0.75rem;
}
.site-hero__mission .section-title-block__title {
    color: inherit;
    filter: none;
}

.site-hero__mission-link {
    display: inline-block;
    margin-top: 1rem;
    color: inherit;
    text-decoration: underline;
}
body .site-hero__mission-link:link,
body .site-hero__mission-link:visited,
body .site-hero__mission-link:hover,
body .site-hero__mission-link:active {
    color: inherit;
}

@media (min-width: 64rem) {
    .site-hero__mission {
        position: absolute;
        left: 0.5rem;
        bottom: 7.875rem;
        max-width: 41.75rem;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 1.25rem;
        z-index: 2;
    }
}

/* ────────────────────────────────────────────────────────────────
   Section title block — heading + tan accent line + body,
   matching Figma's mission spotlight composition (title/line/body).
   ──────────────────────────────────────────────────────────────── */

.section-title-block__title {
    font-family: "basic-sans", sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.section-title-block__title::after {
    content: "";
    display: block;
    width: 3.6875rem;
    height: 2px;
    background-color: var(--color-2);
    margin-block: 0.625rem;
    margin-inline: 0;
}
.site-news__title { text-align: center; }
.site-news__title .section-title-block__title::after {
    margin-inline: auto;
}
.section-title-block__body {
    font-size: 1.125rem;
    line-height: 1.35;
    color: inherit;
    margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   Campus links — 10-tile grid (2 rows of 5 desktop) / slider (mobile)
   ──────────────────────────────────────────────────────────────── */

.site-campus-links {
    padding: 3.125rem 0.75rem;
}
.site-campus-links .swiper-container,
.site-campus-links.swiper-container {
    position: relative;
}
.site-campus-links__inner {
    position: relative;
    width: 100%;
    max-width: 84rem;
    margin-inline: auto;
    box-sizing: border-box;
}
.site-campus-links__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-campus-links__item {
    height: auto;
}
.site-campus-links__tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 236 / 284;
    padding: 0.625rem;
    background-color: #000;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
}
.site-campus-links__tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: background-color 0.15s ease;
}
.site-campus-links__tile:hover::before,
.site-campus-links__tile:focus-visible::before {
    background-color: color-mix(in srgb, var(--color-1) 80%, transparent);
}
body a.site-campus-links__tile:link,
body a.site-campus-links__tile:visited,
body a.site-campus-links__tile:hover,
body a.site-campus-links__tile:active {
    color: #fff;
}
.site-campus-links__label {
    position: relative;
    z-index: 2;
    font-size: 1.25rem;
    line-height: 1.2;
    transition: font-size 0.15s ease;
}
.site-campus-links__tile:hover .site-campus-links__label,
.site-campus-links__tile:focus-visible .site-campus-links__label {
    font-size: 1.375rem;
    font-weight: 500;
}

.site-campus-links__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 84rem;
    margin-inline: auto;
}
.site-campus-links__inner > .swiper {
    flex: 0 1 14.75rem;
    min-width: 0;
}
.site-campus-links .swiper-button-prev,
.site-campus-links .swiper-button-next {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    padding: 0;
    background-color: var(--color-1);
    color: var(--color-over-1);
    border-radius: 0;
}
.site-campus-links .swiper-button-prev { order: -1; }
.site-campus-links .swiper-button-next { order: 1; }
.site-campus-links .swiper-button-prev::after,
.site-campus-links .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    text-transform: none;
    font-size: 2.25rem;
}
.site-campus-links .swiper-button-prev::after { content: 'arrow_left'; }
.site-campus-links .swiper-button-next::after { content: 'arrow_right'; }

@media (min-width: 48rem) {
    .site-campus-links.swiper-disabled .site-campus-links__list,
    .site-campus-links.swiper-disabled .swiper-wrapper.site-campus-links__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem;
        transform: none;
    }
    .site-campus-links.swiper-disabled .site-campus-links__item {
        flex: 0 0 auto;
        width: 14.75rem !important;
        height: 17.75rem;
    }
    .site-campus-links__inner > .swiper {
        flex: 1 1 auto;
    }
    .site-campus-links .swiper-button-prev,
    .site-campus-links .swiper-button-next {
        display: none;
    }
}

/* ────────────────────────────────────────────────────────────────
   Events — card carousel with prev/next + More CTA below
   ──────────────────────────────────────────────────────────────── */

.site-events {
    padding: 3.125rem 0.75rem;
}
.site-events__inner {
    width: 100%;
    max-width: 84rem;
    margin-inline: auto;
    box-sizing: border-box;
}
.site-events__title {
    margin: 0 0 2rem;
}
.site-news__title {
    margin: 0 0 1.5rem;
}
.site-news__title .section-title-block__title {
    color: #fff;
    filter: none;
}

.site-events__carousel.swiper-container {
    position: relative;
}
.site-events__carousel .swiper {
    padding-bottom: 8px;
}
.site-events__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-events__item {
    height: auto;
}
.site-events__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.4375rem 1rem 1.5rem;
    background-color: var(--color-2);
    color: var(--color-over-2);
    height: 100%;
    box-sizing: border-box;
}
.site-events__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    width: 2px;
    height: 4.125rem;
    background-color: var(--color-1);
}
.site-events__card::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 100%;
    height: 8px;
    background-color: var(--color-1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 295 8' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M295 0V8C196.804 0.652 98.196 0.652 0 8V0H295Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 295 8' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M295 0V8C196.804 0.652 98.196 0.652 0 8V0H295Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.site-events__date {
    font-family: "inter-18pt", sans-serif;
    font-size: 1.125rem;
    line-height: 1.2;
    padding-left: 1rem;
    margin: 0 0 2.8125rem;
}
.site-events__card-title {
    margin: 0 0 0.9375rem;
    font-family: "basic-sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}
body a.site-events__card-link:link,
body a.site-events__card-link:visited,
body a.site-events__card-link:hover,
body a.site-events__card-link:active {
    color: inherit;
    text-decoration: none;
}
.site-events__time,
.site-events__location {
    font-family: "inter-18pt", sans-serif;
    font-size: 1.125rem;
    line-height: 1.2;
}
.site-events__time {
    margin-bottom: 0.3125rem;
}

.site-events__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.875rem;
    margin-top: 2.5rem;
}
.site-events .site-events__nav-prev,
.site-events .site-events__nav-next {
    position: static;
    margin: 0;
    top: auto;
    left: auto;
    right: auto;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background-color: var(--color-1);
    color: var(--color-over-1);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-events .site-events__nav-prev::after,
.site-events .site-events__nav-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    text-transform: none;
    font-size: 2.25rem;
}
.site-events .site-events__nav-prev::after { content: 'arrow_left'; }
.site-events .site-events__nav-next::after { content: 'arrow_right'; }
.site-events__nav-prev.swiper-button-disabled,
.site-events__nav-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}
.site-events__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2.5rem;
    background-color: var(--color-1);
    color: #fff;
    text-decoration: none;
    font-family: "inter-18pt", sans-serif;
    font-size: 1.125rem;
    line-height: 1.222;
}
body a.site-events__more:link,
body a.site-events__more:visited,
body a.site-events__more:hover,
body a.site-events__more:active {
    color: #fff;
}

/* ────────────────────────────────────────────────────────────────
   Motto — school logo above spotlight body text, centered
   ──────────────────────────────────────────────────────────────── */

.site-motto {
    padding: 0 0.75rem 3.125rem;
}
.site-motto__inner {
    width: 100%;
    max-width: 84rem;
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}
.site-motto__logo {
    display: block;
    width: 12rem;
    height: auto;
    object-fit: contain;
}
.site-motto__body {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-family: "basic-sans", sans-serif;
    font-size: 2.5rem;
    line-height: 1.25;
    max-width: 48rem;
}
.site-motto__body::after {
    content: "";
    display: block;
    width: 12.5rem;
    height: 2px;
    background-color: var(--color-2);
    margin: 1.5rem auto 0;
}

/* ────────────────────────────────────────────────────────────────
   Second video block — full-width video, section is edge-to-edge
   ──────────────────────────────────────────────────────────────── */

.site-video-2 {
    padding: 0 0 3.125rem;
}
.site-video-2__media {
    position: relative;
    width: 100%;
    background-color: #000;
}
.site-video-2__video,
.site-video-2__embed {
    display: block;
    width: 100%;
    height: auto;
}
.site-video-2__embed iframe,
.site-video-2__embed video,
.site-video-2__embed object,
.site-video-2__embed embed {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ────────────────────────────────────────────────────────────────
   Quick Links — icon + label tiles, 3 across desktop / slider mobile
   ──────────────────────────────────────────────────────────────── */

.site-quick-links {
    padding: 0 0.75rem 3.125rem;
}
.site-quick-links.swiper-container {
    position: relative;
}
.site-quick-links__inner {
    position: relative;
    width: 100%;
    max-width: 84rem;
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.site-quick-links .swiper {
    padding-bottom: 8px;
}
.site-quick-links__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-quick-links__item {
    height: auto;
}
.site-quick-links__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    max-width: 11.125rem;
    min-height: 8.5625rem;
    height: 100%;
    padding: 0.75rem 1rem 1rem;
    background-color: var(--color-2);
    color: var(--color-over-2);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.site-quick-links__tile:hover,
.site-quick-links__tile:focus-visible {
    background-color: var(--color-1);
    color: var(--color-over-1);
    outline: none;
}
.site-quick-links__tile::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: 100%;
    height: 8px;
    background-color: var(--color-1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 295 8' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M295 0V8C196.804 0.652 98.196 0.652 0 8V0H295Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 295 8' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M295 0V8C196.804 0.652 98.196 0.652 0 8V0H295Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
body a.site-quick-links__tile:link,
body a.site-quick-links__tile:visited,
body a.site-quick-links__tile:active {
    color: var(--color-over-2);
}
body a.site-quick-links__tile:hover,
body a.site-quick-links__tile:focus-visible {
    color: var(--color-over-1);
}
.site-quick-links__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.75rem;
    color: inherit;
}
.site-quick-links__icon svg,
.site-quick-links__icon img {
    width: auto;
    height: 100%;
    max-width: 100%;
}
.site-quick-links__label {
    font-family: "basic-sans", sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
    text-align: center;
}
/* Green divider only when an icon precedes the label. */
.site-quick-links__icon + .site-quick-links__label::before {
    content: "";
    display: block;
    width: 3.6875rem;
    height: 2px;
    background-color: var(--color-1);
    margin: 0 auto 0.625rem;
    transition: background-color 0.15s ease;
}
.site-quick-links__tile:hover .site-quick-links__icon + .site-quick-links__label::before,
.site-quick-links__tile:focus-visible .site-quick-links__icon + .site-quick-links__label::before {
    background-color: var(--color-2);
}

.site-quick-links__inner > .swiper {
    flex: 0 1 11.125rem;
    min-width: 0;
}
.site-quick-links .swiper-button-prev,
.site-quick-links .swiper-button-next {
    position: static;
    flex: 0 0 auto;
    order: 0;
    /* Offset up by the swiper's swoosh-clearance padding so arrows center on
       the tile, not the taller padded swiper box. */
    margin: 0 0 8px 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    padding: 0;
    background-color: var(--color-1);
    color: var(--color-over-1);
    border-radius: 0;
}
.site-quick-links .swiper-button-prev { order: -1; }
.site-quick-links .swiper-button-next { order: 1; }
.site-quick-links .swiper-button-prev::after,
.site-quick-links .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    text-transform: none;
    font-size: 2.25rem;
}
.site-quick-links .swiper-button-prev::after { content: 'arrow_left'; }
.site-quick-links .swiper-button-next::after { content: 'arrow_right'; }

/* Flatten CMS SVG icons to currentColor so they align with the tile theme. */
.flat-icon-colors svg {
    fill: currentColor;
}
.flat-icon-colors svg.color-flatten .color-fill { fill: currentColor; }
.flat-icon-colors svg.color-flatten .transparency-change { fill: transparent; }

@media (min-width: 48rem) {
    .site-quick-links.swiper-disabled .site-quick-links__list,
    .site-quick-links.swiper-disabled .swiper-wrapper.site-quick-links__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 2rem 2.5rem;
        transform: none;
    }
    .site-quick-links.swiper-disabled .site-quick-links__item {
        flex: 0 0 auto;
        width: 11.125rem !important;
        height: auto;
    }
    .site-quick-links__inner > .swiper {
        flex: 1 1 auto;
    }
    .site-quick-links .swiper-button-prev,
    .site-quick-links .swiper-button-next {
        display: none;
    }
}

/* ────────────────────────────────────────────────────────────────
   News — MonUI tabs (per-campus) + Swiper (news cards per panel)
   Dark-green section, tan inactive tabs, white active tab.
   ──────────────────────────────────────────────────────────────── */

.site-news {
    background-color: var(--color-1);
    color: #fff;
    padding: 3.125rem 0.75rem;
}
.site-news__inner {
    width: 100%;
    max-width: 62.5rem;
    margin-inline: auto;
    box-sizing: border-box;
}
.site-news__heading {
    color: #fff;
    text-align: center;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 2rem;
}

/* Tab strip: 2 rows of 5 on desktop; wraps on smaller viewports. */
.site-news__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}
.site-news__tab {
    padding: 0.75rem 1rem;
    background-color: var(--color-2);
    color: var(--color-over-2);
    border: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    min-width: 8rem;
}
.site-news__tab[aria-selected="true"] {
    background-color: #fff;
    color: #000;
}

/* Panels — grid-stack + visibility: hidden per libraries/monui.md so
   inactive panels retain layout box (Swipers inside them measure width
   correctly at init). */
.site-news__panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stack";
}
.site-news__panels > .site-news__panel {
    grid-area: stack;
    min-width: 0;
}
.site-news__panels > .site-news__panel[aria-hidden="true"] {
    visibility: hidden;
}

.site-news__carousel.swiper-container {
    position: relative;
}
.site-news__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-news__item {
    height: auto;
}
.site-news__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: transparent;
    color: #fff;
    height: 100%;
}
.site-news__card-media img {
    display: block;
    width: 100%;
    height: auto;
}
.site-news__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.site-news__card-title {
    margin: 0;
    font-family: "basic-sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}
.site-news__card-title::after {
    content: "";
    display: block;
    width: 3.6875rem;
    height: 2px;
    background-color: var(--color-2);
    margin-top: 0.625rem;
}
body a.site-news__card-link:link,
body a.site-news__card-link:visited,
body a.site-news__card-link:hover,
body a.site-news__card-link:active {
    color: #fff;
    text-decoration: none;
}
.site-news__card-summary {
    font-family: "inter-18pt", sans-serif;
    font-size: 1.125rem;
    line-height: 1.21;
    color: #fff;
}

.site-news__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.875rem;
    margin-top: 2.5rem;
}
.site-news .site-news__nav-prev,
.site-news .site-news__nav-next {
    position: static;
    margin: 0;
    top: auto;
    left: auto;
    right: auto;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background-color: #fff;
    color: var(--color-1);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-news .site-news__nav-prev::after,
.site-news .site-news__nav-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    text-transform: none;
    font-size: 2.25rem;
}
.site-news .site-news__nav-prev::after { content: 'arrow_left'; }
.site-news .site-news__nav-next::after { content: 'arrow_right'; }
.site-news__nav-prev.swiper-button-disabled,
.site-news__nav-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}
.site-news__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2.5rem;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    font-family: "inter-18pt", sans-serif;
    font-size: 1.125rem;
    line-height: 1.222;
}
body a.site-news__more:link,
body a.site-news__more:visited,
body a.site-news__more:active {
    color: #000;
}
body a.site-news__more:hover,
body a.site-news__more:focus-visible {
    background-color: var(--color-2);
    color: var(--color-over-2);
    outline: none;
}

/* ────────────────────────────────────────────────────────────────
   Footer — logo + accreditation badges + search top, 10 hard-coded campus locations, address + Edlio attribution
   ──────────────────────────────────────────────────────────────── */

.site-footer {
    background-color: #fff;
    color: #000;
    padding: 3.125rem 0.75rem;
}
.site-footer__inner {
    width: 100%;
    max-width: 84rem;
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.site-footer__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
@media (min-width: 48rem) {
    .site-footer__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
.site-footer__identity-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.site-footer__logo {
    display: block;
    height: 7.5rem;
    width: auto;
    object-fit: contain;
}
.site-footer__badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}
.site-footer__badge {
    display: block;
    height: 85px;
    width: auto;
    object-fit: contain;
}

.site-footer__search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 0.375rem 1rem;
    background-color: #fff;
    color: #000;
    border: 1px solid var(--color-1);
    border-radius: 999px;
    width: 100%;
    max-width: 14.25rem;
    box-sizing: border-box;
}
.site-footer__search input[type="search"] {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 0;
}
.site-footer__search input[type="search"]::placeholder {
    color: currentColor;
    opacity: 0.7;
}
.site-footer__search input[type="search"]:focus {
    outline: none;
}
.site-footer__search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-1);
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
}
.site-footer__search-submit::after {
    font-family: 'Material Symbols Outlined';
    content: 'search';
    text-transform: none;
    font-size: 2rem;
}

.site-footer__campuses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
}
.site-footer__campus {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.site-footer__campus-name {
    font-weight: 700;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.site-footer__campus-addr {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
body .site-footer a,
body .site-footer a:link,
body .site-footer a:visited,
body .site-footer a:hover,
body .site-footer a:active {
    color: inherit;
}
body .site-footer a.site-footer__attribution-link,
body .site-footer a.site-footer__attribution-link:link,
body .site-footer a.site-footer__attribution-link:visited,
body .site-footer a.site-footer__attribution-link:hover,
body .site-footer a.site-footer__attribution-link:active {
    color: var(--color-1);
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
}
@media (min-width: 48rem) {
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
.site-footer__address {
    font-family: "inter-18pt", sans-serif;
    font-size: 1.125rem;
}

.site-footer__attribution {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.site-footer__attribution-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-1);
    text-decoration: none;
}
.site-footer__attribution-link svg {
    fill: currentColor;
}
.site-footer__attribution-link:first-of-type svg {
    width: 140px;
    height: 20px;
}
.site-footer__attribution-link:nth-of-type(2) svg {
    height: 1.5rem;
    width: auto;
}

@media (min-width: 48rem) {
    .site-footer__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .site-footer__campuses {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* CTA hover states — from the more_events / more_news component variants. */
.site-events__more,
.site-news__more {
    transition: background-color 0.15s ease, color 0.15s ease;
}
body a.site-events__more:hover,
body a.site-events__more:focus-visible,
body a.site-news__more:hover,
body a.site-news__more:focus-visible {
    background-color: var(--color-2);
    color: var(--color-over-2);
    outline: none;
}