/*
 * WebPlus — Design System v2 (Base & Design Tokens)
 * الإصدار 4.0: "الموقع هو العرض"
 * بادئة الأصناف: wx-
 */

:root {
  /* ── لوحة الألوان الأساسية ────────────────────────── */
  --wx-navy:        #0B1F44;
  --wx-navy-950:    #071530;
  --wx-ink:         #050E24;
  --wx-blue:        #0066FF;
  --wx-blue-700:    #0047D6;
  --wx-blue-800:    #003bb3;
  --wx-sky:         #38BDF8;
  --wx-sky-100:     #E0F2FE;
  --wx-snow:        #F8FAFC;
  
  /* تدرجات ألوان محايدة */
  --wx-slate-300:   #CBD5E1;
  --wx-slate-400:   #94A3B8;
  --wx-slate-500:   #64748B;
  --wx-slate-600:   #475569;
  
  /* حالات الإشارة */
  --wx-success:     #22C55E;
  --wx-warning:     #F59E0B;
  --wx-error:       #EF4444;

  /* ── التدرجات المعتمدة ────────────────────────────── */
  --wx-gradient-accent: linear-gradient(100deg, #0066FF 0%, #38BDF8 100%);
  --wx-gradient-portal: linear-gradient(135deg, #0047D6 0%, #0066FF 100%);
  --wx-gradient-ink:    linear-gradient(180deg, #050E24 0%, #071530 100%);

  /* ── الخطوط والأوزان ──────────────────────────────── */
  /* دمج Montserrat مع Tajawal ليتم تطبيق أرقام ومصطلحات Montserrat أولاً بانسيابية */
  --wx-font-ar:     'Tajawal', 'Montserrat', sans-serif;
  --wx-font-lat:    'Montserrat', 'Tajawal', sans-serif;
  --wx-font-mono:   ui-monospace, 'Cascadia Code', monospace;

  /* ── التيبوغرافيا السائلة (P1 Fluid Scale) ───────────── */
  --wx-h1-fluid:    clamp(3.4rem, 9.2vw, 9rem);
  --wx-h2-fluid:    clamp(2.2rem, 5.2vw, 4.6rem);
  --wx-hero-huge:   clamp(2.6rem, 7vw, 6.5rem);
  --wx-num-outline: clamp(4.5rem, 11vw, 9.5rem);

  --wx-fs-hero:     clamp(2.2rem, 3.8vw, 3.85rem);
  --wx-fs-h1:       clamp(2.4rem, 5.5vw, 4.8rem);
  --wx-fs-h2:       clamp(2.0rem, 4.2vw, 3.8rem);
  --wx-fs-h3:       clamp(1.4rem, 2.4vw, 2.2rem);
  --wx-fs-body:     clamp(17px, 1.1vw, 19px);
  --wx-fs-small:    clamp(15px, 0.95vw, 16px);
  --wx-fs-label:    13px;
  --wx-fs-micro:    12px;

  --wx-text-xs:     0.75rem;    /* 12px */
  --wx-text-sm:     0.9375rem;  /* 15px */
  --wx-text-base:   clamp(1.0625rem, 1.1vw, 1.1875rem); /* 17-19px */
  --wx-text-lg:     1.25rem;    /* 20px */
  --wx-text-xl:     1.5rem;     /* 24px */
  --wx-text-2xl:    1.875rem;   /* 30px */

  /* ── إيقاع الأقسام والفجوات المكانية (Section Rhythm & Padding) ────── */
  --wx-sec-pad-top:    clamp(40px, 4.2vw, 64px);
  --wx-sec-pad-bottom: clamp(96px, 9.5vw, 150px);
  --wx-sec-pad:        var(--wx-sec-pad-top) var(--wx-sec-pad-bottom);
  --wx-head-gap:       clamp(24px, 2.5vw, 38px);
  --wx-card-pad:       clamp(20px, 2.8vw, 32px);

  /* ── العمق والستائر المنحنية ──────────────────────── */
  --wx-curve:       clamp(24px, 3.5vw, 44px);
  --wx-radius-sm:   6px;
  --wx-radius-md:   12px;
  --wx-radius-lg:   20px;
  --wx-radius-xl:   32px;
  --wx-radius-pill: 9999px;

  /* حدود وخطوط */
  --wx-border-dark:  rgba(255, 255, 255, 0.12);
  --wx-border-light: rgba(11, 31, 68, 0.10);
  --wx-border-glow:  rgba(56, 189, 248, 0.35);

  /* ظلال */
  --wx-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);
  --wx-shadow-md:    0 12px 32px rgba(0, 0, 0, 0.2);
  --wx-shadow-deep:  0 30px 80px rgba(0, 0, 0, 0.45);
  --wx-shadow-curtain: 0 -24px 60px rgba(0, 0, 0, 0.35);
  --wx-shadow-glow:  0 0 40px rgba(0, 102, 255, 0.28);

  /* حركات */
  --wx-ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --wx-ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);
  --wx-dur-sm:       0.3s;
  --wx-dur-md:       0.6s;
  --wx-dur-lg:       1.0s;
}

/* ── إعادة ضبط أساسية ──────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html[dir="rtl"],
html[dir="rtl"] body,
body.rtl,
body.is-rtl {
  direction: rtl;
  text-align: right;
}

html,
body,
body.rtl,
body.is-rtl,
html[dir="rtl"] body {
  font-family: var(--wx-font-ar) !important;
  font-size: var(--wx-fs-body);
  line-height: 1.8;
  color: #E2E8F0;
  background-color: var(--wx-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.wx-h1, .wx-h2, .wx-h3,
p, span, a, button, input, select, textarea,
.wp-header__nav-link,
.wp-btn,
.wx-btn {
  font-family: var(--wx-font-ar);
}

p, .wx-text, .wx-body {
  font-size: var(--wx-fs-body);
  line-height: 1.8;
  color: #E2E8F0;
}

.wx-desc, .wx-card-desc, .wx-subtext {
  font-size: var(--wx-fs-small);
  line-height: 1.7;
  color: #CBD5E1;
}

.wx-label, .wx-badge, .wx-tag {
  font-size: var(--wx-fs-label);
}

.wx-theme-light p,
.wx-theme-light .wx-text,
.wx-theme-light .wx-body {
  color: #0B1F44;
}

.wx-theme-light .wx-desc,
.wx-theme-light .wx-card-desc,
.wx-theme-light .wx-subtext {
  color: #334155;
}

/* ── منع تحريك الحروف المنفردة أو تباعد الحروف في العربي ─ */
[dir="rtl"], :lang(ar) {
  letter-spacing: 0 !important;
  word-spacing: normal;
}

/* تباعد الحروف مسموح فقط للنصوص اللاتينية والـ Eyebrows */
.wx-eyebrow {
  font-family: var(--wx-font-lat);
  font-size: var(--wx-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wx-sky);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wx-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wx-sky);
  display: inline-block;
  animation: wxPulse 2s infinite ease-in-out;
}

@keyframes wxPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.4; }
}

/* ── القواعد العامة وضبط الـ SVG الشامل (B01) ── */
svg {
  max-width: 100%;
  height: auto;
}

/* ── التيبوغرافيا الضخمة وأقنعة الكلمات الآمنة (Word-Mask) (B02) ── */
.wx-title-mask {
  overflow: hidden;
  display: block;
}

.wx-word {
  display: inline-block;
  /* مرئي افتراضياً 100% لضمان عدم فشل العناوين مخفية مطلقاً */
  transform: none;
  transition: transform 0.9s var(--wx-ease-expo);
  will-change: transform;
}

/* يُخفى فقط بواسطة JS عندما يكون العنصر أسفل الشاشة */
.wx-anim-pending .wx-word {
  transform: translateY(115%);
}

.is-revealed .wx-word,
.wx-revealed .wx-word,
.wx-force-visible .wx-word,
.wx-static .wx-word {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Failsafe & Static Mode */
.wx-force-visible [data-wx-reveal],
.wx-static [data-wx-reveal] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html.wx-static canvas {
  display: none !important;
}

/* تدرج النص المميز */
.wx-gradient-text {
  background: var(--wx-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* النص المفرّغ (Outline Text) */
.wx-outline-text {
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
  font-family: var(--wx-font-lat);
  font-weight: 800;
  display: inline-block;
}

.wx-theme-light .wx-outline-text {
  -webkit-text-stroke: 1.5px rgba(11, 31, 68, 0.25);
}

/* الأرقام دائماً Montserrat و tabular-nums */
.wx-number, .wx-tabular {
  font-family: var(--wx-font-lat);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  display: inline-block;
}

/* ── الستائر المنحنية والعمق ───────────────────────── */
.wx-curtain {
  position: relative;
  margin-top: calc(var(--wx-curve) * -1);
  border-radius: var(--wx-curve) var(--wx-curve) 0 0;
  box-shadow: var(--wx-shadow-curtain);
  z-index: 10;
  overflow: hidden;
}

/* إيقاع الفصول (Theme Rhythm) */
.wx-theme-dark-deep {
  background-color: var(--wx-ink);
  color: var(--wx-snow);
}

.wx-theme-dark {
  background-color: var(--wx-navy);
  color: var(--wx-snow);
}

.wx-theme-light {
  background-color: var(--wx-snow);
  color: var(--wx-navy);
}

.wx-theme-blue {
  background: var(--wx-gradient-portal);
  color: #ffffff;
}

/* ── الحاوية والشبكة ───────────────────────────────── */
.wx-container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.wx-container--narrow {
  max-width: 880px;
}

.wx-container--wide {
  max-width: 1600px;
}

/* ── الأزرار المغناطيسية والكبسولات ────────────────── */
.wx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--wx-font-ar);
  font-size: var(--wx-text-base);
  font-weight: 700;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--wx-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  user-select: none;
  transition: transform var(--wx-dur-sm) var(--wx-ease-smooth),
              box-shadow var(--wx-dur-sm) var(--wx-ease-smooth),
              background var(--wx-dur-sm) var(--wx-ease-smooth),
              border-color var(--wx-dur-sm) var(--wx-ease-smooth);
}

.wx-btn--primary {
  background: var(--wx-gradient-accent);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.35);
}

.wx-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 102, 255, 0.55);
}

.wx-btn--outline {
  background: transparent;
  color: var(--wx-snow);
  border-color: var(--wx-border-dark);
}

.wx-btn--outline:hover {
  border-color: var(--wx-sky);
  color: var(--wx-sky);
  background: rgba(255, 255, 255, 0.05);
}

.wx-btn--ghost {
  background: transparent;
  color: var(--wx-blue);
  border-color: var(--wx-blue);
}

.wx-btn--ghost:hover {
  background: var(--wx-blue);
  color: #ffffff;
}

/* شارات الـ Plus */
.wx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wx-font-lat);
  font-size: var(--wx-text-xs);
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--wx-radius-pill);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid var(--wx-border-dark);
  color: var(--wx-sky);
}

.wx-badge--plus::before {
  content: '+';
  font-size: 15px;
  font-weight: 800;
  color: var(--wx-blue);
}

/* شارات الـ Glow الموحدة لجميع رؤوس الأقسام */
.wx-badge-glow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  width: fit-content !important;
  width: -moz-fit-content !important;
  max-width: max-content !important;
  align-self: flex-start;
  padding-block: 7px !important;
  padding-inline: 22px !important; /* بادينج محترم ومريح من اليمين والشمال */
  background: rgba(0, 102, 255, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--wx-radius-pill, 9999px);
  font-family: var(--wx-font-ar);
  font-size: 13px;
  font-weight: 700;
  color: var(--wx-sky);
  line-height: 1.3;
  white-space: nowrap;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.wx-badge-glow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wx-sky);
  box-shadow: 0 0 8px var(--wx-sky);
  flex-shrink: 0;
}

/* شارات الـ Glow في الأقسام الفاتحة (مثل الفصل 04 - الإضافات الخمس) */
.wx-theme-light .wx-badge-glow,
.wx-pluses-header .wx-badge-glow,
.wx-faq-header .wx-badge-glow {
  background: rgba(0, 102, 255, 0.08) !important;
  border-color: rgba(0, 102, 255, 0.25) !important;
  color: var(--wx-blue) !important;
}

.wx-theme-light .wx-badge-glow__dot,
.wx-pluses-header .wx-badge-glow__dot,
.wx-faq-header .wx-badge-glow__dot {
  background: var(--wx-blue) !important;
  box-shadow: 0 0 8px rgba(0, 102, 255, 0.5) !important;
}

/* الشارات في الرؤوس المسنترة في المنتصف */
.text-center > .wx-badge-glow,
.wx-audit-header .wx-badge-glow,
.wx-faq-header .wx-badge-glow,
.wx-final-header .wx-badge-glow {
  align-self: center !important;
  margin-inline: auto !important;
}

/* هالات إشعاعية خفيفة بدون ثقل Blur */
.wx-radial-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.22) 0%, rgba(56, 189, 248, 0.08) 45%, transparent 70%);
}

/* ── تفضيل تقليل الحركة ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .wx-word {
    transform: none !important;
  }
}