@import "vars.css";
@import "menu.css";
@import "grids.css";
@import "typography.css";
@import "homepage.css";
@import "animations.css";
@import "mod_articles.css";
@import "courses-layout.css";
@import "forms.css";
@import "offline.css";

html {
    scroll-padding-top: 100px
}

.jmodedit {
    display: none
}

body {
    &::before {
        position: absolute;
        content: '';
        inset: 0;
        background-image: url(/media/templates/site/cassiopeia_jbe_2026/images/elements/bgnoise.webp);
        filter: invert(50%);
        opacity: .15
    }
}

.fullWidth {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100vw;
    width: 100vw
}

.fullWidth-2 {
    margin-left: calc((-50vw + 100px) + 50%);
    margin-right: calc((-50vw + 100px) + 50%);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100vw;
    width: 100vw
}

.container-bottom-c {
    grid-area: bot-c
}

.container-bottom-d {
    grid-area: bot-d
}

.full-width {
    .moduletable {
        width: 100%
    }
}

.moduleTitle {
    margin-bottom: 1rem;

    span:nth-of-type(2) {
        font-size: var(--fs-size-0)
    }
}

.moduletable {
    h1, h2, h3, h4, h5, h6 {
        padding-left: 0
    }
}

.border-light {
    border: solid 1px var(--deco-lines)
}

.container-banner:has(.hasLetters) {
    .hasLetters {
        border-bottom: solid 1px var(--deco-lines)
    }
}

.row:has(.letters) {
    & > div {
        display: grid;
        place-content: center;

        &.hasLetters {
            .gridBox {
                display: flex;
                flex-direction: column;
                width: 100%
            }
        }
    }
}

.mod-custom-plus {
    p:last-of-type {
        margin-bottom: 0
    }

    .container {
        .col-md-6, .col-6 {
            &:nth-of-type(1) {
                padding-left: 0
            }
        }
    }
}

.mt-1 {
    margin-top: 1rem !important
}

.mt-2 {
    margin-top: 2rem !important
}

.mt-3 {
    margin-top: 3rem !important
}

.mt-4 {
    margin-top: 4rem !important
}

.curve-divider {
    width: 100%;
    margin-bottom: 30px;

    & > div {
        height: 1px;
        width: 100%;
        background: linear-gradient(90deg, rgb(32 62 150 / .6) 0%, rgb(32 62 150 / .3) 50%, rgb(32 62 150 / .6) 100%), #14141c
    }

    & > div:nth-of-type(1) {
        margin-bottom: 3px
    }

    & > div:nth-of-type(2) {
        margin-bottom: 4px;
        opacity: .9
    }

    & > div:nth-of-type(3) {
        margin-bottom: 5px;
        opacity: .8
    }

    & > div:nth-of-type(4) {
        margin-bottom: 6px;
        opacity: .7
    }

    & > div:nth-of-type(5) {
        margin-bottom: 7px;
        opacity: .6
    }

    & > div:nth-of-type(6) {
        margin-bottom: 8px;
        opacity: .5
    }

    & > div:nth-of-type(7) {
        margin-bottom: 9px;
        opacity: .4
    }

    & > div:nth-of-type(8) {
        margin-bottom: 10px;
        opacity: .3
    }

    & > div:nth-of-type(9) {
        opacity: .2
    }
}

a.btn, button, .readMoreBtn {
    border-radius: 0;
    color: var(--text-1);
    position: relative;

    &:hover, &:active {
        color: var(--text-1)
    }

    .button-inner {
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;
        height: inherit;
        white-space: nowrap;
        min-width: 0;
        gap: 10px;
        justify-content: center;

        .corner-lines-box {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: all;
            margin: 0px !important;

            &:hover {
                opacity: 1
            }

            .corner-lines {
                &.cl-top-left::before {
                    transform: translate(0, 0);
                    content: "";
                    display: block;
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
                }

                &.cl-top-right::before {
                    transform: translate(0, 0);
                    content: "";
                    display: block;
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
                }

                &.cl-bottom-left::before {
                    transform: translate(0, 0);
                    content: "";
                    display: block;
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
                }

                &.cl-bottom-right::before {
                    transform: translate(0, 0);
                    content: "";
                    display: block;
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
                }
            }

            &:hover, &:active {
                .corner-lines {
                    &.cl-top-left::before {
                        transform: translate(-5px, -5px);
                        top: -1px;
                        left: -1px;
                        border-left: solid 1px rgb(0 0 0 / .3);
                        border-top: solid 1px rgb(0 0 0 / .3);
                        opacity: 1
                    }

                    &.cl-top-right::before {
                        transform: translate(5px, -5px);
                        top: -1px;
                        right: -1px;
                        border-right: solid 1px rgb(0 0 0 / .3);
                        border-top: solid 1px rgb(0 0 0 / .3);
                        opacity: 1
                    }

                    &.cl-bottom-left::before {
                        transform: translate(-5px, 5px);
                        bottom: -1px;
                        left: -1px;
                        border-left: solid 1px rgb(0 0 0 / .3);
                        border-bottom: solid 1px rgb(0 0 0 / .3);
                        opacity: 1
                    }

                    &.cl-bottom-right::before {
                        transform: translate(5px, 5px);
                        bottom: -1px;
                        right: -1px;
                        border-right: solid 1px rgb(0 0 0 / .3);
                        border-bottom: solid 1px rgb(0 0 0 / .3);
                        opacity: 1
                    }
                }
            }
        }
    }

    &.on-black-bg {
        .button-inner {
            .corner-lines-box {
                &:hover, &:active {
                    .corner-lines {
                        &::before {
                            transition: all 0.3s
                        }

                        &.cl-top-left::before {
                            transform: translate(-5px, -5px);
                            top: -1px;
                            left: -1px;
                            border-left: solid 1px var(--white-1);
                            border-top: solid 1px var(--white-1);
                            opacity: 1
                        }

                        &.cl-top-right::before {
                            transform: translate(5px, -5px);
                            top: -1px;
                            right: -1px;
                            border-right: solid 1px var(--white-1);
                            border-top: solid 1px var(--white-1);
                            opacity: 1
                        }

                        &.cl-bottom-left::before {
                            transform: translate(-5px, 5px);
                            bottom: -1px;
                            left: -1px;
                            border-left: solid 1px var(--white-1);
                            border-bottom: solid 1px var(--white-1);
                            opacity: 1
                        }

                        &.cl-bottom-right::before {
                            transform: translate(5px, 5px);
                            bottom: -1px;
                            right: -1px;
                            border-right: solid 1px var(--white-1);
                            border-bottom: solid 1px var(--white-1);
                            opacity: 1
                        }
                    }
                }
            }
        }
    }
}

a.btn.btn-primary {
    transition: background-color 0.25s;
cubic-bezier(.25, .1, .25, 1), border-color .25 s;
cubic-bezier(.25, .1, .25, 1);
    border: 1px solid var(--black-1);
    background: var(--white-1)
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color: var(--white);
    background-color: var(--blue-1);
    border-color: var(--black-1)
}

.corner-lines-box {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: all;
    margin: 0px !important;

    &:hover {
        opacity: 1
    }

    .corner-lines {
        &.cl-top-left::before {
            content: "";
            display: block;
            position: absolute;
            width: 15px;
            height: 15px;
            transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
        }

        &.cl-top-right::before {
            content: "";
            display: block;
            position: absolute;
            width: 15px;
            height: 15px;
            transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
        }

        &.cl-bottom-left::before {
            content: "";
            display: block;
            position: absolute;
            width: 15px;
            height: 15px;
            transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
        }

        &.cl-bottom-right::before {
            content: "";
            display: block;
            position: absolute;
            width: 15px;
            height: 15px;
            transition: transform 0.25s cubic-bezier(.25, .1, .25, 1), opacity 0.25s cubic-bezier(.25, .1, .25, 1)
        }
    }

    &:hover, &:active {
        .corner-lines {
            &.cl-top-left::before {
                transform: translate(-5px, -5px);
                top: -1px;
                left: -1px;
                border-left: solid 1px rgb(0 0 0 / .3);
                border-top: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }

            &.cl-top-right::before {
                transform: translate(5px, -5px);
                top: -1px;
                right: -1px;
                border-right: solid 1px rgb(0 0 0 / .3);
                border-top: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }

            &.cl-bottom-left::before {
                transform: translate(-5px, 5px);
                bottom: -1px;
                left: -1px;
                border-left: solid 1px rgb(0 0 0 / .3);
                border-bottom: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }

            &.cl-bottom-right::before {
                transform: translate(5px, 5px);
                bottom: -1px;
                right: -1px;
                border-right: solid 1px rgb(0 0 0 / .3);
                border-bottom: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }
        }
    }
}

figure {
    margin: 0 0 2rem
}

.site-grid {
    & > div {
        position: relative;
        z-index: 1;

        .moduletable {
            position: relative;
            z-index: 1
        }

        .corner-lines-box {
            opacity: 1;
            z-index: 0;

            .corner-lines {
                &::before {
                    width: 30px;
                    height: 30px;
                    opacity: 1
                }

                &.cl-top-left::before {
                    transform: translate(-5px, -5px);
                    top: -1px;
                    left: -1px;
                    border-left: solid 1px var(--deco-lines-3);
                    border-top: solid 1px var(--deco-lines-3)
                }

                &.cl-top-right::before {
                    transform: translate(5px, -5px);
                    top: -1px;
                    right: -1px;
                    border-right: solid 1px var(--deco-lines-3);
                    border-top: solid 1px var(--deco-lines-3)
                }

                &.cl-bottom-left::before {
                    transform: translate(-5px, 5px);
                    bottom: -1px;
                    left: -1px;
                    border-left: solid 1px var(--deco-lines-3);
                    border-bottom: solid 1px var(--deco-lines-3)
                }

                &.cl-bottom-right::before {
                    transform: translate(5px, 5px);
                    bottom: -1px;
                    right: -1px;
                    border-right: solid 1px var(--deco-lines-3);
                    border-bottom: solid 1px var(--deco-lines-3)
                }
            }
        }
    }

    .container-component {
        margin-bottom: var(--block-margin-bottom)
    }
}

.articleHeroImg {
    position: relative;
    z-index: 3;
    width: 100%;

    &::after {
        position: absolute;
        content: '';
        inset: 0;
        background: #FFF;
        background: linear-gradient(130deg, rgb(255 255 255 / .31) 0%, rgb(32 62 150 / .56) 100%);
        z-index: 4;
        max-height: 33vh
    }

    .articleHero {
        display: grid;
        place-content: center;
        grid-template-columns:10% 80% 10%;
        grid-template-rows:20% 60% 20%;
        margin-bottom: 4rem;

        figure {
            float: none;
            width: 100%;
            grid-area: 1 / 1 / 4 / 4;
            margin-bottom: 0;

            img {
                width: 100%;
                object-fit: cover;
                max-height: 33vh
            }
        }

        .heroArticleContent {
            position: relative;
            grid-area: 2 / 2 / 3 / 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 60ch;
            margin-inline: auto;
            text-align: center;
            color: var(--white-1);
            z-index: 5;

            p:last-child {
                margin-bottom: 0
            }

            p.h1 {
                margin-top: 0;
                margin-bottom: .5em;
                letter-spacing: 5px
            }

            .corner-lines::before {
                border-color: var(--white-1) !important
            }

            .articleHeroContent {
                margin-bottom: 1rem
            }
        }
    }
}

a.btn, button, .readMoreBtn, .validate {
    border-radius: 0;
    color: var(--text-1);
    position: relative;

    &:hover, &:active {
        color: var(--text-1);

        .corner-lines {
            &.cl-top-left::before {
                transform: translate(-5px, -5px) !important;
                top: -1px;
                left: -1px;
                border-left: solid 1px rgb(0 0 0 / .3);
                border-top: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }

            &.cl-top-right::before {
                transform: translate(5px, -5px);
                top: -1px;
                right: -1px;
                border-right: solid 1px rgb(0 0 0 / .3);
                border-top: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }

            &.cl-bottom-left::before {
                transform: translate(-5px, 5px);
                bottom: -1px;
                left: -1px;
                border-left: solid 1px rgb(0 0 0 / .3);
                border-bottom: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }

            &.cl-bottom-right::before {
                transform: translate(5px, 5px);
                bottom: -1px;
                right: -1px;
                border-right: solid 1px rgb(0 0 0 / .3);
                border-bottom: solid 1px rgb(0 0 0 / .3);
                opacity: 1
            }
        }
    }

    .button-inner {
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;
        height: inherit;
        white-space: nowrap;
        min-width: 0;
        gap: 10px;
        justify-content: center;

        .corner-lines-box {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: all;
            margin: 0px !important;

            &:hover {
                opacity: 1
            }
        }
    }
}

.pageNavigationWrap {
    margin-top: 2rem;
    position: relative;

    .pagenavigation {
        position: relative;
        z-index: 9
    }

    .corner-lines-box {
        .corner-lines {
            &::before {
                width: 15px !important;
                height: 15px !important
            }
        }
    }
}

.footerLogo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: var(--fs-size-teeny-weeny);

    p {
        margin-bottom: 0
    }

    a {
        color: var(--white-1) !important
    }
}

.container-footer {
    width: 100%;
    z-index: 2;

    &.footer {
        background-color: #fff0;
        background-image: none;

        .footerBox {
            .row {
                .joinUs {
                    display: grid;
                    place-content: center
                }

                .footerLinks {
                    position: relative;
                    z-index: 2;

                    a {
                        width: fit-content;
                        color: var(--text-1);
                        text-decoration: none
                    }
                }

                .joinList {
                    margin-left: auto;

                    .corner-lines-box {
                        .cl-top-left::before {
                            transform: translate(-5px, -5px);
                            top: -1px;
                            left: -1px;
                            border-left: solid 1px rgb(0 0 0 / .3);
                            border-top: solid 1px rgb(0 0 0 / .3);
                            opacity: 1
                        }

                        .cl-top-right::before {
                            transform: translate(5px, -5px);
                            top: -1px;
                            right: -1px;
                            border-right: solid 1px rgb(0 0 0 / .3);
                            border-top: solid 1px rgb(0 0 0 / .3);
                            opacity: 1
                        }

                        .cl-bottom-left::before {
                            transform: translate(-5px, 5px);
                            bottom: -1px;
                            left: -1px;
                            border-left: solid 1px rgb(0 0 0 / .3);
                            border-bottom: solid 1px rgb(0 0 0 / .3);
                            opacity: 1
                        }

                        .cl-bottom-right::before {
                            transform: translate(5px, 5px);
                            bottom: -1px;
                            right: -1px;
                            border-right: solid 1px rgb(0 0 0 / .3);
                            border-bottom: solid 1px rgb(0 0 0 / .3);
                            opacity: 1
                        }
                    }
                }

                &::before {
                    position: absolute;
                    content: '';
                    height: 225px;
                    width: 100%;
                    background: var(--white-1);
                    bottom: 0;
                    box-shadow: 3px 4px 5px 0 rgb(0 0 0 / .9);
                    -webkit-box-shadow: 3px 4px 5px 0 rgb(0 0 0 / .9);
                    z-index: 1
                }
            }
        }

        .footerInfo {
            background: #3262F0;
            background: linear-gradient(130deg, rgb(50 98 240) 0%, rgb(32 62 150) 100%);
            color: var(--white-1);
            padding: 2rem 15vw 2rem 2rem;
            clip-path: polygon(0 0, 88% 0%, 93% 100%, 0% 100%);
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns:350px 1fr;
            gap: 2rem;
            justify-content: space-between;
            align-items: center
        }

        .grid-child {
            width: 100%;
            max-width: 100%;
            padding: 0
        }
    }

    .curve-divider {
        width: 100%;
        margin-bottom: 0
    }
}

.flex {
    display: flex
}

.gap-1 {
    gap: 1rem !important
}

.gap-2 {
    gap: 2rem !important
}

.gap-3 {
    gap: 3rem !important
}

.gap-4 {
    gap: 4rem !important
}

.back-to-top-link {
    inset-inline-end: 1rem;
    z-index: 999;
    color: var(--text-1);
    pointer-events: all;
    background-color: var(--white-1);
    border: 1px solid var(--text-1);
    opacity: 0;
    border-radius: 0rem;
    padding: .5em;
    transition: opacity .2s ease-in;
    position: fixed;
    bottom: 1rem;
    right: 1rem;

    &:hover, &:active, &:focus {
        color: var(--white-1);
        background-color: var(--blue-1)
    }
}

.offcanvas {
    .offcanvas-header {
        position: absolute;
        width: fit-content;
        right: 0;

        .btn-close svg {
            color: red
        }
    }

    .navbar-brand {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--deco-lines)
    }

    .mod-menu {
        li {
            a {
                font-size: var(--fs-size-2);
                color: var(--text-1);

                &:active, &:focus, &:hover {
                    color: var(--blue-1)
                }
            }
        }

        .mod-menu__sub {
            li {
                a {
                    font-size: var(--fs-size-1)
                }
            }
        }
    }
}

.megamenu-level-1 {
    li[data-item-id="162"], li[data-item-id="163"] {
        display: none
    }
}

ol, ul {
    padding-left: 20px
}

@media screen and (width < 992px) {
    .container-social {
        justify-content: start !important
    }

    .mobileMenuButton {
        margin-left: auto
    }
}

@media screen and (width < 896px) {
    hero {
        & #heroGrid {
            .heroWrap {
                .heroContentInner {
                    .h1 {
                        font-size: 1.5rem
                    }

                    .h2 {
                        font-size: 1.3rem
                    }
                }
            }
        }
    }
}

@media screen and (width < 768px) {
    .first-to-know {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        .col-6 {
            padding-inline: 0
        }
    }
}

@media screen and (width < 660px) {
    .sideDecoLeft, .sideDecoRight {
        display: none
    }
}

@media screen and (width < 500px) {
    .header.container-header {
        height: auto;

        .headerInner {
            .container-nav {
                grid-template-columns:auto auto;
                grid-template-rows:auto auto;

                .navbar-brand {
                    grid-area: 1 / 1 / 2 / 3;
                    margin-inline: auto
                }

                .container-social {
                    grid-area: 2 / 1 / 3 / 2
                }

                #mobileMenuButton {
                    grid-area: 2 / 2 / 3 / 3
                }
            }
        }
    }
}

.com-contact-featured__table {
    .item-suburb, .item-state {
        display: none
    }
}

@media (width >= 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 100%
    }
}

@media (width >= 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 100%
    }
}

@media (width >= 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 100%
    }
}

@media (width >= 768px) {
    .container-md, .container-sm, .container {
        max-width: 100%
    }
}

@media (width >= 576px) {
    .container-sm, .container {
        max-width: 100%
    }
}
@media screen and (width < 576px) {
    .hidden-phone {
        display: none
    }
}