/* ============================================================
   URDU TYPING TEST — LAYERED OVERRIDES
   Sits on top of spanish-typing-test.css (which is
   layout-identical for all Latin-script language tests).
   Only the typing area changes: RTL + Nastaliq + taller box + bold.
   ============================================================ */

/* Urdu typing passage — RTL, Nastaliq, taller, BOLD */
.urdu-text-display {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Jameel Noori Nastaleeq', 'JetBrains Mono', serif;
    font-size: 1.65rem;
    line-height: 2.2;
    height: 160px;
    min-height: 150px;
    max-height: 180px;
    padding: 20px 24px;
    /* 👇 BOLD — makes the passage text bolder */
    font-weight: 700;
}

/* Ensure individual Urdu characters inside the passage are also bold */
.urdu-text-display span {
    font-weight: 700;
}

/* Keep correct/incorrect states slightly heavier for readability */
.urdu-text-display span.correct {
    font-weight: 700;
}

.urdu-text-display span.incorrect {
    font-weight: 700;
}

/* Hidden input — RTL, Nastaliq so caret & IME position correctly */
.urdu-input {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Inter', serif;
    font-weight: 700;
}

/* Typed-text echo display — RTL and bold */
#typed-text-display {
    direction: rtl;
    text-align: right;
    font-weight: 700;
}

/* Urdu letters inside difficult-key chips render in Nastaliq (bold) */
.test-key-chip .test-key-char.urdu-key {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 700;
}

/* Responsive — the taller Urdu box needs adjusted heights */
@media (max-width: 768px) {
    .urdu-text-display {
        font-size: 1.35rem;
        line-height: 2;
        height: 140px;
        min-height: 130px;
        max-height: 160px;
        font-weight: 700;
    }
}

@media (max-width: 480px) {
    .urdu-text-display {
        font-size: 1.15rem;
        line-height: 1.95;
        height: 120px;
        min-height: 110px;
        max-height: 135px;
        font-weight: 700;
    }
}