/************** BANNER *******************/
/*****************************************/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    .site-banner {
        width: 100%;
        min-height: 22rem;
        padding:
            clamp(10.5rem, 30vw, 11.5rem)
            1rem
            clamp(6rem, 18vw, 7rem);
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
    }

    .site-banner__container {
        text-align: left;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        padding: 0 0.25rem;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
        z-index: 3;
    }

    .site-banner__title {
        font-size: clamp(2.125rem, 10vw, 3rem);
        font-weight: 900;
        line-height: 1.1em;
        letter-spacing: -0.02em;
        max-width: 100%;
        margin: 0;
        padding: 0 0 1.25rem;
        color: var(--textLight);
        position: relative;
    }

    .site-banner__title::after {
        content: "";
        width: clamp(3rem, 8vw, 4.5rem);
        height: 0.1875rem;
        border-radius: 5rem;
        background-color: var(--lightAccentColor);
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .site-banner__background {
        width: 100%;
        height: 100%;
        background:
            radial-gradient(
                circle at 82% 22%,
                rgba(255, 255, 255, 0.07),
                transparent 24rem
            ),
            linear-gradient(
                115deg,
                var(--primaryDark) 0%,
                #0d4b3b 60%,
                #175b49 100%
            );
        position: absolute;
        inset: 0;
        z-index: -2;
    }

    .site-banner__background::after {
        content: "";
        width: clamp(15rem, 30vw, 26rem);
        aspect-ratio: 1;
        border: 1px solid rgba(255, 255, 255, 0.045);
        border-radius: 50%;
        position: absolute;
        top: -10rem;
        right: -7rem;
        pointer-events: none;
    }

    .site-banner__wave {
        width: 48rem;
        height: 3.5rem;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -2px;
        z-index: 1;
        transform: translateX(-50%);
    }

    .site-banner__wave path {
        fill: #fff;
    }

    .site-banner__birds {
        display: none;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    .site-banner {
        min-height: 27rem;
        padding:
            clamp(11rem, 18vw, 12.5rem)
            2rem
            clamp(7rem, 12vw, 8.5rem);
    }

    .site-banner__container {
        padding: 0;
    }

    .site-banner__title {
        font-size: clamp(2.75rem, 6vw, 3.8125rem);
        max-width: 65%;
    }

    .site-banner__wave {
        width: 100%;
        height: clamp(4.5rem, 7vw, 6rem);
        left: 0;
        transform: none;
    }

    .site-banner__birds {
        width: clamp(9rem, 15vw, 13rem);
        height: auto;
        fill: none;
        stroke: rgba(255, 255, 255, 0.11);
        stroke-width: 2;
        stroke-linecap: round;
        display: block;
        position: absolute;
        top: 38%;
        right: 2rem;
        z-index: 2;
        pointer-events: none;
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .site-banner {
        min-height: 29rem;
        padding:
            clamp(11.5rem, 14vw, 13rem)
            2rem
            clamp(7.5rem, 10vw, 9rem);
    }

    .site-banner__title {
        max-width: 60%;
    }

    .site-banner__wave {
        height: clamp(5rem, 6vw, 6.5rem);
    }

    .site-banner__birds {
        width: clamp(10rem, 14vw, 14rem);
        top: 36%;
        right: max(3rem, calc((100vw - 80rem) / 2));
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    .site-banner {
        min-height: 30rem;
    }

    .site-banner__wave {
        height: 6.5rem;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode .site-banner__background {
        background:
            radial-gradient(
                circle at 82% 22%,
                rgba(105, 191, 157, 0.09),
                transparent 24rem
            ),
            linear-gradient(
                115deg,
                var(--darkBanner) 0%,
                #0c2a21 60%,
                #12392d 100%
            );
    }

    body.dark-mode .site-banner__background::after {
        border-color: rgba(188, 228, 208, 0.055);
    }

    body.dark-mode .site-banner__title::after {
        background-color: var(--darkModeAccent);
    }

    body.dark-mode .site-banner__wave path {
        fill: var(--dark);
    }

    body.dark-mode .site-banner__birds {
        stroke: rgba(188, 228, 208, 0.12);
    }
}