/*
 * MCM Homepage Hero Slider
 * The existing text, buttons and homepage layout remain unchanged.
 */

.mcm11hero,
.mcmx-hero,
#mcm-home.mcm-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #174a3d !important;
}

/* Disable the old single background image. */
.mcm11hero::before,
.mcmx-hero::before,
#mcm-home.mcm-hero::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

.mcm11hero-bg,
.mcm11hero-shade {
    display: none !important;
}

.mcm-final-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    background: #f3eee3;
    pointer-events: none;
}

.mcm-final-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .9s ease,
        visibility .9s ease;
    will-change: opacity;
}

.mcm-final-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.mcm-final-hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.025);
    transition: transform 6.2s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.mcm-final-hero-slide.is-active img {
    transform: scale(1.085);
}

/* Deep green, not black: keeps the existing white hero text readable. */
.mcm-final-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: transparent !important;
    pointer-events: none;
}

/* Keep all existing hero content above the slides. */
.mcm11hero > *:not(.mcm-final-hero-slider):not(.mcm-final-hero-overlay):not(.mcm-final-slider-controls),
.mcmx-hero > *:not(.mcm-final-hero-slider):not(.mcm-final-hero-overlay):not(.mcm-final-slider-controls),
#mcm-home.mcm-hero > *:not(.mcm-final-hero-slider):not(.mcm-final-hero-overlay):not(.mcm-final-slider-controls) {
    position: relative !important;
    z-index: 3 !important;
}

.mcm-final-slider-controls {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.mcm-final-slider-arrow {
    position: absolute;
    top: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    background: rgba(8,76,57,.42);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(8,76,57,.20);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    opacity: .72;
    cursor: pointer;
    pointer-events: auto;
    transition:
        opacity .22s ease,
        background .22s ease,
        transform .22s ease;
}

.mcm-final-slider-arrow:hover,
.mcm-final-slider-arrow:focus-visible {
    opacity: 1;
    background: rgba(8,118,73,.78);
    outline: none;
}

.mcm-final-slider-arrow:hover {
    transform: translateY(-50%) scale(1.06);
}

.mcm-final-slider-prev {
    left: 16px;
}

.mcm-final-slider-next {
    right: 16px;
}

.mcm-final-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 15px;
    display: flex;
    gap: 7px;
    align-items: center;
    transform: translateX(-50%);
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;
    background: rgba(6,59,45,.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
}

.mcm-final-slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.52);
    cursor: pointer;
    transition:
        width .25s ease,
        background .25s ease,
        transform .25s ease;
}

.mcm-final-slider-dot.is-active {
    width: 24px;
    background: #38d98a;
}

.mcm-final-slider-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* Slide-wise text colors: no dark overlay, text adapts to the image. */
.mcm11hero .mcm11hero-copy,
.mcmx-hero .mcm11hero-copy,
#mcm-home.mcm-hero .mcm11hero-copy {
    transition:
        opacity .32s ease,
        transform .32s ease;
}

.mcm11hero.mcm-copy-changing .mcm11hero-copy,
.mcmx-hero.mcm-copy-changing .mcm11hero-copy,
#mcm-home.mcm-hero.mcm-copy-changing .mcm11hero-copy {
    opacity: 0;
    transform: translateY(10px);
}

.mcm11hero.mcm-copy-dark .mcm11hero-copy > span,
.mcmx-hero.mcm-copy-dark .mcm11hero-copy > span,
#mcm-home.mcm-hero.mcm-copy-dark .mcm11hero-copy > span {
    color: #087247 !important;
    text-shadow: 0 1px 8px rgba(255,255,255,.76) !important;
}

.mcm11hero.mcm-copy-dark .mcm11hero-copy h1,
.mcmx-hero.mcm-copy-dark .mcm11hero-copy h1,
#mcm-home.mcm-hero.mcm-copy-dark .mcm11hero-copy h1 {
    color: #173d35 !important;
    text-shadow:
        0 2px 6px rgba(255,255,255,.92),
        0 8px 24px rgba(255,255,255,.70) !important;
}

.mcm11hero.mcm-copy-dark .mcm11hero-copy p,
.mcmx-hero.mcm-copy-dark .mcm11hero-copy p,
#mcm-home.mcm-hero.mcm-copy-dark .mcm11hero-copy p {
    color: #294f45 !important;
    text-shadow: 0 2px 10px rgba(255,255,255,.88) !important;
}

.mcm11hero.mcm-copy-light .mcm11hero-copy > span,
.mcmx-hero.mcm-copy-light .mcm11hero-copy > span,
#mcm-home.mcm-hero.mcm-copy-light .mcm11hero-copy > span {
    color: #d9ffec !important;
    text-shadow: 0 2px 10px rgba(7,67,50,.56) !important;
}

.mcm11hero.mcm-copy-light .mcm11hero-copy h1,
.mcmx-hero.mcm-copy-light .mcm11hero-copy h1,
#mcm-home.mcm-hero.mcm-copy-light .mcm11hero-copy h1 {
    color: #ffffff !important;
    text-shadow:
        0 2px 8px rgba(5,57,43,.62),
        0 12px 30px rgba(5,57,43,.42) !important;
}

.mcm11hero.mcm-copy-light .mcm11hero-copy p,
.mcmx-hero.mcm-copy-light .mcm11hero-copy p,
#mcm-home.mcm-hero.mcm-copy-light .mcm11hero-copy p {
    color: #f4fff9 !important;
    text-shadow: 0 2px 10px rgba(5,57,43,.58) !important;
}

/* Keep buttons readable in both text modes. */
.mcm11hero.mcm-copy-dark .mcm11actions a,
.mcm11hero.mcm-copy-dark .mcm11actions button,
.mcmx-hero.mcm-copy-dark .mcm11actions a,
.mcmx-hero.mcm-copy-dark .mcm11actions button {
    box-shadow: 0 8px 24px rgba(255,255,255,.24);
}


@media (max-width: 767px) {

    .mcm-final-hero-slide img {
        object-position: 64% center;
    }
    .mcm-final-hero-overlay {
        background: transparent !important;
    }

    .mcm-final-slider-arrow {
        top: auto;
        bottom: 10px;
        width: 34px;
        height: 34px;
        transform: none;
        font-size: 19px;
        opacity: .88;
    }

    .mcm-final-slider-arrow:hover {
        transform: scale(1.04);
    }

    .mcm-final-slider-prev {
        left: 10px;
    }

    .mcm-final-slider-next {
        right: 10px;
    }

    .mcm-final-slider-dots {
        bottom: 14px;
        gap: 5px;
        padding: 6px 8px;
    }

    .mcm-final-slider-dot {
        width: 7px;
        height: 7px;
    }

    .mcm-final-slider-dot.is-active {
        width: 20px;
    }
}

@media (max-width: 430px) {

    .mcm-final-hero-slide img {
        object-position: 68% center;
    }

    .mcm-final-slider-arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mcm-final-hero-slide,
    .mcm-final-hero-slide img,
    .mcm-final-slider-dot {
        transition: none !important;
        animation: none !important;
    }

    .mcm-final-hero-slide.is-active img {
        transform: scale(1.025);
    }
}