/* Shared styles for EdSmartly legal pages (English + Arabic/RTL).
   Logical properties (text-align:start, border-inline-start, margin-inline-*)
   mean the Arabic pages mirror correctly without a second set of rules.
   Design tokens (colours, spacing) come from tokens.css. */
@import url('/tokens.css');
body{font-family:'IBM Plex Sans',sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
nav{background:#fff;border-bottom:1px solid var(--line)}
.nav-inner{max-width:860px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;color:var(--navy);text-decoration:none}
.logo b{border-bottom:3px solid var(--gold);padding-bottom:1px;font-weight:700}
.nav-right{display:flex;align-items:center;gap:16px;font-size:.9rem}
.nav-right a{color:var(--teal);text-decoration:none}
.lang{border:1px solid var(--line);border-radius:999px;padding:5px 14px;color:var(--navy);font-weight:600;font-size:.82rem;white-space:nowrap}
main{max-width:860px;margin:0 auto;padding:56px 24px 80px}
h1{color:var(--navy);font-size:1.9rem;margin-bottom:6px}
.date{color:var(--muted);font-size:.9rem;margin-bottom:4px}
.ver{color:var(--muted);font-size:.82rem;margin-bottom:30px}
h2{color:var(--navy);font-size:1.2rem;margin:30px 0 10px}
h3{color:var(--navy);font-size:1.02rem;margin:18px 0 8px}
p,li{font-size:.97rem;margin-bottom:10px}
ul{margin:0 0 10px 22px}
a{color:var(--teal)}
strong{color:var(--navy)}
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.92rem}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:start;vertical-align:top}
th{background:#eef5f7;color:var(--navy)}
.callout{background:#eef5f7;border-inline-start:4px solid var(--teal);border-radius:8px;padding:14px 18px;margin:16px 0}
.callout p:last-child{margin-bottom:0}
footer{background:var(--navy);color:rgba(255,255,255,.75);padding:38px 0 24px;font-size:.85rem}
footer .wrap{max-width:860px;margin:0 auto;padding:0 24px}
footer a{color:#fff;text-decoration:none}
.f-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.15)}
.f-col div:first-child{color:#fff;font-weight:600;margin-bottom:8px;font-size:.9rem}
.f-col{display:flex;flex-direction:column;gap:6px}
.f-bottom{padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.82rem}
.f-bottom a{color:rgba(255,255,255,.75)}
/* Arabic typography: Naskh needs more leading, and lists flip their indent. */
[dir="rtl"] body{font-family:'IBM Plex Sans','Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif}
[dir="rtl"] ul{margin:0 22px 10px 0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] td,[dir="rtl"] th{line-height:1.95}