@import url("theme_settings/theme_settings.css");
@import url("https://use.typekit.net/bbm2erw.css");
@import url("https://fonts.googleapis.com/css2?family=Poltawski+Nowy:ital,wght@0,400;0,700;1,400;1,700&display=swap");

: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 */

    /* Design tokens */
    --font-heading: "octin-college", sans-serif;
    --font-body: "Poltawski Nowy", Georgia, serif;
    --site-band: #eaeeed;           /* neutral section-band gray (literal, no theme role) */
    --site-max: 79rem;              /* content max-width (~1266px inner at 1366 frame) */
    --site-gutter: clamp(1rem, 4vw, 3.125rem);
    --site-section-gap: clamp(3.5rem, 7vw, 6rem);
    --site-radius: 0;
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.5;
    color: #000;
}

.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-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
    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);
}

/* ------------------------------------------------------------------ *\
   Homepage layout rhythm
\* ------------------------------------------------------------------ */

.site-homepage {
    display: flex;
    flex-direction: column;
    gap: var(--site-section-gap);
    padding-block-end: var(--site-section-gap);
}

/* Centered, gutter-padded inner wrapper reused by most sections. */
.site-inner {
    width: 100%;
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
    box-sizing: border-box;
}

/* Blue Octin section heading. filter keeps a light theme color legible. */
.site-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    margin: 0;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}

/* ------------------------------------------------------------------ *\
   Shared interactive controls (carousel arrows, CTA, play/pause)
\* ------------------------------------------------------------------ */

/* Carousel prev/next — square blue buttons with Material Symbols chevrons.
   Scoped to .site-carousel; position:static so they sit in a flex control row.
   Overriding Swiper's ::after prevents its default swiper-icon chevron. */
.site-carousel .swiper-button-prev,
.site-carousel .swiper-button-next {
    --swiper-navigation-size: 1.5rem;
    --swiper-navigation-color: var(--color-over-1);
    position: static;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--color-1);
    color: var(--color-over-1);
    cursor: pointer;
}
.site-carousel .swiper-button-prev::after,
.site-carousel .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: var(--swiper-navigation-size);
    text-transform: none;
}
.site-carousel .swiper-button-prev::after { content: 'chevron_left'; }
.site-carousel .swiper-button-next::after { content: 'chevron_right'; }
/* Hide both arrows when neither can advance (too few slides). */
.site-carousel:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) .swiper-button { display: none; }

.site-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2.5rem;
    background-color: var(--color-1);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    line-height: 1.2;
}
body a.site-cta,
body a.site-cta:visited { color: var(--color-over-1); }

/* ================================================================== *\
   Header
\* ================================================================== */

.site-header {
    position: relative;               /* containing block for the mobile toggle */
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

/* Identity row sits on the grey banner; nav is pulled above it (order: -1). */
.site-header__band {
    background-color: var(--site-band);
    padding-block: 0.75rem;
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-identity {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    min-width: 0;
    padding-right: 3.5rem;            /* reserve space so the name clears the absolute mobile toggle */
}
@media (min-width: 64rem) {
    .site-identity { padding-right: 0; }
}
.site-identity__logo {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
.site-identity__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    max-width: 12em;              /* forces the "…Catholic / School System" wrap from Figma */
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}

.site-header__utils {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;                      /* full row on mobile so the social icons center */
    justify-content: center;
}
@media (min-width: 64rem) {
    .site-header__utils { width: auto; justify-content: normal; }
}

/* Social icons — CMS brand colors preserved (no .flat-icon-colors). */
.site-social ul {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.site-social svg,
.site-social img {
    width: 2rem;
    height: 2rem;
}


/* ================================================================== *\
   Navigation — mobile-first (hamburger is the base; desktop at 64rem)
\* ================================================================== */

.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav a,
.site-nav .nav-item-inner {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.125rem;
    color: #000;
    text-decoration: none;
}
/* Preserve the native underline that distinguishes links from container labels. */
.site-nav a.nav-item-inner { text-decoration: underline; }
.site-nav div.nav-item-inner { pointer-events: none; }
/* Dropdown submenu links use the CMS-loaded body sans, not the display face. */
.site-nav .sub-menu a { font-family: "Open Sans", sans-serif; font-size: 1rem; }

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
.dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    line-height: 1;
    text-transform: none;
    content: 'expand_more';
    display: inline-block;
    transition: transform 0.2s ease;
}
/* accessible-menu toggles aria-expanded on open — including hover-opened
   desktop dropdowns (hoverType: "on") — so this covers hover, click, and
   keyboard-opened submenus alike. */
.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* --- Base (mobile / tablet): desktop nav hidden, hamburger shown --- */
.site-nav--desktop { display: none; }
.site-nav--mobile  { display: block; }

.menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background-color: var(--color-1);
    color: var(--color-over-1);
    cursor: pointer;
}
.menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.75rem;
    line-height: 1;
    text-transform: none;
    content: 'menu';
}
.menu-toggle[aria-expanded="true"]::after { content: 'close'; }

.site-nav--mobile .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 15;
    background-color: #fff;
    border-top: 1px solid var(--site-band);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.site-nav--mobile .nav-menu.show { display: block; }

.site-nav--mobile .nav-item,
.site-nav--mobile .sub-menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--site-band);
}
.site-nav--mobile .nav-item-inner,
.site-nav--mobile .sub-menu-item > a { padding: 0.85rem 1.25rem; }

/* Sub-menus expand in document flow; holder + level-3 span both columns. */
.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 .sub-menu { display: none; grid-column: 1 / -1; }
.site-nav--mobile .sub-menu .sub-menu.show { display: block; }
.site-nav--mobile .sub-menu-item > a { padding-left: 2.5rem; }
.site-nav--mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3.75rem; }

.site-nav--mobile .dropdown-toggle { width: 3rem; height: 3rem; }

/* Hover/focus at every level (direct children only, so nested items keep theirs). */
.site-nav--mobile .nav-item:hover > .nav-item-inner,
.site-nav--mobile .nav-item:focus-within > .nav-item-inner {
    background-color: var(--site-band);
}
.site-nav--mobile .sub-menu-item:hover > a,
.site-nav--mobile .sub-menu-item:focus-within > a {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

/* --- Desktop (≥64rem): horizontal nav, hamburger hidden --- */
@media (min-width: 64rem) {
    .site-nav--mobile { display: none; }
    .menu-toggle { display: none; }
    .site-nav--desktop { display: block; }

    .site-nav--desktop {
        order: -1;                    /* nav bar sits above the grey identity band */
        background-color: #fff;
        border-bottom: 1px solid var(--site-band);
    }
    .site-nav--desktop .nav-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .site-nav--desktop .nav-item { position: relative; }

    /* Level-1 overlay: label + toggle share cell 1,1. */
    .site-nav--desktop .nav-item {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
    }
    .site-nav--desktop .nav-item > .nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 1;
        padding: 0.9rem 1rem;
    }
    .site-nav--desktop .nav-item.dropdown > .nav-item-inner { margin-right: 2rem; }
    .site-nav--desktop .nav-menu > .nav-item > .dropdown-toggle {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        justify-content: flex-end;
        padding-right: 0.5rem;
    }
    .site-nav--desktop .nav-item:not(.dropdown) > a.nav-item-inner { padding: 0.9rem 1rem; }

    /* Hover/focus on the li / toggle, never on a.nav-item-inner (buries the arrow). */
    .site-nav--desktop .nav-item:hover,
    .site-nav--desktop .nav-item:focus-within { background-color: var(--site-band); }

    /* Level-2 panel: absolute, below its parent item. */
    .site-nav--desktop .sub-menu-holder {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 30;
        min-width: 14rem;
        background-color: #fff;
        border: 1px solid var(--site-band);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }
    .site-nav--desktop .sub-menu-holder:has(.sub-menu.show) { display: block; }
    .site-nav--desktop .drop-left .sub-menu-holder { left: auto; right: 0; }

    /* position:relative makes each level-2 row the containing block for its own
       level-3 flyout, so the flyout lands beside the hovered row rather than
       always at the top of the whole panel (its next positioned ancestor otherwise). */
    .site-nav--desktop .sub-menu-item { position: relative; display: grid; grid-template-columns: 1fr auto; }
    .site-nav--desktop .sub-menu-item > a { padding: 0.6rem 1rem; }
    .site-nav--desktop .sub-menu-item.dropdown > .dropdown-toggle { grid-column: 2; grid-row: 1; }
    .site-nav--desktop .sub-menu-item:hover > a,
    .site-nav--desktop .sub-menu-item:focus-within > a {
        background-color: var(--color-1);
        color: var(--color-over-1);
    }

    /* Level-3 flyout — no holder; position on the .sub-menu directly. */
    .site-nav--desktop .sub-menu .sub-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 14rem;
        background-color: #fff;
        border: 1px solid var(--site-band);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }
    .site-nav--desktop .sub-menu .sub-menu.show { display: block; }
    .site-nav--desktop .drop-left .sub-menu-item.dropdown > .sub-menu { left: auto; right: 100%; }
}

/* ================================================================== *\
   Footer
\* ================================================================== */

.site-footer__body { background-color: var(--site-band); }   /* grey spreads to the edges */
.site-footer__inner {
    max-width: var(--size-xl);                                /* content constrained to 1920px */
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 3.125rem);               /* 50px sides */
}
.site-footer__body .site-footer__inner {
    padding-block: 3.125rem;                                  /* 50px */
    display: flex;
    flex-direction: column;
    gap: 1.875rem;                                            /* 30px between rows */
}

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.875rem;
}
.site-footer__identity {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
}
.site-footer__logo {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
.site-footer__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.site-footer__links ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
body .site-footer__links a,
body .site-footer__links a:visited { color: #000; }

.site-footer__campuses {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
    .site-footer__campuses { grid-template-columns: 1fr 1fr; }
}
.site-campus__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    border-bottom: 1px solid var(--color-1);
}
.site-campus__schools {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 30rem) {
    .site-campus__schools { grid-template-columns: 1fr 1fr; }
}
.site-school__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.25rem;
}
.site-school__address { font-style: normal; font-size: 0.95rem; line-height: 1.5; }
body .site-school__address a,
body .site-school__address a:visited { color: #000; text-decoration: underline; }

.site-footer__attribution {
    background-color: #fff;
    padding-block: 1rem;
}
.site-footer__attribution .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.site-footer__attribution a {
    display: inline-flex;
    align-items: center;
    color: #000;
}
/* Edlio brand SVGs inherit surrounding color; render at standard sizes. */
.site-footer__attribution svg { fill: currentColor; }
.site-footer__attribution a:first-of-type svg { width: 140px; height: 20px; }
.site-footer__attribution a:last-of-type svg { height: 1.5rem; width: auto; }
body .site-footer__attribution a:last-of-type { color: inherit; }

/* ================================================================== *\
   Hero photo shuffle
\* ================================================================== */

/* Full-bleed band behind the hero: grey top half (continues the header band),
   white bottom half. The constrained shuffle sits on top; band shows in gutters. */
.site-hero-band {
    background: linear-gradient(to bottom, var(--site-band) 0 50%, #fff 50% 100%);
}

.site-hero {
    position: relative;                            /* [Structural] containing block for autoplay toggle */
    width: 100%;                                   /* flex item must fill, else margin-inline:auto sizes it to max-content */
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
    box-sizing: border-box;
}
.site-hero .swiper { width: 100%; }               /* Swiper measures pre-layout in a flex column */
.site-hero__figure { margin: 0; position: relative; }
.site-hero__figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* [Structural] figcaption — mobile: below image in flow; desktop: overlay */
.site-hero figcaption { background-color: rgba(0, 0, 0, 0.85); color: #fff; padding: 0.75rem 1rem; }
@media (min-width: 768px) {
    .site-hero figcaption { position: absolute; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.75); }
    .site-hero figcaption.caption-position-top    { top: 0; }
    .site-hero figcaption.caption-position-bottom { bottom: 0; }
}

/* [Structural] navigation position — desktop only */
@media (min-width: 768px) {
    .site-hero .navigation-position-top    { --swiper-pagination-top: 0.5rem; --swiper-pagination-bottom: auto; }
    .site-hero .navigation-position-bottom { --swiper-pagination-bottom: 0.5rem; --swiper-pagination-top: auto; }
    .site-hero .navigation-position-left   { --swiper-pagination-left: 0.5rem; --swiper-pagination-right: auto; }
    .site-hero .navigation-position-right  { --swiper-pagination-right: 0.5rem; --swiper-pagination-left: auto; }
}

/* [Structural] prev/next only for navigation type 1 */
.site-hero:not(:has(.navigation-type-1)) .swiper-button-prev,
.site-hero:not(:has(.navigation-type-1)) .swiper-button-next { display: none; }

/* [Structural] hero arrow defaults — visible over any slide image */
.site-hero .swiper-button-prev,
.site-hero .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-bg: rgba(0, 0, 0, 0.5);
    background-color: var(--swiper-navigation-bg);
}
.site-hero .swiper-button-prev::after,
.site-hero .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: var(--swiper-navigation-size);
}
.site-hero .swiper-button-prev::after { content: 'chevron_left'; }
.site-hero .swiper-button-next::after { content: 'chevron_right'; }

/* Autoplay toggle — black chrome, bottom-left; hidden on mobile per [Structural] */
.swiper-autoplay-toggle-button {
    display: none;
    position: absolute;
    left: calc(var(--site-gutter) + 1rem);   /* clear the hero's side gutter so it sits on the image */
    bottom: 1rem;
    z-index: 3;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    cursor: pointer;
}
@media (min-width: 768px) {
    .swiper-autoplay-toggle-button { display: inline-flex; align-items: center; justify-content: center; }
}
.swiper-autoplay-toggle-button::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 1.25rem;
    line-height: 1;
    text-transform: none;
    content: 'pause';
}
.swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }

/* ================================================================== *\
   At a Glance — motto + facts infographic
\* ================================================================== */

.site-aag__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
.site-aag__motto { text-align: center; }
/* Motto renders spotlight body() HTML inside the heading — flatten any block wrappers. */
.site-aag__motto .site-heading p { margin: 0; }
/* Mobile (Figma mobile frame): facts are a one-at-a-time Swiper carousel.
   Tablet+ (Figma desktop frames): neutralized back to a static wrapped row —
   all facts visible, no swipe — matching the original design. */
.site-aag__carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.site-aag__carousel .swiper { width: 100%; flex: 1; min-width: 0; }
.site-aag__facts {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    flex: none;             /* Swiper controls slide width via inline styles at mobile */
}
@media (min-width: 48rem) {
    .site-aag__carousel .swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        transform: none !important;
        width: auto !important;
        gap: 1.5rem 2.5rem;
    }
    .site-aag__carousel .swiper-slide {
        width: auto !important;
        flex: 1 1 8rem;
    }
    .site-aag__carousel .swiper-button-prev,
    .site-aag__carousel .swiper-button-next { display: none; }
}
@media (min-width: 64rem) {
    .site-aag__inner { flex-direction: row; }
    .site-aag__motto { flex: 0 1 27rem; text-align: left; }
    .site-aag__carousel { flex: 1; }
}
.site-fact__icon {
    display: inline-flex;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.site-fact__icon svg,
.site-fact__icon img { width: 3rem; height: 3rem; }
.site-fact__value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.site-fact__label { font-size: 1rem; }

/* Icon color flattening — brand SVGs coordinate with the tile color. */
.flat-icon-colors svg.color-flatten .color-fill { fill: currentColor; }
.flat-icon-colors svg.color-flatten .transparency-change { fill: transparent; }
.flat-icon-colors svg:not(.color-flatten) { fill: currentColor; }

/* ================================================================== *\
   Our Mission — spotlight image with overlaid text box
\* ================================================================== */

.site-mission__frame {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(22rem, 54vw, 46rem);   /* tall feature image, ~1.58:1 per Figma */
    padding: clamp(1rem, 4vw, 1.875rem);
    box-sizing: border-box;
}
.site-mission__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.site-mission__box {
    position: relative;
    z-index: 1;
    max-width: 23rem;
    padding: 2.5rem;
    background-color: var(--color-1);
    color: var(--color-over-1);
}
.site-mission__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--color-over-1);
}
.site-mission__body { margin: 0; }
body .site-mission__body a,
body .site-mission__body a:visited { color: var(--color-over-1); }
.site-mission__cta { margin-top: 1.5rem; }

/* Mobile (Figma mobile frame): plain stacked blocks, image on top then a
   full-width solid text block below — no overlay. Tablet+ keeps the
   image-with-overlaid-box treatment above. */
@media (max-width: 47.9375rem) {
    .site-mission__frame {
        display: block;
        min-height: 0;
        padding: 0;
    }
    .site-mission__img {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .site-mission__box {
        max-width: none;
        padding: clamp(1.5rem, 6vw, 2.5rem);
    }
}

/* ================================================================== *\
   School News carousel
\* ================================================================== */

/* White top, grey band begins roughly mid-thumbnail (~35% of section height
   holds fairly steady across breakpoints) through the bottom — matches the
   Events section's white-top/grey-bottom direction. */
.site-news {
    background: linear-gradient(to bottom, #fff 0 35%, var(--site-band) 35% 100%);
    padding-block: 2.5rem 3rem;
}
/* Grid lets heading/arrows/cards/CTA rearrange per breakpoint without
   duplicating markup. Mobile (Figma mobile frame): heading, then cards, then
   a bottom row with prev/CTA/next together. Tablet+ (Figma desktop frames):
   arrows move up beside the heading; CTA sits alone below the cards. */
.site-news__carousel {
    position: relative;                 /* nav buttons are absolute in Swiper's model */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "heading heading heading"
        "cards   cards   cards"
        "prev    cta     next";
    align-items: center;
    row-gap: 1.5rem;
    column-gap: 1rem;
}
.site-news .swiper { width: 100%; }
.site-news__header { grid-area: heading; }
.site-news__prev { grid-area: prev; }
.site-news__next { grid-area: next; }
.site-news__carousel > .swiper { grid-area: cards; }
.site-news__cta { grid-area: cta; justify-self: stretch; }
@media (min-width: 48rem) {
    .site-news__carousel {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "heading prev next"
            "cards   cards cards"
            "cta     cta   cta";
    }
    .site-news__cta { justify-self: start; }
}
.site-news__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}
.site-news__thumb {
    display: block;
    background-color: var(--color-1);
}
.site-news__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}
/* Fallback thumbnail (no article photo) shows the school logo — render it as a
   small centered mark on the tile's color-1 background, not stretched/cropped
   to fill the 16:11 photo box like a real photo would be. */
.site-news__thumb--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 11;
}
.site-news__thumb--fallback img {
    width: 40%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}
.site-news__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0;
}
body .site-news__title a,
body .site-news__title a:visited {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    text-decoration: underline;
}
.site-news__summary { margin: 0; }

/* ================================================================== *\
   Events — embedded shuffle banner + 3-calendar tabs
\* ================================================================== */

.site-events { position: relative; }
/* Banner background is a top-white / bottom-grey split (~40% per Figma), so the
   grey band begins partway up the shuffle. The split shows in the side gutters;
   the opaque shuffle image covers the middle. Content below continues the grey. */
.site-events__banner {
    background: linear-gradient(to bottom, #fff 0 40%, var(--site-band) 40% 100%);
}
.site-events__shuffle { max-width: var(--site-max); margin-inline: auto; }
.site-events__content {
    background-color: var(--site-band);
    padding-block: 3rem;
}

.site-events__content .site-heading { text-align: center; margin-bottom: 1.5rem; }

/* Tabs. Mobile (Figma mobile frame): full-width, stacked one per row.
   Tablet+: inline row of pill buttons, centered. */
.site-events__tabs .monui-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}
.site-events__tabs .monui-button {
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: 0;
    background-color: #fff;
    color: #000;
    cursor: pointer;
}
@media (min-width: 48rem) {
    .site-events__tabs .monui-tabs-list { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .site-events__tabs .monui-button { width: auto; }
}
.site-events__tabs .monui-button[aria-selected="true"] {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

/* Panels: stack in one grid cell, toggle visibility so Swiper measures width. */
.site-events__tabs .monui-tabs-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stack";
}
.site-events__tabs .monui-tabs-panels > .monui-panel { grid-area: stack; min-width: 0; }
.site-events__tabs .monui-tabs-panels > .monui-panel[aria-hidden="true"] { visibility: hidden; }

.site-events__carousel { position: relative; }
.site-events .swiper { width: 100%; }
.site-events__nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.site-events__empty { text-align: center; margin: 0; }

/* Event card — date badge + details */
.site-event {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    height: 100%;
}
.site-event__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    margin-top: 0.25rem;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1;
}
.site-event__month { font-size: 1.125rem; text-transform: uppercase; }
.site-event__day { font-size: 2.25rem; }
.site-event__body { display: flex; flex-direction: column; gap: 0.5rem; }
.site-event__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
body .site-event__title a,
body .site-event__title a:visited { color: inherit; text-decoration: none; }
body .site-event__title a:hover,
body .site-event__title a:focus-visible { text-decoration: underline; }
.site-event__time,
.site-event__loc { font-size: 1.125rem; }

/* ================================================================== *\
   Logo bar — hardcoded mascot logos scroller
\* ================================================================== */

.site-logos__carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
    box-sizing: border-box;
}
.site-logos .swiper { width: 100%; flex: 1; }
.site-logos .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-logos .swiper-slide img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}
/* Plain black chevrons (deviation from the shared blue button treatment). */
.site-logos__carousel .swiper-button-prev,
.site-logos__carousel .swiper-button-next {
    --swiper-navigation-size: 1.5rem;
    position: static;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    cursor: pointer;
}
.site-logos__carousel .swiper-button-prev::after,
.site-logos__carousel .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-size: var(--swiper-navigation-size);
    color: #000;
    text-transform: none;
}
.site-logos__carousel .swiper-button-prev::after { content: 'chevron_left'; }
.site-logos__carousel .swiper-button-next::after { content: 'chevron_right'; }