/* =====================================================================
   THEME.CSS  —  Night / Light mode
   ---------------------------------------------------------------------
   - الموقع الأصلي = Night mode (الافتراضي، من غير أي تعديل).
   - لما المستخدم يدوس على الزرار، JS بيحط  data-theme="light"  على <html>
     والملف ده بيقلب كل الألوان.
   - الملف لازم يتحمّل "آخر" ملف CSS في index.html عشان يغلب على الباقي.
   ===================================================================== */


/* =====================================================================
   0) إصلاح مهم: الهيدر كان تحت الـ <main> ومحدش يقدر يدوس على أزراره
      v10.css كان بيكتب  z-index:2  فوق الـ z-index:100 بتاع style.css،
      و<main> بييجي بعده في الصفحة فبيغطّي الهيدر. بنرجّع الهيدر فوق.
   ===================================================================== */
.site-header { z-index: 100; }


/* =====================================================================
   1) متغيرات الوضع الفاتح  (الألوان الأساسية كلها بتتغير من هنا)
   ===================================================================== */
:root { color-scheme: dark; }

:root[data-theme="light"] {
  color-scheme: light;

  --bg:         #f7f3ea;               /* خلفية الصفحة (كريمي دافي) */
  --panel:      #fffdf8;
  --text:       #1b1712;               /* لون النص الأساسي */
  --muted:      #6b655a;
  --line:       rgba(160, 108, 20, .30);
  --gold:       #a8731a;               /* دهبي أغمق عشان يبان على الأبيض */
  --gold-light: #8f620f;

  /* ألوان إضافية بنستخدمها تحت */
  --t-soft:     #5c564b;               /* فقرات */
  --t-faint:    #7a7468;               /* نصوص صغيرة */
  --t-border:   rgba(0, 0, 0, .13);    /* حدود الكروت */
  --t-card:     #fffdf8;               /* خلفية الكروت */
  --t-section:  #efe9db;               /* خلفية قسم Process */
}


/* =====================================================================
   2) انتقال ناعم وقت التبديل
      (الـ class ده بيتحط على <html> نص ثانية بس وقت الضغط)
   ===================================================================== */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color .55s ease,
    color .55s ease,
    border-color .55s ease,
    box-shadow .55s ease,
    fill .55s ease !important;
}
/* الزرار له انتقالاته الخاصة */
html.theme-switching .theme-toggle,
html.theme-switching .theme-toggle * {
  transition: revert-layer !important;
}


/* =====================================================================
   3) الزرار نفسه  (.theme-toggle)
   ===================================================================== */
.theme-toggle {
  /* الأبعاد — غيّرهم من هنا لو عايز زرار أكبر/أصغر */
  --tg-w: 132px;
  --tg-h: 40px;
  --tg-pad: 5px;
  --tg-ico: calc(var(--tg-h) - var(--tg-pad) * 2);

  /* ألوان الزرار — Night */
  --tg-bg:    linear-gradient(90deg, #d9a94d 0%, #f1d791 48%, #fff6df 100%);
  --tg-text:  #2b1f08;
  --tg-icon:  #3b2a0a;
  --tg-glow:  0 4px 14px rgba(217, 169, 77, .30);
  --tg-inset: inset 0 2px 6px rgba(255, 255, 255, .55);

  position: relative;
  flex: 0 0 auto;
  width: var(--tg-w);
  height: var(--tg-h);
  border: 0;
  border-radius: 40px;
  cursor: pointer;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--tg-ico) + var(--tg-pad));   /* مساحة للهلال */

  background: var(--tg-bg);
  box-shadow: var(--tg-inset), var(--tg-glow);
  color: var(--tg-text);
  font: 700 12px/1 "DM Sans", sans-serif;
  letter-spacing: .2px;
  -webkit-tap-highlight-color: transparent;

  transition:
    background .65s ease,
    color .65s ease,
    padding .65s ease,
    box-shadow .65s ease;
}

/* ---- الهلال (Night) ---- */
.theme-toggle .toggle-icon {
  position: absolute;
  top: var(--tg-pad);
  left: var(--tg-pad);
  width: var(--tg-ico);
  height: var(--tg-ico);
  border-radius: 50%;
  background: var(--tg-icon);

  /* دايرة بنقص منها دايرة تانية = هلال */
  -webkit-mask: radial-gradient(circle at 75% 35%,
                 transparent calc(var(--tg-ico) * .46),
                 #000 calc(var(--tg-ico) * .48));
          mask: radial-gradient(circle at 75% 35%,
                 transparent calc(var(--tg-ico) * .46),
                 #000 calc(var(--tg-ico) * .48));

  transition:
    left .65s cubic-bezier(.2, .8, .2, 1),
    background .65s ease;
}

/* ---- النص ---- */
.theme-toggle .toggle-text {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}
.theme-toggle .toggle-text::before { content: "Night mode"; }

/* ---- Light mode: الزرار بيبقى غامق والهلال بيبقى دايرة كاملة على اليمين ---- */
:root[data-theme="light"] .theme-toggle {
  --tg-bg:    linear-gradient(90deg, #c08a24 0%, #9a6a14 55%, #5e3f08 100%);
  --tg-text:  #ffffff;
  --tg-icon:  #fff6df;
  --tg-glow:  0 4px 14px rgba(120, 80, 10, .30);
  --tg-inset: inset 0 -2px 6px rgba(0, 0, 0, .30);

  padding-left: 0;
  padding-right: calc(var(--tg-ico) + var(--tg-pad));
}
:root[data-theme="light"] .theme-toggle .toggle-icon {
  left: calc(var(--tg-w) - var(--tg-pad) - var(--tg-ico));
  -webkit-mask: none;
          mask: none;
}
:root[data-theme="light"] .theme-toggle .toggle-text::before { content: "Light mode"; }

/* ---- Focus (accessibility) ---- */
.theme-toggle:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}
.theme-toggle:active .toggle-icon { transform: scale(.92); }

/* ---- شاشات متوسطة: زرار صغير من غير نص عشان الهيدر ما يزحمش ---- */
@media (max-width: 1260px) {
  .theme-toggle { --tg-w: 74px; padding: 0 !important; }
  .theme-toggle .toggle-text { display: none; }
}
@media (max-width: 520px) {
  .theme-toggle { --tg-w: 64px; --tg-h: 34px; --tg-pad: 4px; }
}

/* ---- ظبط مكان الزرار في الهيدر ---- */
.nav-wrap { gap: 28px; }
nav { gap: 26px; }
.nav-link { white-space: nowrap; }
@media (min-width: 821px) and (max-width: 1260px) {
  .nav-wrap { padding: 0 24px; gap: 14px; }
  .brand { min-width: 0; gap: 12px; }
  .brand-copy strong { font-size: 13px; letter-spacing: 2.5px; }
  .brand-copy small { letter-spacing: 3.5px; }
  nav { gap: 14px; }
  .nav-link { font-size: 13px; }
  .premium-btn { padding: 10px 14px 10px 18px; gap: 10px; }
}
@media (max-width: 1050px) { .nav-wrap { gap: 12px; } nav { gap: 12px; } }
@media (max-width: 820px)  { .nav-wrap { gap: 10px; } }
@media (max-width: 520px)  { .nav-wrap { gap: 6px; } }


/* =====================================================================
   4) ألوان الوضع الفاتح لباقي الموقع
   ===================================================================== */

/* ---- الخلفية العامة ---- */
:root[data-theme="light"] body:before {
  background-image: radial-gradient(#000 .6px, transparent .6px);
  opacity: .03;
}

/* ---- الهيدر ---- */
:root[data-theme="light"] .site-header {
  background: rgba(247, 243, 234, .82);
  border-bottom-color: rgba(160, 108, 20, .28);
}
:root[data-theme="light"] .site-header.v10-scrolled {
  background: rgba(247, 243, 234, .94) !important;
}
:root[data-theme="light"] .nav-link { color: #3a352c; }
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link.active { color: var(--gold-light); }

:root[data-theme="light"] .mobile-menu { color: #1b1712; border-color: rgba(0, 0, 0, .2); }
:root[data-theme="light"] .mobile-menu span { background: #3a352c; }
@media (max-width: 820px) {
  :root[data-theme="light"] nav {
    background: #fffdf8;
    border-color: rgba(160, 108, 20, .28);
    box-shadow: 0 20px 50px rgba(60, 40, 5, .15);
  }
}

/* ---- Hero ---- */
:root[data-theme="light"] .eyebrow { color: #8a6a2c; }
:root[data-theme="light"] .hero-description { color: var(--t-soft); }
:root[data-theme="light"] .stat { border-right-color: rgba(0, 0, 0, .15); }
:root[data-theme="light"] .stat span { color: var(--t-faint); }
:root[data-theme="light"] .scroll-cue { color: var(--t-faint); }
/* أرقام 01–05 على اليمين واقعة فوق الصورة الغامقة، فبتفضل بألوانها الفاتحة */
:root[data-theme="light"] .side-index .current { color: #f2cf83; }

/* الكلمات الدهبية المتحركة في العنوان (كان فيها لون أبيض بيختفي على الكريمي) */
:root[data-theme="light"] .hero h1 em .v10-word > span {
  background-image: linear-gradient(100deg, #8f620f 0%, #d9a94d 45%, #8f620f 70%);
  background-size: 220% 100%;
}

/* صورة الـ Hero (خلفيتها سودا) */
:root[data-theme="light"] .image-shade {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(247, 243, 234, .72) 13%, transparent 42%),
    linear-gradient(0deg,  var(--bg) 0%, transparent 32%);
}
@media (max-width: 820px) {
  :root[data-theme="light"] .image-shade {
    background:
      linear-gradient(180deg, rgba(247, 243, 234, .05), var(--bg) 92%),
      linear-gradient(90deg, var(--bg) 0%, transparent 65%);
  }
}

/* ---- Services / Why ---- */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .why-card {
  border-color: var(--t-border);
  background: rgba(255, 255, 255, .6);
}
:root[data-theme="light"] .service-card small { color: var(--t-faint); }
:root[data-theme="light"] .why-card p { color: var(--t-soft); }

/* ---- About / عناوين الأقسام ---- */
:root[data-theme="light"] .about-copy p { color: var(--t-soft); }
:root[data-theme="light"] .section-heading p,
:root[data-theme="light"] .process-heading p { color: var(--t-soft); }

/* ---- Work (الكروت بتفضل مظلمة من فوق لأنها preview للمشاريع) ---- */
:root[data-theme="light"] .work-card {
  background: var(--t-card);
  border-color: var(--t-border);
  box-shadow: 0 10px 30px rgba(60, 40, 5, .08);
}
:root[data-theme="light"] .work-meta small { color: var(--t-faint); }
:root[data-theme="light"] .booking-project:hover {
  box-shadow: 0 25px 60px rgba(60, 40, 5, .22);
}

/* ---- Process ---- */
:root[data-theme="light"] .process { background: var(--t-section); }
:root[data-theme="light"] .process-list { border-top-color: rgba(0, 0, 0, .14); }
:root[data-theme="light"] .process-list div { border-bottom-color: rgba(0, 0, 0, .12); }
:root[data-theme="light"] .process-list span { color: var(--t-faint); }

/* ---- Technology ---- */
:root[data-theme="light"] .tech-grid { border-top-color: rgba(0, 0, 0, .14); border-left-color: rgba(0, 0, 0, .14); }
:root[data-theme="light"] .tech-grid span {
  border-right-color: rgba(0, 0, 0, .14);
  border-bottom-color: rgba(0, 0, 0, .14);
  color: #4a4439;
}

/* ---- FAQ ---- */
:root[data-theme="light"] .faq-list details { border-top-color: rgba(0, 0, 0, .14); }
:root[data-theme="light"] .faq-list details:last-child { border-bottom-color: rgba(0, 0, 0, .14); }
:root[data-theme="light"] details p { color: var(--t-soft); }

/* ---- Contact + الفورم ---- */
:root[data-theme="light"] .contact-box p { color: var(--t-soft); }
:root[data-theme="light"] .project-form label span { color: var(--t-faint); }
:root[data-theme="light"] .project-form input,
:root[data-theme="light"] .project-form select,
:root[data-theme="light"] .project-form textarea {
  background: var(--t-card);
  color: var(--text);
  border-color: rgba(160, 108, 20, .35);
}
:root[data-theme="light"] .project-form ::placeholder { color: #9b9486; }
:root[data-theme="light"] .form-note { color: var(--t-faint); }

/* ---- Footer ---- */
:root[data-theme="light"] .footer-inner p,
:root[data-theme="light"] .footer-inner > a { color: var(--t-faint); }

/* ---- الـ cursor والتأثيرات (كانت معمولة للخلفية السودا) ---- */
:root[data-theme="light"] .v10-ring {
  mix-blend-mode: normal;
  border-color: rgba(143, 98, 15, .7);
}
:root[data-theme="light"] .v10-ring.is-link {
  background: rgba(168, 115, 26, .12);
  border-color: #8f620f;
}
:root[data-theme="light"] .v10-aurora { opacity: .35; }
:root[data-theme="light"] .v10-embers { opacity: .35; }


/* =====================================================================
   5) تقليل الحركة
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after { transition: none !important; }
  .theme-toggle,
  .theme-toggle .toggle-icon { transition-duration: .01ms !important; }
}