/* =========================================================
   Le Café des Mots - ARABIC (right-to-left)
   Loaded by js/i18n.js only when the page is shown in Arabic.
   The layout itself flips by itself (dir="rtl"); this file only sets
   the Arabic fonts and undoes what doesn't suit Arabic script.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

html[lang="ar"] body,
html[lang="ar"] :where(p, a, li, span, small, strong, b, em, button, label, input, textarea, select, div) {
    font-family: 'Noto Sans Arabic', 'DM Sans', Arial, sans-serif;
}

/* titles: Amiri, a classic Arabic serif that matches Playfair Display */
html[lang="ar"] :is(h1, h2, h3, h4, .page-head__title, .page-head__intro, .ed-title, .ed-highlight__title, .ed-feature__subtitle) {
    font-family: 'Amiri', 'Playfair Display', Georgia, serif;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.35;
}

/* spaced-out letters break the joins between Arabic letters */
html[lang="ar"] * {
    letter-spacing: 0 !important;
}

/* Arabic reads better slightly bigger and airier than Latin at the same size */
html[lang="ar"] main :is(p, li) {
    line-height: 1.9;
}

/* the hidden anti-robot fields (booking, contact) are pushed off the page to the left;
   in Arabic the page scrolls to the left, so they go to the right instead */
html[dir="rtl"] :is(.booking-hp, .hp) {
    left: auto;
    right: -9999px;
}

/* homepage card: the title already becomes "كلمات الأسبوع" */
html[lang="ar"] .weekly-words__title span[lang="ar"] {
    display: none;
}

/* arrow buttons (booking weeks, homepage events): "previous" is on the right in Arabic, so the arrows turn round */
html[dir="rtl"] :is(#booking-previous-week, #booking-next-week, #events-prev) {
    transform: scaleX(-1);
}