/* ==========================================================================
   base.css — الأساس: تصفير، طباعة عربية، عناصر جاهزة (زر، فورم، بادج)، تخطيط.
   يُستورد دائمًا قبل sections.css. لا يخص مشروعًا معيّنًا.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fz-body); font-weight:var(--fw-regular);
  line-height:1.85;                    /* العربي يحتاج سطرًا أطول من اللاتيني */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:var(--fw-bold);
  line-height:1.3;                       /* لا تنزل تحت 1.25 في العربي */
  letter-spacing:0 !important;           /* تباعد الحروف يقطع الوصل العربي */
  text-wrap:balance;
}
p{margin:0; max-width:var(--measure); line-height:1.85; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
figure,blockquote,figcaption,dl,dd{margin:0}   /* افتراضي المتصفح يزيح 40px داخل الكروت */
blockquote{quotes:none}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm)}
::selection{background:var(--brand); color:var(--brand-ink)}
:where(html,body){overflow-x:hidden}

/* أرقام ومبالغ وروابط أجنبية داخل نص عربي: تُعزل حتى لا ينقلب ترتيبها */
.num, .ltr, [dir="ltr"]{unicode-bidi:isolate; direction:ltr; display:inline-block}
.num{font-variant-numeric:tabular-nums; direction:ltr}

/* ---------- التخطيط ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--alt{background:var(--surface-2)}
.section--ink{background:var(--ink); color:#fff}
.section--ink p,.section--ink .lead{color:rgba(255,255,255,.78)}
.grid{display:grid; gap:var(--s5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px); align-items:center}
.stack{display:flex; flex-direction:column; gap:var(--s4)}
.stack--lg{gap:var(--s6)}
.stack--sm{gap:var(--s2)}
.row{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap}
.row--between{justify-content:space-between}
.center{text-align:center}
.center p,.center .lead{margin-inline:auto}

/* ---------- طباعة ---------- */
/* لا تباعد حروف في النص العربي — يقطع الوصل. التباعد للاتيني فقط. */
.eyebrow{font-size:var(--fz-eyebrow); font-weight:var(--fw-semibold); color:var(--brand);
  letter-spacing:normal}
.eyebrow--latin{text-transform:uppercase; letter-spacing:.08em}
.lead{font-size:clamp(1.0625rem,1.4vw,1.25rem); color:var(--ink-muted); line-height:1.8}
.muted{color:var(--ink-muted)}
.subtle{color:var(--ink-muted)}   /* --ink-subtle نصًّا يفشل التباين — انظر سجل المراجعة */
.h1{font-size:var(--fz-h1)} .h2{font-size:var(--fz-h2)} .h3{font-size:var(--fz-h3)}
.display{font-size:var(--fz-display)}
.sm{font-size:var(--fz-sm)} .xs{font-size:var(--fz-xs)}
.measure{max-width:var(--measure)}

/* ---------- أزرار ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:14px 26px; border-radius:var(--radius-pill); border:1px solid transparent;
  font-size:var(--fz-sm); font-weight:var(--fw-semibold); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  min-height:48px}                       /* أقل من كذا يصعب على الإصبع */
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--action); color:var(--action-ink)}
.btn--primary:hover{background:var(--action-hover)}
/* زر فاتح (أصفر صناعي مثلًا) ما يحدّد حدوده على خلفية بيضاء — الحدّ يحمل التباين ≥ 3:1 */
.btn--primary{border-color:var(--action-ink)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-control)}
.btn--ghost:hover{border-color:var(--ink); background:var(--surface-2)}
.btn--link{padding:0; min-height:0; background:none; color:var(--brand); border-radius:0}
.btn--link:hover{text-decoration:underline; text-underline-offset:4px}
.btn--block{width:100%}

/* ---------- كروت وبادجات ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,32px); box-shadow:var(--shadow-1)}
.card--flat{box-shadow:none}
.card--hover{transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
.card--hover:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:var(--line-strong)}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--brand-soft); color:var(--brand-dark); font-size:var(--fz-xs); font-weight:var(--fw-semibold)}
.badge--line{background:transparent; border:1px solid var(--line-strong); color:var(--ink-muted)}

/* ---------- الفورم ---------- */
.field{display:flex; flex-direction:column; gap:var(--s2)}
.label{font-size:var(--fz-sm); font-weight:var(--fw-semibold)}
.input,.textarea{width:100%; padding:14px 16px; border:1px solid var(--line-control);
  border-radius:var(--radius); background:var(--surface); transition:border-color var(--dur) var(--ease)}
.input::placeholder,.textarea::placeholder{color:var(--ink-subtle)}
.input:hover,.textarea:hover{border-color:var(--ink-subtle)}
.input:focus,.textarea:focus{outline:none; border-color:var(--brand); box-shadow:var(--ring)}
.textarea{min-height:140px; resize:vertical}
.hint{font-size:var(--fz-xs); color:var(--ink-muted)}
.error-text{font-size:var(--fz-xs); color:var(--danger)}

/* ---------- أيقونات ---------- */
.icon{width:1.25em; height:1.25em; flex:none}
/* في RTL الأسهم والاتجاهات تُعكس، أيقونات الشعار والفيديو لا */
.flip{transform:scaleX(-1)}
[dir="rtl"] .flip{transform:scaleX(1)}

/* ---------- وصولية ---------- */
.skip-link{position:absolute; inset-inline-start:var(--s4); top:-60px; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--radius-sm);
  transition:top var(--dur) var(--ease)}
.skip-link:focus{top:var(--s4)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- استجابة ---------- */
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .section{padding-block:clamp(44px,9vw,64px)}
  .btn{padding:13px 22px}
}
@media print{
  .nav,.footer{display:none}
}