/* =====================================================
   سعة — تحسينات القراءة والتفاعل
   ملف إضافي فوق style.css (ما يعدّل ملف منيرة)
   يعتمد على متغيرات الألوان الموجودة في style.css
   ===================================================== */

/* ---------- 1. سُلّم الخطوط (Typography scale) ----------
   كبير جدًا  ← عنوان الهيرو فقط (Display)
   كبير       ← عناوين الأقسام والصفحات (H1 / H2)
   متوسط      ← عناوين الكروت والعناصر (H3)
   عادي       ← النصوص والفقرات
   صغير       ← التسميات والملاحظات والأرقام الثانوية
   --------------------------------------------------------- */
:root {
  --fs-display: clamp(40px, 5.4vw, 74px);
  --fs-h1: clamp(34px, 4.6vw, 58px);
  --fs-h2: clamp(28px, 3.4vw, 44px);
  --fs-h3: clamp(19px, 1.6vw, 23px);
  --fs-lead: clamp(17px, 1.5vw, 20px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-xs: 12.5px;
}

body { font-size: var(--fs-body); line-height: 1.75; text-rendering: optimizeLegibility; }
html[lang="en"] body { line-height: 1.65; }

/* الكبير جدًا: عنوان الهيرو بسطرين واضحين */
.hero__title {
  font-size: var(--fs-display);
  line-height: 1.12;
  font-weight: 800;
  max-width: 15ch;
}
.hero__title > span { display: block; }
.hero__subtitle { font-size: var(--fs-lead); line-height: 1.8; max-width: 34em; }

/* الكبير: عناوين الصفحات والأقسام */
.page-hero__title, .product-hero__title, .article__title, .auth__title { font-size: var(--fs-h1); line-height: 1.15; }
.section__title, .features-title h2, .cta__title, .highlight__title { font-size: var(--fs-h2); line-height: 1.25; }

/* المتوسط: عناوين الكروت */
.art-card__title, .feature-content h3, .product-card__name, .post-card__title,
.pillar__title, .value__title, .service__title, .feature__title, .system__title,
.department__title, .why__title, .process__title, .stat-card__title {
  font-size: var(--fs-h3);
  line-height: 1.35;
}

/* العادي: الفقرات (مقروءة وبعرض مريح) */
.art__text, .method__text, .leading__text, .about-story__text, .vision__text,
.faq__intro, .page-hero__subtitle, .cta__text, .product-story__text,
.highlight__text, .system__text, .sustain__text, .newsletter__text, .features-title p {
  font-size: var(--fs-lead);
  line-height: 1.85;
}
.product-card__tagline, .post-card__text, .art-card__text, .pillar__text, .value__text,
.service__text, .feature__text, .department__text, .stat-card__text, .faq__answer {
  font-size: 16px;
  line-height: 1.75;
}

/* الصغير: تسميات وملاحظات */
.eyebrow, .art-card__num, .post-card__date, .post-card__type, .stat__label,
.hero-stat__label, .method__source, .product-card__area, .form__label, .footer__copy {
  font-size: var(--fs-small);
}
.method__source, .footer__copy { font-size: var(--fs-xs); }

/* الأرقام البارزة */
.hero-stat__value, .stat-card__value, .stat__value, .leading__badge-value, .journey__year {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- 2. شريط تقدّم القراءة ---------- */
.scroll-progress {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform-origin: right center; transform: scaleX(0);
  pointer-events: none;
}
html[dir="ltr"] .scroll-progress { transform-origin: left center; }

/* ---------- 3. الهيدر عند النزول ---------- */
.header { transition: box-shadow var(--transition), backdrop-filter var(--transition), padding var(--transition); }
.header.is-scrolled { box-shadow: var(--shadow); backdrop-filter: saturate(1.4) blur(14px); }

/* ---------- 4. ظهور العناصر عند النزول ---------- */
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
html.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* عنوان الهيرو يدخل سطر سطر */
html.js-anim .hero__title > span { opacity: 0; transform: translateY(24px); animation: saah-rise 0.9s var(--ease) forwards; }
html.js-anim .hero__title > span:nth-child(2) { animation-delay: 0.15s; }
html.js-anim .hero__subtitle, html.js-anim .hero__buttons {
  opacity: 0; transform: translateY(18px); animation: saah-rise 0.9s var(--ease) forwards;
}
html.js-anim .hero__subtitle { animation-delay: 0.3s; }
html.js-anim .hero__buttons { animation-delay: 0.45s; }
@keyframes saah-rise { to { opacity: 1; transform: none; } }

/* ---------- 5. الكروت: رفع خفيف وتكبير الصورة ---------- */
.art-card, .product-card, .post-card, .feature-card, .stat-card, .value, .service, .department, .feature {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.art-card, .product-card, .post-card, .feature-card { overflow: hidden; }
.art-card__image, .product-card__image, .post-card__image, .feature-card img {
  transition: transform 0.9s var(--ease);
}
@media (hover: hover) {
  .art-card:hover, .product-card:hover, .post-card:hover, .feature-card:hover,
  .stat-card:hover, .value:hover, .service:hover, .feature:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
  }
  .art-card:hover .art-card__image, .product-card:hover .product-card__image,
  .post-card:hover .post-card__image, .feature-card:hover img { transform: scale(1.06); }
}

/* ---------- 6. الأزرار ---------- */
.btn { position: relative; overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease);
  pointer-events: none;
}
@media (hover: hover) { .btn--primary:hover::after { transform: translateX(120%); } }

/* ---------- 7. الأسئلة الشائعة: فتح ناعم ---------- */
.faq__item { transition: border-color var(--transition), background-color var(--transition); }
.faq__item[open] { border-color: var(--accent); }
.faq__item[open] .faq__answer { animation: saah-rise 0.5s var(--ease); }

/* ---------- 8. زر الرجوع للأعلى ---------- */
.to-top {
  position: fixed; inset-inline-start: 20px; bottom: 24px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), background-color var(--transition);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); color: #15171B; }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* صفحة المنتج فيها شريط ثابت تحت، فنرفع الزر فوقه */
body:has(.sticky-bar) .to-top { bottom: 96px; }

/* ---------- 9. تركيز واضح لمستخدمي الكيبورد ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 10. احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal, html.js-anim .hero__title > span, html.js-anim .hero__subtitle, html.js-anim .hero__buttons {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
  .btn::after, .scroll-progress { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ---------- 11. الجوال ---------- */
@media (max-width: 640px) {
  :root { --fs-body: 16px; }
  .hero__title { max-width: none; }
  .to-top { width: 44px; height: 44px; inset-inline-start: 14px; bottom: 18px; }
}