body.colorado-river-union-high-school-district {
    --tertiary-color: #046A38;
    --tertiary-color-contrast: #FFFFFF;
    --quaternary-color: #D32018;
    --quaternary-color-contrast: #FFFFFF;
}

body {
    --tertiary-color: var(--primary-color);
    --tertiary-color-contrast: var(--primary-color-contrast);
    --quaternary-color: var(--primary-color);
    --quaternary-color-contrast: var(--primary-color-contrast);
}

/* General font */
#app,
body,
html,
#cms-header .m4--menu-item,
.m4--menu-item-focusable .m4--menu-item-link,
.m4--menu-item-text,
.m4--menu-item-focusable {
    font-family: Inter, sans-serif !important;
}

/* Font for the section headers/titles, footer headers */
#app h1,
#app .see-all-container h2,
#cms-footer h2 {
    font-family: Cabin, serif !important;
}

/* ========== START - Custom Header v5 edits ========== */

@media only screen and (min-width: 1024px) {

    /*fix with menu v4 dropdowns */
    #cms-header .m4-menu--drawer .m4-menu--drawer-content-wrapper {
        border-radius: 0px 0px var(--custom-header-v5-border-radius, 20px) var(--custom-header-v5-border-radius, 20px);
    }

    #cms-header #m4 #more-menu-dropdown .m4-menu--drawer {

        &,
        .m4-menu--drawer-content-wrapper {
            border-radius: 20px;
            max-width: 300px;
            z-index: 9;
            top: 0;
        }
    }

    /*fix with menu v4 dropdowns */

    #app #cms-header #h1 .right {
        border-top-right-radius: unset;
        border-bottom-right-radius: unset;
        margin-right: 180px;
    }

    #app #cms-header .sign-in-button {
        position: absolute;
        padding: 20px 30px;
        margin-right: -160px;
        font-weight: 800;
        border-top-left-radius: unset;
        border-bottom-left-radius: unset;
        border-top-right-radius: var(--custom-header-v5-border-radius, 20px);
        border-bottom-right-radius: var(--custom-header-v5-border-radius, 20px);
    }
}

/* ========== END - Custom Header v5 edits ========== */

/* ========== START - Gallery ========== */
#cms-gallery .text {
    display: none;
}

@media only screen and (min-width: 960px) {

    #app #home #cms-gallery .pause,
    #app #home #cms-gallery .play {
        left: 169px;
        right: 25px;
    }
}

/* ========== END - Gallery ========== */

/* ========== START - Custom Button Bar V3 ========== */
#home #buttons-b3 .wrapper {
    --custom-button-border-color: #16A0D4;
}

body.mohave-high-school #home #buttons-b3 .wrapper {
    --custom-button-border-color: #9E8F38;
}

body.river-valley-high-school #home #buttons-b3 .wrapper {
    --custom-button-border-color: #333333;
}


#home .homepage-component:has(#buttons-b3) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-color) 66%, transparent) 0%, color-mix(in srgb, var(--secondary-color) 0%, transparent) 100%);
}

/* ========== END - Custom Button Bar V3 ========== */

/* ========== START - Custom Video V2 edits ========== */
#app #home #view-video #video-component:has(.wrapper) .see-all-container {
    display: flex;
}

#home #view-video #video-component .wrapper {
    padding: 5em;
    width: unset;
}

@media only screen and (min-width: 600px) {
    #app #home #view-video .header-slot-container {
        border-right: 4px solid var(--quaternary-color);
        padding-right: 24px;

        h2 {
            padding-right: unset;
        }
    }

    body:not(.colorado-river-union-high-school-district) #app #home #view-video .header-slot-container {
        border-color: var(--secondary-color);
    }
}

#app #home #view-video #video-component .wrapper .video:before,
#app #home #view-video #video-component .wrapper .video:after {
    display: none;
}

#app #home #view-container:has(#view-video) {
    background: none;
}

@media only screen and (max-width: 959px) {
    #app #home #view-container .homepage-component:has(#view-video) {
        background: none;
    }
}

#app #home #view-video #video-component:has(.wrapper) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--quaternary-color) 0%, transparent) 0%, color-mix(in srgb, var(--quaternary-color) 20%, transparent) 100%);
}

#home #view-video #video-component .wrapper .video .video-player {
    border-radius: 15px;
    box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}

/* ========== END - Custom Video V2 edits ========== */

/* ========== START - Custom Live Feed v10 edits ========== */
#app .custom-live-feed-v10 {
    --custom-live-feed-v10-text-color: var(--primary-color);
    --custom-live-feed-v10-background-color: linear-gradient(180deg, color-mix(in srgb, var(--secondary-color) 5%, transparent) 0%, color-mix(in srgb, var(--secondary-color) 25%, transparent) 100%);
    --custom-live-feed-v10-item-bg-color: #F8F8F8;
    --custom-live-feed-v10-dot-color: var(--primary-color);
    --custom-live-feed-v10-arrow-color: var(--primary-color);

    background: var(--custom-live-feed-v10-background-color);

    & .lf-item {
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    }
}

/* ========== END - Custom Live Feed v10 edits ========== */

/* ========== START - Custom News v2 edits ========== */
#app #news-n6 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tertiary-color) 5%, transparent) 50%, color-mix(in srgb, var(--tertiary-color) 25%, transparent) 100%);

    & .story {
        background: var(--tertiary-color-contrast);
    }
}

/* ========== END - Custom News v2 edits ========== */

/* ========== START - Custom Events v20 edits ========== */
#home .events-e6 {
    --custom-events-bg-image: url("https://cmsv2-shared-assets.apptegy.net/Schools/Colorado-River-Union-High-School-District-5856/images/Events.png");

    &:after {
        background-image: var(--custom-events-bg-image);
    }

    &:before {
        background: linear-gradient(270deg, color-mix(in srgb, var(--quaternary-color) 0%, transparent) 0%, color-mix(in srgb, var(--quaternary-color) 15%, transparent) 100%);
    }

    & .details {
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    }
}

body.colorado-river-union-high-school-district #home .events-e6,
body.river-valley-high-school #home .events-e6 {
    --custom-events-bg-image: url("https://cmsv2-shared-assets.apptegy.net/Schools/Colorado-River-Union-High-School-District-5856/images/EventsBG2.JPG");
}

body.mohave-high-school #home .events-e6 {
    --custom-events-bg-image: url("https://cmsv2-shared-assets.apptegy.net/Schools/Colorado-River-Union-High-School-District-5856/images/EventsBG3.jpg");
}

/* ========== END - Custom Events v20 edits ========== */

/* ========== START - Custom Spotlight V2 edits ========== */
@media only screen and (min-width: 600px) {
    #home #custom-spotlight-v2 .header-slot-container {
        color: var(--primary-color);
        border-right: 4px solid var(--secondary-color);
        width: inherit;
    }
}

#app #home #custom-spotlight-v2 {
    --bottom-bar-bg-color: linear-gradient(0deg, var(--secondary-color) 15.65%, color-mix(in srgb, var(--secondary-color) 80%, transparent) 90%, color-mix(in srgb, var(--secondary-color) 0%, transparent) 100%);
    --bottom-bar-text-color: var(--secondary-color-contrast);

    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-color) 5%, transparent) 0.05%, color-mix(in srgb, var(--secondary-color) 50%, transparent) 78.36%);

    & .custom-spotlight-v2-list-area::after {
        background: var(--bottom-bar-bg-color);
    }

    & .custom-spotlight-v2-item-button {
        background-color: #FFF;
        border-color: #FFF;
        border-radius: 20px;

        &:hover {
            background-color: var(--secondary-color);
            color: var(--secondary-color-contrast);
            border-color: var(--secondary-color-contrast);
        }
    }
}

body.river-valley-high-school #app #home #custom-spotlight-v2 .custom-spotlight-v2-item-button {
    color: var(--secondary-color);

    &:hover {
        color: var(--secondary-color-contrast);
    }
}

/* ========== END - Custom Spotlight V2 edits ========== */

/* ========== START - Custom Stats v2 edits ========== */
#app #by-the-numbers-v2 {
    background: linear-gradient(174.8deg, var(--tertiary-color-contrast) 44.04%, color-mix(in srgb, var(--tertiary-color) 60%, transparent) 136.62%);

    &:after,
    &:before {
        display: none;
    }

    & .header-slot-container {
        color: var(--primary-color);
        border-color: var(--tertiary-color);
    }

    & .by-the-numbers-wrapper>div {
        background: var(--tertiary-color);
        border-radius: 29px;
        opacity: 62%;
        padding-top: 15px;
        padding-bottom: 15px;

        & .btn-value {
            margin-top: unset;
        }

        & .btn-icon span {
            border: none;
        }
    }
}

body:not(.colorado-river-union-high-school-district) #app #by-the-numbers-v2 .header-slot-container {
    border-color: var(--secondary-color);
}

/* ========== END - Custom Stats v2 edits ========== */

/* ========= START - Footer ========= */
#cms-footer #footer-f3 .image-area {
  display: none;
}

@media only screen and (min-width: 1600px) {
  #cms-footer #footer-f3 .layout-cols-3.with-image .columns-wrapper {
    width: calc(100% - 40px);
  }
}

/* ========= END - Footer ========= */