@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    background-image: linear-gradient(rgba(253, 246, 227, 0.7), rgba(255, 242, 207, 0.7)), url(/wp-content/uploads/2025/06/30887723_sadsxxa_8-min-scaled.jpg);
}

div[data-block]>div:first-child {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px;
    background-color: white;
    max-height: 75vh;
    overflow-y: auto;
}

div[data-block] h2,
div[data-block] span,
div[data-block] button,
div[data-block] input {
    font-family: 'Open Sans', sans-serif;
}

div[data-block] h2 {
    margin-bottom: 20px;
}

div[data-block] button {
    width: 100%;
    border-radius: 0;
    border-color: rgba(0, 0, 0, .1);
    padding: 1.25em 1.875em;
    color: #333333;
    margin-top: 30px;

    &.cZJMNr {
        background-color: #F7F4F1;
        border-color: #C2A57B;
    }

    &:not(:disabled):focus,
    &:not(:disabled):hover {
        box-shadow: rgba(0, 0, 0, .1) 0px 0px 0px 0.2rem;
    }

    &.cZJMNr:not(:disabled):hover,
    &.cZJMNr:not(:disabled):focus {
        box-shadow: rgba(194, 165, 123, .7) 0px 0px 0px 0.2rem;
    }
}

div[data-block]>div:last-child {
    max-width: 600px;
    margin: 0 auto;
}

div[data-block]>div:last-child,
div[data-block]+div:not([data-block])>div:last-child {
    &>div {
        left: 0;
        color: #3D655D;
        top: 0;
        border: 1px solid #3D655D;
        padding: 0 12px;
        line-height: 32px;
        opacity: 1;
        font-weight: 600;

        &:hover {
            color: white;
            background-color: #3D655D;

            svg path {
                fill: white;
            }
        }

        svg {
            margin-right: 8px;

            path {
                fill: #3D655D;
            }
        }

        @media screen and (max-width: 680px) {
            left: 32px;
        }

        @media screen and (max-width: 574px) {
            left: 16px;
        }
    }
}

div[data-block]+div:not([data-block])>div:last-child {
    &>div {
        left: 32px;

        @media screen and (max-width: 574px) {
            left: 16px;
        }
    }
}

div[data-block] nav button,
div nav button {
    width: auto;
    padding: 12px 24px !important;
    background-color: #C2A57B !important;
    color: white !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0 !important;

    &:not(:disabled):hover,
    &:not(:disabled):focus {
        border: none;
        background-color: #C2A57B;
        box-shadow: rgba(194, 165, 123, .8) 0px 0px 0px 0.2rem;
    }

    &>span {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 10px;
    }

    svg {
        top: 0;
    }
}

div[data-block] select,
div[data-block] input {
    border-color: rgba(0, 0, 0, .1);
    color: #333333;

    &:not(:disabled):focus,
    &:not(:disabled):hover {
        border: none;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0.2rem;
    }
}

body nav>div {
    &>div:first-child {
        div[class]>div {
            background-color: #C2A57B;
        }
    }

    &>div:last-child button {
        border-color: rgba(0, 0, 0, 0.1);

        &:not(:disabled):focus {
            box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0.2rem;
        }

        &:not(:disabled):hover {
            border-color: #C2A57B;
            box-shadow: rgba(194, 165, 123, .8) 0px 0px 0px 0.2rem;
            background-color: #C2A57B;
        }
    }
}

div[data-block="@tripetto/block-file-upload"] {
    button {
        padding: 10px 24px;
        width: auto;
        margin-bottom: 20px;
    }
}

/*** Hide Tripetto navigation elements ***/
/* Hide "0 of 59 answered" progress text */
body nav > div > div:first-child > div:first-child {
    display: none !important;
}

/* Hide "Powered by Tripetto" branding link */
/* body nav > div > div:first-child > div:has(a[href*="tripetto.com"]),
body nav > div > div:first-child > div:last-child:has(a) {
    display: none !important;
} */

/* Multiple-choice: scroll only the answer options, keep question and Next visible */
div[data-block="@tripetto/block-multiple-choice"] > div:first-child {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

div[data-block="@tripetto/block-multiple-choice"] > div > div {
    display: block;
    overflow-y: auto;
    padding-inline: 3px;
}

div[data-block="@tripetto/block-multiple-choice"] > div > div > button:first-child {
    margin-top: 4px;
}