/*
    Tajawal, for the Arabic side of a question and its choices.

    The faces the rest of the site uses - Poppins on the storefront, the admin
    theme's own - carry no Arabic glyphs, so Arabic fell through to whatever each
    machine happened to have. The same paper looked different on every screen.

    Shipped with the site rather than fetched from a font host: an exam screen
    should not depend on a third party being reachable while the clock is running.

    Tajawal is under the SIL Open Font License; OFL.txt sits beside the files.
*/

/*
    The whole family, each file declared under the weight it actually is. Declaring
    them this way rather than letting the browser thicken one file is the point: a
    synthesised bold smears the joins between Arabic letters.

    A browser downloads only the weights a page ends up using, so the ones nothing
    asks for cost nothing.
*/
@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/tajawal/Tajawal-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/tajawal/Tajawal-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/tajawal/Tajawal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/tajawal/Tajawal-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/tajawal/Tajawal-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/tajawal/Tajawal-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/tajawal/Tajawal-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/*
    Goes on anything holding Arabic: the Arabic line of a question, the Arabic text
    of a choice, and the fields where both are written.

    The fallbacks are Arabic-capable on purpose - until the file arrives, or if it
    never does, the text still reads rather than turning into boxes.
*/
.text-ar {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, 'Arial', sans-serif;

    /* Arabic carries more above and below the line than Latin does at the same
       size, so it needs the extra room to stop descenders touching. */
    line-height: 1.9;
}

/* In a textarea the same text is being typed, so it wants the same face - but not
   the loose line height, which makes a three-row box feel like two. */
textarea.text-ar,
input.text-ar {
    line-height: 1.6;
}