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

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

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

    /* Design tokens */
    --site-font-display: "monarcha", serif;
    --site-font-body: "indivisible", sans-serif;
    --site-surface: #ffffff;
    --site-card-bg: #f1f1f1;
    --site-content-max: 64rem;   /* 1024px — every section but events */
    --site-events-max: 84.375rem; /* 1350px — the events row breaks out wider */
    --site-section-pad: 3.125rem;
    --site-block-width: 120px;
    --site-block-height: 173px;

    --inside-content-max: 64rem;
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--site-font-body);
    font-size: 1.125rem;
    line-height: 1.35;
    background-color: var(--site-surface);
}

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

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

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

/* CMS-rendered page title on inside pages. margin-block keeps the
   CMS-supplied inline margins (which center the title on wide
   viewports) intact. filter: brightness keeps a light theme color
   legible when --color-1 is itself the foreground. */
.pageTitle {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-family: var(--site-font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
    margin-block: 0 1.5rem;
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (min-width: 64rem) {
    .pageTitle { font-size: 3.4375rem; }
}

.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 — regions: a topbar, b identity, c main nav, d mobile toggle.
   Flex column with the topbar pulled up by order, never DOM-reordered.
   ========================================================================== */

.site-header {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--site-surface);
    box-shadow: 0 10px 5px rgba(0, 0, 0, 0.15);
}

.site-topbar { order: -1; }

.site-identity {
    box-sizing: border-box;
    padding: 1rem 4rem;
    text-align: center;
}

.site-identity__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.site-header .site-identity__link,
.site-footer .site-identity__link { color: #000000; }

.site-identity__logo {
    width: auto;
    height: 120px;
}

.site-identity__name {
    font-family: var(--site-font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.3;
}

@media (min-width: 64rem) {
    .site-identity {
        padding: 1rem 0.75rem;
    }

    .site-identity__link {
        flex-direction: row;
        gap: 1rem;
    }

    .site-header .site-identity__logo { height: 155px; }
}

/* Topbar — the band is desktop-only; below 64rem it leaves the flow entirely
   rather than stacking above the identity. */

.site-topbar { display: none; }

.site-topbar__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0.375rem 0.75rem;
    list-style: none;
}

.site-topbar .site-topbar__link {
    display: block;
    padding: 0.5rem;
    font-size: 1rem;
    color: var(--color-over-1);
    text-decoration: none;
}

.site-topbar .site-topbar__link:hover,
.site-topbar .site-topbar__link:focus-visible {
    text-decoration: underline;
}

@media (min-width: 64rem) {
    .site-topbar {
        display: block;
        background-color: var(--color-1);
    }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-nav { display: none; }

.site-nav-mobile { display: block; }

.menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: #000000;
    cursor: pointer;
}

.menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 2rem;
    text-transform: none;
    content: 'menu';
}

.menu-toggle[aria-expanded="true"]::after { content: 'close'; }

.site-nav-mobile .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 15;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--site-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.site-nav-mobile .nav-menu.show { display: block; }

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

.site-nav-mobile .nav-item:not(.dropdown) { grid-template-columns: 1fr; }

.site-nav-mobile .nav-item-inner,
.site-nav-mobile .sub-menu-item > a {
    display: block;
    padding: 0.75rem 1rem;
    font-family: var(--site-font-body);
    font-weight: 700;
    font-size: 1.125rem;
    color: #000000;
}

.site-nav-mobile .sub-menu-item > a {
    font-weight: 400;
    font-size: 1rem;
    padding-left: 2rem;
}

.site-nav-mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3rem; }

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

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

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

.site-nav-mobile .sub-menu .sub-menu { display: none; }
.site-nav-mobile .sub-menu .sub-menu.show { display: block; }

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

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

.site-nav-mobile .nav-item > .dropdown-toggle,
.site-nav-mobile .sub-menu-item.dropdown > .dropdown-toggle {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: #000000;
    cursor: pointer;
}

.site-nav-mobile .nav-item:hover > .nav-item-inner,
.site-nav-mobile .nav-item:focus-within > .nav-item-inner,
.site-nav-mobile .sub-menu-item > a:hover,
.site-nav-mobile .sub-menu-item > a:focus-visible {
    background-color: var(--color-2);
    color: var(--color-over-2);
}

/* The supplementary links keep their desktop band coloring inside the mobile
   menu, so the set still reads as one group rather than as extra nav items. */
.site-nav-mobile .site-supp-item > .nav-item-inner,
.site-nav-mobile .site-supp-item > .dropdown-toggle,
.site-nav-mobile .site-supp-item .sub-menu {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

.site-nav-mobile .site-supp-item .sub-menu-item > a { color: var(--color-over-1); }

.site-nav-mobile .site-supp-item .sub-menu-item > a:hover,
.site-nav-mobile .site-supp-item .sub-menu-item > a:focus-visible {
    background-color: var(--color-2);
    color: var(--color-over-2);
}

.site-nav .dropdown-toggle::after,
.site-nav-mobile .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 1.5rem;
    text-transform: none;
    content: 'expand_more';
}

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

    .site-nav {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0 0.75rem 1rem;
    }

    /* The item count comes from the CMS nav tree, so the row can be wider than
       the viewport at the desktop breakpoint. Wrapping keeps every item
       reachable instead of pushing the page into horizontal scroll. */
    .site-nav .nav-menu {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.25rem 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-nav .site-nav__search {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        color: #000000;
    }

    .site-nav .site-nav__search::after {
        font-family: 'Material Symbols Outlined';
        font-variation-settings: 'FILL' 1;
        font-size: 2.25rem;
        text-transform: none;
        content: 'search';
    }

    .site-nav .site-nav__search:hover,
    .site-nav .site-nav__search:focus-visible { color: var(--color-2); }

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

    .site-nav .nav-item-inner {
        padding: 0.5rem;
        font-family: var(--site-font-body);
        font-weight: 700;
        font-size: 1.125rem;
        color: #000000;
        white-space: nowrap;
    }

    /* Top-level only: reduces the label's content box so it doesn't extend
       into the toggle's icon area. */
    .site-nav .nav-item.dropdown > a.nav-item-inner,
    .site-nav .nav-item.dropdown > div.nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        margin-right: 2rem;
    }

    .site-nav .nav-item.dropdown > .nav-item-inner {
        position: relative;
        z-index: 1;
    }

    .site-nav .nav-item.dropdown > div.nav-item-inner { pointer-events: none; }

    .site-nav .nav-menu > .nav-item > .dropdown-toggle {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0;
        border: 0;
        background: none;
        color: #000000;
        cursor: pointer;
    }

    .site-nav .nav-item:hover > .nav-item-inner,
    .site-nav .nav-item:focus-within > .nav-item-inner { text-decoration: underline; }

    .site-nav .sub-menu-holder {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 30;
        min-width: 12.5rem;
    }

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

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

    .site-nav .sub-menu {
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: var(--site-surface);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    }

    .site-nav .sub-menu-item {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
    }

    .site-nav .sub-menu-item.dropdown { grid-template-columns: 1fr auto; }

    .site-nav .sub-menu-item > a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 2.75rem;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        color: #000000;
    }

    .site-nav .sub-menu-item > a:hover,
    .site-nav .sub-menu-item > a:focus-visible,
    .site-nav .sub-menu-item:hover > a {
        background-color: var(--color-2);
        color: var(--color-over-2);
    }

    .site-nav .sub-menu-item.dropdown > .dropdown-toggle {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        height: 2.75rem;
        padding: 0 0.5rem;
        border: 0;
        background: none;
        color: #000000;
        cursor: pointer;
    }

    /* Level-3 flyout — no holder, so the sub-menu itself is positioned. */
    .site-nav .sub-menu .sub-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 12.5rem;
    }

    .site-nav .sub-menu .sub-menu.show { display: block; }

    .site-nav .drop-left .sub-menu-item.dropdown > .sub-menu {
        right: 100%;
        left: auto;
    }
}

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

/* Headings come from CMS category titles, so a single word can be longer than
   a narrow viewport. Breaking and hyphenating keeps the heading's min-content
   inside the section instead of widening the page. */
.site-section-heading {
    margin: 0;
    font-family: var(--site-font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (min-width: 64rem) {
    .site-section-heading { font-size: 3.4375rem; }
}

/* The body prefix lifts these past the system stylesheet's
   `a, a:visited, a:link, a:hover, a:active { color: #333333 }`, which loads
   after main.css and otherwise wins the label color on every state. */
body a.site-cta {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    font-family: var(--site-font-body);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    background-color: var(--color-2);
    color: var(--color-over-2);
}

body a.site-cta:hover,
body a.site-cta:focus-visible {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

/* The spotlight CTA runs the pair the other way round. */
body a.site-cta--primary {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

body a.site-cta--primary:hover,
body a.site-cta--primary:focus-visible {
    background-color: var(--color-2);
    color: var(--color-over-2);
}

.site-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

/* Swiper positions its buttons absolutely; position: static returns them to
   flow so they can sit in the control row with the section CTA. */
.site-carousel-controls .swiper-button {
    position: static;
    margin: 0;
    width: 44px;
    height: 44px;
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: var(--color-over-2);
    border: 0;
    padding: 0;
    background-color: var(--color-2);
    cursor: pointer;
}

.site-carousel-controls .swiper-button:hover,
.site-carousel-controls .swiper-button:focus-visible {
    --swiper-navigation-color: var(--color-over-1);
    background-color: var(--color-1);
}

.swiper-container .swiper-button-prev::after,
.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;
}

.swiper-container .swiper-button-prev::after { content: 'chevron_left'; }
.swiper-container .swiper-button-next::after { content: 'chevron_right'; }

.site-homepage .swiper-container { position: relative; }
.site-homepage .swiper { width: 100%; }

/* Event date blocks and quick-link icon containers are one shape at one size. */
.site-event__date,
.site-qlink__icon {
    box-sizing: border-box;
    width: var(--site-block-width);
    height: var(--site-block-height);
    background-color: var(--color-2);
    color: var(--color-over-2);
}

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

/* ==========================================================================
   Hero — regions: a slides, b arrows overlaid on the photo.
   ========================================================================== */

.site-hero {
    position: relative;
    background-color: var(--color-1);
}

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

.site-hero__image {
    display: block;
    width: 100%;
    height: 524px;
    object-fit: cover;
}

.site-hero .swiper-button-prev,
.site-hero .swiper-button-next {
    width: 44px;
    height: 44px;
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: #ffffff;
    --swiper-navigation-bg: color-mix(in srgb, var(--color-1) 60%, transparent);
    --swiper-navigation-sides-offset: 33px;
    border: 0;
    padding: 0;
    background-color: var(--swiper-navigation-bg);
    cursor: pointer;
}

/* Prev/next are always in the 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;
}

.site-hero figcaption {
    padding: 0.75rem 1rem;
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffffff;
}

.site-hero .swiper-autoplay-toggle-button { display: none; }

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

    .navigation-position-top    { --swiper-pagination-top: 0.5rem; --swiper-pagination-bottom: auto; }
    .navigation-position-bottom { --swiper-pagination-bottom: 0.5rem; --swiper-pagination-top: auto; }
    .navigation-position-left   { --swiper-pagination-left: 0.5rem; --swiper-pagination-right: auto; }
    .navigation-position-right  { --swiper-pagination-right: 0.5rem; --swiper-pagination-left: auto; }

    /* Caption offsets — keeps pagination from overlapping caption text. */
    .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(44px + 0.5rem);
        padding-right: calc(44px + 0.5rem);
    }

    .site-hero .swiper-autoplay-toggle-button {
        display: block;
        position: absolute;
        right: 33px;
        bottom: 1rem;
        z-index: 5;
        width: 2.75rem;
        height: 2.75rem;
        border: 0;
        background-color: color-mix(in srgb, var(--color-1) 60%, transparent);
        color: #ffffff;
        cursor: pointer;
    }

    .site-hero .swiper-autoplay-toggle-button::after {
        font-family: 'Material Symbols Outlined';
        font-variation-settings: 'FILL' 1;
        font-size: 1.5rem;
        text-transform: none;
        content: 'pause';
    }

    .site-hero .swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }
}

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

/* ==========================================================================
   Events — regions: a heading, b track, c controls.
   ========================================================================== */

/* minmax(0, …) keeps the single column from being widened by a wide
   intrinsic contribution — a long heading word or a Swiper-sized slide. */
.site-events {
    display: grid;
    grid-template-areas:
        "a"
        "b";
    grid-template-columns: minmax(0, 1fr);
    gap: 3.125rem;
    box-sizing: border-box;
    padding: var(--site-section-pad) 0;
    background-color: var(--site-surface);
}

.site-events > .site-section-heading { grid-area: a; }

.site-events__carousel {
    grid-area: b;
    display: grid;
    grid-template-areas:
        "b"
        "c";
    grid-template-columns: minmax(0, 1fr);
    gap: 3.125rem;
    width: 100%;
    max-width: var(--site-events-max);
    box-sizing: border-box;
    margin-inline: auto;
    padding-inline: 0.75rem;
}

.site-events__carousel > .swiper { grid-area: b; }
.site-events__carousel > .site-carousel-controls { grid-area: c; }

.site-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    min-height: 385px;
    height: 100%;
    padding-bottom: 2rem;
    background-color: var(--site-card-bg);
    color: #000000;
}

.site-event__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--site-font-display);
    font-weight: 700;
    font-size: 2.8125rem;
    line-height: 1.15;
    text-transform: uppercase;
}

.site-event__title {
    align-self: stretch;
    margin: 2.75rem 0 0;
    padding-inline: 2rem;
    font-family: var(--site-font-body);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.3;
    text-align: center;
}

.site-event .site-event__link {
    color: #000000;
    text-decoration: none;
}

.site-event .site-event__link:hover,
.site-event .site-event__link:focus-visible { text-decoration: underline; }

.site-event__meta {
    align-self: stretch;
    margin: 0.75rem 0 0;
    padding-inline: 2rem;
    font-size: 1.125rem;
    text-align: center;
}

@media (min-width: 64rem) {
    .site-events { padding: 5rem 0; }
}

/* ==========================================================================
   Spotlight — regions: a heading, b media, c panel.
   ========================================================================== */

.site-spotlight {
    box-sizing: border-box;
    padding: var(--site-section-pad) 0.75rem;
    background-color: var(--color-1);
}

.site-spotlight > .site-section-heading {
    color: var(--color-over-1);
    margin-bottom: 3.125rem;
}

.site-spotlight__inner {
    display: grid;
    grid-template-areas:
        "b"
        "c";
    max-width: var(--site-content-max);
    margin-inline: auto;
}

.site-spotlight__image {
    grid-area: b;
    display: block;
    width: 100%;
    height: 554px;
    object-fit: cover;
}

.site-spotlight__panel {
    grid-area: c;
    box-sizing: border-box;
    padding: 3.75rem 3.125rem 3.125rem;
    background-color: var(--site-surface);
    color: #000000;
}

/* Caps the measure at the design's 750px text block; without it the copy runs
   the panel's full width and passes 100 characters per line at 1920. */
.site-spotlight__content {
    max-width: 46.875rem;
    margin-inline: auto;
}

.site-spotlight__body {
    font-size: 1.125rem;
    line-height: 1.35;
}

.site-spotlight .site-cta { margin-top: 2.5rem; }

body .site-spotlight__body a { color: #000000; }

@media (min-width: 64rem) {
    .site-spotlight { padding: 5rem 0.75rem; }
}

/* ==========================================================================
   Quick links — regions: a track, b arrows (mobile only, flanking the tile).
   ========================================================================== */

.site-qlinks {
    box-sizing: border-box;
    padding: var(--site-section-pad) 0.75rem;
    background-color: var(--site-surface);
}

.site-qlinks__carousel {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: var(--site-content-max);
    margin-inline: auto;
}

/* Once Swiper initializes, fixed side tracks hold the arrows so the tile keeps
   one width whether or not the arrows are showing. Gated on the library's own
   class so the flex fallback above still applies if init never runs. */
.site-qlinks__carousel:has(.swiper-initialized) {
    display: grid;
    grid-template-areas: ". b .";
    grid-template-columns: 1fr calc(100% - 128px) 1fr;
    align-items: center;
    gap: 0;
}

.site-qlinks__carousel:has(.swiper-initialized) > .swiper { grid-area: b; }

.site-qlinks__carousel:has(.swiper-initialized) .swiper-button { justify-self: center; }

.site-qlinks__carousel > .swiper { min-width: 0; }

.site-qlinks__carousel .swiper-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-qlinks__carousel .swiper-button {
    position: static;
    flex: none;
    margin: 0;
    width: 44px;
    height: 44px;
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: var(--color-over-2);
    border: 0;
    padding: 0;
    background-color: var(--color-2);
    cursor: pointer;
}

.site-qlinks__carousel .swiper-button:hover,
.site-qlinks__carousel .swiper-button:focus-visible {
    --swiper-navigation-color: var(--color-over-1);
    background-color: var(--color-1);
}

/* Nothing to advance in either direction — drop the arrows entirely. */
.site-qlinks__carousel:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) .swiper-button {
    display: none;
}

body a.site-qlink {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 282px;
    padding-bottom: 1.5rem;
    background-color: var(--site-card-bg);
    color: #000000;
    text-decoration: none;
}

.site-qlink__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-qlink__icon svg,
.site-qlink__icon img {
    width: 3.75rem;
    height: 3.75rem;
    fill: currentColor;
}

.site-qlink__title {
    margin-top: auto;
    padding: 1.5rem 1rem 0;
    font-family: var(--site-font-display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.3;
    text-align: center;
}

.site-qlink:hover,
.site-qlink:focus-visible {
    background-color: var(--color-2);
    color: var(--color-over-2);
}

.site-qlink:hover .site-qlink__icon,
.site-qlink:focus-visible .site-qlink__icon {
    background-color: var(--color-1);
    color: var(--color-over-1);
}

.site-qlink:hover .site-qlink__icon svg,
.site-qlink:hover .site-qlink__icon img,
.site-qlink:focus-visible .site-qlink__icon svg,
.site-qlink:focus-visible .site-qlink__icon img {
    width: 4.75rem;
    height: 4.75rem;
}

@media (min-width: 64rem) {
    .site-qlinks { padding: 5rem 0.75rem; }

    /* Four tiles across, no side tracks to reserve — back to the flex row. */
    .site-qlinks__carousel:has(.swiper-initialized) {
        display: flex;
        gap: 1.25rem;
    }
}

/* ==========================================================================
   News — regions: a heading, b track, c controls.
   ========================================================================== */

.site-news {
    display: grid;
    grid-template-areas:
        "a"
        "b";
    grid-template-columns: minmax(0, 1fr);
    gap: 3.125rem;
    box-sizing: border-box;
    padding: var(--site-section-pad) 0.75rem;
    background-color: var(--color-1);
}

.site-news > .site-section-heading {
    grid-area: a;
    color: var(--color-over-1);
}

.site-news__carousel {
    grid-area: b;
    display: grid;
    grid-template-areas:
        "b"
        "c";
    grid-template-columns: minmax(0, 1fr);
    gap: 3.125rem;
    width: 100%;
    max-width: var(--site-content-max);
    margin-inline: auto;
}

.site-news__carousel > .swiper { grid-area: b; }
.site-news__carousel > .site-carousel-controls { grid-area: c; }

/* The section sits on the primary surface, so the shared hover swap would
   land the controls on their own background. They invert the pair instead. */
.site-news .site-carousel-controls .swiper-button:hover,
.site-news .site-carousel-controls .swiper-button:focus-visible {
    --swiper-navigation-color: var(--color-1);
    background-color: var(--color-over-1);
}

body .site-news a.site-cta:hover,
body .site-news a.site-cta:focus-visible {
    background-color: var(--color-over-1);
    color: var(--color-1);
}

.site-article {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--site-surface);
    color: #000000;
}

.site-article__image {
    display: block;
    width: 100%;
    height: 284px;
    object-fit: cover;
}

.site-article__panel {
    flex: 1 0 auto;
    padding: 1.5rem 1.875rem 1.875rem;
    border-top: 8px solid var(--color-1);
}

.site-article__title {
    margin: 0 0 0.75rem;
    font-family: var(--site-font-body);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.3;
}

.site-article .site-article__link {
    color: #000000;
    text-decoration: none;
}

.site-article .site-article__link:hover,
.site-article .site-article__link:focus-visible { text-decoration: underline; }

.site-article__summary {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
}

@media (min-width: 64rem) {
    .site-news { padding: 5rem 0.75rem; }
}

/* ==========================================================================
   Footer — regions: a identity, b contact, c social, d attribution.
   ========================================================================== */

.site-footer {
    display: grid;
    grid-template-areas:
        "a"
        "b"
        "c"
        "d";
    gap: 3.125rem;
    justify-items: start;
    box-sizing: border-box;
    padding: 1.875rem 0.75rem;
    background-color: var(--site-surface);
    color: #000000;
}

.site-footer .site-identity {
    grid-area: a;
    padding: 0;
    text-align: left;
}

.site-footer .site-identity__logo { height: 120px; }

.site-footer__contact {
    grid-area: b;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.4;
}

.site-footer .site-footer__address { color: #000000; }

.site-social {
    grid-area: c;
    color: #000000;
}

.site-social__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-social .site-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: inherit;
}

/* The CMS renders these icons in their own brand colors, so the hover
   affordance is opacity — a color change would not reach the SVG fills. */
.site-social__link svg,
.site-social__link img {
    width: 1.75rem;
    height: 1.75rem;
}

.site-social .site-social__link:hover,
.site-social .site-social__link:focus-visible { opacity: 0.7; }

.site-footer__edlio {
    grid-area: d;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.875rem;
    font-size: 1.125rem;
}

body .site-footer__edlio a { color: inherit; }

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

@media (min-width: 64rem) {
    .site-footer { justify-items: center; }

    .site-footer .site-identity { text-align: center; }

    .site-footer .site-identity__link {
        flex-direction: row;
        gap: 1rem;
    }

    .site-footer__contact {
        align-items: center;
        text-align: center;
    }
}