@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;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);

    /* Design tokens */
    --font-body: "EB Garamond", Georgia, serif;
    --section-pad-x: clamp(1rem, 5vw, 4rem);
    --section-pad-y: clamp(2.5rem, 5vw, 3.5rem);
    --max-width: 75rem;

    /* 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(--color-over-2);
}

.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 — section scaffold, buttons, carousel controls
   ============================================================ */
.section-inner { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--section-pad-x); box-sizing: border-box; }
.site-homepage > section { box-sizing: border-box; padding-block: var(--section-pad-y); }

.section-head { text-align: center; margin-bottom: 1.875rem; }
.section-title {
    font-family: var(--font-body); font-weight: 700; font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.1; letter-spacing: -0.03em; margin: 0;
    color: var(--color-1); filter: brightness(var(--color-1-isDark));
}
.section-head--on-dark .section-title { color: var(--color-over-1); filter: none; }
.section-cta { text-align: center; margin-top: 2rem; }

/* Rectangular CTA buttons — default filled, hover inverts. */
.btn {
    display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 1.125rem;
    padding: 0.75rem 1.75rem; text-decoration: none; cursor: pointer;
    border: 2px solid var(--color-1); transition: background-color 0.18s, color 0.18s;
}
.btn--filled, body a.btn--filled:link, body a.btn--filled:visited { background: var(--color-1); color: var(--color-over-1); }
body a.btn--filled:hover, body a.btn--filled:focus-visible { background: var(--color-2); color: var(--color-1); }
.btn--outline-on-dark, body a.btn--outline-on-dark:link, body a.btn--outline-on-dark:visited { background: var(--color-2); color: var(--color-1); border-color: var(--color-2); }
body a.btn--outline-on-dark:hover, body a.btn--outline-on-dark:focus-visible { background: transparent; color: var(--color-over-1); }

.carousel-arrow {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer; padding: 0.5rem;
}
.carousel-arrow::after { font-family: 'Material Symbols Outlined'; font-size: 2rem; color: var(--color-1); filter: brightness(var(--color-1-isDark)); text-transform: none; line-height: 1; }
.carousel-arrow[class*="-prev"]::after { content: 'chevron_left'; }
.carousel-arrow[class*="-next"]::after { content: 'chevron_right'; }
.carousel-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* CMS icon color flattening (social + link icons). */
.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; }

/* ============================================================
   HEADER — top bar (logo left | social + translate right) over a
   nav bar; both var(--color-1). Figma: Top 114px + Navigation 44px.
   ============================================================ */
.site-header { position: relative; display: flex; flex-direction: column; background: var(--color-1); }
.site-header__topbar { order: -1; display: flex; align-items: center; padding: 0.75rem var(--section-pad-x); padding-right: 3.5rem; }
.site-header__identity { display: flex; align-items: center; justify-content: center; padding: 0.5rem var(--section-pad-x) 1rem; }
.site-header__logo img { display: block; height: auto; width: auto; max-height: 90px; max-width: 100%; }
.site-header__social { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-header__social a { display: inline-flex; width: 1.75rem; height: 1.75rem; }
.site-header__social svg, .site-header__social img { width: 100%; height: 100%; }
#google_translate_element { display: none; background: #fff; padding: 0.25rem 0.5rem; }
body .site-header #google_translate_element, body .site-header #google_translate_element a { color: inherit; }
body .site-header a:link, body .site-header a:visited, body .site-header a:hover, body .site-header a:active { color: var(--color-over-1); }

.transparency-links { display: none; }
body:has(.site-homepage) .transparency-links { order: 1; display: flex; gap: 0.75rem; margin: 0.75rem auto; }
.transparency-link { display: block; width: 150px; height: 150px; background: #fff; border-radius: 50%; }
.transparency-link img { display: block; width: 150px; height: 150px; }

@media (min-width: 48rem) {
    body:has(.site-homepage) .transparency-links { position: absolute; top: calc(100% + 1rem); right: max(30px, calc((100vw - 84.375rem) / 2)); margin: 0; z-index: 5; }
}

@media (min-width: 64rem) {
    .site-header { display: grid; grid-template-columns: 1fr auto; align-items: center; position: relative; z-index: 10; padding-inline: max(30px, calc((100vw - 84.375rem) / 2)); }
    .site-header__identity { grid-column: 1; grid-row: 1; justify-content: flex-start; padding: 0.75rem 0; }
    .site-header__topbar { order: 0; grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 0; }
    #google_translate_element { display: block; }
    .site-nav-desktop { grid-column: 1 / -1; grid-row: 2; position: relative; margin-inline: calc(-1 * max(30px, calc((100vw - 84.375rem) / 2))); padding-inline: max(30px, calc((100vw - 84.375rem) / 2)); }
    /* Homepage only: the nav pulls the hero up under it for the translucent overlay.
       Inside pages have no hero, so the nav stays flush and CMS content clears it
       with breathing room below the nav bar. */
    body:has(.site-homepage) .site-nav-desktop { margin-bottom: -45px; }
    body:not(:has(.site-homepage)) #content_main { padding-top: 1.5rem; }
    body:has(.site-homepage) .transparency-links { top: calc(100% + 3.5rem); }
}

/* ---- Mobile nav (hamburger) base; desktop nav appears at 64rem ---- */
.site-nav-desktop { display: none; }
.site-nav-mobile { display: block; }
.menu-toggle {
    position: absolute; top: 0.6rem; right: var(--section-pad-x);
    width: 2.25rem; height: 2.25rem; z-index: 20;
    background: transparent; border: none; cursor: pointer; color: var(--color-over-1);
}
.menu-toggle::after { font-family: 'Material Symbols Outlined'; content: 'menu'; font-size: 2rem; text-transform: none; }
.menu-toggle[aria-expanded="true"]::after { content: 'close'; }
.site-nav-mobile .nav-menu {
    display: none; list-style: none; margin: 0; padding: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 15;
    background: var(--color-1); border-top: 1px solid var(--color-over-1);
}
.site-nav-mobile .nav-menu.show { display: block; }
.site-nav-mobile .nav-item { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--color-over-1) 20%, transparent); }
.site-nav-mobile .nav-item-inner { color: var(--color-over-1); text-decoration: none; padding: 0.85rem var(--section-pad-x); font-size: 1.125rem; }
.site-nav-mobile .nav-item > a.nav-item-inner { text-decoration: underline; }
.site-nav-mobile .dropdown-toggle { background: transparent; border: none; color: var(--color-over-1); cursor: pointer; width: 3rem; height: 3rem; }
.site-nav-mobile .dropdown-toggle::after { font-family: 'Material Symbols Outlined'; content: 'expand_more'; text-transform: none; font-size: 1.5rem; }
.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-mix(in srgb, var(--color-1), #000 12%); }
.site-nav-mobile .sub-menu-item { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.site-nav-mobile .sub-menu-item > a, .site-nav-mobile .sub-menu-item > .nav-item-inner { color: var(--color-over-1); text-decoration: none; padding: 0.65rem var(--section-pad-x) 0.65rem 2rem; font-size: 1rem; display: block; }
body .site-nav-mobile .sub-menu-item > a:hover, body .site-nav-mobile .sub-menu-item > a:focus-visible { text-decoration: underline; }
.site-nav-mobile .sub-menu .sub-menu { display: none; grid-column: 1 / -1; }
.site-nav-mobile .sub-menu .sub-menu.show { display: block; }
.site-nav-mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3rem; }

@media (min-width: 64rem) {
    .site-nav-mobile { display: none; }
    .site-nav-desktop { display: block; background: color-mix(in srgb, var(--color-1) 80%, transparent); }
    .site-nav-desktop .nav-menu { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
    .site-nav-desktop .nav-item { position: relative; display: grid; grid-template-columns: 1fr; }
    .site-nav-desktop .nav-item-inner { color: var(--color-over-1); text-decoration: none; padding: 0.6rem 0.5rem; font-size: 1.25rem; font-weight: 700; grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
    .site-nav-desktop .nav-item.dropdown > a.nav-item-inner, .site-nav-desktop .nav-item.dropdown > div.nav-item-inner { margin-right: 1.5rem; }
    .site-nav-desktop div.nav-item-inner { pointer-events: none; }
    .site-nav-desktop .nav-item > a.nav-item-inner { text-decoration: underline; }
    .site-nav-desktop .nav-menu > .nav-item > .dropdown-toggle { grid-column: 1; grid-row: 1; width: 100%; justify-content: flex-end; background: transparent; border: none; color: var(--color-over-1); cursor: pointer; display: flex; align-items: center; }
    .site-nav-desktop .nav-menu > .nav-item > .dropdown-toggle::after { font-family: 'Material Symbols Outlined'; content: 'expand_more'; text-transform: none; font-size: 1.25rem; }
    .site-nav-desktop .nav-item:hover > .dropdown-toggle, .site-nav-desktop .nav-item:focus-within > .dropdown-toggle { background: color-mix(in srgb, var(--color-1), #000 25%); }
    .site-nav-desktop .sub-menu-holder { display: none; position: absolute; top: 100%; left: 0; min-width: 15rem; z-index: 30; background: var(--color-2); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
    .site-nav-desktop .drop-left .sub-menu-holder { left: auto; right: 0; }
    .site-nav-desktop .sub-menu-holder:has(.sub-menu.show) { display: block; }
    .site-nav-desktop .sub-menu { list-style: none; margin: 0; padding: 0.5rem 0; }
    .site-nav-desktop .sub-menu-item { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .site-nav-desktop .sub-menu-item > a, .site-nav-desktop .sub-menu-item > .nav-item-inner { display: block; padding: 0.5rem 1rem; font-size: 1rem; text-decoration: none; }
    body .site-nav-desktop .sub-menu-item > a:link, body .site-nav-desktop .sub-menu-item > a:visited { color: var(--color-over-2); }
    .site-nav-desktop .sub-menu-item > .dropdown-toggle { grid-column: 2; grid-row: 1; width: auto; background: transparent; border: none; cursor: pointer; color: var(--color-over-2); padding: 0.25rem 0.5rem; }
    .site-nav-desktop .sub-menu-item > .dropdown-toggle::after { font-family: 'Material Symbols Outlined'; content: 'chevron_right'; text-transform: none; }
    .site-nav-desktop .sub-menu .sub-menu { display: none; position: absolute; top: 0; left: 100%; min-width: 14rem; background: var(--color-2); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
    .site-nav-desktop .drop-left .sub-menu-item.dropdown > .sub-menu { right: 100%; left: auto; }
    .site-nav-desktop .sub-menu .sub-menu.show { display: block; }
    .site-nav-desktop .sub-menu-item:hover, .site-nav-desktop .sub-menu-item:focus-within,
    .site-nav-desktop .sub-menu-item:has(> .dropdown-toggle[aria-expanded="true"]) { background: var(--color-1); }
    body .site-nav-desktop .sub-menu-item:hover > a, body .site-nav-desktop .sub-menu-item:focus-within > a,
    body .site-nav-desktop .sub-menu-item:has(> .dropdown-toggle[aria-expanded="true"]) > a,
    .site-nav-desktop .sub-menu-item:hover > .nav-item-inner, .site-nav-desktop .sub-menu-item:focus-within > .nav-item-inner,
    .site-nav-desktop .sub-menu-item:has(> .dropdown-toggle[aria-expanded="true"]) > .nav-item-inner,
    .site-nav-desktop .sub-menu-item:hover > .dropdown-toggle, .site-nav-desktop .sub-menu-item:focus-within > .dropdown-toggle,
    .site-nav-desktop .sub-menu-item:has(> .dropdown-toggle[aria-expanded="true"]) > .dropdown-toggle { color: var(--color-over-1); text-decoration: none; }
}

/* ============================================================
   HERO — full-bleed shuffle
   ============================================================ */
.site-homepage > section.hero-section { padding-block: 0; }
.hero-section { position: relative; }
.hero-carousel { position: relative; }
.hero-carousel .swiper-slide figure { margin: 0; position: relative; }
.hero-carousel .swiper-slide img { display: block; width: 100%; height: clamp(20rem, 56vw, 40rem); object-fit: cover; }
/* Same flat chevron language as .carousel-arrow elsewhere, on a dark scrim
   circle for contrast over arbitrary photo content. */
.hero-carousel .hero-arrow { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(0,0,0,0.5); padding: 0; }
.hero-carousel .hero-arrow::after { font-family: 'Material Symbols Outlined'; color: #fff; filter: none; font-size: 1.75rem; }
.hero-carousel:not(:has(.navigation-type-1)) .swiper-button-prev, .hero-carousel:not(:has(.navigation-type-1)) .swiper-button-next { display: none; }
.hero-carousel figcaption { background-color: rgba(0,0,0,0.85); color: #fff; padding: 0.75rem 1rem; }
@media (min-width: 768px) {
    .hero-carousel figcaption { position: absolute; left: 0; right: 0; background-color: rgba(0,0,0,0.75); }
    .hero-carousel figcaption.caption-position-top { top: 0; }
    .hero-carousel figcaption.caption-position-bottom { bottom: 0; }
}
/* Numbered pagination (navigation type 3): center the index in its bullet and
   contrast the number against the bullet fill, not the slide. */
.hero-section { --swiper-pagination-color: rgba(255,255,255,0.9); --swiper-pagination-bullet-text-color: #000; }
.hero-carousel .numbered-pagination .swiper-pagination-bullet { place-content: center; color: var(--swiper-pagination-bullet-text-color, #000); }
/* Navigation-position offsets take effect at desktop only; on mobile pagination
   stays at Swiper's default bottom to avoid consuming horizontal space. */
@media (min-width: 768px) {
    .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; }
    .hero-carousel .navigation-position-top    figcaption.caption-position-top    { padding-top:    calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .hero-carousel .navigation-position-bottom figcaption.caption-position-bottom { padding-bottom: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .hero-carousel .navigation-position-left   figcaption { padding-left:  calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .hero-carousel .navigation-position-right  figcaption { padding-right: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .hero-carousel .navigation-type-1 figcaption { padding-left: calc(var(--swiper-navigation-size, 44px) + 0.5rem); padding-right: calc(var(--swiper-navigation-size, 44px) + 0.5rem); }
}
/* Left/right bullet pagination renders vertical on desktop (config sets the
   class); restore horizontal on mobile where pagination stays at the bottom. */
@media (max-width: 767px) {
    .hero-carousel .swiper-pagination-vertical { flex-direction: row; width: auto; }
}
.swiper-autoplay-toggle-button { display: none; position: absolute; left: 1rem; bottom: 1rem; z-index: 3; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; cursor: pointer; color: #fff; }
.swiper-autoplay-toggle-button::after { font-family: 'Material Symbols Outlined'; content: 'pause'; text-transform: none; }
.swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }
@media (min-width: 768px) { .swiper-autoplay-toggle-button { display: block; } }

/* ============================================================
   QUICK LINKS — bounded white card overhanging, carousel
   ============================================================ */
.site-homepage > .ql-section { padding-block: 0; position: relative; z-index: 5; }
.ql-card { background: #fff; padding: 1.25rem; }
@media (min-width: 64rem) {
    .site-homepage > .ql-section { margin-top: -0.75rem; padding-inline: max(60px, calc((100vw - 71rem) / 2)); }
    .ql-card { box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
}
.ql-carousel { position: relative; }
.ql-carousel .swiper-holder { display: flex; align-items: center; gap: 0.5rem; }
.ql-carousel .swiper { flex: 1; min-width: 0; }
.ql-item { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.75rem; text-decoration: none; padding: 1.75rem 1rem; height: 100%; box-sizing: border-box; border: 1px solid var(--color-1); }
body .ql-item:link, body .ql-item:visited { color: var(--color-over-2); }
.ql-item__icon { display: inline-flex; width: 2.25rem; height: 2.25rem; flex: none; color: var(--color-1); filter: brightness(var(--color-1-isDark)); }
.ql-item__icon svg, .ql-item__icon img { width: 100%; height: 100%; fill: currentColor; }
.ql-item__label { font-weight: 700; font-size: 1.125rem; line-height: 1.15; }
body .ql-item:hover, body .ql-item:focus-visible { background: var(--color-1); color: var(--color-over-1); }
body .ql-item:hover .ql-item__icon, body .ql-item:focus-visible .ql-item__icon { color: var(--color-over-1); filter: none; }

/* ============================================================
   NEWS — three photo cards
   ============================================================ */
.news-section { background: #fff; }
.news-inner { width: 100%; padding-inline: 30px; box-sizing: border-box; }
.news-card { position: relative; height: 25rem; background: #000; }
.news-card__photo { position: absolute; inset: 0; overflow: hidden; background: #000; }
.news-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card--no-photo .news-card__photo { background: var(--color-1) center / 45% no-repeat url(/pics/mascot.png); }
.news-card__photo::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.news-card__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-height: 100%; overflow-y: auto; padding: 1.25rem; box-sizing: border-box; }
.news-card__title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
body .news-card__title a:link, body .news-card__title a:visited { color: #fff; text-decoration: none; }
body .news-card__title a:hover, body .news-card__title a:focus-visible { text-decoration: underline; }
.news-card__summary { margin: 0; font-size: 1.25rem; line-height: 1.2; color: #fff; }
.news-cta { display: flex; align-items: center; justify-content: center; gap: 2.5rem; }

/* ============================================================
   EVENTS — full-bleed blue section, tabbed calendar
   ============================================================ */
.events-section { background: var(--color-1); color: var(--color-over-1); }
/* Heading left, tabs right (Figma SPACE_BETWEEN row). */
.events-header { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-bottom: 2.5rem; }
@media (min-width: 48rem) { .events-header { flex-direction: row; justify-content: space-between; align-items: center; } }
.events-header .section-title { text-align: left; }
.events-tabs__list { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.events-tab { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; padding: 0.6rem 1.5rem; background: transparent; color: var(--color-over-1); border: 1px solid var(--color-over-1); cursor: pointer; }
.events-tab[aria-selected="true"] { background: var(--color-2); color: var(--color-over-2); border-color: var(--color-2); }
.monui-tabs-panels { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stack"; }
.monui-tabs-panels > .monui-panel { grid-area: stack; min-width: 0; }
.monui-tabs-panels > .monui-panel[aria-hidden="true"] { visibility: hidden; }
.events-carousel { position: relative; }
.events-carousel .swiper { width: 100%; }
/* Event card: white date badge on top, centered title/time/location below. */
.event-item { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-decoration: none; height: 100%; }
.event-item__date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 6.25rem; height: 6.25rem; background: var(--color-2); color: var(--color-over-2); }
.event-item__month { font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.event-item__day { font-size: 2rem; font-weight: 700; line-height: 1; }
.event-item__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; }
body .event-item .event-item__title { font-weight: 700; font-size: 1.25rem; color: var(--color-over-1); }
body .event-item:hover .event-item__title, body .event-item:focus-visible .event-item__title { text-decoration: underline; }
.event-item__time, .event-item__loc { font-size: 1rem; color: var(--color-over-1); }
.events-empty { text-align: center; opacity: 0.85; }
.events-cta { display: flex; align-items: center; justify-content: center; gap: 2.5rem; }
.events-section .carousel-arrow::after { color: var(--color-over-1); filter: none; }

/* ============================================================
   SPOTLIGHTS — two photo cards, content revealed on hover
   ============================================================ */
/* No bottom padding — Infographics' own top padding forms the single gap between
   them, so the two section paddings don't stack to a double gap. */
.site-homepage > section.spotlights-section { padding-bottom: 0; }
.spotlights-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding-inline: 12px; box-sizing: border-box; }
@media (min-width: 30rem) { .spotlights-grid { grid-template-columns: repeat(2, 1fr); } }
/* Mobile / tablet: content in normal flow, so the body drives card height above
   the min; photo sits behind it. */
.spotlight-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 25rem; background: #000; }
.spotlight-card:focus-visible { outline: 3px solid var(--color-1); outline-offset: 2px; }
.spotlight-card__photo { position: absolute; inset: 0; }
.spotlight-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Overlay lives on the card (a non-scrolling element) so it stays fixed while
   the content scrolls. */
.spotlight-card::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,0.5); transition: background-color 0.35s; pointer-events: none; }
.spotlight-card__content { position: relative; z-index: 1; color: #fff; }
.spotlight-card__inner { position: relative; padding: 1.25rem; }
.spotlight-card__title { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.spotlight-card__body { margin-top: 0.75rem; font-size: 1.25rem; line-height: 1.3; }
.spotlight-card__cta { display: inline-block; margin-top: 0.75rem; font-weight: 700; }
body .spotlight-card__cta:link, body .spotlight-card__cta:visited { color: #fff; text-decoration: underline; }
.spotlight-card__cue { display: none; }

@media (min-width: 64rem) {
    /* Desktop: the content is a fixed-height scroll container pinned to the card.
       The inner is a min-height:100% flex column anchored to the bottom, so the
       collapsed title+cue sit at the base; when hover expands the body past the
       card, the inner grows taller than 100% and the content scrolls. overflow
       flips to auto only after the reveal settles, so no scrollbar flashes. */
    .spotlight-card { overflow: hidden; }
    .spotlight-card__content { position: absolute; inset: 0; overflow-y: hidden; }
    .spotlight-card:hover .spotlight-card__content, .spotlight-card:focus-within .spotlight-card__content { overflow-y: auto; transition: overflow-y 0.4s allow-discrete; }
    .spotlight-card__inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; box-sizing: border-box; }
    .spotlight-card__body { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.4s, opacity 0.4s, margin 0.4s; }
    .spotlight-card__cue { display: block; margin-top: 0.5rem; font-weight: 700; text-decoration: underline; transition: opacity 0.3s; }
    .spotlight-card:hover::after, .spotlight-card:focus-within::after { background: rgba(0,0,0,0.7); }
    .spotlight-card:hover .spotlight-card__body, .spotlight-card:focus-within .spotlight-card__body { max-height: 100rem; opacity: 1; margin-top: 0.75rem; }
    .spotlight-card:hover .spotlight-card__cue, .spotlight-card:focus-within .spotlight-card__cue { opacity: 0; }
}

/* ============================================================
   INFOGRAPHICS — solid blue stat tiles
   ============================================================ */
.infographics-inner { width: 100%; padding-inline: 30px; box-sizing: border-box; }
.infographics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.fact-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.375rem; min-height: 12.75rem; padding: 1.25rem; background: var(--color-1); color: var(--color-over-1); }
.fact-tile__icon { display: inline-flex; height: 2.75rem; margin-bottom: 0.25rem; }
.fact-tile__icon svg, .fact-tile__icon img { height: 100%; width: auto; }
.fact-tile__value { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.fact-tile__label { font-size: 1.25rem; line-height: 1.2; }

/* ============================================================
   FOOTER — single blue row: contact | logo | social + attribution
   ============================================================ */
.site-footer { background: var(--color-1); color: var(--color-over-1); }
/* Mobile: single column in DOM order (logo, contact, social, edlio), left-aligned. */
.site-footer__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; padding: 2rem max(30px, calc((100vw - 84.375rem) / 2)); box-sizing: border-box; text-align: left; }
.site-footer__contact { font-style: normal; font-size: 1.25rem; line-height: 1.2; }
body .site-footer a:link, body .site-footer a:visited, body .site-footer a:hover, body .site-footer a:active { color: var(--color-over-1); }
.site-footer__logo img { display: block; height: 90px; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
.site-footer__social { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.site-footer__social a { display: inline-flex; width: 1.75rem; height: 1.75rem; color: var(--color-over-1); }
.site-footer__social svg, .site-footer__social img { width: 100%; height: 100%; }
.site-footer__edlio { display: flex; align-items: center; gap: 1.5rem; }
.site-footer__edlio svg { fill: currentColor; }
.site-footer__edlio a:first-child svg { width: 140px; height: 20px; }
.site-footer__admin { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.site-footer__admin svg { height: 1.5rem; width: auto; }
.site-footer__admin-label { padding-left: 0.5rem; border-left: 1px solid currentColor; font-family: "Open Sans", Arial, sans-serif; font-size: 1.25rem; line-height: 1; }
body .site-footer__admin { color: inherit; }

/* Desktop: contact left / logo center / social+edlio stacked right. Items keep
   their mobile DOM order; grid placement reorders them visually. */
@media (min-width: 64rem) {
    .site-footer__row { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 2rem; }
    .site-footer__contact { grid-column: 1; grid-row: 1 / -1; }
    .site-footer__logo { grid-column: 2; grid-row: 1 / -1; justify-self: center; }
    .site-footer__social { grid-column: 3; grid-row: 1; justify-self: end; }
    .site-footer__edlio { grid-column: 3; grid-row: 2; justify-self: end; }
}