/**
 * Styling for our Best First Words quiz.
 */

#easytt-first-words-quiz {
    margin: 0 0 3rem;
    font-size: 1.125rem;
    color: #112337;

    /**
     * Global styles
     */
    h2 {
        margin: 1em 0;
        line-height: 1.5;
        padding: 0;
    }

    h3 {
        margin: 1em 0;
        line-height: 1.5;
        padding: 0;
    }

    p {
        margin: 1em 0;
        line-height: 1.5;
        padding: 0;
    }

    ol, ul {
        list-style-position: outside;
        padding: 0;
        margin-left: 2rem;

        li {
            margin-bottom: 1rem;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    input[type="text"],
    input[type="email"] {
        font-size: 1.125rem;
    }

    .easytt-quiz-title {
        text-align: center;
    }

    .easytt-font-small {
        font-size: 0.875rem;
    }

    .easytt-subparagraph-note {
        margin-top: -1rem;
    }

    button,
    .easytt-btn-link {
        display: inline-block;
        margin: 1.5rem 0;
        cursor: pointer;

        &:disabled,
        &:disabled:hover {
            cursor: not-allowed;
            background-color: #a9a9a9;
            border: 1px solid #a9a9a9 !important;
        }
    }

    /*
     * All Checkbox grids: 3-column layout for the checkboxes.
     */
    .easytt-list-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem 1rem;

        /* Make each label a tidy row with space for the checkbox + text */
        label {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        /* Visually indicates disabled boxes when limit reached. */
        input[disabled] + * {
            opacity: 0.6;
        }

        /* Responsive */
        @media (min-width: 420px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        @media (min-width: 720px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

#easytt-first-words-quiz-page1 {
    form {
        margin-top: 1rem;
    }

    #easytt-input-form-message {
        display: none;
        color: #b00020;
    }

    #easytt-submit-form-message {
        display: none;
        color: #b00020;
    }

    /* Checkbox count banner */
    .easytt-checkbox-count-banner {
        margin: 0.5rem 0 0;
    }

    .easytt-field-error {
        color: #b00020;
    }

    .easytt-section {
        margin-top: 3rem;
    }

    /*
     * Section 1
     */
    #easytt-section-1 {
        margin-top: 2rem;

        .easytt-row {
            display: grid;
            grid-template-columns: 1fr;
            column-gap: 0.75rem;
            row-gap: 1rem;

            label {
                display: block;
                font-weight: 600;
                margin-bottom: 0.25rem;
            }

            input {
                width: 100%;
                padding: 0.5rem;
            }

            .easytt-error {
                color: #b00020;
                font-size: 0.875rem;
                min-height: 1em;
            }

            .easytt-actions {
                margin-top: 0.5rem;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            .easytt-confirmation {
                margin-top: 1rem;
            }

            @media (min-width:768px) {
                grid-template-columns: 1fr 1fr;
            }
        }
    }

    /*
     * Section 2
     */
    #easytt-section-2 {

        #easytt-section-2-form {
            margin-top: 1rem;
        }
    }

    /*
     * Section 3
     */
    #easytt-section-3 {
        display: none;
    }

    /*
     * Section 4
     */
    #easytt-section-4 {
        display: none;
    }
}

#easytt-first-words-quiz-page2 {
    display: none;
}