* §20  BRAND LOGO INTEGRATION + LIGHT THEME POLISH
 * ────────────────────────────────────────────────────────────────────────────
 *   .lp-logo-h     — قناع PNG → يأخذ لون --logo-color (لكل ثيم)
 *   .lp-portal-logo — الشعار الكبير في مركز البورتال (مع توهج)
 *   .lp-cta-watermark — علامة مائية ضخمة جداً خلف بطاقة CTA
 * ════════════════════════════════════════════════════════════════════════════ */

/* الشعار الأساسي — مقنّع PNG يلوّن نفسه حسب الثيم */
.lp-logo-h {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--logo-color);
  -webkit-mask-image: url("../images/logo-h-white.png");
          mask-image: url("../images/logo-h-white.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background-color 0.4s var(--ease);
}

/* علامة الـ nav — حاوية بأبعاد ثابتة (الموجودة .lp-logo-mark) تستضيف .lp-logo-h */
.lp-logo-mark {
  background: linear-gradient(135deg,
    color-mix(in oklab, white 12%, var(--primary)),
    var(--primary-deep));
  position: relative;
}
.lp-logo-mark .lp-logo-h {
  background-color: white;
  -webkit-mask-size: 65%;
          mask-size: 65%;
}
.lp-logo-mark-sm .lp-logo-h {
  -webkit-mask-size: 70%;
          mask-size: 70%;
}
:root[data-theme="light"] .lp-logo-mark {
  background: linear-gradient(135deg, #ffffff, #f6f9fe);
  border: 1px solid var(--hairline-2);
  box-shadow: 0 4px 12px -4px var(--halo), inset 0 1px 0 #ffffff;
}
:root[data-theme="light"] .lp-logo-mark .lp-logo-h {
  background-color: var(--primary);  /* navy في ثيم light */
}

/* علامة الـ footer — أصغر */
.lp-logo-mark-sm {
  width: 28px; height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}
.lp-footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
}

/* الشعار الكبير في وسط البورتال — البطل البصري للصفحة */
.lp-portal-core {
  position: absolute;
  inset: 28%;                     /* أكبر من السابق */
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%,
      color-mix(in oklab, white 35%, var(--primary)) 0%,
      var(--primary) 50%,
      var(--primary-deep) 100%);
  box-shadow:
    inset 0 4px 16px rgba(255,255,255,0.30),
    inset 0 -8px 22px rgba(0,0,0,0.18),
    0 0 70px var(--halo),
    0 0 140px var(--halo-soft);
  animation: lpCorePulse 6s ease-in-out infinite;
  display: grid; place-items: center;
}
:root[data-theme="light"] .lp-portal-core {
  background:
    radial-gradient(circle at 30% 28%,
      #ffffff 0%,
      #f0f5ff 55%,
      #dce7ff 100%);
  box-shadow:
    inset 0 4px 16px #ffffff,
    inset 0 -8px 22px rgba(30,58,138,0.10),
    0 0 70px rgba(30,58,138,0.18),
    0 0 140px rgba(30,58,138,0.10),
    0 0 0 1px rgba(30,58,138,0.10);
}

.lp-portal-logo {
  width: 70%;
  height: 70%;
  background-color: #ffffff;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  animation: lpLogoFloat 6s ease-in-out infinite;
}
:root[data-theme="light"] .lp-portal-logo {
  background-color: var(--primary);   /* navy على لب فاتح */
  filter: drop-shadow(0 8px 24px rgba(30,58,138,0.30));
}
@keyframes lpLogoFloat {
  0%, 100% { transform: translateY(0)  scale(1); }
  50%      { transform: translateY(-3px) scale(1.02); }
}

/* علامة مائية كبيرة خلف بطاقة CTA — لمسة فاخرة */
.lp-cta-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 70%;
  height: 130%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.045;
  background-color: var(--logo-color);
  -webkit-mask-image: url("../images/logo-h-white.png");
          mask-image: url("../images/logo-h-white.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
:root[data-theme="light"] .lp-cta-watermark {
  opacity: 0.08;
  background-color: var(--primary);
}
.lp-cta-card .lp-cta-inner { position: relative; z-index: 2; }


/* ─────────────────────────── LIGHT THEME POLISH ───────────────────────── */

/* خلفية ambient أعمق وأكثر دفئاً للثيم الفاتح */
:root[data-theme="light"] body {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(30,58,138,0.06), transparent 60%),
    radial-gradient(60% 60% at 100% 60%, rgba(99,102,241,0.04), transparent 65%),
    var(--bg-page);
  background-attachment: fixed;
}

/* nav: أوضح بصرياً */
:root[data-theme="light"] .lp-nav {
  background: rgba(255,255,255,0.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 3px rgba(15,23,42,0.04);
}

/* h1 / accent يستفيد من الأزرق الكحلي */
:root[data-theme="light"] .lp-h1 .lp-h1-mark {
  background: linear-gradient(180deg, #0b1224, #1e3a8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
:root[data-theme="light"] .lp-h1 .lp-h1-accent {
  background: linear-gradient(135deg, #2563eb, #1e3a8a 60%, #172554);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* eyebrow أنظف */
:root[data-theme="light"] .lp-eyebrow {
  background: #ffffff;
  border-color: var(--hairline-2);
  color: var(--text-2);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
:root[data-theme="light"] .lp-kicker {
  background: rgba(30,58,138,0.07);
  border-color: rgba(30,58,138,0.18);
  color: var(--primary);
}

/* trust chips أوضح */
:root[data-theme="light"] .lp-trust-chip {
  background: #ffffff;
  border-color: var(--hairline);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}

/* البطاقات: ظلال أعمق قليلاً + حدود حادة */
:root[data-theme="light"] .lp-bento-card,
:root[data-theme="light"] .lp-feature,
:root[data-theme="light"] .lp-mock,
:root[data-theme="light"] .lp-cta-card {
  background: #ffffff;
  border-color: rgba(15,23,42,0.07);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.03),
    0 18px 40px -22px rgba(15,23,42,0.14);
}
:root[data-theme="light"] .lp-bento-card:hover,
:root[data-theme="light"] .lp-feature:hover {
  border-color: rgba(30,58,138,0.22);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.03),
    0 26px 56px -22px rgba(30,58,138,0.22);
}

/* أيقونات البنتو/الميزات: نقطة من الأزرق الكحلي */
:root[data-theme="light"] .lp-bento-icon,
:root[data-theme="light"] .lp-feature-icon {
  background: linear-gradient(160deg, rgba(30,58,138,0.10), rgba(30,58,138,0.03));
  border-color: rgba(30,58,138,0.18);
  color: var(--primary);
}

/* mock dashboard greet مع جراديانت الشعار */
:root[data-theme="light"] .lp-mock-greet {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

/* خط الـ journey أوضح */
:root[data-theme="light"] .lp-journey-line {
  opacity: 0.45;
}
:root[data-theme="light"] .lp-step-num {
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.30),
    inset 0 -3px 6px rgba(0,0,0,0.10),
    0 0 0 4px var(--bg-page),
    0 0 0 5px rgba(30,58,138,0.18),
    0 10px 24px -10px rgba(30,58,138,0.30);
}

/* marquee أوضح في الفاتح */
:root[data-theme="light"] .lp-marquee {
  background: linear-gradient(180deg, transparent, rgba(30,58,138,0.04), transparent);
}
:root[data-theme="light"] .lp-marquee-item { color: var(--text-2); }

/* CTA primary button في الفاتح: gradient navy */
:root[data-theme="light"] .lp-btn-primary {
  background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 60%, #172554 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.12),
    0 14px 36px -12px rgba(30,58,138,0.45);
}
:root[data-theme="light"] .lp-btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 18px 44px -12px rgba(30,58,138,0.55);
}
:root[data-theme="light"] .lp-btn-ghost {
  background: #ffffff;
  border-color: var(--hairline-2);
  color: var(--text-1);
}
:root[data-theme="light"] .lp-btn-ghost:hover {
  background: #f6f9fe;
  border-color: var(--primary);
}

/* mock course بطاقات: ألوان أهدأ على الفاتح */
:root[data-theme="light"] .lp-mock-course {
  border-color: rgba(15,23,42,0.10);
}

/* mock side panel وعناصرها */
:root[data-theme="light"] .lp-mock-side {
  background: #f6f9fe;
}
:root[data-theme="light"] .lp-mock-side-item.is-active {
  background: rgba(30,58,138,0.08);
  border-color: rgba(30,58,138,0.20);
  color: var(--primary);
}

/* mock notif card في الفاتح */
:root[data-theme="light"] .lp-mock-notif {
  background: linear-gradient(135deg, rgba(30,58,138,0.06), #ffffff);
  border-color: rgba(30,58,138,0.16);
}

/* CTA card في الفاتح: حدود أنظف */
:root[data-theme="light"] .lp-cta-card {
  border: 1px solid rgba(30,58,138,0.16);
}
:root[data-theme="light"] .lp-cta-card::before { opacity: 0.25; }

/* calm pills في الفاتح */
:root[data-theme="light"] .lp-calm-pill {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15,23,42,0.05);
}

/* portal rings في الفاتح: أوضح قليلاً */
:root[data-theme="light"] .lp-portal-ring-1 {
  border-color: rgba(30,58,138,0.35);
}
:root[data-theme="light"] .lp-portal-ring-2 {
  border-color: rgba(30,58,138,0.30);
}
:root[data-theme="light"] .lp-portal-ring-3 {
  border-color: rgba(30,58,138,0.18);
}
:root[data-theme="light"] .lp-portal-ring-1::before,
:root[data-theme="light"] .lp-portal-ring-1::after {
  background: var(--primary);
  box-shadow: 0 0 14px var(--primary);
}

/* particles في الفاتح: أنعم */
:root[data-theme="light"] .lp-particles span {
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
  opacity: 0.18;
}

/* ═══ نهاية §20 ═══ */


/* ════════════════════════════════════════════════════════════════════════════