/* ============================================
   13. QUIZ STYLES
   ============================================ */

.quiz-section {
    background:var(--white);
    border:none;
    padding:32px;
    margin-top:32px;
    color:var(--black);
}

.quiz-section h3 {
    font-size:1.5rem;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:none;
}

.quiz-question {
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:none;
}

.quiz-question:last-child {
    border-bottom:none;
}

.question-text {
    font-size:1.1rem;
    margin-bottom:16px;
}

.question-text .blank {
    display:inline-block;
    min-width:120px;
    border-bottom:none;
    text-align:center;
    font-family:'IBM Plex Mono',monospace;
    color:var(--charcoal);
}

.quiz-input {
    width:100%;
    max-width:300px;
    padding:12px;
    font-family:'IBM Plex Mono',monospace;
    font-size:1rem;
    border:none;
    background:var(--white);
    margin-bottom:12px;
}

.quiz-input:focus {
    outline:none;
    box-shadow:none;
}

.quiz-input.correct {
    border-color:transparent;
    background:#f0fff0;
}

.quiz-input.incorrect {
    border-color:transparent;
    background:#fff0f0;
}

.quiz-feedback {
    font-family:'IBM Plex Mono',monospace;
    font-size:0.9rem;
    margin-top:8px;
    display:none;
}

.quiz-feedback.correct {
    color:var(--dark-green);
    display:block;
}

.quiz-feedback.incorrect {
    color:var(--dark-red);
    display:block;
}

.quiz-hint {
    font-size:0.85rem;
    color:var(--charcoal);
    margin-top:8px;
    display:none;
}

.quiz-hint.visible {
    display:block;
}

.quiz-answer {
    display:none;
    margin-top:16px;
    padding:16px;
    background:var(--beige);
    border:none;
    font-weight:bold;
}

.quiz-answer.visible {
    display:block;
}

.quiz-options {
    margin:16px 0;
}

.quiz-options label {
    display:block;
    padding:8px 12px;
    margin:8px 0;
    background:var(--white);
    border:none;
    cursor:pointer;
}

.quiz-options label:hover {
}

.quiz-submit {
    background:var(--black);
    color:var(--white);
    padding:12px 24px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.9rem;
    border:none;
    cursor:pointer;
    margin-right:12px;
}

.quiz-submit:hover {
}

.quiz-score {
    font-family:'IBM Plex Mono',monospace;
    font-size:1rem;
    margin-top:24px;
    padding:16px;
    background:var(--beige);
    border:none;
    display:none;
}

.quiz-score.visible {
    display:block;
}

.quiz-answers-reveal {
    margin-top:16px;
    border:none;
    background:var(--beige);
}

.quiz-answers-reveal > summary {
    cursor:pointer;
    padding:12px 16px;
    background:var(--white);
    color:var(--black);
    font-family:'IBM Plex Mono',monospace;
    border-bottom:none;
}

.quiz-answers-reveal[open] > summary {
    background:var(--nav-color);
    color:var(--black);
}

.quiz-answers-display {
    padding:16px;
    color:var(--black);
}