@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One:wght@400&family=Karmina+Sans: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, #b8860b);
    --color-2:        var(--color-2-theme, #000000);
    --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, 1);

    /* 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-specific tokens */
    --font-heading: 'Alfa Slab One', sans-serif;
    --font-body: 'Karmina Sans', sans-serif;
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
}

.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. */
.pageTitle {
    color: #000;
    font-family: var(--font-heading);
    text-transform: uppercase;
    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);
    color: inherit;
}

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

.site-header {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-2);
    min-height: 4rem;
}

/* [Structural] .site-header__nav-row wraps the desktop nav and the
   topbar so both share one visual row, centered and capped at the
   same --size-lg content width used sitewide. The wrapper carries no
   accessibility role of its own and does not change DOM order — the
   topbar stays last in source order, after both navs, preserving
   keyboard tab order. */
@media (min-width: 64rem) {
    .site-header__nav-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        max-width: var(--size-lg);
        margin-inline: auto;
        width: 100%;
    }
    .site-header .site-nav--desktop { flex: 0 1 auto; min-width: 0; }
    .site-header .site-nav--desktop .nav-menu { justify-content: flex-start; }
}

/* [Structural] The translate widget (the topbar's only content) is
   hidden on mobile and tablet, not just restyled. The topbar box
   itself is hidden below the desktop breakpoint so it doesn't leave
   an empty padded strip once its content disappears; at desktop it
   drops into normal flow so it renders inline within
   .site-header__nav-row instead. */
.site-header__topbar {
    display: none;
}
@media (min-width: 64rem) {
    .site-header__topbar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: none;
    }
}

#google_translate_element {
    display: none;
    background-color: white;
    padding: 0.25rem 0.5rem;
}
@media (min-width: 64rem) {
    #google_translate_element { display: block; }
}

/* [Structural] .site-header__identity is a single link wrapping both
   logo images and the title text — one click target for "go home"
   instead of two separate logo-links flanking inert title text.
   Mobile shows a single logo stacked above the title; desktop
   restores the two-logo bracket lockup by switching to a row and
   revealing the second logo image only. */
.site-header__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
}
@media (min-width: 64rem) {
    .site-header__identity {
        flex-direction: row;
        align-self: center;
        gap: 1.5rem;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.site-header__logo--second {
    display: none;
}
@media (min-width: 64rem) {
    .site-header__logo--second { display: block; }
}

.site-header__logo {
    height: 10.125rem; /* 162px, fixed across breakpoints */
    width: auto;
}

.site-header__title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--color-over-2);
    font-size: 1.5rem;
    text-align: center;
}
@media (min-width: 48rem) {
    .site-header__title { font-size: 2.5rem; }
}

/* ---- Shared nav fundamentals ---- */

.site-nav .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.site-nav .nav-item-inner,
.site-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    color: var(--color-over-2);
    text-decoration: none;
    background: none;
    border: 0;
}
.site-nav a.nav-item-inner:hover,
.site-nav a.nav-item-inner:focus-visible {
    color: var(--color-1);
}

/* Top-level leaf links (no dropdown children — a direct page link,
   not a container) keep their underline; only items with an
   expand_more toggle drop the underline. The search item is icon-only
   on desktop, so it's excluded here too. */
.site-nav .nav-item:not(.dropdown):not(.nav-item--search) > a.nav-item-inner {
    text-decoration: underline;
}
/* Top-level items: hover/focus/open recolors the text only — no
   background swap. Only level-2/3 rows get the gold-background
   treatment. */
.site-nav .nav-item.dropdown > .dropdown-toggle:hover,
.site-nav .nav-item.dropdown > .dropdown-toggle:focus-visible,
.site-nav li.dropdown:hover > .dropdown-toggle,
.site-nav li.dropdown:focus-within > .dropdown-toggle,
.site-nav li.dropdown:hover > .nav-item-inner,
.site-nav li.dropdown:focus-within > .nav-item-inner {
    color: var(--color-1);
}

.site-nav .dropdown-toggle {
    cursor: pointer;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.5rem;
}
.site-nav .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    text-transform: none;
    font-size: 2rem;
    content: 'expand_more';
}

/* Level-2 holder: watches for .show on the inner sub-menu */
.site-nav .sub-menu-holder { display: none; }
.site-nav .sub-menu-holder:has(.sub-menu.show) { display: block; }

/* Level-3: no holder — the sub-menu itself carries .show */
.site-nav .sub-menu .sub-menu { display: none; }
.site-nav .sub-menu .sub-menu.show { display: block; }

.site-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-2);
}
.site-nav .sub-menu-item > a,
.site-nav .sub-menu-item > .dropdown-toggle {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-over-2);
    text-decoration: none;
    padding: 0 1rem;
}
/* [Structural] Level-2/3 items default to --color-2/--color-over-2
   (black bg, white text) and flip to --color-1/--color-over-1 (gold
   bg, black text) on hover, focus, or while a level-2 item's own
   submenu is open — the whole row's background swaps, not just the
   text color. */
.site-nav .sub-menu-item > a:hover,
.site-nav .sub-menu-item > a:focus-visible,
.site-nav .sub-menu-item.dropdown > .dropdown-toggle:hover,
.site-nav .sub-menu-item.dropdown > .dropdown-toggle:focus-visible,
.site-nav .sub-menu-item.dropdown:hover > .dropdown-toggle,
.site-nav .sub-menu-item.dropdown:focus-within > .dropdown-toggle {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

.nav-item--search .nav-item-inner::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    text-transform: none;
    content: 'search';
}

/* ---- Desktop nav (horizontal, overlay dropdown-toggle at level 1) ---- */

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

@media (min-width: 64rem) {
    .site-nav--desktop { display: block; }
    .site-nav--mobile { display: none; }

    .site-nav--desktop .nav-menu {
        flex-direction: row;
        justify-content: center;
    }

    .site-nav--desktop .nav-item {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .site-nav--desktop .nav-item-inner,
    .site-nav--desktop .dropdown-toggle {
        min-height: 4.5rem;
        padding: 0 1.25rem;
        text-align: center;
        white-space: normal;
    }

    /* Level-1 overlay pattern: label and toggle share cell 1,1 */
    .site-nav--desktop .nav-item.dropdown > .dropdown-toggle {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        justify-content: flex-end;
        display: flex;
        align-items: center;
    }
    .site-nav--desktop .nav-item.dropdown > .nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 1;
        margin-right: 1.75rem;
    }
    .site-nav--desktop div.nav-item-inner {
        pointer-events: none;
    }

    .site-nav--desktop .nav-item--search .nav-item-inner {
        min-height: 4.5rem;
        padding: 0 1rem;
    }
    .site-nav--desktop .nav-item--search .nav-item-inner::after {
        font-size: 2rem; /* 32px search glyph */
    }
    .site-nav--desktop .site-nav__search-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    /* Level-2 dropdown panel: absolute, out of flow */
    .site-nav--desktop .sub-menu-holder {
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 14rem;
        z-index: 10;
    }
    .site-nav--desktop .nav-item.drop-left .sub-menu-holder {
        left: auto;
        right: 0;
    }

    .site-nav--desktop .sub-menu-item.dropdown {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .site-nav--desktop .sub-menu-item.dropdown > .dropdown-toggle {
        grid-column: 2;
        grid-row: 1;
        width: auto;
    }

    /* Level-3 flyout */
    .site-nav--desktop .sub-menu .sub-menu {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 14rem;
    }
    .site-nav--desktop .drop-left .sub-menu-item.dropdown > .sub-menu {
        right: 100%;
        left: auto;
    }
}

/* ---- Mobile nav (hamburger) ---- */

.site-nav--mobile .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-2);
    z-index: 20;
}
.site-nav--mobile .nav-menu.show { display: flex; }

.site-nav--mobile .nav-item-inner,
.site-nav--mobile .dropdown-toggle {
    min-height: 3rem;
    padding: 0 1rem;
}
.site-nav--mobile .nav-item.dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
}
.site-nav--mobile .sub-menu-holder {
    grid-column: 1 / -1;
}
.site-nav--mobile .sub-menu-item.dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
}
.site-nav--mobile .sub-menu-item > a { padding-left: 2rem; }
.site-nav--mobile .sub-menu .sub-menu {
    grid-column: 1 / -1;
}
.site-nav--mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3rem; }

/* [Structural] 44x44 tap target with a plain white glyph on a
   transparent background — larger than the icon's inherited body
   font-size, so the size needs its own rule rather than relying on
   ambient text sizing. */
.site-nav--mobile .menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-over-2);
    background: none;
    border: 0;
    cursor: pointer;
}
.site-nav--mobile .menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    text-transform: none;
    font-size: 2rem;
    content: 'menu';
}
.site-nav--mobile .menu-toggle[aria-expanded="true"]::after {
    content: 'close';
}

/* ==========================================================================
   Hero / Shuffle
   ========================================================================== */

.site-hero {
    position: relative;
    margin-bottom: 1.875rem;
}
@media (min-width: 48rem) {
    .site-hero { margin-bottom: 0; }
}

.site-hero .swiper-container,
.site-hero .swiper-holder,
.site-hero .swiper { position: relative; }

.site-hero .swiper { width: 100%; }

.site-hero__figure {
    margin: 0;
    position: relative;
}

.site-hero__image {
    display: block;
    width: 100%;
}
@media (min-width: 64rem) {
    .site-hero__image { height: 43.625rem; object-fit: cover; } /* 698px, fixed */
}

/* [Structural] scrim overlay behind hero text — desktop only, a dark
   gradient fading out over the top portion of the slide image */
@media (min-width: 64rem) {
    .site-hero__figure::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 172px, transparent 100%);
        pointer-events: none;
    }
}

/* [Structural] mobile: caption below image in normal flow */
.site-hero figcaption {
    background-color: rgba(0,0,0,0.85);
    color: #fff;
}

/* [Structural] desktop: caption overlays the image */
@media (min-width: 48rem) {
    .site-hero figcaption {
        position: absolute;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.75);
        color: #fff;
    }
    .site-hero figcaption.caption-position-top    { top: 0; }
    .site-hero figcaption.caption-position-bottom { bottom: 0; }
}

/* [Structural] Navigation position and caption offsets — desktop only */
@media (min-width: 48rem) {
    .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; }

    .site-hero .navigation-position-top    figcaption.caption-position-top    { padding-top:    calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-bottom figcaption.caption-position-bottom { padding-bottom: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-left   figcaption                        { padding-left:   calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-right  figcaption                        { padding-right:  calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }

    .site-hero .navigation-type-1 figcaption { padding-left: calc(var(--swiper-navigation-size, 44px) + 0.5rem); padding-right: calc(var(--swiper-navigation-size, 44px) + 0.5rem); }
}

@media (max-width: 47.9375rem) {
    .site-hero .swiper-pagination-vertical {
        flex-direction: row;
        width: auto;
    }
}

/* [Structural] Prev/next always in DOM; only navigation type 1 shows them */
.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 fallback coloration — visible over any slide */
.site-hero .swiper-button-prev,
.site-hero .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-bg: rgba(0, 0, 0, 0.5);
}

.site-hero .swiper-autoplay-toggle-button {
    display: block;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
}
.site-hero .swiper-autoplay-toggle-button::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'pause';
}
.site-hero .swiper-autoplay-toggle-button.paused::after {
    content: 'play_arrow';
}

/* ==========================================================================
   Shared: CTA button
   ========================================================================== */

/* [Structural] body-prefixed to beat the CMS system stylesheet's
   a/a:link/a:visited/a:hover/a:active rule on specificity */
body a.site-cta,
body a.site-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background-color: var(--color-2);
    color: var(--color-1);
    font-family: var(--font-body);
    font-size: 1.25rem;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
body a.site-cta:hover,
body a.site-cta:focus-visible {
    background-color: var(--color-1);
    color: var(--color-2);
}

/* ==========================================================================
   Our Mission
   ========================================================================== */

.site-mission {
    padding: 1.875rem 1rem;
}
@media (min-width: 48rem) {
    .site-mission { padding: 1.25rem 1rem; }
}

.site-mission__inner {
    max-width: 67.875rem; /* 1086px */
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
}

.site-mission__title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 2.5rem;
    color: var(--color-2);
    text-align: center;
    margin: 0;
}

.site-mission__body {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-2);
    text-align: left;
}

/* [Structural] decorative two-semicircle accent behind the CTA.
   Centered on the button and taller than it (5rem vs. the button's
   ~3rem), so only the top and bottom peek out. Two 1.25rem-wide
   half-circles, one at left: 50% and one at right: 50%, meet at the
   centerline and round outward on the far side. */
.site-mission__cta-wrap {
    position: relative;
    display: inline-flex;
}
.site-mission__accent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 5rem;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.site-mission__accent::before,
.site-mission__accent::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 2.5rem;
    background-color: var(--color-1);
}
.site-mission__accent::before {
    top: 0;
    left: 50%;
    border-radius: 0 1.25rem 1.25rem 0;
}
.site-mission__accent::after {
    bottom: 0;
    right: 50%;
    border-radius: 1.25rem 0 0 1.25rem;
}

/* ==========================================================================
   Educating (Motto)
   ========================================================================== */

.site-motto {
    position: relative;
    background-color: var(--color-2);
    color: var(--color-over-2);
    background-size: cover;
    background-position: center;
    padding: 1.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 10rem;
}
@media (min-width: 48rem) {
    .site-motto { padding: 5rem 1rem; }
}

/* [Structural] solid contrast surface behind text when a background
   image is present */
.site-motto[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.site-motto__body {
    position: relative;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 1.75rem;
    margin: 0;
}
@media (min-width: 64rem) {
    .site-motto__body {
        font-size: 2.5rem;
        max-width: 67.5625rem; /* 1081px */
    }
}

/* ==========================================================================
   School News
   ========================================================================== */

.site-news {
    padding: 1.875rem 1rem;
}
@media (min-width: 48rem) {
    .site-news { padding: 3.125rem 1rem; }
}

.site-news__inner {
    max-width: var(--size-lg);
    margin-inline: auto;
}

.site-news__title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    text-align: center;
    color: var(--color-2);
    font-size: 2rem;
    margin: 0 0 1.5rem;
}

.site-news__carousel {
    position: relative;
}
.site-news__carousel .swiper { width: 100%; }
.site-news__carousel .swiper-slide { height: auto; }

.site-news__card {
    background-color: var(--color-1);
    color: var(--color-over-1);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.site-news__card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 623 / 280;
    object-fit: cover;
}
/* The school-logo fallback (no article photo/video) is a square-ish
   crest, not a landscape photo — cover crops it awkwardly against the
   wide card aspect ratio. contain keeps the full crest visible, with
   the card's own gold fill showing through the logo's transparent
   background in the letterboxed space. */
.site-news__card-thumb--fallback {
    object-fit: contain;
    background-color: var(--color-1);
    padding: 1rem;
    box-sizing: border-box;
}
.site-news__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}
.site-news__card-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
}
body .site-news__card-title a {
    color: inherit;
    text-decoration: none;
}
body .site-news__card-title a:hover,
body .site-news__card-title a:focus-visible {
    text-decoration: underline;
}
.site-news__card-summary {
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0;
}

/* [Structural] prev/next flank the CTA button below the card row,
   not beside the carousel itself. */
.site-news__cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.site-news__cta-row .swiper-button-prev,
.site-news__cta-row .swiper-button-next {
    position: static;
    margin: 0; /* Swiper's default vertical-centering margin-top fights static positioning */
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--color-2);
    border: 0;
    padding: 0;
    cursor: pointer;
    flex: none;
    --swiper-navigation-color: var(--color-1);
    --swiper-navigation-size: 1.75rem;
}

.site-news__cta-wrap {
    position: relative;
    display: inline-flex;
}

/* [Structural] decorative two-semicircle accent behind the CTA — same
   pattern as the Mission CTA accent. */
.site-news__cta-accent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 5rem;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.site-news__cta-accent::before,
.site-news__cta-accent::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 2.5rem;
    background-color: var(--color-1);
}
.site-news__cta-accent::before {
    top: 0;
    left: 50%;
    border-radius: 0 1.25rem 1.25rem 0;
}
.site-news__cta-accent::after {
    bottom: 0;
    right: 50%;
    border-radius: 1.25rem 0 0 1.25rem;
}

/* ==========================================================================
   Events
   ========================================================================== */

.site-events {
    padding: 1.875rem 1rem;
}
@media (min-width: 48rem) {
    .site-events { padding: 3.125rem 1rem; }
}

.site-events__inner {
    max-width: 67.875rem; /* 1086px, matches Our Mission's content width */
    margin-inline: auto;
}

.site-events__title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    text-align: center;
    color: var(--color-2);
    font-size: 2rem;
    margin: 0 0 1.5rem;
}

/* Mobile: single-item swiper. Tablet/desktop: tabbed container.
   Both markups render; CSS display switches which one shows.
   The swiper's own display value lives here (not a later unconditional
   rule) so the @media override below stays the last word on visibility. */
.site-events__swiper {
    display: block;
    position: relative;
}
.site-events__tabs { display: none; }
.site-events__cta-row { display: none; }
@media (min-width: 48rem) {
    .site-events__swiper { display: none; }
    .site-events__tabs { display: block; }
    .site-events__cta-row { display: flex; }
}

.site-events__swiper .swiper { width: 100%; }

/* [Structural] prev/next flank the CTA below the slide — matches
   News's cta-row pattern. */
.site-events__swiper-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.site-events__swiper-cta-row .swiper-button-prev,
.site-events__swiper-cta-row .swiper-button-next {
    position: static;
    margin: 0; /* Swiper's default vertical-centering margin-top fights static positioning */
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--color-2);
    border: 0;
    padding: 0;
    cursor: pointer;
    flex: none;
    --swiper-navigation-color: var(--color-1);
    --swiper-navigation-size: 1.75rem;
}

/* Date block + details block: two stacked gold panels on mobile,
   same shape reused by the tab button + panel at tablet/desktop. */
.site-events__card-date,
.site-events__tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-1);
    color: var(--color-over-1);
    padding: 1.25rem 2.5rem;
}
.site-events__card-date-month,
.site-events__tab-button-month {
    font-family: var(--font-body);
    font-size: 1.25rem;
}
.site-events__card-date-day,
.site-events__tab-button-day {
    font-family: var(--font-body);
    font-size: 2.25rem;
    line-height: 1;
}

.site-events__card-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-1);
    color: var(--color-over-1);
    text-align: center;
    padding: 1.875rem 1rem;
    margin-top: 0.5rem;
}
.site-events__card-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
}
body .site-events__card-title a {
    color: inherit;
    text-decoration: none;
}
body .site-events__card-title a:hover,
body .site-events__card-title a:focus-visible {
    text-decoration: underline;
}
.site-events__card-meta-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.site-events__card-meta {
    font-size: 1.125rem;
    margin: 0;
}
.site-events__card-divider {
    width: 7.5rem;
    height: 0;
    border: 0;
    border-top: 1px solid var(--color-over-1);
    margin: 0;
}

/* Tabs: row of date buttons, panel below shows that date's events */
.site-events__tabs .monui-tabs-list {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
}
.site-events__tabs .monui-tabs-list li { flex: 1 1 0; }
.site-events__tabs .monui-button {
    width: 100%;
    border: 0;
    cursor: pointer;
    background-color: var(--color-2);
    color: var(--color-over-2);
}
.site-events__tabs .monui-button[aria-selected="true"] {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

/* Grid-stack + visibility pattern: every panel occupies the same cell,
   toggling visibility instead of display keeps section height stable */
.site-events__tabs .monui-tabs-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stack";
}
.site-events__tabs .monui-panel {
    grid-area: stack;
    min-width: 0;
    background-color: var(--color-1);
    color: var(--color-over-1);
    text-align: center;
    padding: 3.75rem 1rem;
}
.site-events__tabs .monui-panel[aria-hidden="true"] {
    visibility: hidden;
}

.site-events__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.site-events__row--divided {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-over-1);
}
.site-events__row-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
}
body .site-events__row-title a {
    color: inherit;
    text-decoration: none;
}
body .site-events__row-title a:hover,
body .site-events__row-title a:focus-visible {
    text-decoration: underline;
}
.site-events__row-meta-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.site-events__row-meta {
    font-size: 1.125rem;
    margin: 0;
}

.site-events__cta-row {
    justify-content: center;
    margin-top: 1.5rem;
}

.site-events__cta-wrap {
    position: relative;
    display: inline-flex;
}

/* [Structural] decorative two-semicircle accent behind the CTA — same
   pattern as the Mission CTA accent. */
.site-events__cta-accent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 5rem;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.site-events__cta-accent::before,
.site-events__cta-accent::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 2.5rem;
    background-color: var(--color-1);
}
.site-events__cta-accent::before {
    top: 0;
    left: 50%;
    border-radius: 0 1.25rem 1.25rem 0;
}
.site-events__cta-accent::after {
    bottom: 0;
    right: 50%;
    border-radius: 1.25rem 0 0 1.25rem;
}

/* ==========================================================================
   Quicklinks
   ========================================================================== */

.site-quicklinks {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box; /* no separate __inner wrapper here, so max-width must include this element's own padding */
    max-width: var(--size-lg);
    margin-inline: auto;
    padding: 1.875rem 1rem;
}
@media (min-width: 48rem) {
    .site-quicklinks { padding: 3.125rem 1rem; }
}
.site-quicklinks .swiper {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.site-quicklinks .swiper-button-prev,
.site-quicklinks .swiper-button-next {
    position: static;
    margin: 0; /* Swiper's default vertical-centering margin-top fights static positioning */
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--color-2);
    border: 0;
    padding: 0;
    cursor: pointer;
    flex: none;
    --swiper-navigation-color: var(--color-1);
    --swiper-navigation-size: 1.75rem;
}
.site-quicklinks .swiper-button-prev { order: 1; }
.site-quicklinks .swiper-button-next { order: 3; }

.site-quicklinks__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Above the mid breakpoint, swiper-disable-at-mid converts this to a
   static layout — restore it as a 4-column grid to match the tile strip */
@media (min-width: 48rem) {
    .site-quicklinks .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .site-quicklinks .swiper-button-prev,
    .site-quicklinks .swiper-button-next {
        display: none;
    }
}

/* [Structural] flattens icon SVG fills to the current text 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; }

.site-quicklinks__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: 9.75rem;
    box-sizing: border-box;
    padding: 1.875rem;
    background-color: var(--color-2);
    text-decoration: none;
}
/* [Structural] container-scoped (0,2,0) to beat the CMS system rule's
   (0,1,1) on a, a:link, a:visited. Same pattern used for .site-cta
   elsewhere in this file. */
.site-quicklinks .site-quicklinks__tile {
    color: var(--color-over-2);
}
.site-quicklinks__tile:hover,
.site-quicklinks__tile:focus-visible {
    background-color: var(--color-1);
}
.site-quicklinks .site-quicklinks__tile:hover,
.site-quicklinks .site-quicklinks__tile:focus-visible {
    color: var(--color-over-1);
}

/* --color-1 is used here as a foreground on the tile's own --color-2
   (dark) background, not on a light page background — the isDark
   filter (which darkens a light --color-1 for legibility on white)
   doesn't apply and would defeat the color entirely on a dark tile. */
.site-quicklinks__icon {
    color: var(--color-1);
}
.site-quicklinks__tile:hover .site-quicklinks__icon,
.site-quicklinks__tile:focus-visible .site-quicklinks__icon {
    color: inherit;
}

.site-quicklinks__icon svg,
.site-quicklinks__icon img {
    width: 2.75rem;
    height: 2.75rem;
}

.site-quicklinks__label {
    font-family: var(--font-body);
    text-align: center;
}

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

.site-footer {
    display: flex;
    flex-direction: column;
}
@media (min-width: 48rem) {
    .site-footer { flex-direction: row; }
}

.site-footer__links {
    background-color: var(--color-2);
    color: var(--color-over-2);
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: none;
}
@media (min-width: 48rem) {
    .site-footer__links { width: 20rem; }
}

.site-footer__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
body .site-footer__link-list a {
    color: var(--color-over-2);
    text-decoration: underline;
}
body .site-footer__link-list a:hover,
body .site-footer__link-list a:focus-visible {
    color: var(--color-1);
}

.site-footer__social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
}
.site-footer__social .site-footer__social-icon {
    color: var(--color-over-2);
}
.site-footer__social-icon svg,
.site-footer__social-icon img {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

.site-footer__info {
    background-color: var(--color-1);
    color: var(--color-over-1);
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1 1 auto;
}

.site-footer__identity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.site-footer__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}
@media (min-width: 48rem) {
    .site-footer__identity { flex-direction: row; align-items: center; gap: 1.5rem; }
}
.site-footer__logo {
    height: 7.5rem;
    width: auto;
}
.site-footer__title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 1.75rem;
    color: var(--color-over-1);
}
.site-footer__nycps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}
.site-footer__nycps-logo {
    height: 3.5rem;
    width: auto;
}
.site-footer__district-link {
    margin-top: 0.5rem;
}
body a.site-footer__district-link {
    color: var(--color-over-1);
    text-decoration: underline;
}
body a.site-footer__district-link:hover,
body a.site-footer__district-link:focus-visible {
    color: var(--color-2);
}

.site-footer__address-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.site-footer__address {
    font-style: normal;
    color: var(--color-over-1);
    line-height: 1.5;
}
body .site-footer__address a {
    color: inherit;
    text-decoration: underline;
}

.site-footer__edlio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
body .site-footer__edlio a {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.site-footer__edlio svg {
    fill: currentColor;
}
.site-footer__edlio a:first-child svg {
    width: 140px;
    height: 20px;
}
.site-footer__edlio a:last-child svg {
    height: 1.5rem;
    width: auto;
}