@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
    /* Diagnostic fallbacks — a missing theme_settings.css renders as bright wrong colors. */
    --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, #000000);
    --color-1-isDark: var(--color-1-theme-isDark, 0);
    --color-2-isDark: var(--color-2-theme-isDark, 0);

    --surface-bg:     #FFFFFF;

    --surface-highlight:             #56B7E6;
    --ink-strong:                    #1B365D;
    --surface-translucent-card:      rgb(185 217 235 / 0.90);
    --surface-translucent-highlight: rgb(86 183 230 / 0.95);

    --font-display: 'Source Sans 3', system-ui, sans-serif;
    --font-body:    'Libre Baskerville', Georgia, serif;

    --type-display-size:    3rem;
    --type-stat-size:       2.5rem;
    --type-tagline-size:    2.25rem;
    --type-card-title-size: 1.5rem;
    --type-body-size:       1.125rem;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.25rem;
    --space-4: 2rem;
    --space-5: 2.5rem;
    --space-6: 3.75rem;
    --space-7: 5rem;

    --radius-button:     0.75rem;
    --radius-arrow:      1.25rem;
    --radius-pill:       2.5rem;
    --radius-card:       3.75rem;
    --radius-news-card:  5rem;
    --radius-image:      2.5rem;
    --radius-circle:     999px;

    --content-narrow:  64rem;
    --content-wide:    80.375rem;
    --site-container:  var(--content-narrow);
    --site-pad:        clamp(1rem, 4vw, 3rem);

    /* Figma pins: 56px @ 375, 120px @ 1366. */
    --section-gap: clamp(3.5rem, calc(2rem + 6.5vw), 7.5rem);
    --site-section-py: clamp(2.5rem, 5vw, 4.5rem);
    --site-transition: 0.2s ease;

    /* @media queries can't read custom properties — repeat these rem values inline. */
    --size-sm: 48rem;
    --size-md: 64rem;
    --size-lg: 80rem;
    --size-xl: 120rem;

    --hero-overlap: 8.75rem;
    --page-inset: clamp(1rem, 3vw, 2.5rem);
}

.site-glance__grid,
.site-tagline__text,
.site-about__card,
.site-quick-links__list,
.site-news__inner,
.site-events__inner,
.site-socials__quicklinks,
.site-socials__grid,
.site-footer__inner {
    box-sizing: border-box;
}

.site-section-inset {
    padding-inline: var(--page-inset);
}

html { height: 100%; overflow-x: clip; }
body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    /* CMS feature pages use `width: 100vw` + negative margins for full-width heroes;
       on Windows, 100vw includes the scrollbar gutter and produces horizontal scroll.
       `clip` (instead of `hidden`) absorbs the bleed without breaking sticky descendants. */
    overflow-x: clip;
}

.site-header,
.site-footer { flex: none; }
#content_main { flex: 1 0 auto; }

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

/* `width: 100%` is required: as a flex item in body's flex-column, <main> sizes
   to its content's intrinsic width otherwise — CMS pages with centered forms can
   collapse it to ~400px on a 1366 viewport. */
#content_main {
    --content-pad-x: clamp(1rem, 5%, 3rem);
    --content-pad-y: 2rem;
    width: 100%;
    box-sizing: border-box;
    padding: var(--content-pad-y) var(--content-pad-x);
    max-width: var(--site-container);
    margin-inline: auto;
    background: var(--surface-bg);
}

.site-homepage,
.site-homepage-content,
#content_main {
    color: #000;
    font-size: var(--type-body-size);
    line-height: 1.5;
}
.site-homepage {
    background: var(--surface-bg);
}

.hidden-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

body a.site-skip-link {
    position: absolute;
    top: -6rem; left: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--ink-strong);
    color: #FFFFFF;
    z-index: 9999;
    text-decoration: underline;
}
.site-skip-link:focus { top: 1rem; }

.t-display {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-display-size);
    color: var(--ink-strong);
    margin: 0;
    text-align: center;
}
.t-stat {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-stat-size);
    margin: 0;
}
.t-tagline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-tagline-size);
    margin: 0;
    text-align: center;
}
.t-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-card-title-size);
    margin: 0;
}
.t-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-body-size);
}
.t-button {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--type-body-size);
}

.btn-rect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-button);
    border: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--type-body-size);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--site-transition), color var(--site-transition);
}

body a.btn-rect--on-card {
    background: #FFFFFF;
    color: var(--ink-strong);
}
body a.btn-rect--on-card:hover,
body a.btn-rect--on-card:focus-visible {
    background: var(--ink-strong);
    color: #FFFFFF;
}

body a.btn-rect--action {
    background: var(--color-1);
    color: var(--color-over-1);
}
body a.btn-rect--action:hover,
body a.btn-rect--action:focus-visible {
    background: var(--ink-strong);
    color: #FFFFFF;
}

.icon-circle {
    width: 5rem; height: 5rem;
    flex-shrink: 0;
    border-radius: var(--radius-circle);
    background: #FFFFFF;
    color: var(--ink-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.icon-circle svg,
.icon-circle img {
    width: 2.75rem; height: 2.75rem;
    fill: currentColor;
}

.site-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.25;
    color: var(--ink-strong);
    text-align: center;
    margin: 0 0 var(--space-3);
}

/* Beats the CMS `a:link` default so themed-surface link colors inherit. */
body :where(.site-header, .site-footer, .site-homepage) a {
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO REGION
   ═══════════════════════════════════════════════════════════════════════════ */

.site-hero {
    position: relative;
    width: 100%;
}
.site-hero__holder {
    position: relative;
    width: 100%;
    background: var(--color-2);
}
.site-hero__media {
    width: 100%;
}
.site-hero .swiper-slide {
    position: relative;
}
.site-hero .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Scoped under .swiper-holder to beat Swiper's library CSS specificity. */
.site-hero .swiper-holder .swiper-button-prev,
.site-hero .swiper-holder .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem; height: 2.75rem;
    margin: 0;
    border: 0;
    border-radius: var(--radius-circle);
    background: #FFFFFF;
    color: var(--ink-strong);
    display: grid;
    place-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background var(--site-transition), color var(--site-transition);
}
.site-hero .swiper-holder .swiper-button-prev:hover,
.site-hero .swiper-holder .swiper-button-prev:focus-visible,
.site-hero .swiper-holder .swiper-button-next:hover,
.site-hero .swiper-holder .swiper-button-next:focus-visible {
    background: var(--ink-strong);
    color: #FFFFFF;
}
.site-hero .swiper-holder .swiper-button-prev { left: var(--space-2); }
.site-hero .swiper-holder .swiper-button-next { right: var(--space-2); }

.site-hero .swiper-holder .swiper-button-prev::before,
.site-hero .swiper-holder .swiper-button-next::before,
.site-hero .swiper-holder .swiper-button-prev::after,
.site-hero .swiper-holder .swiper-button-next::after {
    content: '';
}
.site-hero .swiper-holder .swiper-button-prev::after,
.site-hero .swiper-holder .swiper-button-next::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 700;
    font-size: 1.5rem;
}
.site-hero .swiper-holder .swiper-button-prev::after { content: 'chevron_left'; }
.site-hero .swiper-holder .swiper-button-next::after { content: 'chevron_right'; }

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

/* Slide caption: mobile flows below the image; desktop overlays it. */
.site-hero figure { margin: 0; position: relative; }
.site-hero figcaption {
    background: rgb(0 0 0 / 0.85);
    color: #FFFFFF;
    padding: var(--space-2);
}
@media (min-width: 48rem) {
    .site-hero figcaption {
        position: absolute;
        left: 0; right: 0;
        background: rgb(0 0 0 / 0.75);
    }
    .site-hero figcaption.caption-position-top    { top: 0; }
    .site-hero figcaption.caption-position-bottom { bottom: 0; }
}

/* Pagination position is mobile-bottom-only; desktop honors the CMS-configured edge. */
@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; }

    /* Caption padding so pagination doesn't overlap the 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); }

    /* Arrows always occupy left/right edges — extra caption padding to clear them. */
    .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);
    }
}

/* Mobile: force pagination horizontal even when desktop config sets vertical. */
@media (max-width: 47.999rem) {
    .site-hero .swiper-pagination-vertical {
        flex-direction: row;
        width: auto;
    }
}

/* Hide prev/next for any navigation type other than 1 (arrows). */
.site-hero:not(:has(.navigation-type-1)) .swiper-holder .swiper-button-prev,
.site-hero:not(:has(.navigation-type-1)) .swiper-holder .swiper-button-next {
    display: none;
}

/* Pagination color tokens — set on the section so all bullets pick them up. */
.site-hero {
    --swiper-pagination-color: #FFFFFF;
    --swiper-pagination-bullet-inactive-color: rgb(255 255 255 / 0.6);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-size: 1.5rem;
    --swiper-navigation-size: 44px;
}
.site-hero .numbered-pagination .swiper-pagination-bullet {
    place-content: center;
    color: var(--ink-strong);
}

/* Autoplay toggle: mobile-hidden, desktop-shown. JS-set inline display would
   defeat the media query — keep state changes in CSS via class, not style. */
.site-hero .swiper-autoplay-toggle-button {
    display: none;
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    width: 2.25rem; height: 2.25rem;
    border: 0;
    border-radius: var(--radius-circle);
    background: rgb(0 0 0 / 0.5);
    color: #FFFFFF;
    cursor: pointer;
    z-index: 3;
}
/* Lift above the AAG overlap zone where AAG reaches the hero's right edge. */
@media (min-width: 64rem) and (max-width: 72.5rem) {
    .site-hero .swiper-autoplay-toggle-button {
        bottom: calc(var(--hero-overlap) + var(--space-2));
    }
}
.site-hero .swiper-autoplay-toggle-button::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'pause';
    font-size: 1.25rem;
}
.site-hero .swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }
@media (min-width: 48rem) {
    .site-hero .swiper-autoplay-toggle-button { display: grid; place-content: center; }
}

@media (min-width: 64rem) {
    .site-hero .swiper-holder .swiper-button-prev { left: 0; }
    .site-hero .swiper-holder .swiper-button-next { right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
    position: relative;
    width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.site-header__plaque {
    background: var(--color-2);
    padding: var(--space-3) calc(var(--site-pad) + 3.75rem);
    min-height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--ink-strong);
}
.site-header__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
    text-align: center;
}
.site-header__logo {
    width: 3.5rem; height: 3.5rem;
    flex-shrink: 0;
    display: block;
}
.site-header__name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ink-strong);
}
.site-header__name-sub {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.7em;
    text-transform: none;
    letter-spacing: 0.1em;
    margin-top: 0.125rem;
}

.menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.75rem; height: 2.75rem;
    background: transparent;
    border: 0;
    color: var(--ink-strong);
    cursor: pointer;
    display: grid;
    place-content: center;
    z-index: 2;
}
.menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'menu';
    font-size: 1.75rem;
}
.menu-toggle[aria-expanded="true"]::after { content: 'close'; }

.site-mobile-nav .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-2);
    padding-inline: var(--site-pad);
    border-top: 1px solid color-mix(in srgb, var(--ink-strong), transparent 88%);
    z-index: 1;
}
.site-mobile-nav .nav-menu.show {
    display: block;
    padding-block: var(--space-1) var(--space-2);
}
.site-mobile-nav .nav-item,
.site-mobile-nav .sub-menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--ink-strong), transparent 92%);
}
.site-mobile-nav .nav-item:not(.dropdown),
.site-mobile-nav .sub-menu-item:not(.dropdown) {
    grid-template-columns: 1fr;
}

.nav-item-inner,
.sub-menu-item > a {
    display: block;
    padding: 0.75rem 0.25rem;
    color: var(--ink-strong);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-body-size);
}
/* Top-level link items keep their underline as the only resting-state signal
   that distinguishes them from CONTAINER (non-link) items in the same row. */
a.nav-item-inner { text-decoration: underline; }
div.nav-item-inner { text-decoration: none; pointer-events: none; }
.sub-menu-item > a { text-decoration: none; }
.sub-menu-item > a:hover,
.sub-menu-item > a:focus-visible { text-decoration: underline; }

.dropdown-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    padding: 0.5rem;
    width: 2.25rem; height: 2.25rem;
    display: grid;
    place-content: center;
}
.dropdown-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    content: 'expand_more';
    font-size: 1.25rem;
    transition: transform var(--site-transition);
}
.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.sub-menu-holder { display: none; grid-column: 1 / -1; }
.sub-menu-holder:has(.sub-menu.show) { display: block; }
.sub-menu { list-style: none; margin: 0; padding: 0; }
.site-mobile-nav .sub-menu-item > a { padding-left: 1.5rem; font-size: 1rem; }
.site-mobile-nav .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3rem; font-size: 1rem; }

/* Level-3 has no holder wrapper — it's a direct grid child of .sub-menu-item.dropdown. */
.site-mobile-nav .sub-menu .sub-menu { grid-column: 1 / -1; display: none; }
.site-mobile-nav .sub-menu .sub-menu.show { display: block; }

.site-desktop-nav { display: none; }
.site-header__search { display: none; }

@media (min-width: 64rem) {
    .site-mobile-nav,
    .menu-toggle { display: none; }
    .site-desktop-nav { display: block; }

    body:has(.site-homepage) .site-header {
        margin-bottom: calc(var(--space-7) * -1);
        position: absolute;
        top: 0; left: 0; right: 0;
    }
    body:has(.site-homepage) .site-hero { margin-top: 0; }

    /* DOM order is plaque-then-nav (keyboard tab order); flip the visual via flex order. */
    .site-desktop-nav { order: 1; }
    .site-header__plaque { order: 2; }

    /* Translucent surface only over the hero photo; opaque on inside pages. */
    .site-desktop-nav {
        position: relative;
        z-index: 1;
        background: var(--color-2);
        padding: var(--space-1) var(--site-pad);
    }
    body:has(.site-homepage) .site-desktop-nav {
        background: var(--surface-translucent-card);
        backdrop-filter: blur(2px);
    }
    .site-desktop-nav .nav-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        max-width: var(--site-container);
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
    }
    .site-desktop-nav .nav-item {
        position: relative;
    }
    .site-desktop-nav .nav-item.dropdown {
        display: grid;
        grid-template-columns: 1fr;
    }
    .site-desktop-nav .nav-item.dropdown > a.nav-item-inner,
    .site-desktop-nav .nav-item.dropdown > div.nav-item-inner {
        grid-column: 1; grid-row: 1;
        padding: var(--space-1) var(--space-2);
        z-index: 1;
        position: relative;
        padding-right: 2rem;
    }
    .site-desktop-nav .nav-menu > .nav-item > .dropdown-toggle {
        grid-column: 1; grid-row: 1;
        width: 100%;
        justify-content: flex-end;
        z-index: 0;
    }
    .site-desktop-nav .nav-item:not(.dropdown) > a.nav-item-inner {
        padding: var(--space-1) var(--space-2);
    }
    .site-desktop-nav .nav-item-inner {
        color: var(--color-over-2);
        text-align: center;
    }

    .site-header__search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem; height: 2rem;
        margin-left: var(--space-2);
        background: transparent;
        border: 0;
        color: var(--color-over-2);
        text-decoration: none;
    }
    .site-header__search::after {
        font-family: 'Material Symbols Outlined';
        font-variation-settings: 'FILL' 0;
        content: 'search';
        font-size: 1.5rem;
    }

    .site-desktop-nav .sub-menu-holder {
        position: absolute;
        top: 100%; left: 0;
        min-width: 12.5rem;
        background: #FFFFFF;
        box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
        z-index: 60;
    }
    .site-desktop-nav .nav-item.drop-left .sub-menu-holder {
        left: auto; right: 0;
    }
    .site-desktop-nav .sub-menu { padding: 0; }
    body .site-desktop-nav .sub-menu-item > a {
        color: #000;
        padding: 0.6rem 1.25rem;
        font-size: 1rem;
    }
    body .site-desktop-nav .sub-menu-item > a:hover,
    body .site-desktop-nav .sub-menu-item > a:focus-visible {
        background: var(--color-1);
        color: var(--color-over-1);
    }
    .site-desktop-nav .sub-menu .sub-menu {
        position: absolute;
        top: 0; left: 100%;
    }
    .site-desktop-nav .drop-left .sub-menu-item.dropdown > .sub-menu {
        right: 100%; left: auto;
    }

    .site-header__plaque {
        max-width: 30.6875rem;
        margin: 0 auto;
        border-radius: 0 0 1.25rem 1.25rem;
        padding: 0.625rem var(--space-5);
        gap: var(--space-3);
    }
    .site-header__brand {
        flex-direction: row;
    }
    .site-header__logo {
        width: 7.5rem; height: 7.5rem;
    }
    .site-header__name {
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 2.5rem;
        line-height: 1.1;
    }
    .site-header__name-sub {
        font-size: 1.75rem;
        font-weight: 400;
        letter-spacing: 0.1em;
        margin-top: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AT A GLANCE
   ═══════════════════════════════════════════════════════════════════════════ */

.site-glance {
    position: relative;
    z-index: 2;
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
}
.site-glance__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--content-narrow);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Gap shrinks so four cards fit whenever the container can hold them. */
    gap: clamp(var(--space-2), calc((100% - 55rem) / 3), var(--space-5));
}
@media (min-width: 64rem) {
    .site-glance {
        margin-top: calc(var(--hero-overlap) * -1);
        padding-top: 0;
        padding-bottom: var(--section-gap);
    }
}

.site-glance__item {
    background: var(--surface-highlight);
    color: #000;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-3) var(--space-3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 17.5rem;
    box-sizing: border-box;
    flex: 1 1 13.75rem;
    min-width: 0;
    max-width: 13.75rem;
}
.site-glance__item:nth-child(even) {
    background: var(--color-2);
}
.site-glance__number {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-stat-size);
}
.site-glance__label {
    font-family: var(--font-body);
    font-size: var(--type-body-size);
    max-width: 18ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAGLINE BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-tagline {
    padding-bottom: var(--section-gap);
    text-align: center;
}
.site-tagline__text {
    display: block;
    background: var(--surface-translucent-highlight);
    color: #000;
    border-radius: var(--radius-pill);
    padding: var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.4;
    margin: 0 auto;
    max-width: var(--content-narrow);
}
@media (min-width: 64rem) {
    .site-tagline__text { padding: var(--space-3) var(--space-5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT SPOTLIGHT
   ═══════════════════════════════════════════════════════════════════════════ */

.site-about {
    padding-bottom: var(--section-gap);
}
.site-about__card {
    background: var(--color-2);
    color: var(--color-over-2);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-2);
    max-width: var(--content-wide);
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    box-shadow: 10px 10px 0 0 var(--surface-highlight);
}
@media (min-width: 64rem) {
    .site-about__card {
        padding: var(--space-5) clamp(var(--space-3), 12vw, 10rem);
        gap: var(--space-5);
    }
}
.site-about__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, var(--type-display-size));
    line-height: 1.25;
    color: var(--ink-strong);
    margin: 0;
}
.site-about__body {
    font-family: var(--font-body);
    font-size: var(--type-body-size);
    margin: 0;
    max-width: 60rem;
}
.site-about__body p { margin: 0 0 var(--space-2); }
.site-about__body p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-quick-links {
    padding-bottom: var(--section-gap);
}
.site-quick-links__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--content-wide);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Figma: 10px @ 1024, 40px @ 1366. */
    gap: clamp(0.625rem, calc((100% - 57rem) / 3), var(--space-5));
}
.site-quick-links__list > li {
    flex: 1 1 14.25rem;
    min-width: 0;
    max-width: 18.25rem;
    display: flex;
}

body a.site-quick-links__item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-1);
    color: var(--color-over-1);
    border: 1px solid var(--color-1);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1rem, 1.17vw + 0.5rem, 1.5rem);
    transition: background var(--site-transition), color var(--site-transition);
}
body a.site-quick-links__item:hover,
body a.site-quick-links__item:focus-visible {
    background: #FFFFFF;
    color: var(--ink-strong);
}
.site-quick-links__icon {
    width: 5rem; height: 5rem;
    flex-shrink: 0;
    border-radius: var(--radius-circle);
    background: #FFFFFF;
    color: var(--ink-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--site-transition);
}
body a.site-quick-links__item:hover .site-quick-links__icon,
body a.site-quick-links__item:focus-visible .site-quick-links__icon {
    transform: scale(1.2);
}
.site-quick-links__icon svg,
.site-quick-links__icon img {
    width: 2.75rem; height: 2.75rem;
    fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEWS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-news {
    padding-bottom: var(--section-gap);
}
.site-news__inner {
    max-width: var(--content-wide);
    margin-inline: auto;
}
/* Reserves space for the card's offset shadow — Swiper's overflow:hidden clips it otherwise. */
.site-news .swiper { padding-right: 10px; padding-bottom: 10px; }

.swiper-holder .site-news-card {
    background: var(--color-2);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-2) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: auto;
    box-sizing: border-box;
    box-shadow: 10px 10px 0 0 var(--surface-highlight);
}
@media (min-width: 64rem) {
    .swiper-holder .site-news-card {
        border-radius: var(--radius-news-card);
        padding: var(--space-5) clamp(var(--space-3), 6vw, var(--space-7));
    }
}
.site-news-card__media {
    aspect-ratio: 463 / 222;
    overflow: hidden;
    border-radius: var(--radius-image);
    background: var(--color-1);
}
.site-news-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.site-news-card__body {
    display: flex;
    flex-direction: column;
}
body a.site-news-card__title {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-card-title-size);
    color: var(--color-over-2);
    margin: 0;
    text-decoration: none;
}
body a.site-news-card__title:hover,
body a.site-news-card__title:focus-visible {
    color: var(--ink-strong);
    text-decoration: underline;
}
.site-news-card__summary {
    font-family: var(--font-body);
    font-size: var(--type-body-size);
    margin: 0;
    color: var(--color-over-2);
}

.site-news__footer {
    margin-top: var(--space-5);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

.swiper-holder .site-news__arrow,
.swiper-holder .site-events__arrow {
    position: static;
    width: 2.75rem; height: 2.75rem;
    margin: 0;
    top: auto; left: auto; right: auto;
    border-radius: var(--radius-arrow);
    border: 0;
    background: var(--color-1);
    color: var(--color-over-1);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background var(--site-transition);
}
.swiper-holder .site-news__arrow:hover,
.swiper-holder .site-news__arrow:focus-visible,
.swiper-holder .site-events__arrow:hover,
.swiper-holder .site-events__arrow:focus-visible {
    background: var(--ink-strong);
    color: #FFFFFF;
}
.swiper-holder .site-news__arrow::before,
.swiper-holder .site-news__arrow::after,
.swiper-holder .site-events__arrow::before,
.swiper-holder .site-events__arrow::after {
    content: '';
}
.swiper-holder .site-news__arrow::after,
.swiper-holder .site-events__arrow::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 700;
    font-size: 1.5rem;
}
.swiper-holder .site-news__arrow.swiper-button-prev::after,
.swiper-holder .site-events__arrow.swiper-button-prev::after { content: 'chevron_left'; }
.swiper-holder .site-news__arrow.swiper-button-next::after,
.swiper-holder .site-events__arrow.swiper-button-next::after { content: 'chevron_right'; }
.swiper-holder .site-news__arrow.swiper-button-disabled,
.swiper-holder .site-events__arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Containing block for Swiper's absolutely-positioned nav buttons. */
.swiper-holder { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-events {
    padding-bottom: var(--section-gap);
}
.site-events__inner {
    max-width: var(--content-wide);
    margin-inline: auto;
}
/* Reserves space for the card's offset shadow — Swiper's overflow:hidden clips it otherwise. */
.site-events .swiper { padding-right: 10px; padding-bottom: 10px; }

.swiper-holder .site-events-card {
    background: var(--color-2);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: auto;
    box-sizing: border-box;
    box-shadow: 10px 10px 0 0 var(--surface-highlight);
}
@media (min-width: 64rem) {
    .swiper-holder .site-events-card {
        border-radius: var(--radius-news-card);
        padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-6));
    }
}

.site-events-card__date {
    flex-shrink: 0;
    width: 6rem;
    height: 6rem;
    border-radius: var(--radius-circle);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink-strong);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
}
.site-events-card__month {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.site-events-card__day {
    font-size: 2.5rem;
    margin-top: 0.25rem;
}

.site-events-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
body a.site-events-card__title {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-card-title-size);
    color: var(--color-over-2);
    margin: 0;
    text-decoration: none;
}
body a.site-events-card__title:hover,
body a.site-events-card__title:focus-visible {
    color: var(--ink-strong);
    text-decoration: underline;
}
.site-events-card__meta {
    font-family: var(--font-body);
    font-size: var(--type-body-size);
    margin: 0;
    color: var(--color-over-2);
}

.site-events__footer {
    margin-top: var(--space-5);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL MEDIA
   ═══════════════════════════════════════════════════════════════════════════ */

.site-socials {
    padding-bottom: var(--section-gap);
}
.site-socials__quicklinks {
    list-style: none;
    margin: 0 auto var(--space-3);
    padding: 0;
    max-width: var(--content-narrow);
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}
@media (min-width: 64rem) {
    .site-socials__quicklinks { display: none; }
}
.site-socials__quicklinks a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9rem; height: 9rem;
    border-radius: var(--radius-card);
    background: var(--surface-highlight);
    transition: filter var(--site-transition);
}
.site-socials__quicklinks a:hover,
.site-socials__quicklinks a:focus-visible {
    filter: brightness(0.9);
}
.site-socials__quicklinks svg {
    width: 2.5rem; height: 2.5rem;
    padding: 1rem;
    background: #FFFFFF;
    border-radius: var(--radius-button);
    box-sizing: content-box;
}

.site-socials__grid {
    display: none;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: var(--content-narrow);
    margin-inline: auto;
}
@media (min-width: 64rem) {
    .site-socials__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
.site-socials__widget {
    position: relative;
    background: var(--surface-highlight);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: 1.875rem;
    min-height: 33rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-socials__widget .fb-page { width: 19.875rem; max-width: 100%; }
.site-socials__widget .instagram-media { width: 20.5rem !important; max-width: 100% !important; }
.site-socials__widget .fb-page,
.site-socials__widget .instagram-media {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

.site-socials__skip {
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
}
body a.site-socials__skip-link {
    position: absolute;
    left: -9999px;
    background: var(--ink-strong);
    color: #FFFFFF;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.875rem;
}
body a.site-socials__skip-link:focus,
body a.site-socials__skip-link:focus-visible {
    left: 0.5rem;
    top: 0.5rem;
    outline: 2px solid var(--color-1);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    background: var(--color-2);
    padding-block: var(--space-6) var(--space-4);
}
.site-footer__inner {
    max-width: var(--content-narrow);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    text-align: center;
}
@media (min-width: 64rem) {
    .site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        gap: var(--space-6);
    }
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink-strong);
    text-decoration: none;
}
.site-footer__logo {
    width: 5rem; height: 5rem;
}
@media (min-width: 64rem) {
    .site-footer__logo { width: 7.5rem; height: 7.5rem; }
}
.site-footer__name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ink-strong);
}
@media (min-width: 64rem) {
    .site-footer__name { font-size: 2.5rem; }
}
.site-footer__name-sub {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.7em;
    text-transform: none;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

.site-footer__contact {
    font-style: normal;
    font-family: var(--font-body);
    font-size: var(--type-body-size);
    color: var(--color-over-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.site-footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    text-align: start;
}
.site-footer__contact-item::before {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 1.25rem;
}
.site-footer__contact-address::before { content: 'place'; }
.site-footer__contact-phone::before   { content: 'phone'; }
body .site-footer__contact a {
    color: var(--color-over-2);
    text-decoration: none;
}
body .site-footer__contact a:hover,
body .site-footer__contact a:focus-visible {
    text-decoration: underline;
}

.site-footer__edlio {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}
body .site-footer__edlio a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-over-2);
    text-decoration: none;
}
.site-footer__edlio-brand svg { width: 140px; height: 20px; fill: currentColor; }
.site-footer__edlio-login svg { height: 1.5rem; width: auto; fill: currentColor; }

/* ═══════════════════════════════════════════════════════════════════════════
   INSIDE PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

#content_main .pageTitle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--ink-strong);
    margin-block: 0 var(--space-3);
}