/* ==========================================================================
   طبقة التوافق الاحترافية — سُطور من أوال
   Sutoor min Awal · universal responsive hardening layer
   --------------------------------------------------------------------------
   الهدف: ضمان أن الصور والمربعات والكلمات والسطور والأشكال في كل صفحات
   المنصة تتكيّف مع الهاتف واللوحي والحاسب والشاشات الكبيرة، دون أن يتغيّر
   الطابع البصري لأي صفحة.

   Goal: guarantee that images, boxes, words, rules and shapes on every page
   adapt to phones, tablets, desktops and large displays — without taking
   design control away from each page.

   القاعدة الهندسية: حِراسات التخطيط الخاصة بالشكل مكتوبة بـ :where() أي
   بخصوصية صفرية، فتبقى الأولوية لتنسيق الصفحة نفسها. أما القواعد التي يجب
   أن تسبق سمات HTML أو التنسيقات القديمة — أبعاد الوسائط وعناصر SVG،
   والتفاف النصوص، وإزالة تسطير الروابط — فهي بخصوصية عنصر مقصودة، ومعلّمة
   بتعليق يوضّح السبب. ولا تُستخدم !important إلا في موضعين: إصلاحات
   قابلية الاستخدام على شاشات اللمس، والكلاس decorative-svg.

   Engineering rule: aesthetic layout guards use :where() (zero specificity) so
   page styles always win. Rules that must beat HTML attributes or legacy page
   CSS — media and SVG sizing, text wrapping, link underline removal — use
   deliberate element specificity and say why in a comment. !important appears
   in exactly two places: touch-device usability fixes, and .decorative-svg.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) الأساس المرن — Fluid foundation
   سلّم قياسات ينمو بين شاشة 360px وشاشة 1440px بلا قفزات.
   -------------------------------------------------------------------------- */
:root {
  /* خطوات الخط: أصغر قيمة للهاتف، أكبر قيمة للحاسب */
  --rs-text-micro: clamp(0.6875rem, 0.655rem + 0.15vw, 0.75rem);   /* 11 → 12 */
  --rs-text-2xs: clamp(0.75rem, 0.715rem + 0.16vw, 0.8125rem);     /* 12 → 13 */
  --rs-text-xs: clamp(0.8125rem, 0.775rem + 0.17vw, 0.875rem);     /* 13 → 14 */
  --rs-text-sm: clamp(0.875rem, 0.835rem + 0.18vw, 0.9375rem);     /* 14 → 15 */
  --rs-text-base: clamp(0.9375rem, 0.885rem + 0.24vw, 1.0625rem);  /* 15 → 17 */
  --rs-text-lg: clamp(1.0625rem, 0.96rem + 0.47vw, 1.3125rem);     /* 17 → 21 */
  --rs-text-xl: clamp(1.375rem, 1.13rem + 1.1vw, 2rem);            /* 22 → 32 */

  /* حواشٍ وفواصل مرنة */
  --rs-gutter: clamp(0.875rem, 0.32rem + 2.4vw, 2rem);
  --rs-block-space: clamp(3.25rem, 1.6rem + 7vw, 8.125rem);

  /* حدود المنطقة الآمنة في هواتف الشاشات المقتطعة (notch) */
  --rs-safe-inline-start: env(safe-area-inset-right, 0px);
  --rs-safe-inline-end: env(safe-area-inset-left, 0px);
  --rs-safe-top: env(safe-area-inset-top, 0px);
  --rs-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  /* يمنع iOS من تكبير النص تلقائيًا عند تدوير الهاتف */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   2) لا تمرير أفقي أبدًا — Never scroll sideways
   overflow-x: clip بدل hidden، لأن hidden يعطّل position: sticky.
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  /* clip يمنع التمرير الأفقي مثل hidden، لكنه لا يُنشئ حاوية تمرير، فتبقى
     الترويسات اللاصقة (position: sticky) في كل صفحات المنصة تعمل كما هي.
     كل ترويسات المنصة sticky وليست fixed، لذا يبقى hidden احتياطيًا فقط.
     clip stops sideways scrolling exactly like hidden, but does not create a
     scroll container — so every sticky header on the platform keeps working.
     hidden above is only the legacy fallback. */
  html,
  body {
    overflow-x: clip;
  }
}

/* الروابط بلا تسطير افتراضيًا؛ وتُستعاد بإضافة الكلاس keep-underline.
   لا يُضاف تسطير عند :hover لأن روابط هذه المنصة تعتمد مؤشرات خاصة بها
   (خط متحرك في التنقل، تغيّر خلفية البطاقة في المكتبة)، وأي تسطير عام
   سيتضاعف معها ويسطّر البطاقة بكاملها.
   Links are undecorated by default; add .keep-underline to opt back in.
   No :hover underline is added — this platform's links already carry their own
   affordances (an animated rule in the nav, a background change on library
   cards), and a blanket underline would double up and underline whole cards. */
a:not(.keep-underline) {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3) الصور والوسائط: تتقلّص ولا تتشوّه — Media scales, never distorts
   height: auto مع max-width: 100% يحفظ نسبة الأبعاد للصور التي تحمل
   سمتَي width/height في HTML.
   -------------------------------------------------------------------------- */
:where(img, svg, video, canvas, audio, iframe, embed, object, picture, figure) {
  max-width: 100%;
}

:where(img, video, canvas) {
  height: auto;
}

/* قاعدة عامة آمنة للصور والوسائط المباشرة — بخصوصية عنصر حتى تسبق
   القيم الافتراضية للسمات width/height في HTML.
   Element-specificity guard so the HTML width/height attributes cannot
   force a media element wider than its container. */
img,
picture,
video {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   3-ب) عناصر SVG: لا تتمدّد أبدًا خارج حاويتها — SVG never outgrows its box
   العنصر <svg> بلا width/height صريحين قيمته الافتراضية 100% على المحورين،
   فيخرج عملاقًا داخل أي حاوية مرنة. height: auto يعيده إلى نسبة viewBox.
   An <svg> with no explicit width/height defaults to 100% on BOTH axes, so it
   renders giant inside any flexible container. height: auto restores the
   viewBox aspect ratio instead.
   -------------------------------------------------------------------------- */
svg {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   3-ج) الأشكال الزخرفية — Decorative marks
   -------------------------------------------------------------------------- */
.decorative-svg {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px;
  min-width: 48px;
  min-height: 48px;
}

:where(img) {
  /* النص البديل يبقى مقروءًا إن تعذّر تحميل الصورة */
  font-size: var(--rs-text-2xs);
  line-height: 1.6;
}

:where(iframe, embed, object, video) {
  border: 0;
}

/* --------------------------------------------------------------------------
   3-د) الترويسة والمحتوى: لا تداخل — Header never covers content
   كل ترويسات هذه المنصة sticky أو داخل السياق العادي، أي أنها تحتلّ مساحتها
   في التخطيط ولا تركب فوق المحتوى؛ لذلك إضافة padding-top ثابت هنا كانت
   ستُحدث فراغًا ميتًا أعلى كل صفحة وتكسر الواجهة الرئيسية. الحلّ:

   1) position: relative للحاوية الرئيسية (سياق تمركز واضح للطبقات).
   2) الهامش الأعلى 112px يُفعَّل فقط عند وجود ترويسة fixed حقيقية،
      عبر data-fixed-header على body.
   3) التداخل الفعلي الوحيد يحدث عند القفز إلى مرساة (#id): الوجهة تختفي
      تحت الترويسة اللاصقة. scroll-padding-top هو الإصلاح الصحيح لذلك.

   Every header here is sticky or in normal flow — it occupies layout space and
   never overlaps content, so a hard padding-top would only add a dead band and
   break the homepage hero. Instead: relative positioning, an opt-in offset for
   genuinely fixed headers, and scroll-padding-top for anchor jumps — which is
   where the sticky header really did hide content.
   -------------------------------------------------------------------------- */
:root {
  --rs-header-offset: 112px;
  --rs-anchor-offset: 96px;
}

main,
.main-content {
  position: relative;
}

body[data-fixed-header] main,
body[data-fixed-header] .main-content {
  padding-top: var(--rs-header-offset);
}

/* :where() حتى تبقى الأولوية للصفحات التي ضبطت مقدارها بنفسها */
:where(html) {
  scroll-padding-top: var(--rs-anchor-offset);
}

@media (max-width: 620px) {
  :root {
    --rs-anchor-offset: 84px;
  }
}

/* --------------------------------------------------------------------------
   4) الكلمات والسطور: تلتف ولا تدفع التصميم — Text wraps, never pushes
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, caption,
       th, td, label, legend, summary, a, span, strong, em, b, i, small, time) {
  overflow-wrap: break-word;
}

/* النصوص والعناوين لا تخرج من صندوقها مهما طالت الكلمة أو الرابط.
   بخصوصية عنصر حتى تسبق تنسيقات الصفحات التي تضبط white-space أو الأطوال.
   Element specificity so no page style can let a long word or URL push a
   heading past the edge of the screen. */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote, figcaption, caption, th, td, label, legend, summary {
  overflow-wrap: break-word;
  word-break: break-word;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:where(p, li, dd, figcaption, blockquote) {
  text-wrap: pretty;
}

/* السلاسل الطويلة بلا فواصل: روابط، بصمات SHA، أكواد */
:where(code, kbd, samp, var, pre, [class*="sha"], [class*="hash"], [class*="code"]) {
  overflow-wrap: anywhere;
}

:where(pre) {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   5) الجداول: تُمرَّر أفقيًا بدل أن تمدّ الصفحة — Tables scroll, page doesn't
   -------------------------------------------------------------------------- */
:where(table) {
  max-width: 100%;
}

@media (max-width: 720px) {
  :where(table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   6) الحقول والأزرار — Fields and controls
   -------------------------------------------------------------------------- */
:where(input, select, textarea, button) {
  max-width: 100%;
}

:where(textarea) {
  resize: vertical;
}

@media (pointer: coarse) {
  /* حجم 16px هو الحد الذي يمنع iOS من تكبير الصفحة عند التركيز على الحقل.
     Below 16px iOS zooms the page on focus — this must not be overridden. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }

  /* مساحة لمس لا تقلّ عن 44px وفق إرشادات الوصول */
  :where(button, [role="button"], summary,
         input[type="button"], input[type="submit"], input[type="reset"]) {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   7) المربعات والأشكال المطلقة — Boxes and absolutely placed shapes
   العناصر الزخرفية المطلقة لا تُنشئ تمريرًا أفقيًا داخل حاويتها.
   -------------------------------------------------------------------------- */
:where([class*="grid"], [class*="cards"], [class*="row"], [class*="flex"]) > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   7-ب) شبكة الإحصائيات — Stats grid
   عمودان على الهاتف وأربعة على الحاسب. minmax(0, 1fr) مع min-width: 0 هما
   ما يمنع البطاقة من التمدّد بعرض محتواها واقتطاع بقيّة الأعمدة.
   Two columns on phones, four from 768px up. minmax(0, 1fr) plus min-width: 0
   is what stops a card from growing to its content width and clipping the rest.
   -------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.stats-grid > * {
  min-width: 0;
  /* يمنع الرقم الكبير من فرض عرض أدنى يكسر الشبكة */
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   8) الشاشات الصغيرة جدًا — Very small phones (≤ 380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :where(h1) {
    line-height: 1.25;
  }

  :where(h2, h3) {
    line-height: 1.32;
  }

  /* الهامش الافتراضي لـ figure (40px من كل جهة) يبتلع عرض الهاتف */
  :where(figure) {
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   9) الهاتف أفقيًا وشاشات قصيرة — Landscape phones / short viewports
   الأقسام المقيَّدة بارتفاع الشاشة لا تحتجز المحتوى.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  :where(section, header, .hero) {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   10) تفضيلات المستخدم — User preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :where(html) {
    scroll-behavior: auto;
  }

  :where(*, *::before, *::after) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   11) الطباعة — Print
   -------------------------------------------------------------------------- */
@media print {
  :where(body) {
    background: #fff;
    color: #000;
  }

  :where(img, figure, table, pre, blockquote) {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  :where(h1, h2, h3) {
    break-after: avoid;
  }
}