/* Font */
* {
    font-family: Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    overflow-x: hidden !important;
}

#cms-footer,
nav.breadcrumb,
.alert-container,
#home,
#cms-gallery,
#staff,
#documents,
#menu-list,
#athletics,
#live-feed,
.event-cal,
#page {
    display: none !important;
}

.main#container {
    padding-top: 80px;
}

/* HEADER */
#cms-header #h1 {
    background: #ffffff;
    position: absolute;
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;

    .header-container {
        background: transparent;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        box-shadow: 1px 1px 10px 1px #ccc;
    }

    .left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: calc(100% - 70px);

        .school-info {
            padding-bottom: 0;

            .name {
                padding-top: 0;

                .org-name {
                    font-family: Merriweather, Georgia, serif !important;
                    display: block;
                    font-size: 20px;
                    font-weight: 700;
                    color: #000000;
                    text-decoration: none;
                    text-transform: uppercase;
                    text-align: left;
                    text-box-trim: trim-both;
                    white-space: normal;
                }

                .slogan {
                    font-family: Roboto, sans-serif;
                    display: block;
                    font-size: 20px;
                    font-weight: 400;
                    color: #000000;
                    text-transform: uppercase;
                    text-align: left;
                    text-box-trim: trim-both;
                }
            }

            @media (max-width: 600px) {
                .org-name,
                .slogan {
                    font-size: 16px !important;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }

        .logo {
            margin: 0;
            user-select: none;
            pointer-events: none;
            height: auto;

            img {
                box-sizing: border-box;
                aspect-ratio: auto;
                object-fit: contain;
                max-height: 60px;

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

        @media (max-width: 600px) {
            &:not(:has(.org-name)) {
                .logo img {
                    min-width: 100px;
                    max-width: 100%;
                }
            }
        }
    }

    .right {
        justify-content: flex-end;
        padding: 0;
        max-width: 70px;

        .right-left-menu {
            display: none;
        }

        .right-right-menu {
            display: flex;
            width: 100%;

            #searchbutton {
                display: none;
            }

            div:has(#languagebutton) {
                border-radius: 50px;
            }

            #languagebutton {
                background-color: var(--primary-color);
                border-radius: 50px;
                padding: 5px 10px;

                span.menu-field {
                    display: none;
                }

                &::before {
                    background: var(--primary-color-contrast);
                    content: close-quote;
                    display: block;
                    -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20205%20205%27%3E%3Cpath%20fill%3D%27%23fefefe%27%20d%3D%27m132%207%201.929.633c25.672%208.633%2045.106%2027.37%2057.54%2051.18%2011.316%2023.735%2013.213%2051.416%204.783%2076.402-9.518%2025.557-28.035%2046.957-52.88%2058.542A147%20147%200%200%201%20132%20198l-3.742%201.253c-18.403%205.51-40.1%204.83-58.258-1.253l-1.929-.634c-25.672-8.632-45.106-27.37-57.54-51.179C-.785%20122.451-2.682%2094.77%205.748%2069.784c9.518-25.557%2028.035-46.957%2052.88-58.542A147%20147%200%200%201%2070%207l3.742-1.254C92.145.237%20113.843.916%20132%207m-11%203c-2.065%206.968-2.125%2013.331-1.662%2020.527.147%204.158-.044%206.658-2.736%209.946-3.998%203.884-7.355%204.81-12.7%205.867-2.343.813-3.392%201.698-4.902%203.66-1.006%206.341-.065%209.265%203.5%2014.562%204.164%206.5%204.043%2011.327%203.551%2018.773-.052%203.757.647%206.18%201.95%209.664.352%205.555-.247%209.74-2%2015%205.352-.973%2010.433-1.956%2015-5%206.787-.683%2013.587-.375%2020%202%201.5%202.125%201.5%202.125%202%204l3-1%201-2c13.964-.688%2013.964-.688%2017.75%201.813%202.688%202.613%204.141%204.268%204.585%208.043.118%2010.005-1.544%2014.99-8.086%2022.395-4.697%205.584-6.752%2011.798-9.233%2018.552-2.233%205.842-4.596%209.66-9.435%2013.745-1.862%201.5-1.862%201.5-2.832%204.578.333%203.826%201.91%205.896%204.25%208.875%2018.746-7.075%2033.69-25.35%2042-43%205.374-12.787%208.384-24.767%208.313-38.688l-.017-3.501c-.368-25.836-11.561-47.535-29.233-66.061-4.3-4.173-9.046-7.496-14.062-10.75l-2.297-1.559c-5.118-3.306-10.402-5.661-16.078-7.816l-2.092-.797C127.119%2010.583%20124.684%2010%20121%2010M24%2048C9.567%2069.056%203.899%2094.454%208.524%20119.538%2012.514%20138.955%2021.991%20155.15%2036%20169l2.43%202.46c18.024%2017.316%2042.488%2024.213%2066.96%2023.743%202.995-.169%205.702-.504%208.61-1.203-.363-3.628-.676-6.433-2.5-9.625-2.784-6.264-2.769-13.552-2.125-20.312-.037-3.048-.037-3.048-1.86-4.426l-1.89-1.387c-3.431-2.58-4.263-4.467-5-8.687A207%20207%200%200%201%20100%20144q-.303-2.094-.625-4.187L99%20137h3l-.289-2.082-.336-2.73-.351-2.707C101%20127%20101%20127%20103%20124c.243-3.434.243-3.434.125-7.188l-.055-3.856L103%20110l-1.906-.078C95.029%20109.52%2089.949%20108.697%2085%20105a102%20102%200%200%201-2.414-4.097c-2.037-2.805-3.037-3.766-6.44-4.615-3.445-.228-6.82-.246-10.27-.163q-3.505.015-7.008.008l-3.122.06c-2.832-.2-4.404-.616-6.746-2.193-2.405-4.811-2.154-8.906-1-14l1.063-2.625c1.22-3.092%201.41-5.072.937-8.375-1.489-2.207-3.197-4.021-5-6l-1-3c-3.965-2.065-7.347-3.08-11.75-3.75-3.884-.754-3.884-.754-5.488-2.93-.824-1.945-.824-1.945-1.762-5.32z%27%2F%3E%3C%2Fsvg%3E);
                    mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20205%20205%27%3E%3Cpath%20fill%3D%27%23fefefe%27%20d%3D%27m132%207%201.929.633c25.672%208.633%2045.106%2027.37%2057.54%2051.18%2011.316%2023.735%2013.213%2051.416%204.783%2076.402-9.518%2025.557-28.035%2046.957-52.88%2058.542A147%20147%200%200%201%20132%20198l-3.742%201.253c-18.403%205.51-40.1%204.83-58.258-1.253l-1.929-.634c-25.672-8.632-45.106-27.37-57.54-51.179C-.785%20122.451-2.682%2094.77%205.748%2069.784c9.518-25.557%2028.035-46.957%2052.88-58.542A147%20147%200%200%201%2070%207l3.742-1.254C92.145.237%20113.843.916%20132%207m-11%203c-2.065%206.968-2.125%2013.331-1.662%2020.527.147%204.158-.044%206.658-2.736%209.946-3.998%203.884-7.355%204.81-12.7%205.867-2.343.813-3.392%201.698-4.902%203.66-1.006%206.341-.065%209.265%203.5%2014.562%204.164%206.5%204.043%2011.327%203.551%2018.773-.052%203.757.647%206.18%201.95%209.664.352%205.555-.247%209.74-2%2015%205.352-.973%2010.433-1.956%2015-5%206.787-.683%2013.587-.375%2020%202%201.5%202.125%201.5%202.125%202%204l3-1%201-2c13.964-.688%2013.964-.688%2017.75%201.813%202.688%202.613%204.141%204.268%204.585%208.043.118%2010.005-1.544%2014.99-8.086%2022.395-4.697%205.584-6.752%2011.798-9.233%2018.552-2.233%205.842-4.596%209.66-9.435%2013.745-1.862%201.5-1.862%201.5-2.832%204.578.333%203.826%201.91%205.896%204.25%208.875%2018.746-7.075%2033.69-25.35%2042-43%205.374-12.787%208.384-24.767%208.313-38.688l-.017-3.501c-.368-25.836-11.561-47.535-29.233-66.061-4.3-4.173-9.046-7.496-14.062-10.75l-2.297-1.559c-5.118-3.306-10.402-5.661-16.078-7.816l-2.092-.797C127.119%2010.583%20124.684%2010%20121%2010M24%2048C9.567%2069.056%203.899%2094.454%208.524%20119.538%2012.514%20138.955%2021.991%20155.15%2036%20169l2.43%202.46c18.024%2017.316%2042.488%2024.213%2066.96%2023.743%202.995-.169%205.702-.504%208.61-1.203-.363-3.628-.676-6.433-2.5-9.625-2.784-6.264-2.769-13.552-2.125-20.312-.037-3.048-.037-3.048-1.86-4.426l-1.89-1.387c-3.431-2.58-4.263-4.467-5-8.687A207%20207%200%200%201%20100%20144q-.303-2.094-.625-4.187L99%20137h3l-.289-2.082-.336-2.73-.351-2.707C101%20127%20101%20127%20103%20124c.243-3.434.243-3.434.125-7.188l-.055-3.856L103%20110l-1.906-.078C95.029%20109.52%2089.949%20108.697%2085%20105a102%20102%200%200%201-2.414-4.097c-2.037-2.805-3.037-3.766-6.44-4.615-3.445-.228-6.82-.246-10.27-.163q-3.505.015-7.008.008l-3.122.06c-2.832-.2-4.404-.616-6.746-2.193-2.405-4.811-2.154-8.906-1-14l1.063-2.625c1.22-3.092%201.41-5.072.937-8.375-1.489-2.207-3.197-4.021-5-6l-1-3c-3.965-2.065-7.347-3.08-11.75-3.75-3.884-.754-3.884-.754-5.488-2.93-.824-1.945-.824-1.945-1.762-5.32z%27%2F%3E%3C%2Fsvg%3E);
                    block-size: 18px;
                    inline-size: 18px;
                    margin-inline: 0.25rem;
                    -webkit-mask-position: 50% 50%;
                    mask-position: 50% 50%;
                    mask-repeat: no-repeat;
                    -webkit-mask-size: 18px;
                    mask-size: 18px;
                    padding-left: 12px;
                }

                .button-action-content {
                    position: relative;

                    &::before {
                        content: "";
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        transform-origin: 50% 50%;
                        width: 0;
                        height: 0;
                        border-left: 6px solid transparent;
                        border-right: 6px solid transparent;
                        border-top: 8px solid var(--primary-color-contrast);
                        border-bottom: 0 solid transparent;
                        transition: all 0.5s ease-in-out;
                    }

                    &:has(svg path.open) {
                        &::before {
                            transform: translate(-50%, -50%) rotate(-180deg);
                        }
                    }

                    svg {
                        visibility: hidden;
                    }
                }
            }
        }
    }
}
/* END HEADER */

/* LANGUAGE DROPDOWN MENU */
div:has(> #languagebutton)::after {
    position: absolute;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 0;
    visibility: hidden;
    transition: all 0.55s ease-in-out;
    opacity: 0;
}

div:has(> #languagebutton):has(#languagesmenu)::after {
    z-index: 999;
    opacity: 1;
    visibility: visible;
}

#languagesmenu.dropdown-wrapper {
    box-sizing: border-box;
    border-radius: 20px;
    corner-shape: squircle;
    box-shadow: 1px 1px 10px 5px #ccc;
    overflow: hidden;
    max-width: calc(100% - 20px);

    .header {
        border-bottom: none;
    }

    .body .languages-container {
        min-height: 100px;
        max-height: 30dvh !important;

        .language-text {
            overflow: hidden;
            text-overflow: ellipsis;
            transition: height 3s ease 0s;
            white-space: pre;
            word-break: keep-all;
        }
    }
}
/* END LANGUAGE DROPDOWN MENU */

/* NEWS */
#app #news-article .page-container-item {
    --article-text-color: #525560;

    .article-info,
    .article-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .article-info {
        .title {
            font-weight: 900;
            text-transform: none;
        }
        p.author,
        p.date {
            color: var(--article-text-color);
        }
    }

    .article-content * {
        color: var(--article-text-color) !important;

        a * {
            color: var(--links-color) !important;
        }
    }

    .article-image {
        margin: 10px;
    }
}

@media (max-width: 960px) {
  #news-list .page-container-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;

    .article-image,
    .article-info {
      box-sizing: border-box;
      overflow: hidden;
      width: 100% !important;
      margin: 0;
    }
  }   
}
/* END NEWS */

/* START PAGINATION  */
#app .cms-pagination {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;

    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }
}
/* END PAGINATION  */