/* ═══════════════════════════════════════════════════════════════════════════
   sketch — Components
   مكوّنات مشتركة بين كل الصفحات: الشعار، الترويسة، القائمة، الفوتر.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── الشعار ─────────────────────────────────────────────────────────────── */
.logo-word{
  font-family:var(--font-en); direction:ltr; font-weight:600;
  position:relative; display:inline-block;
}
.logo-arc{
  position:absolute; left:0; bottom:-5px;
  width:100%; height:9px; overflow:visible; color:var(--violet);
}

/* ── الترويسة ───────────────────────────────────────────────────────────── */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:var(--z-header);
  padding:22px var(--space-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid transparent;
  transition:background var(--dur-base) ease, padding var(--dur-base) ease, border-color var(--dur-base) ease;
}
.site-header.is-scrolled{
  background:rgba(246,244,241,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding-block:14px; border-color:var(--line);
}

.nav-logo{ font-size:20px; color:var(--paper); transition:color var(--dur-base) ease; }
.site-header.is-scrolled .nav-logo{ color:var(--ink); }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:14px; color:var(--paper); opacity:.85; position:relative;
  transition:opacity var(--dur-fast) ease, color var(--dur-base) ease;
}
.site-header.is-scrolled .nav-links a{ color:var(--ink); }
.nav-links a:hover{ opacity:1; }
/* خط سفلي يترسم عند المرور — بديل عن تغيير اللون فقط */
.nav-links a::after{
  content:''; position:absolute; inset-inline:0; bottom:-6px; height:1px;
  background:var(--violet); transform:scaleX(0); transform-origin:inline-end;
  transition:transform var(--dur-fast) var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:inline-start; }

.nav-end{ display:flex; align-items:center; gap:14px; }

.nav-cta{
  font-family:var(--font-mono); direction:ltr; font-size:12px; letter-spacing:.06em;
  border:1px solid var(--paper); color:var(--paper);
  padding:9px 18px; border-radius:var(--radius);
  transition:all var(--dur-base) ease; white-space:nowrap;
}
.site-header.is-scrolled .nav-cta{ border-color:var(--ink); color:var(--ink); }
.nav-cta:hover{ background:var(--violet); border-color:var(--violet); color:#fff; }

/* ── زر القائمة (جوال) ──────────────────────────────────────────────────── */
.nav-toggle{
  display:none; width:44px; height:44px;   /* حد اللمس الأدنى — WCAG 2.5.5 */
  align-items:center; justify-content:center;
  border:1px solid rgba(246,244,241,.3); border-radius:var(--radius);
  color:var(--paper); transition:border-color var(--dur-base) ease, color var(--dur-base) ease;
}
.site-header.is-scrolled .nav-toggle{ border-color:var(--line); color:var(--ink); }

.nav-toggle-bars{ display:block; width:18px; height:12px; position:relative; }
.nav-toggle-bars span{
  position:absolute; inset-inline:0; height:1.5px; background:currentColor;
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) ease;
}
.nav-toggle-bars span:first-child{ top:0; }
.nav-toggle-bars span:last-child{ bottom:0; }
/* يتحول إلى × عند الفتح */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child{ transform:translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child{ transform:translateY(-5.25px) rotate(-45deg); }

/* ── درج القائمة (جوال) ─────────────────────────────────────────────────── */
.mobile-nav{
  position:fixed; inset:0; z-index:var(--z-drawer);
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  /* visibility خاصية منفصلة (discrete): لو انتقلت مع المدة تبقى hidden نصفها،
     فيفشل نقل التركيز. الحل: تفليبها فورًا عند الفتح، وتأجيلها للنهاية عند الإغلاق. */
  transition:opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
}
.mobile-nav[hidden]{ display:flex; }          /* نتحكم بالإظهار عبر is-open لا بـ hidden */
.mobile-nav.is-open{
  opacity:1; visibility:visible;
  transition:opacity var(--dur-base) ease, visibility 0s linear 0s;
}

.mobile-nav nav{ display:flex; flex-direction:column; gap:6px; width:min(80vw, 340px); }
.mobile-nav a{
  font-family:var(--font-display); font-size:24px; font-weight:700;
  padding:12px 0; display:flex; align-items:baseline; gap:14px;
  border-bottom:1px solid var(--line-dark);
  opacity:0; transform:translateY(14px);
}
.mobile-nav.is-open a{
  opacity:1; transform:none;
  transition:opacity .45s ease calc(var(--i) * .05s), transform .45s var(--ease) calc(var(--i) * .05s);
}
.mobile-nav a .mono{ font-size:11px; color:var(--violet); }
.mobile-nav a:hover{ color:var(--violet); }
.mobile-nav-cta{
  margin-top:20px; border:none !important;
  background:var(--violet); color:#fff !important;
  justify-content:center; border-radius:var(--radius);
}

/* يمنع تمرير الخلفية أثناء فتح الدرج */
body.is-locked{ overflow:hidden; }

/* ── الفوتر ─────────────────────────────────────────────────────────────── */
.site-footer{ background:var(--ink); color:var(--paper); padding-top:90px; }

.foot-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:70px; border-bottom:1px solid var(--line-dark);
}
.foot-logo{ font-size:26px; }
.foot-tag{ margin-top:18px; font-size:14px; color:var(--grey-on-dark); line-height:1.9; max-width:280px; }

.foot-col h2{
  font-family:var(--font-mono); direction:ltr; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:400;
  color:var(--grey); margin-bottom:18px;
}
.foot-col ul li{ margin-bottom:12px; font-size:14px; }
.foot-col ul li a:hover{ color:var(--violet); }

.foot-news-body{ font-size:13px; color:var(--grey-on-dark); line-height:1.8; }
.news-field{ display:flex; border:1px solid var(--line-dark); margin-top:16px; }
.news-field input{
  flex:1; min-width:0; background:none; border:none; padding:12px 14px;
  color:var(--paper); font-family:var(--font-ar); font-size:13px;
}
.news-field input::placeholder{ color:#6b6862; }
.news-field input[aria-invalid="true"]{ box-shadow:inset 0 0 0 1px var(--err); }
.news-field button{
  background:var(--violet); color:#fff; padding-inline:18px; font-size:13px;
  transition:background var(--dur-fast) ease;
}
.news-field button:hover{ background:var(--violet-deep); }

.news-msg{ margin-top:12px; font-size:12.5px; line-height:1.7; }
.news-msg.is-ok{ color:#7fd6a0; }
.news-msg.is-err{ color:#ff9b8f; }

.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:26px; font-family:var(--font-mono); direction:ltr;
  font-size:11px; color:var(--grey); flex-wrap:wrap; gap:10px;
}

/* ── التجاوب ────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }     /* الزر يظهر تحديدًا حين تختفي الروابط */
  .nav-cta{ display:none; }
  .foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .foot-top{ grid-template-columns:1fr; }
}