@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


#app {
    --secondary-font: "Roboto", sans-serif;
    --accent-color: var(--tertiary-color, #831517);
    --section-header-font-size: 48px;
    --section-header-font-size-smaller: 40px;

    @media (max-width: 1499px) {
        --section-header-font-size: 40px;
        --section-header-font-size-smaller: 32px;
    }

    @media (max-width: 1199px) {
        --section-header-font-size: 36px;
        --section-header-font-size-smaller: 32px;
    }

    @media (max-width: 959px) {
        --section-header-font-size: 32px;
        --section-header-font-size-smaller: 28px;
    }

    .see-all-button {
        border-radius: 15px;

        @media (max-width: 959px) {
            flex-grow: unset;
        }
    }

    .see-all-container.monterrey.see-all-top {
        .header-slot-container {
            h1 {
                font-size: var(--section-header-font-size);
            }
        }
    }

    .header-slot-container {


        h1,
        h2,
        h3 {
            font-family: var(--secondary-font);
            font-weight: 900;
        }
    }

    @media (max-width: 1119px) {

        .monterrey-header-accent,
        .monterrey-header-accent-left {
            display: none;
        }

        .style-monterrey {
            .header-slot-container {

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


/* -------------------------------------- */
/* ------------ START HEADER ------------ */
/* -------------------------------------- */

#cms-header #h2 {

    /* Make the utilities bar full width */
    .utilities.utilities-right {
        display: none;
    }

    .utilities.utilities-top {
        display: flex;
    }

    .utilities.utilities-top .utility-bar-items {
        padding-block: 16px;
        align-items: center;
        row-gap: 5px;
    }

    .utilities.utilities-top .utility-bar-items .utilities {
        margin-top: 0;
        background-color: var(--bg-color);
        padding: 3px 12px;
        border-radius: 6px;
        transition: all .25s linear;

        @media (max-width: 767px) {
            padding: 3px 7px;
        }


        &:hover {
            background-color: color-mix(in srgb, var(--bg-color), #fff 5%);
        }
    }

    @media only screen and (max-width: 960px) {
        .utilities.utilities-top .utility-bar-items {
            padding-block: 7px;
            column-gap: 10px;
            padding-right: 10px;
        }

        .utilities.utilities-top .utility-bar-items a {
            font-size: 14px;
        }
    }

    @media (max-width: 599px) {
        .utilities.utilities-top .utility-bar-items a {
            font-size: 13px;
        }
    }

    /* END */

    .header-container {
        padding-top: 5px;
        padding-bottom: 5px;
        min-height: 95px;

        .right-menu-items {
            background-color: var(--utility-bg-color);
            padding: 20px 30px;
            border-radius: 20px;
            margin-right: 24px;
            box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);

            .right-left-menu {
                align-items: center;
            }

            .menu-field {
                color: var(--utility-link-color);
            }

            .button-action-content svg,
            .button-action-content svg path {
                fill: var(--utility-link-color);
            }

            .sign-in-button {
                transition: all .25s linear;

                &:hover {
                    background-color: color-mix(in srgb, var(--bg-color), #fff 5%);
                }
            }
        }
    }

    #schools-menu-sm1 {
        margin-top: unset;
        top: 100%;
    }

    #languagesmenu {
        margin-top: 5px;
        top: 100%;
    }

    .mobile-header {
        padding: 15px 15px 20px 15px;
        flex-direction: row-reverse;
        align-items: center;

        .main-content {
            height: unset;

            .logo {
                margin-bottom: unset;
            }

            .school-info {
                display: none;
            }
        }

        .left-icon {
            position: static;
            margin-left: auto;
            margin-right: unset;
            transform: unset;
        }

        #mainmenu {
            padding-top: 25px;
        }
    }
}


#cms-header .button-action.search {
    margin-right: 0;
}

#view-header #mainmenu {
    .generated-links {
        .col {
            border-right-color: red !important;
            border-right-width: 3px !important;
        }
    }
}

body:not(.design-sandbox-district, .weber-school-district) {
    #cms-header #h2 {
        .header-container {
            .logo {
                height: 85px;
            }
        }
    }
}

/* -------------------------------------- */
/* ------------ END HEADER -------------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* ------------ START Gallery ----------- */
/* -------------------------------------- */

#cms-gallery {
    #g2 {
        .glightbox {
            position: absolute;
            right: 8.5%;
            bottom: 105px;
            z-index: 2;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 600;
            display: flex;
            align-items: center;
            column-gap: 10px;

            @media (max-width: 1280px) {
                bottom: 20px;
                right: 80px;
            }

            @media screen and (max-width: 960px) {
                display: none;
            }

            &:after {
                content: '';
                display: block;
                width: 20px;
                height: 20px;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' %3E%3Cg%3E%3Cpath d='M104 72h48a24 24 0 0 0 24-24 24 24 0 0 0-24-24H48a24 24 0 0 0-24 24v104a24 24 0 0 0 48 0v-48l116 116a22.627 22.627 0 0 0 32 0 22.627 22.627 0 0 0 0-32zM220 292a22.627 22.627 0 0 0-32 0L72 408v-48a24 24 0 0 0-48 0v104a24 24 0 0 0 24 24h104a24 24 0 0 0 24-24 24 24 0 0 0-24-24h-48l116-116a22.627 22.627 0 0 0 0-32zM464 24H360a24 24 0 0 0-24 24 24 24 0 0 0 24 24h48L292 188a22.627 22.627 0 0 0 0 32 22.627 22.627 0 0 0 32 0l116-116v48a24 24 0 0 0 48 0V48a24 24 0 0 0-24-24zM464 336a24 24 0 0 0-24 24v48L324 292a22.627 22.627 0 0 0-32 0 22.627 22.627 0 0 0 0 32l116 116h-48a24 24 0 0 0-24 24 24 24 0 0 0 24 24h104a24 24 0 0 0 24-24V360a24 24 0 0 0-24-24z' %3E%3C/path%3E%3C/g%3E%3C/svg%3E");
                mask-size: contain;
                mask-position: center;
                background-color: currentColor;
            }
        }

        .position {
            margin-left: 50px;
        }
    }
}

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

/* -------------------------------------- */
/* ------------ START Buttons ----------- */
/* -------------------------------------- */

.view-container:has(#buttons-b3) .homepage-component {
    background-color: #F1F1F1;
}

#buttons-b3 {
    .button {
        --button-bg-color: var(--primary-color);
        --icon-and-text-color: var(--primary-color-contrast);
        transition: all .25s linear;

        .button-link {
            display: block;
            width: 100%;
            height: 100%;
            transition: all .25s linear;
        }

        &:has(.button-link:hover) {
            --button-bg-color: var(--secondary-color);
            --icon-and-text-color: var(--secondary-color-contrast);

            @media (min-width: 600px) {
                transform: scale(1.04);
            }
        }
    }
}

/* -------------------------------------- */
/* ----------- START Buttons ------------ */
/* -------------------------------------- */



/* -------------------------------------- */
/* ------------- START NEWS ------------- */
/* -------------------------------------- */

#home #news-n1 {
    .news-content {
        --custom-news-story-bg: var(--primary-color);
        --article-title-color: var(--primary-color-contrast);

        @media (max-width: 1499px) {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .story {
        .news-title {
            padding-top: 25px;
            padding-bottom: 25px;
        }

        .news-image {
            .image-hidden-wrapper {
                border-bottom: 8px solid var(--news-accent-border-color);
            }
        }
    }
}

/* -------------------------------------- */
/* -------------- END NEWS -------------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* ------------ START EVENTS ------------ */
/* -------------------------------------- */

#app #home #events-e2 {
    @media (max-width: 1699px) {
        padding-left: 25px;
        padding-right: 25px;
    }

    .monterrey-header-accent {
        width: 100px;

        @media (max-width: 1499px) {
            width: 60px;
        }
    }

    .events-card {
        .events-date-and-time {
            .events-date {
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        @media (min-width: 960px) {
            @media (max-width: 1499px) {
                &:nth-child(n+6) {
                    display: none;
                }
            }

            @media (max-width: 1199px) {
                &:nth-child(n+5) {
                    display: none;
                }
            }
        }
    }
}

/* -------------------------------------- */
/* ------------- END EVENTS ------------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* ----------- START Live FEED ---------- */
/* -------------------------------------- */

.live-feed-lf8 {
    .wrapper {
        position: relative;
        isolation: isolate;

        &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 60%;
            bottom: 0;
            left: 0;
            z-index: -1;
            background: linear-gradient(180deg, #FFF 26.44%, #C9CBCB 100%);
        }
    }
}

/* -------------------------------------- */
/* ------------ END Live FEED ----------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* ------------ START Values ------------ */
/* -------------------------------------- */

#home #values-weber {
    position: relative;
    isolation: isolate;
    padding-bottom: 100px;
    color: var(--primary-color-contrast);
    overflow: hidden;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(95deg, color-mix(in srgb, var(--primary-color), transparent 10%) 20.38%,
            color-mix(in srgb, var(--primary-color), transparent 15%) 48.99%,
            color-mix(in srgb, var(--secondary-color), transparent 15%) 86.65%,
            color-mix(in srgb, var(--secondary-color), #000 15%) 100%);

    &:after {
        content: '';
        display: block;
        position: absolute;
        aspect-ratio: 1/1;
        height: 80%;
        left: -5%;
        bottom: -10%;
        background-image: var(--watermark-url);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        @media (max-width: 1499px) {
            opacity: .5;
        }

        @media (max-width: 767px) {
            opacity: .25;
            max-width: 90%;
        }
    }

    &:before {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        background-image: url(https://cmsv2-shared-assets.apptegy.net/Schools/Weber-School-District-5017/images/weber-graduates.jpeg);
        background-attachment: fixed;
        opacity: .125;
    }

    .values-weber-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;

        .values-weber-image {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            /* transform: translateZ(0); */
            /* contain: paint; */

            &:after {
                content: '';
                display: block;
                position: absolute;
                inset: 0;
                background: linear-gradient(95deg, color-mix(in srgb, var(--primary-color), transparent 10%) 20.38%,
                        color-mix(in srgb, var(--primary-color), transparent 15%) 48.99%,
                        color-mix(in srgb, var(--secondary-color), transparent 15%) 86.65%,
                        color-mix(in srgb, var(--secondary-color), #000 15%) 100%);
            }

            img {
                opacity: .6;
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                object-fit: cover;
                z-index: -2;
            }
        }

    }


    .values-list {
        display: inline-flex;
        flex-direction: column;
        position: relative;
        z-index: 2;
        padding-top: 50px;
        padding-bottom: 50px;

        &>div {
            display: flex;

            .value-item {
                display: inline-flex;
                align-items: center;
                font-size: 36px;
                max-width: 100%;
                margin-top: .5em;
                margin-bottom: .5em;

                @media (max-width: 1699px) {
                    font-size: 32px;
                }

                @media (max-width: 959px) {
                    font-size: 28px;
                }

                @media (max-width: 767px) {
                    font-size: 24px;
                }

                @media (max-width: 599px) {
                    font-size: 20px;
                    flex-wrap: wrap;
                    text-align: center;
                }

                .value-item-subtitle {
                    font-weight: 900;
                    font-family: var(--secondary-font);
                    font-size: 1.4em;

                    @media (max-width: 599px) {
                        display: block;
                        width: 100%;
                    }
                }

                .value-item-title {
                    font-weight: 300;
                    font-style: italic;
                    padding-left: 10px;

                    @media (max-width: 599px) {
                        display: block;
                        width: 100%;
                        margin-top: .5em;
                        padding-left: unset;
                    }
                }
            }
        }
    }
}

/* -------------------------------------- */
/* ------------- END Values ------------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* -------- START Custom Buttons -------- */
/* -------------------------------------- */

#custom-buttons-v9 {
    --button-text-color: var(--primary-color);
    width: 1200px;
    max-width: calc(100% - 64px);
    box-shadow: 5px 4px 10px 5px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    background: linear-gradient(180deg, #FFF 26.44%, #C9CBCB 100%);
    margin-top: -100px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    @media (max-width: 599px) {
        max-width: calc(100% - 40px);
    }

    .custom-buttons-v9-wrapper {
        @media (max-width: 767px) {
            padding-left: unset;
            padding-right: unset;
        }
    }

    .header-slot-container {
        h2 {
            font-size: var(--section-header-font-size);
        }
    }

    .button-group {
        margin-top: 40px;

        .button-item {
            border-color: var(--secondary-color);
            background-color: var(--secondary-color);
            color: var(--secondary-color-contrast);
            font-weight: 500;
            text-align: center;

            .button-text {
                margin-left: auto;
                margin-right: auto;
            }

            &:has(a:hover) {
                border-color: color-mix(in srgb, var(--secondary-color), #000 15%);
                background-color: color-mix(in srgb, var(--secondary-color), #000 15%);
            }
        }
    }
}

/* -------------------------------------- */
/* --------- END Custom Buttons --------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* ------- START Videos/Spotlight ------- */
/* -------------------------------------- */

#app #home #section-story-slider {
    --arrow-bg-color: var(--accent-color);
    --arrow-color: #fff;

    padding: 0;

    .see-all-container.see-all-top {
        border-radius: 0;
        background: unset;

        @media (max-width: 599px) {
            padding-left: 20px;
            padding-right: 20px;
        }

        .header-slot-container {
            .intro {
                @media (max-width: 767px) {
                    font-size: 16px;

                    p {
                        font-size: inherit;
                    }

                }

                @media (max-width: 360px) {
                    font-size: 15px;
                }
            }
        }

        .image {
            opacity: 1;

            span {
                /* display: block; */

                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(95deg, color-mix(in srgb, var(--primary-color), transparent 10%) 20.38%,
                            color-mix(in srgb, var(--primary-color), transparent 15%) 48.99%,
                            color-mix(in srgb, var(--secondary-color), transparent 15%) 86.65%,
                            color-mix(in srgb, var(--secondary-color), #000 15%) 100%);
                }
            }
        }
    }

    .videos-section-wrapper {
        padding-bottom: 100px;

        @media (max-width: 1499px) {
            padding-bottom: 80px;
        }

    }
}

/* -------------------------------------- */
/* -------- END Videos/Spotlight -------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* -------- START By The Numbers -------- */
/* -------------------------------------- */

#app #home #by-the-numbers-v2 {
    position: relative;
    --section-text-color: var(--primary-color);

    @media (max-width: 1199px) {
        padding-top: 3em;
    }

    @media (max-width: 767px) {
        padding-top: 1em;
    }

    &:before {
        display: none;
    }

    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 60%;
        bottom: 0;
        left: 0;
        top: unset;
        z-index: -1;

        background: linear-gradient(180deg, #FFF 26.44%, #C9CBCB 100%);
    }

    .header-slot-container {
        margin-left: auto;
        margin-right: auto;

        h2 {
            font-size: var(--section-header-font-size);
        }

        &:after {
            width: 48px;
        }

        &:before,
        &:after {
            background-color: var(--accent-color);
        }
    }

    .by-the-numbers {
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
    }

    .by-the-numbers-wrapper {
        grid-template-columns: repeat(4, 1fr);

        @media (max-width: 959px) {
            grid-template-columns: repeat(2, 1fr);
        }


        &>div {
            font-size: 30px;
            padding-left: 10px;
            padding-right: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            @media (max-width: 1700px) {
                font-size: 25px;
            }

            @media (max-width: 1499px) {
                font-size: 22px;
            }

            @media (max-width: 1199px) {
                font-size: 20px;
            }

            @media (max-width: 599px) {
                font-size: 16px;
            }

        }

        .btn-value {
            font-size: 2em;
            margin-top: unset;
        }

        .btn-title {
            font-weight: 700;
            padding-left: 0;
            padding-right: 0;
        }

        .btn-link {
            display: block;
            font-size: .75em;
            font-style: italic;
            text-align: center;
            position: relative;

            &:before {
                content: '';
                display: block;
                width: 100px;
                height: 3px;
                background-color: var(--accent-color);
                margin-left: auto;
                margin-right: auto;
                margin-top: .75em;
                margin-bottom: .75em;
            }

            a {
                color: inherit;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

/* -------------------------------------- */
/* --------- END By The Numbers --------- */
/* -------------------------------------- */




/* -------------------------------------- */
/* ------------ START Footer ------------ */
/* -------------------------------------- */

#cms-footer {
    background: linear-gradient(103deg, var(--primary-color) 6.59%, var(--secondary-color) 91.31%);



    #footer-f1 {
        --separator-color: var(--accent-color);
        overflow: hidden;

        @media (max-width: 599px) {
            padding-top: 40px;
        }

        &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: -7.5%;
            right: -2.5%;
            width: 400px;
            aspect-ratio: 1/1;
            background-image: var(--watermark-url);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            filter: brightness(0) invert(1);
            z-index: -1;
            opacity: .25;
        }

        .footer-column-main {
            .image-container {
                max-width: 200px;

                @media (max-width: 599px) {
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

        .custom-footer-login {
            display: inline-block;
            padding: 16px 52px;
            background: var(--primary-color);
            color: #fff;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 700;
            text-decoration: none;
        }

        .custom-footer-login:hover,
        .custom-footer-login:focus {
            text-decoration: none;
        }

        .apptegy-copyright {
            margin-top: 30px;
            margin-bottom: 30px;
        }
    }
}


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



/* ------------------------------------------------------ */
/* --- START Schools By The Numbers + Video Spotlight --- */
/* ------------------------------------------------------ */

#app #home .main:has(.video-stories-section-v1 .video-stories-modified) {

    .view-container {
        clip-path: inset(0);

        &:after {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            background: linear-gradient(95deg,
                    color-mix(in srgb, var(--primary-color), transparent 10%) 20.38%,
                    color-mix(in srgb, var(--primary-color), transparent 15%) 48.99%,
                    color-mix(in srgb, var(--secondary-color), transparent 15%) 86.65%,
                    color-mix(in srgb, var(--secondary-color), #000 15%) 100%);
        }
    }

    .half-sidebar.first {
        position: relative;
        z-index: 3;

        #by-the-numbers-v2 {
            padding-top: 3em;
            padding-bottom: 3em;
            --section-text-color: #fff;

            @media (max-width: 959px) {
                background-color: var(--primary-color);
            }

            &:after {
                display: none;
            }

            .header-slot-container {
                h2 {
                    font-size: var(--section-header-font-size-smaller);
                }
            }

            .by-the-numbers-wrapper {
                grid-template-columns: repeat(2, 1fr);
                margin-top: 20px;

                &>div {
                    margin-top: 0.75em;
                    margin-bottom: .75em;

                    .btn-title {
                        margin-top: .25em;
                    }
                }
            }
        }
    }

    .half-sidebar {

        .see-all-container {
            position: static;
            padding: 0;
            min-height: unset;
            background: transparent;

            .header-top {
                display: none;
            }

            .header-bottom {
                margin-top: 0;
                margin-bottom: 0;
            }

            .header-slot-container {
                margin-bottom: 0;
                padding-bottom: 0;

                h2 {
                    font-size: var(--section-header-font-size-smaller);
                }
            }

            .image {
                z-index: -4;
                opacity: .4;
                position: fixed;
                top: 0;
                left: 0;
            }
        }

        .video-stories-section-v1 {
            background: transparent;
            padding-top: 3em;
            padding-bottom: 3em;

            @media (max-width: 599px) {
                padding-left: 0;
                padding-right: 0;
            }

            .header-slot-container {
                flex-direction: row;
                justify-content: center;

                &:before,
                &:after {
                    width: 48px;
                    display: flex;
                    background-color: var(--accent-color);
                }


                .intro {
                    display: none;
                }

            }

            .videos-section-wrapper {
                padding-left: 36px;
                padding-right: 36px;
                margin-top: 25px;
                max-width: 600px;
                overflow: hidden;
                margin-left: auto;
                margin-right: auto;

                @media (max-width: 599px) {
                    padding-left: 30px;
                    padding-right: 30px;
                }
            }

            #slider-story {
                width: 100%;

                margin-top: unset;
                --columns: 1;

                .video-stories-slides {
                    .swiper-slide {
                        /* min-height: 400px; */

                        .content {
                            min-height: 400px;

                            @media (max-width: 1499px) {
                                min-height: 350px;
                            }
                        }


                        &:not(.swiper-slide-active) {
                            opacity: 0;
                        }
                    }
                }
            }

        }
    }
}

/* ------------------------------------------------------ */
/* ---- END Schools By The Numbers + Video Spotlight ---- */
/* ------------------------------------------------------ */