@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=PT+Serif: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);

    /* Static design-specific token — not CMS-theme-driven (the CMS only
       supplies --color-1/--color-2). Section-title band fill. */
    --color-3:      #D6D4D5;
    --color-over-3: #000000;

    /* 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: 'PT Serif', serif;
}

.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;
}

body:has(.site-homepage) #content_main {
    max-width: none;
    padding: 0;
    background-color: transparent;
}

/* Bottom-corner radius/border echo .site-hero__arch's own treatment —
   the same arch motif closes out the page that opens with it. */
.site-homepage {
    background-color: var(--color-1);
    color: var(--color-over-1);
    border-radius: 0 0 12.5rem 12.5rem;
    border-bottom: 6px solid var(--color-2);
}
/* Vertical rhythm between top-level homepage sections (hero, spotlight,
   infographic+events, news, quicklinks+map, motto) — each is a direct
   child of .site-homepage at the same nesting depth. Total visual
   space between each pair of sections is 4.5rem INCLUSIVE of both the
   preceding section's own bottom padding and the following section's
   own top padding — margin-top is 4.5rem minus BOTH, floored at 0, not
   an additional 4.5rem stacked on top of padding that already
   provides some of the gap. .site-hero is excluded (sits flush at the
   top; a hidden <h1> precedes it in source order at the same nesting
   depth, which a plain "* + *" would otherwise also catch). Per pair:
   - hero(pad-bottom 0) -> spotlight(pad-top 72px): 72-0-72=0
   - spotlight(pad-bottom 72px) -> infographic-events(pad-top 0): 72-72-0=0
   - infographic-events(pad-bottom 0) -> news(pad-top 24px): 72-0-24=48
   - news(pad-bottom 24px) -> quicklinks-map(pad-top 24px): 72-24-24=24
   - quicklinks-map(pad-bottom 24px) -> motto(pad-top 40px): 72-24-40=8 */
.site-infographic-events {
    margin-top: 0;
}
.site-news {
    margin-top: 3rem;
}
.site-quicklinks-map {
    margin-top: 1.5rem;
}
.site-motto-social {
    margin-top: 0.5rem;
}

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

/* position: relative provides the containing block for .site-skip-link. */
.site-header {
    position: relative;
    z-index: 50;
    min-height: 4.75rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
}

/* Last in the DOM (keyboard order: identity, nav, then supplementary
   elements) but pulled visually to the top via order. Requires
   .site-header to be a flex column for order to take effect. */
.site-header__topbar {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem; /* contains the toggle with symmetrical clearance */
    padding-right: 3.25rem; /* clearance for the menu toggle */
}

/* Mobile: search is a plain link to /apps/search. Tablet+: an expanded
   field. */
body a.site-search--link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-3);
    border-radius: 6px;
    background-color: #fff;
    text-decoration: none;
}
.site-search--link::after {
    font-family: 'Material Symbols Outlined';
    content: 'search';
    font-size: 1.5rem;
    color: #000;
}
.site-search--field {
    display: none;
}

@media (min-width: 48rem) {
    body a.site-search--link {
        display: none;
    }
    .site-search--field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 14.25rem;
        background-color: #fff;
        border: 1px solid var(--color-3);
        border-radius: 6px;
        padding: 0.375rem 1rem;
    }
    .site-search--field input {
        border: 0;
        font: inherit;
        font-size: 1.125rem;
        flex: 1;
        min-width: 0;
    }
    .site-search--field input::placeholder {
        color: rgba(0, 0, 0, 0.7);
        opacity: 1;
    }
    .site-search--field input:focus-visible {
        outline: 2px solid var(--color-1);
        outline-offset: 2px;
    }
    .site-search--field button {
        border: 0;
        background: transparent;
        cursor: pointer;
        display: flex;
        flex: 0 0 auto;
    }
    .site-search--field button::after {
        font-family: 'Material Symbols Outlined';
        content: 'search';
        font-size: 1.5rem;
        color: #000;
    }
}

/* Two nested boxes: an outer stroked shell with its own padding, then
   a gap, then a separately-filled inner pill — not a border flush
   against the fill. */
body a.site-header__cta {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 6px;
    border: 1px solid var(--color-2);
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}
.site-header__cta-fill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 6px;
    background-color: var(--color-2);
    color: var(--color-over-2);
    transition: background-color 0.2s ease, color 0.2s ease;
}
body a.site-header__cta:hover .site-header__cta-fill,
body a.site-header__cta:focus-visible .site-header__cta-fill {
    background-color: #fff;
    color: #000;
}

body a.site-header__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-1);
    margin-block: 1rem;
}
.site-header__logo {
    width: auto;
    height: 92px;
}
.site-header__name {
    font-size: 1.5rem;
    text-align: center;
}
@media (min-width: 48rem) {
    .site-header__name {
        font-size: 1.875rem;
    }
}

/* Desktop: single row — search / identity / CTA+toggle, vertically
   centered. .site-header__topbar switches to display: contents,
   unwrapping its children (search, CTA) into .site-header's row
   directly, with an explicit order on each piece (0: search, 1:
   identity, 2: CTA) so identity lands centered between search and the
   CTA rather than competing for width via space-between. The topbar's
   order: -1 lift and its toggle-clearance padding are column-flex-only
   tricks and don't apply here.
   .site-nav is position: fixed at every breakpoint, so it no longer
   follows the CTA in this row's flow — the CTA (now the row's last
   real flex item) would otherwise flow flush to the header's own
   right edge and sit directly under the fixed toggle. padding-right
   reserves that clearance: .site-nav's own right inset (1.5rem) + its
   width (2.75rem) + an extra 0.5rem gap. */
@media (min-width: 64rem) {
    .site-header {
        flex-direction: row;
        align-items: center;
        padding: 0.75rem 1.5rem;
        padding-right: 4.75rem;
    }
    .site-header__topbar {
        display: contents;
    }
    .site-search--link,
    .site-search--field {
        order: 0;
    }
    body a.site-header__identity {
        order: 1;
        flex: 1 1 auto;
        justify-content: center;
        margin-block: 0;
        margin-inline: 1.5rem;
    }
    body a.site-header__cta {
        order: 2;
    }
}

/* ===== Navigation — separate mobile (vertical dropdown) and desktop
   (horizontal bar) nav instances. #sitenav_mobile is visible mobile/
   tablet; #sitenav_main is visible desktop — only one is ever in the
   DOM's visible/interactive set at a given width. ===== */

/* .site-nav is position: fixed and sized to the toggle — it is the
   containing block .menu-toggle and the revealed .nav-menu resolve
   against, not .site-header. */
.site-nav {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    z-index: 51;
}
@media (min-width: 64rem) {
    .site-nav {
        top: 3.5rem;
        right: 1.5rem;
    }
}

.menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 6px;
    background-color: var(--color-2);
    color: var(--color-over-2);
    cursor: pointer;
}
.menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    content: 'menu';
    font-size: 1.5rem;
}
.menu-toggle[aria-expanded="true"]::after {
    content: 'close';
}

/* display: none removes the inactive nav variant from the tab order. */
#sitenav_main {
    display: none;
}
@media (min-width: 64rem) {
    #sitenav_mobile {
        display: none;
    }
    #sitenav_main {
        display: block;
    }
}

/* display stays flex always (both open and closed) so opacity/
   transform can transition — display:none can't animate. Closed state
   is fully inert (visibility:hidden takes it out of layout hit-testing
   and the accessibility tree, same as display:none did) and fades
   back in on .show. The visibility transition is delayed on the way
   in (0s) but held until the fade finishes on the way out (0.2s), the
   standard fade-through-visibility pattern. */
.site-nav .nav-menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--color-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-nav .nav-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* This panel is itself the scrollable list surface — no descendant
   needs to escape it, so max-height/overflow-y here is safe. */
#sitenav_mobile .nav-menu {
    position: fixed;
    top: 4.75rem;
    left: 1rem;
    right: 1rem;
    max-height: calc(100dvh - 4.75rem - 1rem);
    overflow-y: auto;
    flex-direction: column;
    gap: 0;
    border-radius: 0.5rem;
}

/* No overflow/max-height here — this row's dropdown panels
   (.sub-menu-holder) are position: absolute and must be able to
   extend past this row's own box; overflow: auto here would clip
   them. */
#sitenav_main .nav-menu {
    position: fixed;
    top: 6.75rem;
    left: 1.5rem;
    right: 1.5rem;
    border-radius: 0.5rem;
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 1.5rem;
}

.site-nav .nav-item {
    display: grid;
    grid-template-columns: 1fr auto;
    transition: background-color 0.2s ease;
}
#sitenav_mobile .nav-item {
    border-bottom: 1px solid color-mix(in srgb, var(--color-over-2), transparent 80%);
}

/* Native link underline is the only resting-state signal distinguishing
   link items from CONTAINER (non-link) items at the same visual
   position — not suppressed here. */
.site-nav .nav-item > .nav-item-inner {
    padding: 0.75rem 1rem;
    color: var(--color-over-2);
}
#sitenav_mobile .nav-item > .nav-item-inner {
    grid-column: 1;
}
.site-nav .nav-item:hover,
.site-nav .nav-item:focus-within {
    background-color: color-mix(in srgb, var(--color-2), black 10%);
}

.site-nav .nav-item > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--color-over-2);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#sitenav_mobile .nav-item > .dropdown-toggle {
    grid-column: 2;
}
.site-nav .nav-item > .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    content: 'expand_more';
}
.site-nav .nav-item > .dropdown-toggle:hover,
.site-nav .nav-item > .dropdown-toggle:focus-visible {
    background-color: color-mix(in srgb, var(--color-2), black 20%);
}

/* Desktop level-1: the toggle spans the full cell so the whole item is
   one interactive surface, with the label sharing the same cell via
   explicit grid placement and sitting above the toggle in stacking
   order. */
#sitenav_main .nav-item {
    position: relative;
}
#sitenav_main .nav-item.dropdown > .nav-item-inner,
#sitenav_main .nav-item.dropdown > div.nav-item-inner {
    grid-column: 1;
    grid-row: 1;
    margin-right: 2.75rem;
    position: relative;
    z-index: 1;
}
#sitenav_main .nav-item.dropdown > div.nav-item-inner {
    pointer-events: none;
}
#sitenav_main .nav-item.dropdown > .dropdown-toggle {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    justify-content: flex-end;
}
#sitenav_main .nav-item:not(.dropdown) a.nav-item-inner {
    padding: 0.75rem 1rem;
}

.site-nav .sub-menu-holder { display: none; grid-column: 1 / -1; }
.site-nav .sub-menu-holder:has(.sub-menu.show) { display: block; }

/* Desktop: level-2 dropdown panel opens below its parent top-level
   item instead of expanding in-flow. Its containing block is
   .nav-item — position: absolute here resolves against that ancestor
   regardless of .site-nav's own position: fixed further up the tree.
   Overrides the shared .site-nav .sub-menu-holder display:none/:has()
   toggle with an always-rendered fade — safe here because the panel
   is position: absolute and reserves no layout space either way,
   unlike mobile's in-flow holder where that would leave permanent
   gaps for every collapsed section. */
#sitenav_main .sub-menu-holder {
    grid-column: unset;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    max-height: calc(100dvh - 6.75rem - 2.75rem - 1.5rem);
    overflow-y: auto;
    background-color: var(--color-2);
    border-radius: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
#sitenav_main .sub-menu-holder:has(.sub-menu.show) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
#sitenav_main .drop-left > .sub-menu-holder {
    left: auto;
    right: 0;
}

.site-nav .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav .sub-menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    transition: background-color 0.2s ease;
}
.site-nav .sub-menu-item > a {
    grid-column: 1;
    padding: 0.625rem 1rem 0.625rem 2rem;
    color: var(--color-over-2);
}
.site-nav .sub-menu-item:hover,
.site-nav .sub-menu-item:focus-within {
    background-color: color-mix(in srgb, var(--color-2), black 10%);
}
.site-nav .sub-menu-item > .dropdown-toggle {
    grid-column: 2;
    width: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--color-over-2);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.site-nav .sub-menu-item > .dropdown-toggle:hover,
.site-nav .sub-menu-item > .dropdown-toggle:focus-visible {
    background-color: color-mix(in srgb, var(--color-2), black 20%);
}

/* Mobile level-3: no holder wrapper, spans both grid columns, expands
   in document flow with deeper indent. */
#sitenav_mobile .sub-menu .sub-menu {
    grid-column: 1 / -1;
    display: none;
}
#sitenav_mobile .sub-menu .sub-menu.show {
    display: block;
}
#sitenav_mobile .sub-menu .sub-menu-item > a {
    padding-left: 3rem;
}

/* Desktop level-3: flyout to the side instead of expanding the
   already-open level-2 panel's height. Opens leftward under
   .drop-left parents. Same always-rendered fade as the level-2 holder
   above — position: absolute, so no layout space reserved while
   hidden. */
#sitenav_main .sub-menu .sub-menu {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 14rem;
    max-height: calc(100dvh - 6.75rem - 2.75rem - 1.5rem);
    overflow-y: auto;
    background-color: var(--color-2);
    border-radius: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
#sitenav_main .sub-menu .sub-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
#sitenav_main .drop-left .sub-menu-item.dropdown > .sub-menu {
    left: auto;
    right: 100%;
}

/* ===== Hero shuffle ===== */

.site-hero {
    position: relative;
}
.site-hero .swiper {
    width: 100%;
}
.site-hero figure {
    margin: 0;
}

/* Gradient overlay — top half of the hero, white fading down to
   transparent, sitting above the slide images but below the arch/
   autoplay button so it reads as a scrim under the decorative chrome.
   White (not --color-1) so it blends with the solid-white header
   directly above it instead of jumping straight to red. */
.site-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, #fff, transparent);
    pointer-events: none;
    z-index: 1;
}

/* Decorative arch bridging the hero image into the content below —
   a fixed structural motif, not content. Overlaps the bottom of the
   slide; the rounded top corners read as an arch against the image.
   Sits above the gradient overlay (z-index: 1) and the slide images. */
.site-hero__arch {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4.125rem;
    background-color: var(--color-1);
    border-top: 6px solid var(--color-2);
    border-radius: 12.5rem 12.5rem 0 0;
    pointer-events: none;
    z-index: 2;
}
.site-hero .swiper-slide img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.site-hero figcaption {
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 1rem;
}
@media (min-width: 48rem) {
    .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; }
}

/* Bottom-positioned bullets clear .site-hero__arch's full height so
   they don't collide with the curve's silhouette. */
@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: calc(4.125rem + 6px + 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); }
}

/* Overlays hero pagination on the slide instead of Swiper's default
   below-slide position. z-index: 3 matches the autoplay button, above
   the gradient (1) and arch (2). */
.site-hero .swiper-pagination {
    position: absolute;
    z-index: 3;
}

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

.site-hero:not(:has(.navigation-type-1)) .swiper-button-prev,
.site-hero:not(:has(.navigation-type-1)) .swiper-button-next {
    display: none;
}

/* Swiper's own CSS never reads --swiper-navigation-bg (it's a
   codebase convention, not a library feature) — without this rule the
   button falls back to the browser's default buttonface grey, not the
   translucent black the variable implies. border: 0 resets the native
   <button> UA default (2px outset), which otherwise reads as a stray
   beveled stroke/dropshadow ring around the fill. */
.site-hero .swiper-button-prev,
.site-hero .swiper-button-next {
    border: 0;
    background: var(--swiper-navigation-bg, transparent);
    --swiper-navigation-color: #fff;
    --swiper-navigation-bg: rgba(0, 0, 0, 0.5);
}

/* bottom clears .site-hero__arch's full height (4.125rem + 6px border)
   plus a gap, so the button never overlaps the curve's silhouette
   regardless of how the border-radius sweeps at this x-position.
   z-index: 3 keeps it above both the gradient (1) and the arch (2). */
.site-hero .swiper-autoplay-toggle-button {
    display: none;
    position: absolute;
    bottom: calc(4.125rem + 6px + 1rem);
    left: 1rem;
    z-index: 3;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
}
@media (min-width: 48rem) {
    .site-hero .swiper-autoplay-toggle-button { display: block; }
}

/* Below 48rem the autoplay play/pause toggle is hidden outright (no
   room for it next to the arch/pagination in a narrow hero), which
   otherwise leaves a shuffle with dot/numbered/no navigation with no
   interactive control at all on mobile. Force the prev/next arrows on
   there instead, regardless of the CMS-configured navigation type, so
   there's always some way to step the slides. */
@media (max-width: 47.9375rem) {
    /* Swiper's default button is a non-square 27x44 box sized off
       --swiper-navigation-size — fine for a bare chevron, but it reads
       as an odd sliver once it has a background fill. Squared off and
       explicitly sized/centered to match the same 2.75rem control size
       as the autoplay toggle it's standing in for, with the icon at
       the same font-size the news/events/infographic arrows use. */
    .site-hero:not(:has(.navigation-type-1)) .swiper-button-prev,
    .site-hero:not(:has(.navigation-type-1)) .swiper-button-next {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        --swiper-navigation-size: 1.375rem;
    }
    .site-hero .swiper-button-prev,
    .site-hero .swiper-button-next {
        --swiper-navigation-bg: rgba(0, 0, 0, 0.9);
    }
}

/* Below desktop, the arch would need to overlap the slide image to
   read as a bridge — but slides are single images with no responsive
   crop, so their rendered height shrinks with viewport width while
   the arch's own height stays fixed, eating a growing share of the
   image (and any text baked into it near the bottom) as width drops.
   Below 64rem the arch instead sits in normal flow after the image
   rather than overlapping it, so it never crops slide content. The
   pagination/autoplay-button bottom offsets need no override here:
   both are already expressed as "arch height + gap" measured from
   .site-hero's own bottom edge, which lands 1rem above the arch's top
   whether the arch overlaps the image (desktop) or follows it in flow
   (here) — the arch's own height is the same fixed value either way.
   Desktop (64rem+) keeps the original overlap — the taller rendered
   image there leaves the arch well clear of content. */
@media (max-width: 63.9375rem) {
    /* .site-homepage — the section's own red background — wraps the
       hero too, so the arch's rounded-off top corners now expose that
       same red showing through instead of the slide image that used
       to sit behind them. A white .site-hero background sits behind
       every descendant unconditionally (a stacking-context root's own
       background always paints before/under its children, including
       negative-z-index ones — that ordering ruled out layering the
       white in via an ::before on the arch itself, which painted over
       the arch's red instead of behind it), so the corners the radius
       cuts away reveal white instead. */
    .site-hero {
        background-color: #fff;
    }
    .site-hero__arch {
        position: static;
    }
}
.site-hero .swiper-autoplay-toggle-button::after {
    font-family: 'Material Symbols Outlined';
    content: 'pause';
}
.site-hero .swiper-autoplay-toggle-button.paused::after {
    content: 'play_arrow';
}

/* ===== Shared section-title band — reused by About Us and Latest News ===== */

.site-section-title {
    background-color: var(--color-3);
    color: var(--color-over-3);
    text-align: center;
    font-weight: 400;
    font-size: 2.5rem;
    padding: 0.75rem 1rem;
    margin: 0;
}

/* ===== About Us spotlight ===== */

.site-spotlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 39rem;
    margin-inline: auto;
    padding: 4.5rem 0.75rem;
}
/* Full section width — holds the narrow centered image plus the
   full-width white bar (::after) behind its bottom half. */
.site-spotlight__pic-wrap {
    position: relative;
    width: 100%;
}
/* Arch radius matches .site-hero__arch. */
.site-spotlight__pic {
    position: relative;
    z-index: 1;
    display: block;
    width: 17.5rem;
    height: 13.125rem;
    margin-inline: auto;
    object-fit: cover;
    border-radius: 12.5rem 12.5rem 0 0;
}
.site-spotlight__pic-wrap::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
}
/* Resets to black — .site-homepage's --color-over-1 text would
   otherwise inherit down and disappear against this white card. */
.site-spotlight__body {
    width: 100%;
    padding-bottom: 1.5rem;
    background-color: #fff;
    color: #000;
    border-radius: 0 0 1.25rem 1.25rem;
}
.site-spotlight .site-section-title {
    margin: 0 0 1rem;
}
.site-spotlight__text {
    font-size: 1.125rem;
    line-height: 1.5;
    padding: 0 2.5rem;
}
/* body-prefixed to beat the system stylesheet's a:link/a:visited rule
   (0,1,1). */
body a.site-spotlight__cta {
    display: inline-block;
    margin: 1rem 2.5rem 0;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-weight: 700;
}

/* ===== At a Glance infographic + Upcoming Events ===== */

/* Stacked below 64rem; side-by-side at 64rem+, same pattern as
   .site-quicklinks-map. Owns the horizontal gutter for both children
   so the pairing reads as one consistent inset instead of two
   independent ones — see the padding-block split below. */
.site-infographic-events {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 59.6875rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}
@media (min-width: 64rem) {
    .site-infographic-events {
        flex-direction: row;
        align-items: flex-start;
        gap: 8.3125rem;
    }
    .site-infographic-events .site-infographic {
        flex: 1.28;
    }
    .site-infographic-events .site-events {
        flex: 1;
    }
}

/* Horizontal inset owned by .site-infographic-events (the shared
   wrapper) — this stays block-only so vertical swiper spacing is
   unaffected. */
.site-infographic.swiper-container {
    position: relative;
    padding-block: 1.5rem;
}
.site-infographic .swiper {
    width: 100%;
}
.site-infographic .swiper-wrapper {
    padding-top: 2.9375rem;
}
.site-infographic.swiper-disabled .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.875rem;
    row-gap: 3.75rem;
}
.site-infographic.swiper-disabled .swiper-slide {
    width: auto;
}
/* Outer stroked shell — same outline-with-inset structure as
   .site-header__cta. */
.site-infographic__fact {
    position: relative;
    padding: 0.375rem;
    border: 1px solid var(--color-2);
    border-radius: 0.375rem;
}
.site-infographic__content {
    padding-top: 1.3125rem;
    background-color: var(--color-3);
    border-radius: 0.5rem;
    text-align: center;
}
.site-infographic__icon.flat-icon-colors {
    position: absolute;
    top: -2.9375rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    width: 4.25rem;
    height: 4.25rem;
    padding: 0.75rem;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--color-2);
    color: var(--color-over-2);
}
.site-infographic__icon svg,
.site-infographic__icon img {
    width: 100%;
    height: 100%;
}
/* Flattens item.icon() SVGs to currentColor so they coordinate with the
   --color-2 badge background. */
.flat-icon-colors svg {
    &.color-flatten {
        .color-fill          { fill: currentColor; }
        .transparency-change { fill: transparent; }
    }
    &:not(.color-flatten) { fill: currentColor; }
}
.site-infographic__value {
    color: var(--color-over-3);
    font-size: 1.75rem;
    font-weight: 400;
    padding: 1rem 0;
}
.site-infographic__label {
    background-color: #fff;
    color: #000;
    font-size: 1.125rem;
    font-weight: 400;
    padding: 0.8125rem 1.125rem;
    border-radius: 0.5rem;
}

/* ===== Shared carousel controls — reused by Infographic, Events, and News ===== */

.site-infographic.swiper-container,
.site-events.swiper-container,
.site-news.swiper-container {
    position: relative;
}
/* .site-events sits inside .site-infographic-events, which now owns
   the horizontal inset — block-only here to match .site-infographic.
   .site-news is not part of that wrapper and keeps its own full inset. */
.site-events.swiper-container {
    padding-block: 1.5rem;
}
.site-news.swiper-container {
    padding: 1.5rem;
}
.site-infographic .swiper,
.site-events .swiper {
    width: 100%;
}
/* Constrained and centered independently of the title bar above,
   which stays full-bleed. */
.site-news .swiper {
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
}
/* Cancels .site-news.swiper-container's own inline padding so the
   title reaches the true section edges — the section's padding still
   applies to the swiper/controls below it. */
.site-news .site-section-title {
    margin: 0 -1.5rem 1.5rem;
}
.swiper-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.875rem;
    margin-top: 1rem;
}
/* --swiper-navigation-size also drives the chevron's font-size —
   width/height set explicitly so the button doesn't shrink with it. */
.site-infographic .swiper-button,
.site-events .swiper-button,
.site-news .swiper-button {
    position: static;
    margin: 0;
    width: 2.75rem;
    height: 2.75rem;
    --swiper-navigation-size: 1.375rem;
    border: 0;
    background-color: transparent;
    --swiper-navigation-color: var(--color-2);
}
/* Hides both nav buttons when the carousel has nothing to scroll to in
   either direction. Targets the arrows only, not the whole
   .swiper-controls row — the "More Events"/"More News" CTA that
   shares the row stays visible either way. */
.swiper-container:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) .swiper-button {
    display: none;
}
/* swiper-disable-at-* destroys the Swiper instance and adds
   .swiper-disabled instead of leaving stale swiper-button-disabled
   classes behind, so the :has() rule above never fires once
   disabled — hide the arrows explicitly here too. */
.swiper-container.swiper-disabled .swiper-button {
    display: none;
}
/* Infographic's controls row holds only arrows (no CTA) — collapse the
   row entirely once disabled instead of leaving an empty flex
   container with its own margin-top. */
.site-infographic.swiper-disabled .swiper-controls {
    display: none;
}
/* Two nested boxes, same outline-with-inset pattern as
   .site-header__cta. */
body a.site-events__more,
body a.site-news__more {
    display: inline-flex;
    padding: 0.375rem;
    border: 1px solid var(--color-2);
    border-radius: 0.375rem;
    text-decoration: none;
}
.site-events__more-fill,
.site-news__more-fill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    background-color: var(--color-2);
    color: var(--color-over-2);
    transition: background-color 0.2s ease, color 0.2s ease;
}
body a.site-events__more:hover .site-events__more-fill,
body a.site-events__more:focus-visible .site-events__more-fill,
body a.site-news__more:hover .site-news__more-fill,
body a.site-news__more:focus-visible .site-news__more-fill {
    background-color: #fff;
    color: #000;
}

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

.site-events.swiper-disabled .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.site-events.swiper-disabled .swiper-slide {
    width: auto;
}

.site-events__title {
    color: var(--color-over-1);
    text-align: center;
    font-weight: 400;
    font-size: 2.5rem;
    margin: 0 0 1.5rem;
}
/* Date badge sits in normal flow above the content card; content's
   negative margin-top pulls it up to deliberately overlap the date's
   bottom portion. */
.site-events__card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.site-events__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 6rem;
    background-color: var(--color-2);
    color: var(--color-over-2);
    border-radius: 3.75rem 3.75rem 0 0;
    padding-top: 0.5rem;
}
.site-events__month,
.site-events__day {
    font-size: 1.625rem;
    font-weight: 400;
}
/* Top padding clears the date badge's overlap above so the title
   text doesn't collide with it. */
.site-events__content {
    width: 100%;
    margin-top: -2.25rem;
    background-color: color-mix(in srgb, var(--color-over-1), transparent 90%);
    color: var(--color-over-1);
    border-radius: 0.5rem;
    padding: 3.125rem 0.75rem 0.75rem;
    text-align: center;
    box-sizing: border-box;
}
.site-events__content h3 {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    font-weight: 400;
}
.site-events__content h3 a {
    color: inherit;
    text-decoration: none;
}
.site-events__content h3 a:hover,
.site-events__content h3 a:focus-visible {
    text-decoration: underline;
}
.site-events__info {
    background-color: var(--color-3);
    color: var(--color-over-3);
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    line-height: 1.5;
    border-radius: 0.5rem;
}

/* ===== Latest News =====
   No aspect-ratio on the image — height follows its own intrinsic
   size. border-radius: 999px reads as a full pill (left corners
   rounded, right corners square) regardless of the image's actual
   rendered height. */
.site-news__card {
    display: flex;
    flex-direction: column;
}
.site-news__img {
    max-width: 100%;
    display: block;
    align-self: center;
    border-radius: 999px 0 0 999px;
}
/* No left/right padding of its own — the title chip spans the box's
   full width, and .site-news__summary carries its own left inset
   instead. */
.site-news__text {
    background-color: color-mix(in srgb, var(--color-over-1), transparent 90%);
    color: var(--color-over-1);
    padding-block: 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
}
.site-news__text h3 {
    margin: 0 0 0.625rem;
    background-color: var(--color-2);
    color: var(--color-over-2);
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    padding: 0.75rem;
    border-radius: 0.5rem;
}
.site-news__text h3 a {
    color: inherit;
    text-decoration: none;
}
.site-news__text h3 a:hover,
.site-news__text h3 a:focus-visible {
    text-decoration: underline;
}
.site-news__summary {
    margin: 0;
    padding-left: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.5;
}

@media (min-width: 64rem) {
    .site-news__card {
        position: relative;
        flex-direction: row;
        align-items: flex-start;
    }
    .site-news__card::before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 1.5rem;
        left: 6.25rem;
        right: 0;
        bottom: 0;
        background-color: color-mix(in srgb, var(--color-over-1), transparent 90%);
        border-radius: 0 0.5rem 0.5rem 0;
    }
    .site-news__img {
        position: relative;
        z-index: 1;
    }
    .site-news__img {
        max-width: 12.5rem;
        flex: 0 0 auto;
        align-self: flex-start;
        margin-top: 1.5rem;
    }
    /* position+z-index needed to paint above the absolutely-positioned
       ::before — an unpositioned flex item sits below any positioned
       sibling regardless of z-index value. */
    .site-news__text {
        position: relative;
        z-index: 1;
        flex: 1 1 auto;
        background-color: transparent;
    }
    .site-news__text h3 {
        border-radius: 0 0.5rem 0.5rem 0;
    }
}

/* ===== Quick Links + Find Us Here (map) =====
   Constrained to 64rem, matching .site-news .swiper. */

/* Stacked gap (mobile/tablet) matches the page's own 4.5rem section
   rhythm — the same visual spacing budget applies whether two things
   are separate top-level sections or, as here, stacked within one. */
.site-quicklinks-map {
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
    box-sizing: border-box;
    max-width: 64rem;
    margin-inline: auto;
    padding: 1.5rem;
}

/* Fixed-width items at every breakpoint — no grid, no breakpoint
   column-count override. flex-wrap does the rest: items wrap
   naturally as space allows, and a leftover odd item centers itself
   on its own row, which a column-count grid can't produce without
   special-casing the last row. */
.site-quicklinks ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-quicklinks__item {
    width: 17rem;
}
/* Outer stroked shell — same outline-with-inset pattern as
   .site-infographic__fact/.site-header__cta. */
body a.site-quicklinks__link {
    position: relative;
    display: block;
    padding: 0.375rem;
    border: 1px solid var(--color-2);
    border-radius: 0.375rem;
    text-decoration: none;
}
/* min-height keeps single-line items from shrinking below the
   two-line case's size — otherwise the overlapping thumbnail (sized
   for the taller box) crowds into the row below on short items. */
.site-quicklinks__text {
    display: flex;
    align-items: center;
    min-height: 4.5rem;
    box-sizing: border-box;
    padding: 0.75rem 7rem 0.75rem 0.75rem;
    background-color: var(--color-3);
    color: var(--color-over-3);
    font-size: 1.25rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
body a.site-quicklinks__link:hover .site-quicklinks__text,
body a.site-quicklinks__link:focus-visible .site-quicklinks__text {
    background-color: var(--color-2);
    color: var(--color-over-2);
}
/* Inset from the outer border's own right edge — the rounded outline
   extends visibly past the image on that side. */
.site-quicklinks__pic {
    position: absolute;
    top: 50%;
    right: 0.6875rem;
    transform: translateY(-50%);
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.site-map__embed {
    position: relative;
    aspect-ratio: 4 / 3;
}
.site-map__embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

@media (min-width: 64rem) {
    /* Both columns keep fixed widths; the gap absorbs what's left of
       the wrapper's own border-box budget once its 1.5rem side padding
       is accounted for: 1024 - 48 (padding) - 568 - 400 = 8. */
    .site-quicklinks-map {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .site-quicklinks {
        flex: 0 0 35.5rem;
    }
    .site-map {
        flex: 0 0 25rem;
    }
}

/* ===== Motto + social band ===== */

.site-motto-social {
    color: var(--color-over-1);
    text-align: center;
    /* Side padding wider than the page's usual 1.5rem so the social
       icons row keeps clearance from .site-homepage's own
       border-radius sweep at narrow mobile widths — this is the last
       section before that curve starts. */
    padding: 2.5rem 2.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.site-motto-social__tagline {
    font-size: 2rem;
    margin: 0;
}
@media (min-width: 64rem) {
    .site-motto-social__tagline {
        font-size: 2.5rem;
    }
}
.site-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #fff;
}
.site-social-icons__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
}
.site-social-icons__icon svg,
.site-social-icons__icon img {
    width: 100%;
    height: 100%;
}

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

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 3rem 1.5rem;
    background-color: #fff;
    text-align: left;
}
@media (min-width: 64rem) {
    .site-footer {
        align-items: center;
        text-align: center;
    }
}

.site-footer__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
@media (min-width: 64rem) {
    .site-footer__identity {
        align-items: center;
    }
}
.site-footer__logo {
    width: auto;
    height: 92px;
}
.site-footer__name {
    font-size: 1.375rem;
    font-weight: 400;
}
@media (min-width: 64rem) {
    .site-footer__name {
        font-size: 1.5rem;
    }
}

.site-footer__contact {
    font-style: normal;
    line-height: 1.6;
}
/* "Fax:" isn't a link and stays plain. */
body .site-footer__contact a {
    color: #000;
    text-decoration: underline;
}

.site-footer__links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 64rem) {
    .site-footer__links ul {
        justify-content: center;
    }
}
body .site-footer__links a {
    color: #000;
    text-decoration: underline;
}

.site-footer__edlio {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
/* Plain color: inherit on the child anchor wouldn't out-rank a system
   rule that targets the anchor directly — the body prefix raises this
   rule's own specificity so inherit actually wins. */
body .site-footer__edlio a {
    display: inline-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 {
    width: auto;
    height: 1.5rem;
}

/* CMS Pages app: client asked for the full-width photo block used
   across interior pages to render shorter — stays full width, just
   less tall. Scoped to this specific block+image combo, not
   .full-width-block generally, since other pages may use that class
   for a deliberate full-bleed photo. */
.page-block-photos.full-width-block .the-photo-ete {
    width: 100%;
    max-height: 25rem;
    object-fit: cover;
    display: block;
}