@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins: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 — the content column the design centres everything on,
       the two corner radii it reuses, and the neutral footer band. */
    --site-content-max: 64rem;
    --site-gutter: clamp(1rem, 4vw, 2.5rem);
    --site-radius: 1.5rem;
    --site-radius-sm: 1.25rem;
    --site-pill: 999px;
    --site-footer-bg: #eaeaea;
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
}

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

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

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

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

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

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

/* ---------------------------------------------------------------- shared */

.site-homepage {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.site-section-heading {
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
}

.site-cta {
    display: inline-block;
    padding: 0.6875rem 1.75rem;
    border-radius: var(--site-pill);
    background-color: var(--color-2);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}
.site-homepage .site-cta,
.site-homepage .site-cta:link,
.site-homepage .site-cta:visited {
    color: var(--color-over-2);
}
.site-homepage .site-cta:hover,
.site-homepage .site-cta:focus-visible {
    background-color: color-mix(in srgb, var(--color-2), black 12%);
}

/* ---------------------------------------------------------------- header */

.site-header {
    position: relative;
    padding: 1.25rem var(--site-gutter) 0;
    box-sizing: border-box;
}

/* On the homepage the bar floats over the hero instead of stacking above it.
   Taking it out of flow is what lets the hero start at the top of #content_main
   while the bar keeps its own inset from the viewport edges. */
body:has(.site-homepage) .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

.site-header__bar {
    position: relative;
    box-sizing: border-box;
    max-width: 1355px;
    margin-inline: auto;
    /* Right padding is clearance for the toggle, which is positioned against
       this bar and so sits outside the identity's flow. */
    padding: 0.75rem 4.5rem 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
    border-radius: var(--site-radius);
    background-color: #fff;
}

.site-header__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    min-width: 0;
}
.site-header .site-header__identity,
.site-header .site-header__identity:link,
.site-header .site-header__identity:visited {
    color: #000;
}

.site-header__logo {
    width: 56px;
    height: auto;
    flex: none;
}

.site-header__name {
    font-size: clamp(1.125rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.5;
}

/* ----------------------------------------------------------- site-nav */

/* Mobile navigation: drawer inside header bar */
.site-nav--mobile {
    margin-left: auto;
}

.site-nav--mobile .menu-toggle {
    position: absolute;
    top: 0.875rem;
    right: 1.25rem;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #000;
    cursor: pointer;
}
.site-nav--mobile .menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.75rem;
    text-transform: none;
    content: 'menu' / '';
}
.site-nav--mobile .menu-toggle[aria-expanded="true"]::after {
    content: 'close' / '';
}

/* [Structural] accessible-menu puts .show on the mobile menu element when the
   controller opens it; visibility keys off that class. */
.site-nav--mobile .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--site-radius);
    background-color: var(--color-1);
    color: var(--color-over-1);
    max-height: 70vh;
    overflow-y: auto;
}
.site-nav--mobile .nav-menu.show { display: block; }

.site-nav--mobile .nav-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.site-nav--mobile .nav-item-inner {
    padding: 0.625rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1.5;
}
.site-nav--mobile a.nav-item-inner,
.site-nav--mobile a.nav-item-inner:link,
.site-nav--mobile a.nav-item-inner:visited {
    color: var(--color-over-1);
}

.site-nav--mobile .nav-item:hover,
.site-nav--mobile .nav-item:focus-within,
.site-nav--mobile .nav-item:hover > .dropdown-toggle,
.site-nav--mobile .nav-item > .dropdown-toggle:focus-visible {
    background-color: color-mix(in srgb, var(--color-1), black 10%);
}

.site-nav--mobile .dropdown-toggle {
    display: grid;
    place-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
.site-nav--mobile .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    text-transform: none;
    content: 'expand_more' / '';
}
.site-nav--mobile .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.site-nav--mobile .sub-menu-holder { display: none; }
.site-nav--mobile .sub-menu-holder:has(.sub-menu.show) { display: block; }
.site-nav--mobile .sub-menu .sub-menu { display: none; }
.site-nav--mobile .sub-menu .sub-menu.show { display: block; }

.site-nav--mobile .sub-menu-holder {
    grid-column: 1 / -1;
}

.site-nav--mobile .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.site-nav--mobile .sub-menu-link {
    padding: 0.5rem 1.25rem 0.5rem 2.5rem;
    font-size: 1rem;
    line-height: 1.5;
}
.site-nav--mobile a.sub-menu-link,
.site-nav--mobile a.sub-menu-link:link,
.site-nav--mobile a.sub-menu-link:visited {
    color: var(--color-over-1);
}
.site-nav--mobile .sub-menu-item:hover > .sub-menu-link,
.site-nav--mobile .sub-menu-item > .sub-menu-link:focus-visible {
    background-color: color-mix(in srgb, var(--color-1), black 10%);
}

.site-nav--mobile .sub-menu .sub-menu { grid-column: 1 / -1; }
.site-nav--mobile .sub-menu .sub-menu .sub-menu-link { padding-left: 3.75rem; }

/* Desktop navigation: permanently hidden on mobile */
.site-nav--desktop {
    display: none;
}

@media (min-width: 64rem) {
    .site-header__bar {
        padding: 0 2.5rem;
        min-height: 7.125rem;
    }

    .site-header__identity {
        padding: 0;
    }

    /* Hide mobile nav container completely on desktop */
    .site-nav--mobile {
        display: none !important;
    }

    /* Desktop nav container: permanently visible horizontal bar below header bar */
    .site-nav--desktop {
        display: block;
        max-width: 1355px;
        margin: 0.75rem auto 0;
        position: relative;
        z-index: 2;
    }

    .site-nav--desktop .nav-menu {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        gap: 0.5rem;
        margin: 0;
        padding: 0.5rem 1.25rem;
        list-style: none;
        border-radius: var(--site-radius);
        background-color: var(--color-1);
        color: var(--color-over-1);
    }

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

    .site-nav--desktop .nav-item-inner {
        padding: 0.5rem 1rem;
        font-size: 1.125rem;
        font-weight: 400;
        text-align: center;
    }

    .site-nav--desktop a.nav-item-inner,
    .site-nav--desktop a.nav-item-inner:link,
    .site-nav--desktop a.nav-item-inner:visited {
        color: var(--color-over-1);
    }

    .site-nav--desktop .nav-item:hover,
    .site-nav--desktop .nav-item:focus-within,
    .site-nav--desktop .nav-item:hover > .dropdown-toggle,
    .site-nav--desktop .nav-item > .dropdown-toggle:focus-visible {
        background-color: color-mix(in srgb, var(--color-1), black 10%);
        border-radius: var(--site-radius-sm);
    }

    /* Overlay pattern: label shares 1,1 with toggle, margin-right leaves clearance for chevron */
    .site-nav--desktop .nav-item.dropdown > a.nav-item-inner,
    .site-nav--desktop .nav-item.dropdown > div.nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 1;
        margin-right: 2.5rem;
    }
    .site-nav--desktop div.nav-item-inner { pointer-events: none; }

    .site-nav--desktop .dropdown-toggle {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        justify-content: flex-end;
        display: flex;
        align-items: center;
        padding: 0 0.5rem 0 0;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
    }
    .site-nav--desktop .dropdown-toggle::after {
        font-family: 'Material Symbols Outlined';
        font-size: 1.5rem;
        text-transform: none;
        content: 'expand_more' / '';
    }
    .site-nav--desktop .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Submenus */
    .site-nav--desktop .sub-menu-holder {
        display: none;
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        min-width: 14rem;
        padding: 0.5rem 0;
        margin: 0;
        border-radius: var(--site-radius-sm);
        background-color: var(--color-1);
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .site-nav--desktop .sub-menu-holder:has(.sub-menu.show) { display: block; }

    .site-nav--desktop .drop-left .sub-menu-holder {
        left: auto;
        right: 0;
    }

    .site-nav--desktop .sub-menu {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-nav--desktop .sub-menu-item {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
    }
    .site-nav--desktop .sub-menu-item.dropdown {
        grid-template-columns: 1fr auto;
    }
    .site-nav--desktop .sub-menu-item.dropdown > .dropdown-toggle {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        padding-right: 0.75rem;
    }

    .site-nav--desktop .sub-menu-link {
        padding: 0.5rem 1.25rem;
        font-size: 1rem;
        line-height: 1.5;
    }
    .site-nav--desktop a.sub-menu-link,
    .site-nav--desktop a.sub-menu-link:link,
    .site-nav--desktop a.sub-menu-link:visited {
        color: var(--color-over-1);
    }
    .site-nav--desktop .sub-menu-item:hover > .sub-menu-link,
    .site-nav--desktop .sub-menu-item > .sub-menu-link:focus-visible {
        background-color: color-mix(in srgb, var(--color-1), black 10%);
    }

    /* Level-3 flyout — opens to the side of the parent sub-menu-item */
    .site-nav--desktop .sub-menu .sub-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 14rem;
        padding: 0.5rem 0;
        margin: 0;
        border-radius: var(--site-radius-sm);
        background-color: var(--color-1);
        z-index: 101;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .site-nav--desktop .sub-menu .sub-menu.show { display: block; }
    .site-nav--desktop .sub-menu .sub-menu .sub-menu-link { padding: 0.5rem 1.25rem; }

    /* Drop-left: level-3 flyout opens leftward when the parent top-level item has .drop-left */
    .site-nav--desktop .drop-left .sub-menu-item.dropdown > .sub-menu {
        left: auto;
        right: 100%;
    }
}

/* ------------------------------------------------------------------ hero */

.site-hero {
    position: relative;
    width: 100%;
    height: clamp(22rem, 56.25vw, 48rem);
    overflow: hidden;
    background-color: var(--color-1);
}

.site-hero__video,
.site-hero__embed iframe,
.site-hero__embed object,
.site-hero__embed embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.site-hero__pause {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-content: center;
    padding: 0;
    border: 0;
    background-color: #000;
    color: #fff;
    cursor: pointer;
}
.site-hero__pause::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 1.5rem;
    text-transform: none;
    content: 'pause' / '';
}
.site-hero__pause[aria-pressed="true"]::after {
    content: 'play_arrow' / '';
}

/* ----------------------------------------------------------- quick links */

.site-panelrow {
    padding-inline: var(--site-gutter);
}

.site-panelrow__inner {
    max-width: var(--site-content-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.site-glance {
    padding: 1.75rem;
    border-radius: var(--site-radius);
    background-color: var(--color-1);
    color: var(--color-over-1);
}

.site-glance__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.5rem 1.5rem;
}

.site-glance__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-glance__icon {
    flex: none;
    display: grid;
    place-content: center;
    width: 2.75rem;
    height: 2.75rem;
}
.site-glance__icon svg,
.site-glance__icon img {
    width: 2.75rem;
    height: 2.75rem;
}

.site-glance__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.site-glance__value {
    font-weight: 700;
}

/* Icons arrive from the CMS in their own colors; flattening them to
   currentColor is what keeps them legible on the themed panel. */
.flat-icon-colors {
    svg {
        &.color-flatten {
            .color-fill          { fill: currentColor; }
            .transparency-change { fill: transparent; }
        }

        &:not(.color-flatten) { fill: currentColor; }
    }
}

.site-quicklinks {
    padding: 1.75rem;
    border-radius: var(--site-radius);
    background-color: var(--color-2);
}

.site-quicklinks__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.5rem 2rem;
}

.site-quicklinks__link {
    display: grid;
    place-content: center;
    min-height: 3.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--site-pill);
    background-color: var(--color-1);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}
.site-quicklinks .site-quicklinks__link,
.site-quicklinks .site-quicklinks__link:link,
.site-quicklinks .site-quicklinks__link:visited {
    color: var(--color-over-1);
}
.site-quicklinks .site-quicklinks__link:hover,
.site-quicklinks .site-quicklinks__link:focus-visible {
    background-color: color-mix(in srgb, var(--color-1), black 12%);
}

@media (min-width: 64rem) {
    .site-panelrow__inner { grid-template-columns: minmax(0, 1fr); }
    .site-quicklinks { grid-column: 1; }
}

/* ------------------------------------------------------------- spotlight */

.site-spotlight {
    padding-inline: var(--site-gutter);
}

.site-spotlight__inner {
    max-width: var(--site-content-max);
    margin-inline: auto;
}

.site-spotlight__tabs { display: none; }
.site-spotlight__accordion { display: block; }

/* [Structural] MonUI marks a closed accordion panel with aria-hidden and leaves
   the layout to CSS. A single grid row animates from 0fr to 1fr, and the inner
   wrapper clips to it — `display: none` would hide the panel just as well but
   has no intermediate states to transition through. */
.site-news__panel,
.site-spotlight__acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    /* A clipped panel still holds its links in the tab order, so the closed
       state also needs visibility — delayed by the collapse duration so the
       content stays on screen while the row animates shut. */
    visibility: hidden;
    transition: grid-template-rows 300ms ease, visibility 0s linear 300ms;
}
.site-news__panel[aria-hidden="false"],
.site-spotlight__acc-panel[aria-hidden="false"] {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 300ms ease, visibility 0s;
}
.site-news__panel-inner,
.site-spotlight__acc-inner {
    overflow: hidden;
    min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
    .site-news__panel,
    .site-news__panel[aria-hidden="false"],
    .site-spotlight__acc-panel,
    .site-spotlight__acc-panel[aria-hidden="false"] { transition: none; }
}

.site-spotlight__tablist {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}
.site-spotlight__tablist > li { display: grid; }

.site-spotlight__tab {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--site-radius-sm);
    background-color: var(--color-1);
    color: var(--color-over-1);
    font-family: inherit;
    font-size: clamp(1.125rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.site-spotlight__tab[aria-selected="true"],
.site-spotlight__tab[aria-expanded="true"] {
    border-color: #000;
    background-color: #fff;
    color: #000;
}

/* Only the accordion presentation gets a disclosure glyph; as tabs these same
   handles are a selected-one-of-four control, not an expand/collapse one. */
.site-spotlight__accordion .site-spotlight__tab {
    position: relative;
    padding-right: 4rem;
}
.site-spotlight__accordion .site-spotlight__tab::after {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Material Symbols Outlined';
    font-size: 2rem;
    font-weight: 400;
    text-transform: none;
    content: 'add' / '';
}
.site-spotlight__accordion .site-spotlight__tab[aria-expanded="true"]::after {
    content: 'remove' / '';
}

.site-spotlight__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.site-spotlight__text {
    padding: 1.75rem;
    border-radius: var(--site-radius);
    background-color: var(--color-1);
    color: var(--color-over-1);
}

.site-spotlight__title {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.5;
    font-weight: 700;
}

.site-spotlight__body {
    font-size: 1.125rem;
    line-height: 1.5;
}
.site-spotlight__text a,
.site-spotlight__text a:link,
.site-spotlight__text a:visited {
    color: var(--color-over-1);
}

.site-spotlight__cta { margin-top: 1.5rem; }

.site-spotlight__media {
    padding: 1.75rem;
    border-radius: var(--site-radius);
    background-color: var(--color-2);
}

.site-spotlight__image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 32rem;
    object-fit: cover;
    border-radius: var(--site-radius-sm);
}

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

    .site-spotlight__tab { height: 100%; margin-bottom: 0; text-align: center; }

    /* [Structural] Panels share one grid cell so the section height is the
       tallest panel and switching tabs doesn't reflow the page. visibility
       (not display) keeps the inactive panel measurable for its contents. */
    .site-spotlight .monui-tabs-panels {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "stack";
    }
    .site-spotlight .monui-tabs-panels > .monui-panel {
        grid-area: stack;
        min-width: 0;
    }
    .site-spotlight .monui-tabs-panels > .monui-panel[aria-hidden="true"] {
        visibility: hidden;
    }

    .site-spotlight__panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------------- events */

.site-events {
    --site-events-pill-h: 4rem;
}

.site-events__track {
    position: relative;
}
/* The line runs the full viewport width behind the date pills, so it draws on
   the track rather than inside .swiper, which clips its own overflow. Offsetting
   from the pill's own height keeps it centred on the pill row wherever that row
   lands. */
.site-events__track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--site-events-pill-h) / 2);
    height: 0.75rem;
    transform: translateY(-50%);
    background-color: var(--color-2);
}

.site-events__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
}

.site-events__date {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    place-content: center;
    margin: 0;
    min-width: 7.5rem;
    /* Fixed, not min-height: the line's offset is derived from this token, so a
       pill that grows with its content would drift off the line's centre. */
    height: var(--site-events-pill-h);
    padding: 0 1.5rem;
    border-radius: var(--site-radius);
    background-color: var(--color-2);
    color: var(--color-over-2);
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.site-events__inner {
    box-sizing: border-box;
    max-width: var(--site-content-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
}

.site-events .swiper-container { position: relative; }
.site-events .swiper { width: 100%; }
/* Swiper sizes slides to 100% of the track; auto lets them take their content
   height so the flex row stretches every card to the tallest one. */
.site-events .swiper-slide { height: auto; }

.site-events__card {
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    min-height: 15rem;
    padding: 1.75rem;
    border-radius: var(--site-radius);
    background-color: var(--color-1);
    color: var(--color-over-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}

.site-events__title {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
}
.site-events__card .site-events__link,
.site-events__card .site-events__link:link,
.site-events__card .site-events__link:visited {
    color: var(--color-over-1);
    text-decoration: none;
}
.site-events__card .site-events__link:hover,
.site-events__card .site-events__link:focus-visible {
    text-decoration: underline;
}

.site-events__meta {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
}

.site-events__controls {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.site-events .swiper-button {
    position: static;
    margin: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-2);
    --swiper-navigation-color: var(--color-over-2);
    --swiper-navigation-size: 1.5rem;
    cursor: pointer;
}
.site-events .swiper-container .swiper-button-prev::after,
.site-events .swiper-container .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: var(--swiper-navigation-size);
    text-transform: none;
}
.site-events .swiper-container .swiper-button-prev::after { content: 'chevron_left' / ''; }
.site-events .swiper-container .swiper-button-next::after { content: 'chevron_right' / ''; }

/* ------------------------------------------------------------------ news */

.site-news__inner {
    box-sizing: border-box;
    max-width: var(--site-content-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
}

.site-news__row {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1.25rem;
    padding: 1.25rem 4rem 1.25rem 1.75rem;
    position: relative;
    border: 0;
    border-radius: var(--site-radius);
    background-color: var(--color-2);
    color: var(--color-over-2);
    font-size: clamp(1.125rem, 2.2vw, 1.6875rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.site-news__row::after {
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Material Symbols Outlined';
    font-size: 2rem;
    font-weight: 400;
    text-transform: none;
    content: 'add' / '';
}
.site-news__row[aria-expanded="true"] {
    background-color: var(--color-1);
    color: var(--color-over-1);
    margin-bottom: 0;
}
.site-news__row[aria-expanded="true"]::after {
    content: 'remove' / '';
}

.site-news__article {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--site-radius);
    background-color: var(--color-1);
    color: var(--color-over-1);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.site-news__image {
    display: block;
    width: 100%;
    height: 12.5rem;
    object-fit: cover;
    border-radius: var(--site-radius-sm);
}

.site-news__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.125rem, 2vw, 1.5625rem);
    line-height: 1.5;
    font-weight: 700;
}
.site-news__panel .site-news__link,
.site-news__panel .site-news__link:link,
.site-news__panel .site-news__link:visited {
    color: var(--color-over-1);
    text-decoration: none;
}
.site-news__panel .site-news__link:hover,
.site-news__panel .site-news__link:focus-visible {
    text-decoration: underline;
}

.site-news__summary {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
}

.site-news__controls {
    margin-top: 2rem;
    text-align: center;
}

@media (min-width: 48rem) {
    .site-news__article {
        grid-template-columns: 17.5rem minmax(0, 1fr);
        align-items: center;
        gap: 1.75rem;
    }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
    padding: clamp(2rem, 5vw, 3rem) var(--site-gutter);
    background-color: var(--site-footer-bg);
    color: #000;
}

.site-footer__inner {
    max-width: var(--site-content-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
}

.site-footer__identity {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-footer__logo {
    width: 128px;
    height: auto;
    flex: none;
}

.site-footer__name {
    font-size: clamp(1.5rem, 3vw, 2.1875rem);
    font-weight: 700;
    line-height: 1.5;
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.5;
}
.site-footer .site-footer__contact-link,
.site-footer .site-footer__contact-link:link,
.site-footer .site-footer__contact-link:visited {
    color: inherit;
    text-decoration: underline;
}

.site-footer__links-heading {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
}

.site-footer__links-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.site-footer .site-footer__link,
.site-footer .site-footer__link:link,
.site-footer .site-footer__link:visited {
    color: inherit;
    font-size: 1.125rem;
    line-height: 1.5;
    text-decoration: underline;
}

.site-footer__social-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.site-footer__social-link {
    display: grid;
    place-content: center;
    width: 2.5rem;
    height: 2.5rem;
}
.site-footer__social-list svg,
.site-footer__social-list img {
    width: 2.5rem;
    height: 2.5rem;
}

.site-footer__edlio {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.site-footer .site-footer__edlio a,
.site-footer .site-footer__edlio a:link,
.site-footer .site-footer__edlio a:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: inherit;
    text-decoration: none;
}
.site-footer__edlio svg { fill: currentColor; }
.site-footer__edlio a:first-child svg { height: 1.5rem; width: auto; }
.site-footer__edlio a:last-child svg { width: 140px; height: 20px; }

@media (min-width: 64rem) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 3rem;
        align-items: start;
    }
    .site-footer__identity { grid-column: 1; grid-row: 1; }
    .site-footer__contact  { grid-column: 1; grid-row: 2; }
    .site-footer__edlio    { grid-column: 1; grid-row: 3; }
    .site-footer__links    { grid-column: 2; grid-row: 1 / span 2; }
    .site-footer__social   { grid-column: 2; grid-row: 3; }
}