/* ============================================================
   v9.9.409 · ثيمات المناسبات الوطنية لمفزاع
   national: يوم الوطني ويوم العلم — أخضر وعلم كبير يرفرف
   founding: يوم التأسيس — بني تراثي + شعار التأسيس + الجمال + العلم
   ملاحظة: النصوص والترتيب كما هي بالضبط · تتغير الألوان والهوية فقط
   ============================================================ */

/* حاوية الهيرو تستقبل الطبقات */
html[data-occasion="national"] .hero,
html[data-occasion="founding"] .hero { position: relative; }

/* ---------- الثيم الوطني (الأخضر) ---------- */
html[data-occasion="national"] {
  --navy-900: #0B3D2E !important;
  --navy-800: #0E4A38 !important;
  --navy-700: #11583F !important;
  --navy-600: #146847 !important;
}
/* ترويسة وخلفيات كحلية تتبع الأخضر */
html[data-occasion="national"] .app-header,
html[data-occasion="national"] header.site-head,
html[data-occasion="national"] .navbar,
html[data-occasion="national"] .topbar,
html[data-occasion="national"] .brand-mark,
html[data-occasion="national"] .card--dark,
html[data-occasion="national"] .modal-card--dark {
  background: linear-gradient(160deg, #0B3D2E, #11583F) !important;
}
html[data-occasion="national"] .hero {
  background: linear-gradient(178deg, #062A1F 0%, #0B3D2E 100%) !important;
}
/* العلم الكبير يرفرف خلف محتوى الهيرو كاملًا */
/* خلفية العلم تملأ الهيرو من أوله لآخره (خافتة كنسيج) */
html[data-occasion="national"] .hero .oc-flag-bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; opacity: .62;
  animation: ocSway 8s ease-in-out infinite;
  pointer-events: none;
}
/* v9.9.411: شارة «أول منصة سعودية» تختفي باليوم الوطني — الشعار الرسمي يغني عنها */

/* v9.9.411: شعار «عزّنا بطبعنا» أعلى الهيرو بالوسط — لليوم الوطني فقط */

/* v9.9.411: الشريط العلوي الموحد — شعار المناسبة بالوسط تمامًا،
   وشارة «أول منصة سعودية» آخر الكرت: يمين بالعربي ويسار بالإنجليزي (بكل الثيمات) */
.oc-topbar {
  position: absolute; top: 18px; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.oc-emb-wrap { display: flex; align-items: center; justify-content: center; }
html[data-occasion="national"] .hero-badge,
html[data-occasion="founding"] .hero-badge {
  position: absolute; top: 26px; inset-inline-start: 26px; margin: 0; z-index: 4;
  max-width: 34vw; white-space: nowrap; overflow: hidden;
}
html[data-occasion="national"] .home-v2-root .hero .hero-in,
html[data-occasion="founding"] .home-v2-root .hero .hero-in {
  margin-top: 66px !important;
}
.oc-emblem { display: block; height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); }
html[data-occasion-raw="national"] .oc-emblem { width: min(330px, 58vw); }
html[data-occasion-raw="founding"] .oc-emblem { width: 250px; border-radius: 50%; }
html[data-occasion="founding"] .home-v2-root .hero .hero-in { margin-top: 230px !important; }

/* v9.9.411: ختم التأسيس صار دائرة كاملة بحدوده — القرص والحلقة داخل الملف نفسه */
.oc-emb-wrap { position: relative; }
/* v9.9.411: نسخة بيضاء منوّرة أكبر وراء الختم نفسه — بطلب المالك */
html[data-occasion-raw="founding"] .oc-emb-wrap::before {
  content: ""; position: absolute; top: -16%; right: -16%; bottom: -16%; left: -16%; inset: -16%;
  background: url(/themes/founding_logo_v2.png) center/contain no-repeat;
  filter: brightness(0) invert(1) blur(4px) drop-shadow(0 0 26px rgba(255,255,255,.75));
  opacity: .45; border-radius: 50%; z-index: -1;
}
html[data-occasion-raw="flag"] .oc-emblem { width: 185px; animation: ocSway 7s ease-in-out infinite; border-radius: 5px; }
html[data-occasion-raw="flag"] .home-v2-root .hero .hero-in { margin-top: 94px !important; }

/* v9.9.409: العلم الكبير العلوي انشال بطلب المالك — يبقى علم الخلفية يرفرف فقط */
html[data-occasion="national"] .hero .oc-flag,
html[data-occasion="national"] .hero .oc-layer.oc-flag {
  display: none !important; visibility: hidden !important;
}
/* طبقة تعتيم خفيفة تضمن وضوح النص الأبيض فوق العلم */
html[data-occasion="national"] .hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0;
  background: rgba(4,26,20,.24);
  pointer-events: none;
}
html[data-occasion="national"] .hero-in,
html[data-occasion="national"] .wrap { position: relative; z-index: 1; }

/* v9.9.409: لوح زجاجي داكن خلف نص الهيرو — وضوح تام فوق العلم الكبير */
html[data-occasion="national"] .hero-in {
  background: linear-gradient(180deg, rgba(4,26,20,.68), rgba(4,26,20,.56));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 28px; max-width: 940px; margin: 0 auto !important;
  padding: 34px 30px 40px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px -18px rgba(0,0,0,.5);
}

/* ---------- ثيم يوم التأسيس (البني) ---------- */
html[data-occasion="founding"] {
  --navy-900: #3E2A1B !important;
  --navy-800: #4C3420 !important;
  --navy-700: #5A3E26 !important;
  --navy-600: #6A4A2D !important;
}
html[data-occasion="founding"] .app-header,
html[data-occasion="founding"] header.site-head,
html[data-occasion="founding"] .navbar,
html[data-occasion="founding"] .topbar,
html[data-occasion="founding"] .brand-mark,
html[data-occasion="founding"] .card--dark,
html[data-occasion="founding"] .modal-card--dark {
  background: linear-gradient(160deg, #3E2A1B, #5A3E26) !important;
}
html[data-occasion="founding"] .hero {
  background: linear-gradient(178deg, #2C1D12 0%, #3E2A1B 100%) !important;
}
/* قافلة الجمال تتحرك ببطء أسفل الهيرو */
html[data-occasion="founding"] .hero .oc-camel {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%;
  object-fit: cover; object-position: center 40%;
  z-index: 0; opacity: .48;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  filter: sepia(.25) brightness(1.05);
  animation: ocCamel 26s linear infinite alternate;
  pointer-events: none;
}
/* علم التأسيس يرفرف أعلى الهيرو */
html[data-occasion="founding"] .hero .oc-flag {
  position: absolute; top: 8px; inset-inline-end: 0; width: 40%; height: 40%;
  object-fit: contain; object-position: top;
  z-index: 0; opacity: .6;
  animation: ocSway 7.5s ease-in-out infinite;
  pointer-events: none;
}
/* طبقة تعتيم للوضوح فوق الجمال */
html[data-occasion="founding"] .hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(44,29,18,.12) 40%, rgba(44,29,18,.55));
  pointer-events: none;
}
html[data-occasion="founding"] .hero-in,
html[data-occasion="founding"] .wrap { position: relative; z-index: 1; }

/* v9.9.409: لوح داكن خلف نص هيرو التأسيس — الوضوح فوق الجمال والعلم */
html[data-occasion="founding"] .hero-in {
  background: linear-gradient(180deg, rgba(38,24,14,.72), rgba(38,24,14,.58));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 28px; max-width: 940px; margin: 0 auto !important;
  padding: 34px 30px 40px;
  border: 1px solid rgba(216,180,120,.22);
  box-shadow: 0 22px 60px -18px rgba(0,0,0,.5);
}

/* ---------- الحركات ---------- */
@keyframes ocSway {
  0%, 100% { transform: skewX(0deg) scaleX(1) translateY(0); }
  25%      { transform: skewX(.7deg) scaleX(1.014) translateY(-4px); }
  50%      { transform: skewX(-.5deg) scaleX(1.007) translateY(2px); }
  75%      { transform: skewX(.5deg) scaleX(1.012) translateY(-3px); }
}
@keyframes ocCamel {
  from { object-position: 12% 65%; }
  to   { object-position: 88% 65%; }
}
@keyframes ocGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(216,180,120,.35)); }
  50%      { filter: drop-shadow(0 0 16px rgba(216,180,120,.75)); }
}
@media (prefers-reduced-motion: reduce) {
}

/* ---------- لوحة الإدارة والتطبيق تتبع ألوان الثيم ---------- */
/* الأزرار والتشطيبات الكحلية تتبع متغيرات الثيم تلقائيًا */
html[data-occasion="founding"] .hero-badge { border-color: rgba(255,255,255,.3); }

/* جوال: الشعار بالوسط فوق — والشارة تحت الشعار بالوسط لأن الشاشة ضيقة */
@media (max-width: 640px) {
  .oc-topbar { top: 12px; }
  html[data-occasion-raw="national"] .oc-emblem { width: min(240px, 66vw); }
  html[data-occasion-raw="founding"] .oc-emblem { width: 165px; }
  html[data-occasion-raw="flag"] .oc-emblem { width: 140px; }
  html[data-occasion="national"] .hero-badge,
  html[data-occasion="founding"] .hero-badge {
    top: 106px; left: 50%; right: auto; transform: translateX(-50%);
    font-size: 11px !important; max-width: 88vw; white-space: nowrap;
  }
  html[data-occasion="national"] .home-v2-root .hero .hero-in {
    margin-top: 148px !important;
  }
  html[data-occasion="founding"] .home-v2-root .hero .hero-in {
    margin-top: 148px !important;
  }
}

/* جوال: الشعار لا يغطي النص */
@media (max-width: 640px) {
  html[data-occasion="founding"] .hero .oc-flag { width: 62%; height: 30%; top: 4px; opacity: .55; }
  html[data-occasion="founding"] .hero .oc-camel { height: 40%; opacity: .5; }
  html[data-occasion="founding"] .hero-in { padding: 24px 14px 24px; border-radius: 20px; margin: 0 10px !important; }
  html[data-occasion="national"] .hero .oc-flag { top: 16px; width: 68vw; }
  html[data-occasion="national"] .hero .oc-flag-bg { opacity: .55; }
  html[data-occasion="national"] .hero-in { padding: 26px 14px 24px; border-radius: 20px; margin: 0 10px !important; }
  /* شارة الهيرو تاخذ خلفية داكنة صلبة فوق العلم */
  html[data-occasion="founding"] .hero-badge,
  html[data-occasion="national"] .hero-badge {
    background: rgba(0,0,0,.45) !important;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
}

/* v9.9.409: حاوية الرئيسية الجديدة تعيد تعريف ألوان الكحلي محليًا — نتجاوزها داخلها */
html[data-occasion="national"] .home-v2-root {
  --navy-900: #0B3D2E !important;
  --navy-800: #0E4A38 !important;
  --navy-700: #11583F !important;
  --navy-600: #146847 !important;
}
html[data-occasion="founding"] .home-v2-root {
  --navy-900: #3E2A1B !important;
  --navy-800: #4C3420 !important;
  --navy-700: #5A3E26 !important;
  --navy-600: #6A4A2D !important;
}
/* بطاقة مفزاع برو تتبع الثيم مباشرة (تأكيد) */
html[data-occasion="national"] .pro-banner {
  background: linear-gradient(150deg, #0B3D2E, #11583F) !important;
  border-color: rgba(251,191,36,.4) !important;
}
html[data-occasion="founding"] .pro-banner {
  background: linear-gradient(150deg, #3E2A1B, #5A3E26) !important;
  border-color: rgba(216,180,120,.5) !important;
}