/* ==========================================================================
   9RIB — language support, shared by every theme (loaded after the theme).
   Themes use logical properties (inline-start / inline-end), so the layout
   mirrors on its own in Arabic; this file only adds what direction can't do.
   ========================================================================== */

/* ---------- Language switch (FR / عربي) ---------- */
.lang-switch {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 2.6rem; height: 2.4rem; padding: 0 .85rem;
    border: 1.5px solid currentColor; border-radius: 999px;
    color: inherit; text-decoration: none; font-weight: 700; font-size: .9rem; line-height: 1;
    opacity: .8; transition: opacity .15s, background .15s;
}
.lang-switch:hover { opacity: 1; }
.lang-switch[lang="ar"] { font-family: "Cairo", system-ui, sans-serif; font-size: 1rem; }
[data-theme="journal"] .lang-switch { border-radius: 0; font-family: var(--mono, monospace); font-size: .75rem; letter-spacing: .1em; }
[data-theme="journal"] .lang-switch[lang="ar"] { font-family: "Cairo", system-ui, sans-serif; font-size: .95rem; letter-spacing: 0; }
[data-theme="pop"] .lang-switch { border-width: 2.5px; border-radius: 10px; background: var(--surface, #fff); box-shadow: 2px 2px 0 var(--ink, #111); opacity: 1; }
[data-theme="bright"] .lang-switch { border: 0; background: var(--bg-soft, #f6f8ff); opacity: 1; }
[data-theme="modern"] .lang-switch { border-color: var(--line-2, #d6d3d1); }

/* ---------- Arabic ---------- */
[dir="rtl"] body {
    --display: "Cairo", system-ui, sans-serif;
    --sans: "Cairo", system-ui, sans-serif;
    --serif: "Cairo", system-ui, sans-serif;
    --mono: "Cairo", system-ui, sans-serif;
    font-family: "Cairo", system-ui, sans-serif;
    line-height: 1.8;
}
[dir="rtl"] body[data-theme="journal"] { --serif: "Amiri", "Cairo", serif; }
[dir="rtl"] body[data-theme="warm"] { --serif: "Cairo", system-ui, sans-serif; }

/* Arabic letters must join: no letter-spacing, no fake italics */
[dir="rtl"] body *, [dir="rtl"] body *::before, [dir="rtl"] body *::after { letter-spacing: 0 !important; }
[dir="rtl"] body :not(.guide *) { font-style: normal !important; }
[dir="rtl"] .display, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .h4 { line-height: 1.35; }
[dir="rtl"] .display { line-height: 1.25; }

/* Drop caps don't exist in Arabic */
[dir="rtl"] .hero__text .lead::first-letter { float: none; font: inherit; color: inherit; padding: 0; }

/* Phone numbers, e-mails and file names stay left-to-right */
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }

/* The drawing pictures the (French) printed guide: keep its own direction */
[dir="rtl"] .guide { direction: ltr; }

/* Arrows point the other way */
[dir="rtl"] [data-theme="journal"] .btn--primary::after { content: "←"; }
[dir="rtl"] [data-theme="journal"] .btn--primary:hover::after { transform: translateX(-3px); }
[dir="rtl"] .todo li a:hover { transform: none; }

/* ---------- Light / dark mode switch ---------- */
:root[data-mode="dark"] { color-scheme: dark; }
:root[data-mode="light"] { color-scheme: light; }
.mode-toggle {
    display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0;
    border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
    opacity: .8; transition: opacity .15s, transform .3s;
}
.mode-toggle:hover { opacity: 1; }
.mode-toggle:active { transform: rotate(-25deg) scale(.94); }
.mode-toggle svg { width: 1.15rem; height: 1.15rem; grid-area: 1 / 1; transition: opacity .25s, transform .35s; }
.mode-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-mode="dark"] .mode-toggle__sun { opacity: 1; transform: none; }
[data-mode="dark"] .mode-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="journal"] .mode-toggle { border-radius: 0; }
[data-theme="pop"] .mode-toggle { border-width: 2.5px; border-radius: 10px; background: var(--surface, #fff); box-shadow: 2px 2px 0 var(--ink, #111); opacity: 1; }
[data-theme="bright"] .mode-toggle { border: 0; background: var(--bg-soft, #f6f8ff); opacity: 1; }
[data-theme="modern"] .mode-toggle { border-color: var(--line-2, #d6d3d1); }
.admin-mode { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .85rem; font-weight: 600; opacity: .9; }
.auth-mode { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 5; }
/* smooth colour change when the visitor flips the switch */
.mode-switching *, .mode-switching *::before, .mode-switching *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important; }