/*
 * Banner -- full-width image / slideshow
 * Used by the "Banner" page section and the site-wide Header Banner.
 * Sizes come from CSS variables set inline on each banner:
 *   --hb-h (desktop height), --hb-h-m (small-screen height),
 *   --hb-shade (0-.5 dark overlay), --hb-focus (image focal point)
 */

.hb {
    position: relative;
    width: 100%;
    height: var(--hb-h, 600px);
    overflow: hidden;
    background: #20233a;
    color: #fff;
}

.hb-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}

.hb-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .8s ease;
}

.hb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hb-focus, 50% 50%);
}

/* Optional dark tint so caption text stays readable */
.hb-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hb-shade, 0));
    pointer-events: none;
}

.hb-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hb-caption {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    padding: clamp(20px, 5vw, 64px);
    padding-bottom: clamp(44px, 7vw, 84px);
    pointer-events: none;
}

.hb-caption-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.hb-align-center .hb-caption-inner { text-align: center; }
.hb-align-right .hb-caption-inner { text-align: right; }

.hb-title {
    margin: 0 0 .35em;
    font-family: var(--heading-font, inherit);
    font-size: clamp(1.7rem, 4.2vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
}

.hb-text {
    max-width: 640px;
    margin: 0 0 1em;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.45;
}

.hb-align-center .hb-text { margin-left: auto; margin-right: auto; }
.hb-align-right .hb-text { margin-left: auto; }

.hb-button {
    pointer-events: auto;
    text-shadow: none;
}

.hb-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0 0 4px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
}

.hb-arrow:hover,
.hb-arrow:focus-visible { background: rgba(0, 0, 0, .6); }
.hb-prev { left: 14px; }
.hb-next { right: 14px; }

.hb-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 9px;
}

.hb-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hb-dot.is-active { background: #fff; }

.hb-arrow:focus-visible,
.hb-dot:focus-visible,
.hb-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ---------- small screens ---------- */

@media (max-width: 768px) {
    .hb { height: var(--hb-h-m, 380px); }
    .hb-hide-mobile { display: none; }
    .hb-arrow { width: 38px; height: 38px; margin-top: -19px; font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-slide,
    .hb-slide.is-active { transition: none; }
}

/* =========================================================
   MENU BEHIND THE BANNER (Header Banner -> "Behind the menu")

   The menu is lifted out of the page flow with top:auto, so it sits
   exactly where it would have been (under any announcement bar) and the
   banner, which follows it in the page, starts at the same spot. When
   "hide on small screens" is on, none of this applies below 769px, so
   the menu goes back to normal there.
========================================================= */

@media (min-width: 769px) {
    body.hb-overlay.hb-mobile-off .site-header { /* same block as below */
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.hb-overlay.hb-mobile-off .site-header.hb-stuck {
        position: fixed;
        top: 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 1px 0 rgba(66, 77, 123, .10);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.hb-overlay.hb-mobile-off.hb-menu-light .site-header:not(.hb-stuck) .site-brand-name,
    body.hb-overlay.hb-mobile-off.hb-menu-light .site-header:not(.hb-stuck) .site-brand-subtitle,
    body.hb-overlay.hb-mobile-off.hb-menu-light .site-header:not(.hb-stuck) .mobile-menu-toggle {
        color: #fff;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
    }
}

@media (min-width: 901px) {
    body.hb-overlay.hb-menu-light .site-header:not(.hb-stuck) .main-nav > .nav-item > .nav-item-link,
    body.hb-overlay.hb-menu-light .site-header:not(.hb-stuck) .main-nav > .nav-item > .nav-item-heading,
    body.hb-overlay.hb-menu-light .site-header:not(.hb-stuck) .main-nav > .header-search-link {
        color: #fff;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
    }
}

@media (min-width: 769px) {
    body.hb-overlay:not(.hb-mobile-off) .site-header {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.hb-overlay:not(.hb-mobile-off) .site-header.hb-stuck {
        position: fixed;
        top: 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 1px 0 rgba(66, 77, 123, .10);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

@media (max-width: 768px) {
    body.hb-overlay:not(.hb-mobile-off) .site-header {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.hb-overlay:not(.hb-mobile-off) .site-header.hb-stuck {
        position: fixed;
        top: 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 1px 0 rgba(66, 77, 123, .10);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

}

/* Light logo / menu button text over the image (all widths, unless the
   banner is hidden on small screens -- handled in the block above). */
body.hb-overlay:not(.hb-mobile-off).hb-menu-light .site-header:not(.hb-stuck) .site-brand-name,
body.hb-overlay:not(.hb-mobile-off).hb-menu-light .site-header:not(.hb-stuck) .site-brand-subtitle,
body.hb-overlay:not(.hb-mobile-off).hb-menu-light .site-header:not(.hb-stuck) .mobile-menu-toggle {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}