/* ---------- containment. The Arabic pages are RTL, so anything that overflows
   does so to the left, which reads as a page that will not sit in the screen.
   These rules make that impossible regardless of content width. ---------- */
html[dir=rtl],html[dir=rtl] body{max-width:100%;overflow-x:hidden}
html[dir=rtl] *{box-sizing:border-box;min-width:0}
html[dir=rtl] img,html[dir=rtl] svg,html[dir=rtl] video{max-width:100%;height:auto}
/* long unbroken tokens (URLs, emails, IBANs) must not force the page wider */
html[dir=rtl] p,html[dir=rtl] li,html[dir=rtl] td,html[dir=rtl] h1,html[dir=rtl] h2,
html[dir=rtl] h3{overflow-wrap:anywhere;word-break:break-word}
/* tables scroll inside themselves rather than stretching the document */
html[dir=rtl] .tblwrap,html[dir=rtl] table{max-width:100%}
@media(max-width:820px){
  html[dir=rtl] table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html[dir=rtl] table td,html[dir=rtl] table th{min-width:9rem}
}
/* the header is a single flex row; let it wrap instead of pushing sideways */
html[dir=rtl] header{flex-wrap:wrap;gap:.8rem}
html[dir=rtl] header nav{flex-wrap:wrap;row-gap:.7rem}
/* sections use 5vw padding; cap it so narrow screens keep their content */
@media(max-width:620px){
  html[dir=rtl] section,html[dir=rtl] header,html[dir=rtl] footer{
    padding-inline:1.1rem!important}
}
/* touch targets and no iOS zoom on focus */
html[dir=rtl] input,html[dir=rtl] textarea,html[dir=rtl] select{
  font-size:16px;max-width:100%}
html[dir=rtl] a[style*="background:#C9A24C"]{display:inline-block;min-height:44px;
  line-height:1.6}

html[dir=rtl] body{direction:rtl;text-align:right;
 font-family:'IBM Plex Sans Arabic','Inter Tight',system-ui,sans-serif}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{
 font-family:'IBM Plex Sans Arabic',serif;font-weight:700;letter-spacing:0}
html[dir=rtl] .num,html[dir=rtl] time,html[dir=rtl] .ltr{
 direction:ltr;unicode-bidi:isolate;font-family:'JetBrains Mono',monospace}
html[dir=rtl] table{text-align:right}
html[dir=rtl] input,html[dir=rtl] textarea{text-align:right}
html[dir=rtl] .lang-toggle{left:auto;right:16px}
.lang-toggle{position:fixed;bottom:16px;left:16px;z-index:60;
 background:#0B1220;color:#F6F1E7;border:1px solid #C9A24C;border-radius:999px;
 padding:.45rem .95rem;font-size:.85rem;text-decoration:none;opacity:.92}
.lang-toggle:hover{opacity:1}