@import url("theme_settings/theme_settings.css");
/* Typography imports.
   Body — Albert Sans (Google Fonts). Heading — Gelica (Adobe Fonts kit). */
@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap");
@import url("https://use.typekit.net/xke2whc.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);

    /* Design-specific tokens (not CMS theme). --color-3 is the Figma cream
       band with black text; revisit → white if it clashes with the brand. */
    --color-3:      #FDF3E7;
    --color-over-3: #000000;
    --surface:      #FFFFFF;
    --ink:          #1a1a1a;
    --muted:        #4a4a4a;

    --font-heading: 'gelica', 'Albert Sans', sans-serif;
    --font-body:    'Albert Sans', system-ui, sans-serif;

    /* 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: var(--font-body);
    color: var(--ink);
}

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

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

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

/* CMS-rendered page title on inside pages. margin-block keeps the
   CMS-supplied inline margins (which center the title on wide
   viewports) intact. filter: brightness keeps a light theme color
   legible when --color-1 is itself the foreground. */
.pageTitle {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.25;
    /* Design calls for the page title always left-aligned — override the
       CMS-supplied inline margins that center it on wide viewports. */
    text-align: left;
    margin: 0 0 1.5rem;
}

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

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

/* ============================================================
   HOMEPAGE SHELL
   ============================================================ */
.site-homepage {
    background-color: var(--color-3);
    color: var(--color-over-3);
}

.site-section { padding: 3rem 0; }
.site-section__inner {
    max-width: 85.375rem; /* 1366px */
    margin-inline: auto;
    padding-inline: clamp(1rem, 5%, 3rem);
    box-sizing: border-box;
}

/* Cloud-backed band holding every section after the hero. Node 1:7 cloud
   strip (recolored to brand navy) sits at the top; content clears it via
   the top padding. */
.site-clouds {
    background-image: url("/pics/cloud-top.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 20vw;
    padding-top: 12vw;
}
.site-section__header { margin-bottom: 1.5rem; }

/* Section band variants */
.site-section--primary { background-color: var(--color-1); color: var(--color-over-1); }
.site-section--surface { background-color: var(--surface); color: var(--ink); }

.site-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.05;
    margin: 0;
    text-align: center;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
/* On the navy band the heading flips to the contrast color. */
.site-section--primary .site-title { color: var(--color-over-1); filter: none; }

/* ============================================================
   CTA — pill button (navy fill / white label; hover → orange)
   ============================================================ */
.site-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    background-color: var(--color-1);
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* body + tag prefix beats the system `a:link{color:#333}` rule (0,1,1). */
body a.site-cta { color: var(--color-over-1); }
body a.site-cta:hover,
body a.site-cta:focus-visible { background-color: var(--color-2); color: var(--color-over-2); }

/* ============================================================
   SWIPER ARROWS — square buttons, Material chevrons
   ============================================================ */
.swiper-container { position: relative; }
/* .site-arrow appearance is container-agnostic so the same square chevron
   button works inside a .swiper-container and when relocated (e.g. the news
   footer, where the arrows are grouped with the CTA). */
.swiper-button.site-arrow {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    --swiper-navigation-size: 28px;
}
.swiper-button.site-arrow::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 28px;
    text-transform: none;
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
}
.swiper-button-prev.site-arrow::after { content: 'chevron_left'; }
.swiper-button-next.site-arrow::after { content: 'chevron_right'; }
/* Hide both arrows when neither can advance. */
.swiper-container:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) .swiper-button.site-arrow,
.site-news__footer:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) .swiper-button.site-arrow {
    display: none;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-1);
    color: var(--color-over-1);
}
.site-header__bar {
    display: flex;
    /* <1024: stack, supp cluster above the identity (row layout at >=64rem) */
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem clamp(1rem, 5%, 3rem);
    /* reserve space for the absolutely-positioned mobile hamburger toggle */
    padding-right: 4rem;
    min-height: 44px;
}
.site-header__identity {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-over-1);
    max-width: calc(100vw - 5rem);
}
.site-header__logo { flex: none; width: auto; height: 56px; max-width: 110px; object-fit: contain; }
.site-header__name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-over-1);
}

/* Supplementary cluster (Donate + Translate) */
.site-header__supp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* <1024 (column-reverse): push the cluster to the left edge. */
    margin-right: auto;
}
.site-header__donate { background-color: var(--surface); padding: 0.5rem 1.25rem; }
body a.site-header__donate { color: var(--color-1); }
body a.site-header__donate:hover,
body a.site-header__donate:focus-visible { background-color: var(--color-2); color: var(--color-over-2); }

/* Google Translate — container chrome only (widget internals unstyled). */
#google_translate_element { display: none; background-color: var(--surface); padding: 0.25rem 0.5rem; border-radius: 4px; }
@media (min-width: 48rem) { #google_translate_element { display: block; } }

/* ============================================================
   NAVIGATION — mobile hamburger (base) → desktop horizontal (64rem)
   ============================================================ */
.site-nav a { text-decoration: none; }

/* Mobile nav (base) */
.site-nav-main { display: none; }
.site-nav-mobile { display: block; }
.site-nav-mobile .menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    background: none;
    color: var(--color-over-1);
    cursor: pointer;
}
.site-nav-mobile .menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-size: 2rem;
    content: 'menu';
}
.site-nav-mobile .menu-toggle[aria-expanded="true"]::after { content: 'close'; }

.site-nav-mobile .nav-menu { display: none; list-style: none; margin: 0; padding: 0; }
.site-nav-mobile .nav-menu.show {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: var(--color-1);
    padding: 0.5rem 0;
}
.site-nav-mobile .nav-item { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.site-nav-mobile .nav-item-inner,
.site-nav-mobile .sub-menu-item > a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--color-over-1);
    font-family: var(--font-heading);
    font-weight: 500;
}
.site-nav-mobile a.nav-item-inner { text-decoration: underline; }
.site-nav-mobile .nav-item-inner:hover,
.site-nav-mobile .nav-item-inner:focus-visible,
.site-nav-mobile .sub-menu-item > a:hover,
.site-nav-mobile .sub-menu-item > a:focus-visible,
.site-nav-mobile .nav-item:hover > .dropdown-toggle,
.site-nav-mobile .nav-item:focus-within > .dropdown-toggle,
.site-nav-mobile .sub-menu-item:hover > .dropdown-toggle,
.site-nav-mobile .sub-menu-item:focus-within > .dropdown-toggle { color: var(--color-2); }

.site-nav-mobile .nav-item.dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.site-nav-mobile .sub-menu-item.dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.site-nav-mobile .dropdown-toggle {
    grid-column: 2;
    width: 44px; height: 44px;
    border: 0; padding: 0; background: none;
    color: var(--color-over-1); cursor: pointer;
}
.site-nav-mobile .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    content: 'expand_more';
}
.site-nav-mobile .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.site-nav-mobile .sub-menu-holder { grid-column: 1 / -1; display: none; }
.site-nav-mobile .sub-menu-holder:has(.sub-menu.show) { display: block; }
.site-nav-mobile .sub-menu { list-style: none; margin: 0; padding: 0; background-color: color-mix(in srgb, var(--color-1), black 12%); }
.site-nav-mobile .sub-menu-item > a { padding-left: 2.5rem; text-decoration: none; }
.site-nav-mobile .sub-menu .sub-menu { grid-column: 1 / -1; display: none; }
.site-nav-mobile .sub-menu .sub-menu.show { display: block; }
.site-nav-mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3.5rem; }

@media (min-width: 64rem) {
    .site-header__bar { padding-right: clamp(1rem, 5%, 3rem); flex-direction: row; }
    .site-header__supp { margin-left: auto; margin-right: 0; }
    .site-nav-mobile { display: none; }
    .site-nav-main { display: block; order: 10; width: 100%; }

    .site-nav-main .nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.25rem; justify-content: space-between; }
    .site-nav-main .nav-item { position: relative; }
    .site-nav-main .nav-item-inner {
        display: block;
        padding: 0.5rem 0.75rem;
        color: var(--color-over-1);
        font-family: var(--font-heading);
        font-weight: 500;
        font-size: 1rem;
    }
    .site-nav-main a.nav-item-inner { text-decoration: underline; }
    .site-nav-main .nav-item:not(.dropdown) a.nav-item-inner { padding-block: 0.5rem; }

    /* Level-1 overlay pattern: toggle spans the cell, label above it */
    .site-nav-main .nav-item.dropdown { display: grid; grid-template-columns: 1fr; }
    .site-nav-main .nav-item.dropdown > a.nav-item-inner,
    .site-nav-main .nav-item.dropdown > div.nav-item-inner { grid-column: 1; grid-row: 1; margin-right: 2rem; position: relative; z-index: 1; }
    .site-nav-main div.nav-item-inner { pointer-events: none; }
    .site-nav-main .nav-menu > .nav-item > .dropdown-toggle {
        grid-column: 1; grid-row: 1;
        width: 100%;
        justify-content: flex-end;
    }
    .site-nav-main .dropdown-toggle {
        display: inline-flex; align-items: center;
        border: 0; padding: 0 0.25rem; background: none;
        color: var(--color-over-1); cursor: pointer;
    }
    .site-nav-main .dropdown-toggle::after {
        font-family: 'Material Symbols Outlined';
        font-size: 1.25rem;
        content: 'expand_more';
    }
    /* hover/focus target the li's direct children — label AND toggle chevron
       both flip to color-2 (matches the mobile nav treatment). */
    .site-nav-main .nav-item:hover > .nav-item-inner,
    .site-nav-main .nav-item:focus-within > .nav-item-inner,
    .site-nav-main .nav-item:hover > .dropdown-toggle,
    .site-nav-main .nav-item:focus-within > .dropdown-toggle { color: var(--color-2); }

    /* Level-2 dropdown panel */
    .site-nav-main .sub-menu-holder {
        display: none;
        position: absolute;
        top: 100%; left: 0;
        min-width: 14rem;
        background-color: var(--color-1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        z-index: 40;
    }
    .site-nav-main .drop-left .sub-menu-holder { left: auto; right: 0; }
    .site-nav-main .sub-menu-holder:has(.sub-menu.show) { display: block; }
    .site-nav-main .sub-menu { list-style: none; margin: 0; padding: 0.5rem 0; }
    .site-nav-main .sub-menu-item { position: relative; }
    /* Single-column overlay (same as level-1): the toggle spans the whole cell so
       hovering the label OR the chevron opens the flyout; the chevron still sits at
       the right edge. */
    .site-nav-main .sub-menu-item.dropdown { display: grid; grid-template-columns: 1fr; }
    .site-nav-main .sub-menu-item > a {
        display: block; padding: 0.5rem 1rem;
        color: var(--color-over-1); text-decoration: none;
    }
    /* hovering/focusing either the label or the toggle flips both to color-2
       (same both-children treatment as the level-1 nav items). Cover both label
       kinds — link (`a`) and CONTAINER (`.nav-item-inner` div) — so a container
       dropdown's label also flips when only its toggle is hovered. */
    .site-nav-main .sub-menu-item:hover > a,
    .site-nav-main .sub-menu-item:hover > .nav-item-inner,
    .site-nav-main .sub-menu-item:focus-within > a,
    .site-nav-main .sub-menu-item:focus-within > .nav-item-inner,
    .site-nav-main .sub-menu-item:hover > .dropdown-toggle,
    .site-nav-main .sub-menu-item:focus-within > .dropdown-toggle { color: var(--color-2); }
    /* Label shares the cell above the toggle, cleared of the chevron via margin-right;
       toggle overlays the full width with the chevron pinned right. */
    .site-nav-main .sub-menu-item.dropdown > a,
    .site-nav-main .sub-menu-item.dropdown > .nav-item-inner { grid-column: 1; grid-row: 1; margin-right: 2rem; position: relative; z-index: 1; }
    .site-nav-main .sub-menu-item.dropdown > .dropdown-toggle { grid-column: 1; grid-row: 1; width: 100%; justify-content: flex-end; }

    /* Level-3 flyout */
    .site-nav-main .sub-menu .sub-menu { display: none; position: absolute; top: 0; left: 100%; min-width: 14rem; background-color: var(--color-1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
    .site-nav-main .sub-menu .sub-menu.show { display: block; }
    .site-nav-main .drop-left .sub-menu-item.dropdown > .sub-menu { left: auto; right: 100%; }
}

/* ============================================================
   HERO — full-bleed photo shuffle
   ============================================================ */
.site-hero { position: relative; }
.site-hero .swiper { width: 100%; }
.site-hero__figure { margin: 0; position: relative; }
.site-hero__figure img { display: block; width: 100%; height: auto; object-fit: cover; }
.site-hero figcaption {
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 1rem clamp(1rem, 5%, 3rem);
}
@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; }
}
.site-hero .swiper-button-prev,
.site-hero .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-bg: rgba(0, 0, 0, 0.5);
}
.site-hero:not(:has(.navigation-type-1)) .swiper-button-prev,
.site-hero:not(:has(.navigation-type-1)) .swiper-button-next { display: none; }
.site-hero .swiper-autoplay-toggle-button {
    display: none;
    position: absolute;
    bottom: 1rem; left: 1rem;
    z-index: 5;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff; cursor: pointer;
}
.site-hero .swiper-autoplay-toggle-button::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    content: 'pause';
}
.site-hero .swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }
@media (min-width: 48rem) { .site-hero .swiper-autoplay-toggle-button { display: block; } }

/* [Structural] Shuffle navigation-position + caption offsets — desktop only. */
@media (min-width: 48rem) {
    .site-hero .navigation-position-top    { --swiper-pagination-top: 0.5rem; --swiper-pagination-bottom: auto; }
    .site-hero .navigation-position-bottom { --swiper-pagination-bottom: 0.5rem; --swiper-pagination-top: auto; }
    .site-hero .navigation-position-left   { --swiper-pagination-left: 0.5rem; --swiper-pagination-right: auto; }
    .site-hero .navigation-position-right  { --swiper-pagination-right: 0.5rem; --swiper-pagination-left: auto; }
    .site-hero .navigation-position-top    figcaption.caption-position-top    { padding-top:    calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-bottom figcaption.caption-position-bottom { padding-bottom: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-left   figcaption { padding-left:  calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-right  figcaption { padding-right: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-type-1 figcaption { padding-left: calc(var(--swiper-navigation-size, 44px) + 0.5rem); padding-right: calc(var(--swiper-navigation-size, 44px) + 0.5rem); }
}
/* [Structural] Mobile: force horizontal pagination when config sets the vertical class. */
@media (max-width: 47.9375rem) {
    .site-hero .swiper-pagination-vertical { flex-direction: row; width: auto; }
}
/* Numbered pagination bullets (shuffle navigation type 3): center + contrast against the bullet. */
.site-hero {
    --swiper-pagination-color: var(--color-2);
    --swiper-pagination-bullet-text-color: var(--color-over-2);
}
.site-hero .numbered-pagination .swiper-pagination-bullet {
    place-content: center;
    color: var(--swiper-pagination-bullet-text-color, #000);
}

/* ============================================================
   SOCIAL — unflattened icon links on the navy band
   ============================================================ */
.site-social { text-align: center; }
.site-social__title { text-align: center; }
.site-social__links { margin-top: 1.5rem; }
.site-social__links ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}
.site-social__link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background-color: var(--surface);
}
.site-social__icon { display: inline-flex; }
.site-social__icon svg,
.site-social__icon img { width: 2rem; height: 2rem; }
/* Fallback when a link has no CMS icon: text pill instead of an empty circle. */
.site-social__link--label {
    width: auto;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-family: var(--font-heading);
    font-weight: 500;
}
body a.site-social__link--label { color: var(--color-1); }
.site-social__link:hover,
.site-social__link:focus-visible { background-color: var(--color-2); }

/* ============================================================
   QUICK LINKS — pill button row on the cream band
   ============================================================ */
.site-quicklinks__title { margin-bottom: 1.5rem; }
.site-quicklinks__link { min-width: 12rem; }
/* <1024: swiper slider (1 slide, 2 at 768, 16px gap — set in the init config).
   >=1024: swiper is disabled → static centered pill row. */
.site-quicklinks__carousel { padding-inline: 3.5rem; } /* gutter for the side arrows */
.site-quicklinks__carousel .swiper { width: 100%; }
.site-quicklinks__carousel .swiper-slide { display: flex; justify-content: center; }
/* translateY compensates for swiper's top:50% having no offset — centers the
   arrow on the short pill slider instead of hanging half its height below. */
.site-quicklinks__carousel .swiper-button.site-arrow { top: 50%; transform: translateY(-50%); }
@media (min-width: 64rem) {
    .site-quicklinks__carousel { padding-inline: 0; }
    .site-quicklinks__carousel .swiper { overflow: visible; }
    .site-quicklinks__carousel .swiper-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
    /* Swiper's base .swiper-slide{width:100%} survives destroy — reset it so the
       disabled slider lays out as a natural-width pill row, not a full-width stack. */
    .site-quicklinks__carousel .swiper-slide { width: auto; }
    .site-quicklinks__carousel .swiper-button { display: none; }
}

/* ============================================================
   EVENTS — date-badge cards in a carousel (cream band)
   ============================================================ */
.site-events__carousel { padding-inline: 3.5rem; } /* gutter so the side arrows don't overlay the cards */
.site-events__carousel .swiper { width: 100%; }
.site-eventcard {
    display: grid;
    grid-template-areas: 'date' 'wave' 'summary';
    grid-template-rows: auto auto 1fr;
    height: 100%;
    background-color: var(--color-1);
    color: var(--color-over-1);
    border-radius: 8px;
    overflow: hidden;
}
.site-eventcard__date {
    grid-area: date;
    display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 0.5rem;
    padding: 1rem;
    background-color: var(--color-2);
    color: var(--color-over-2);
    /* Figma date style — uniform across month + day (no size/weight split). */
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.185;
}
/* Wave divider — the asset is used as a mask; --color-2 shows through it. */
.site-eventcard__wave {
    grid-area: wave;
    position: relative;
    /* match the asset's proportions so the wave expands with the card width
       instead of being squashed into a fixed height */
    aspect-ratio: 1508 / 219;
    margin-top: -1px; /* seal the seam with the orange date block above */
}
.site-eventcard__wave::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-2);
    -webkit-mask: url("/pics/date-wave.svg") no-repeat top center / 100% auto;
    mask: url("/pics/date-wave.svg") no-repeat top center / 100% auto;
}
.site-eventcard__summary { grid-area: summary; padding: 1rem; }
.site-eventcard__title { font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; margin: 0 0 0.5rem; }
body .site-eventcard__title a { color: var(--color-over-1); text-decoration: none; }
.site-eventcard__title a:hover,
.site-eventcard__title a:focus-visible { text-decoration: underline; }
.site-eventcard__time,
.site-eventcard__location { margin: 0.25rem 0 0; font-size: 0.9375rem; }
.site-events__footer { margin-top: 1.5rem; text-align: center; }
.site-events__carousel .swiper-button.site-arrow { top: 50%; }

/* ============================================================
   NEWS — card carousel on the white band
   ============================================================ */
/* Mobile swiper is clipped (overflow:hidden); pad by the card's shadow offset
   (-6px x / 6px y) so the hard navy shadow isn't cut off / read as an offset. */
.site-news__carousel .swiper { width: 100%; box-sizing: border-box; padding-left: 6px; padding-bottom: 6px; }
/* At >=1024 the swiper is disabled (swiper-disable-at-large) → static 3-col grid. */
@media (min-width: 64rem) {
    .site-news__carousel .swiper { overflow: visible; padding: 0; }
    /* align-items:start so cards size to their own content instead of stretching to the tallest. */
    .site-news__carousel .swiper-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
    .site-news__carousel .swiper-button { display: none; }
    .site-news__footer .swiper-button { display: none; }
}
.site-newscard {
    display: flex; flex-direction: column; height: 100%;
    box-sizing: border-box;
    background-color: var(--surface);
    border: 2px solid var(--color-1);
    border-radius: 24px;
    box-shadow: -6px 6px 0 var(--color-1); /* hard navy offset, bottom-left (Figma 1:161) */
    padding: 1.25rem;
}
.site-newscard__thumb { display: block; }
.site-newscard__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.site-newscard__body { padding: 1rem 0 0; }
.site-newscard__title { font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; margin: 0 0 0.5rem; }
body .site-newscard__title a {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    text-decoration: none;
}
.site-newscard__title a:hover,
.site-newscard__title a:focus-visible { text-decoration: underline; }
.site-newscard__summary { margin: 0; color: var(--ink); font-size: 1rem; }
/* Footer groups the (relocated) swiper arrows with the CTA in one centered row;
   arrows reset from swiper's absolute positioning back to static flow. */
.site-news__footer {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.site-news__footer .swiper-button.site-arrow { position: static; top: auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background-color: var(--color-1);
    color: var(--color-over-1);
}
.site-footer__inner {
    max-width: 64rem;
    margin-inline: auto;
    padding: 3rem clamp(1rem, 5%, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}
.site-footer__identity { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; }
.site-footer__logo { flex: none; width: auto; height: 64px; max-width: 172px; object-fit: contain; }
.site-footer__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; }
.site-footer__contact { font-style: normal; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.site-footer__contact a { color: var(--color-over-1); }
body .site-footer__contact a { color: var(--color-over-1); }
.site-footer__social ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; }
.site-footer__social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background-color: var(--surface);
}
.site-footer__social-icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
.site-footer__social-icon svg,
.site-footer__social-icon img { width: 2rem; height: 2rem; }
.site-footer__social-link--label { width: auto; border-radius: 999px; padding: 0.5rem 1rem; font-family: var(--font-heading); font-weight: 500; }
body a.site-footer__social-link--label { color: var(--color-1); }
.site-footer__bottom {
    padding: 1.25rem clamp(1rem, 5%, 3rem);
    display: flex; flex-direction: column; gap: 1rem;
    align-items: center; text-align: center;
    background-color: var(--color-2);
    color: var(--color-over-2);
}
.site-footer__attribution { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.site-footer__attribution a { display: inline-flex; align-items: center; color: var(--color-over-2); }
body .site-footer__attribution a { color: var(--color-over-2); }
.site-footer__attribution svg { fill: currentColor; }
.site-footer__attribution a:first-child svg { width: 140px; height: 20px; }
.site-footer__attribution a:last-child svg { height: 1.5rem; width: auto; }