/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

body {
    padding-top: 0px !important;
}

#outerframeContainer {
    background: white;
    padding: 10px 50px 5px 50px;
    margin-top: 20px;
}

body .top-container {
    margin-top: 0px !important;
}

.asterisk {
    display: none;
}

.question-text {
    font-size: 110%;
    font-weight: bold;
}

#survey-nav {
    display: none;
}

/* Banyan Canopy background across the complete portal. */
body {
    background-color: #173a32;
    background-image:
        linear-gradient(110deg, rgba(4, 36, 31, 0.68), rgba(4, 36, 31, 0.27)),
        url("../files/miami-banyan-canopy.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Keep ordinary survey content legible while allowing the background through. */
#outerframeContainer {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);
}

html.orthon-language-choice #outerframeContainer {
    background: transparent;
    box-shadow: none;
    min-height: calc(100vh - 6rem);
}

.orthon-language-selector {
    align-items: center;
    color: #fff;
    display: none;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    justify-content: center;
    margin: 0 auto;
    max-width: 68rem;
    min-height: calc(100vh - 9rem);
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem);
    text-align: center;
}

/* The supplied skyline crop appears only on opening stages and completion. */
.orthon-skyline-banner {
    aspect-ratio: 566 / 69;
    background-color: #8bc7df;
    background-image: url("../files/miami-skyline-banner.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.4rem;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
    margin: 0 auto clamp(1rem, 2.5vw, 1.75rem);
    max-height: 8rem;
    min-height: 4.5rem;
    width: 100%;
}

.orthon-language-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.24);
    max-width: 64rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    width: 100%;
}

.orthon-captcha-content > .orthon-skyline-banner,
.orthon-completion-banner {
    max-width: 64rem;
}

.orthon-completion-banner {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.orthon-language-choice:not(.orthon-language-selected) .orthon-captcha-content > .orthon-skyline-banner {
    display: none;
}

/* Emphasize the short confirmation message on the completed survey page. */
.completed-text {
    padding: clamp(1.5rem, 4vw, 3rem) 1rem;
    text-align: center !important;
}

.completed-text .completed-heading,
.completed-text p:first-of-type {
    font-size: clamp(2.4rem, 6vw, 4rem) !important;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    text-align: center !important;
}

.completed-text .completed-Content,
.completed-text p:nth-of-type(2) {
    font-size: clamp(1.35rem, 3vw, 2rem) !important;
    line-height: 1.4;
    text-align: center !important;
}

.orthon-language-choice .orthon-language-selector {
    display: flex;
}

.orthon-language-intro {
    display: none;
}

.orthon-language-selected .orthon-language-selector {
    display: none;
}

.orthon-language-selected .orthon-language-intro {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.24);
    display: block;
    margin: 2rem auto 3rem;
    max-width: 64rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.orthon-captcha-content {
    display: block;
}

.orthon-language-choice:not(.orthon-language-selected) .orthon-captcha-content {
    display: none;
}

.orthon-captcha-stage.orthon-language-selected .orthon-captcha-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.24);
    margin: 2rem auto 3rem;
    max-width: 64rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.orthon-language-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

.orthon-language-card {
    align-content: space-between;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.4rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);
    color: #173a32;
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.75rem);
}

.orthon-language-card h2 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.orthon-language-card form,
.orthon-language-card button {
    margin: 0;
    width: 100%;
}

.orthon-language-card button {
    font-size: 1rem;
    line-height: 1.3;
    min-height: 5rem;
    white-space: normal;
}

.orthon-language-choice:not(.orthon-language-selected) .survey-name {
    display: none;
}

@media (max-width: 680px) {
    body {
        background-attachment: scroll;
        background-position: center center;
    }

    .orthon-language-selector {
        min-height: auto;
        padding-top: 1rem;
    }

    .orthon-language-panel {
        padding: 1rem;
    }

    .orthon-skyline-banner {
        min-height: 3.5rem;
    }

    .completed-text .completed-heading,
    .completed-text p:first-of-type {
        font-size: 2.4rem !important;
    }

    .completed-text .completed-Content,
    .completed-text p:nth-of-type(2) {
        font-size: 1.35rem !important;
    }

    .orthon-language-cards {
        grid-template-columns: 1fr;
    }

    .orthon-language-card button {
        min-height: 3.5rem;
    }

    .orthon-language-selected .orthon-language-intro,
    .orthon-captcha-stage.orthon-language-selected .orthon-captcha-content {
        margin-top: 1rem;
    }

    #outerframeContainer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}