/**
 * Theme Name: Loadscape
 * Template:   twentytwentyfour
 */

* {
    box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    text-decoration: underline;
}

.wp-site-blocks {
    /*margin-inline: auto;*/
    /*max-width: 1980px;*/
    overflow: hidden;
}

.wp-block-list {
    li + li {
        margin-block-start: 1rem;
    }
}

.is-style-main-header {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo utility"
                         "nav nav";
    margin-block: 2rem;

    @media (max-width: 781px) {
        grid-template-columns: 1fr;
        grid-template-areas: "logo"
                             "utility"
                             "nav";
        margin-block-start: 0;
        padding-block: 0;
    }

    @media (max-width: 599px) {
        grid-template-areas: "utility utility"
                             "logo nav";
    }

    > * {
        width: 100%;
    }

    .is-style-header-logo-row {
        @media (max-width: 781px) {
            align-content: center;
            flex-direction: column;
        }
    }

    .wp-block-site-logo {
        grid-area: logo;

        @media (min-width: 600px) and (max-width: 781px) {
            text-align: center;
        }
    }

    .is-style-header-utility-row {
        grid-area: utility;
        margin: 0;

        @media (max-width: 781px) {
            align-content: center;
            flex-direction: column;
            margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
            margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
            padding: 0.5rem;
            width: auto;
        }

        form {
            flex: 1;
        }
    }

    nav.is-style-main-nav {
        border-top: 1px solid var(--wp--preset--color--gray-light);
        grid-area: nav;
        margin-block-start: 0;
        padding-block-start: 2rem;
        width: 100%;

        @media (max-width: 781px) {
        }

        @media (max-width: 599px) {
            border-top: 0;
            padding-block-start: 0;
        }
    }
}

.is-style-main-footer {
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 3fr;
    grid-template-areas: "logo utility"
                         "contact nav";
    margin-block: 2rem;

    @media (max-width: 781px) {
        grid-template-columns: 1fr;
        grid-template-areas: "logo"
                             "utility"
                             "nav"
                             "contact";
        margin-block-start: 0;
        padding-block: 0;
    }

    > * {
        width: 100%;
    }

    .wp-block-site-logo {
        grid-area: logo;

        img {
            max-width: 100%;
        }
    }

    .is-style-footer-utility {
        grid-area: utility;
        margin: 0;
        width: 100%;

        @media (max-width: 781px) {
            align-content: center;
            flex-direction: column;
            padding: 0.5rem;
            width: auto;
        }
    }

    .is-style-footer-contact {
        grid-area: contact;
        margin: 0;

        @media (max-width: 781px) {
            text-align: center;
        }
    }

    nav.is-style-main-nav {
        border-top: 1px solid var(--wp--preset--color--gray-light);
        grid-area: nav;
        margin-block-start: 0;
        padding-block-start: 2rem;
        width: 100%;

        @media (max-width: 599px) {
            ul {
                flex-direction: column;
            }
        }
    }
}

.is-style-main-footer,
.is-style-main-header {
    .wp-block-search__inside-wrapper {
        background: var(--wp--preset--color--gray-light);
        border: 0;
        border-radius: 5px;
        flex-direction: row-reverse;

        .wp-block-search__button {
            background: transparent;
            color: var(--wp--preset--color--gray-mid);
            margin-left: 0;
            margin-right: 10px;
            padding: 0.1rem;
        }

        .wp-block-search__input {
            background: transparent;
        }
    }
}

/* responsive grid variation */
@media (max-width:1029px) {
    .is-style-responsive-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:781px) {
    .is-style-responsive-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:781px) {
    .is-column-reverse {
        flex-direction: column-reverse;
    }
}

/* stripes left */
.is-style-stripe-left {
    padding: 5vw 10vw;
    position: relative;
    z-index: 1;

    > * {
        position: relative;
        z-index: 1;
    }

    &::before {
        background: url('assets/images/stripes-left.svg') no-repeat center bottom;
        background-size: contain;
        bottom: 0;
        content: "";
        display: block;
        height: 20vw;
        left: 0;
        max-height: 300px;
        max-width: 300px;
        position: absolute;
        transform: translateX(-50%);
        width: 20vw;
        z-index: 0;

        @media (max-width: 781px) {
            height: 40vw;
            width: 40vw;
        }
    }
}

/* stripes right */
.is-style-stripe-right {
    > * {
        position: relative;
        z-index: 1;
    }

    &::before {
        background: url('assets/images/stripes-right.svg') no-repeat center bottom;
        background-size: contain;
        bottom: 0;
        content: "";
        display: block;
        height: 20vw;
        max-height: 300px;
        max-width: 300px;
        right: 0;
        position: absolute;
        transform: translateX(50%);
        width: 20vw;
        z-index: 0;

        @media (max-width: 781px) {
            height: 40vw;
            width: 40vw;
        }
    }
}

/* stripes image */
.is-style-stripes {
    position: relative;
    z-index: 1;

    &::after {
        background: url('assets/images/stripes-left.svg') no-repeat center bottom;
        background-size: contain;
        bottom: 0;
        content: "";
        display: block;
        height: 150px;
        right: 0;
        position: absolute;
        transform: translateX(50%);
        width: 150px;
        z-index: -1;
    }
}

/* stripes hero */
.is-style-stripe-hero {
    position: relative;
    z-index: 1;

    &::before {
        background: url('assets/images/stripes-left.svg') no-repeat center bottom;
        background-size: contain;
        bottom: 0;
        content: "";
        display: block;
        height: 20vw;
        left: 0;
        max-height: 300px;
        max-width: 300px;
        position: absolute;
        transform: translateX(-30%);
        width: 20vw;
        z-index: 0;

        @media (max-width: 781px) {
            height: 30vw;
            transform: translateX(-67%);
            width: 30vw;
        }
    }
}

/* stripes form */
.is-style-stripe-form {
    padding-bottom: 6rem;

    > * {
        position: relative;
        z-index: 1;
    }

    &::before {
        background: url('assets/images/stripes-right.svg') no-repeat center bottom;
        background-size: contain;
        bottom: 0;
        content: "";
        display: block;
        height: 30vw;
        max-height: 400px;
        max-width: 400px;
        right: 0;
        position: absolute;
        transform: translateX(30%);
        width: 30vw;
        z-index: 0;

        @media (max-width: 781px) {
            height: 40vw;
            width: 40vw;
            transform: translateX(40%);
        }
    }
}

/* image border */
.is-style-border {
    margin-bottom: 12px;
    position: relative;
    z-index: 1;

    &::after {
        background: var(--wp--preset--color--brand);
        width: 175px;
        height: 12px;
        content: "";
        display: block;
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
}

/* cover block right */
.is-style-cover-right {
    justify-content: flex-end;

    &::before {
        background: url('assets/images/stripes-right.svg') no-repeat center bottom;
        background-size: contain;
        bottom: 0;
        content: "";
        display: block;
        height: 20vw;
        max-height: 300px;
        max-width: 300px;
        right: 0;
        position: absolute;
        transform: translateX(50%);
        width: 20vw;
        z-index: 1;

        @media (max-width: 781px) {
            height: 40vw;
            width: 40vw;
        }
    }

    .wp-block-cover__background.has-background-gradient {
        mix-blend-mode: multiply;

        @media (max-width: 781px) {
            background-image: linear-gradient(90deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.82) 15%) !important;
        }
    }
}

/* details accordion */
.is-style-accordion {
    background: var(--wp--preset--color--gray-light);
    padding: 1rem 2rem;

    summary {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-block: -1rem !important;
        margin-inline: -2rem;
        padding-block: 1rem;
        padding-inline: 2rem;

        &::marker {
            display: none;
        }

        &::after {
            /* css triangle */
            border-left: 0.7rem solid var(--wp--preset--color--brand);
            border-top: 0.5rem solid transparent;
            border-bottom: 0.5rem solid transparent;
            display: inline-block;
            content: "";
            transition: transform 0.2s ease-in-out;
            width: 0;
            height: 0;
        }
    }

    &[open] summary::after {
        transform: rotate(90deg);
    }
}

/* Splide overrides */

.wp-block-cloudcatch-splide-carousel {
    .wp-block-splide-carousel {
        padding-inline: 3rem;
    }
}

.wp-block-splide-carousel .splide__arrows--ltr {
    .splide__arrow {
        background: var(--wp--preset--color--brand);
    }
    .splide__arrow--prev {
        left: 0;
    }
    .splide__arrow--next {
        right: 0;
    }
    @media screen and (min-width: 782px) {
        .splide__arrow--prev {
            left: 0;
        }
        .splide__arrow--next {
            right: 0;
        }
    }
}

/* Login menu */
.has-classic-menu-location--secondary {
    > ul {
        > li:first-child {
            > a,
            > button {
                font-family: var(--wp--preset--font-family--kallisto);
                text-transform: uppercase;

                &::before {
                    background: url('assets/images/user.svg') no-repeat center center;
                    background-size: contain;
                    content: "";
                    display: inline-block;
                    height: 1em;
                    margin-right: 0.25em;
                    vertical-align: middle;
                    width: 1em;
                }
            }
        }
    }
}

/* GForms styling */
.gform_wrapper {
    .gfield--type-submit,
    .gform-footer {
        justify-content: center;

        input[type="submit"] {
            background-color: transparent !important;
            border: 2px solid var(--wp--preset--color--brand) !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            font-family: var(--wp--preset--font-family--kallisto) !important;
            font-size: 1rem !important;
            padding: 0.5em 2.5em !important;
            text-transform: uppercase !important;

            &:hover,
            &:focus {
                background-color: var(--wp--preset--color--brand) !important;
                cursor: pointer;
            }
        }
    }
}

/* Login form */
.member-login form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;

    > p {
        display: flex;
        flex-direction: column;
        margin: 0;

        &.login-remember {
            text-align: center;
            width: 100%;
        }

        &.login-username,
        &.login-password {
            width: 300px;
        }
    }

    input:not([type="submit"]) {
        background: var(--wp--preset--color--gray-dark);
        border: 0;
        border-radius: 0;
        color: var(--wp--preset--color--base);
        outline-color: var(--wp--preset--color--brand);
    }

    input[type="submit"] {
        background-color: transparent;
        border: 2px solid var(--wp--preset--color--brand);
        border-radius: 5px;
        font-family: var(--wp--preset--font-family--kallisto);
        font-size: 1rem;
        outline-color: var(--wp--preset--color--brand);
        outline-offset: 2px;
        padding: 0.5em 2.5em;
        text-transform: uppercase;

        &:hover,
        &:focus {
            background-color: var(--wp--preset--color--brand);
            cursor: pointer;
        }

        .is-style-dark &,
        .is-style-stripe-form & {
            color: var(--wp--preset--color--base);
        }
    }
}