/* ============================================================
   جمعية فلسطين الغد — الموقع العام
   نظام الألوان مستخرج مباشرة من الشعار الرسمي (مو ألوان مخترعة)
   ============================================================ */

/* ---------- الخطوط المحلية — IBM Plex Sans Arabic (الخط الرسمي حسب دليل الهوية 2026) ---------- */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* ---------- الرموز (Design Tokens) — مطابقة لدليل الهوية البصرية 2026 ---------- */
:root {
    --color-black:      #0D0D0D;   /* أسود الشعار */
    --color-red:         #EC2326;   /* أحمر العلم — حسب دليل الهوية */
    --color-red-dark:    #C71B1E;
    --color-green:       #0B8441;   /* أخضر العلم — اللون الأساسي، حسب دليل الهوية */
    --color-green-dark:  #086633;
    --color-green-tint:  #E7F3EC;   /* أخضر فاتح جداً للخلفيات */
    --color-bg:          #e9f5ee;   /* خلفية خضراء فاتحة جداً لكل الموقع */
    --color-surface:     #FFFFFF;
    --color-text:        #22242A;
    --color-text-muted:  #6B6E76;
    --color-border:      #E7E4DE;

    --font-display: 'IBM Plex Sans Arabic', sans-serif;
    --font-body:    'IBM Plex Sans Arabic', sans-serif;

    --radius: 14px;
    --shadow-soft: 0 8px 30px rgba(13,13,13,.06);
    --shadow-card: 0 4px 18px rgba(13,13,13,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-black); }
/* overflow-x:hidden على html وbody مع بعض بنفس الوقت كان يعطّل position:sticky (الهيدر
   كان يمشي مع الصفحة بدل ما يضل ثابت فوق) — نفس المنع لظهور سكرول أفقي غير مرغوب فيه
   بيصير بس بوجودها على html لحالها، بدون ما تعطّل التثبيت */
html { overflow-x: hidden; }

/* عناصر النماذج (button/input/select/textarea) ما بترث الخط تلقائياً من body بمعظم
   المتصفحات — بتستخدم خط النظام الافتراضي بدلها إلا لو حددنا inherit صراحة. بدون هاد
   السطر، أي زر <button> أو حقل إدخال بالموقع كان رح يبين بخط مختلف عن باقي النص */
button, input, select, textarea { font-family: inherit; }

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
    line-height: 1.75;
}

h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-black);
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- أزرار ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    border: 2px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-green); color: #fff; box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--color-green-dark); }
.btn-outline { background: transparent; border-color: var(--color-black); color: var(--color-black); }
.btn-outline:hover { background: var(--color-black); color: #fff; }
.btn-on-dark { background: var(--color-red); color: #fff; }

/* ---------- الهيدر ---------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 50;
    transition: background .25s ease, border-color .25s ease;
}

/* هيدر شفاف متراكب فوق صورة الـ Hero (الصفحة الرئيسية فقط)
   بيضل بالتدفق الطبيعي (sticky) وصورة الـ Hero بتسحب لفوق تحته بـ margin سالب،
   عشان يشتغل صح سواء كان في شريط تنبيه/أخبار فوقه أو لأ */
.site-header--overlay {
    position: sticky; top: 0; z-index: 20;
    /* تدرّج غامق بحاله (مو بس شفافية فاتحة) عشان يضل شكله مضبوط حتى لو الـ blur ما اشتغل صح بمتصفح/جهاز معيّن */
    background: linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.48) 100%);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.site-header--overlay .site-logo img { filter: brightness(0) invert(1); }
.site-header--overlay .main-nav a { color: #fff; }
.site-header--overlay .main-nav a::after { background: #fff; }
.site-header--overlay .icon-btn {
    border-color: rgba(255,255,255,.4); color: #fff;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.site-header--overlay .icon-btn:hover { background: rgba(255,255,255,.85); color: var(--color-black); }
.site-header--overlay .btn-on-dark {
    background: rgba(236,35,38,.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
}
.site-header--overlay .btn-on-dark:hover { background: rgba(236,35,38,.8); }
/* بعد ما نتخطى ارتفاع الـ Hero بالتمرير، يصير الهيدر صلب حتى يضل مقروء فوق باقي محتوى الصفحة */
.site-header--overlay.is-scrolled {
    background: rgba(13,13,13,.94);
    box-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.site-header .inner { display: flex; align-items: center; justify-content: space-between; padding-block: 8px; min-height: 132px; }
.site-logo { display: flex; align-items: center; gap: 12px; height: 100%; }
.site-logo img { height: 116px; width: auto; display: block; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
    font-weight: 600; font-size: .95rem; color: var(--color-black);
    position: relative; padding: 6px 0;
    white-space: nowrap;
}
.main-nav a::after {
    content: ''; position: absolute; bottom: 0; inset-inline-start: 0;
    width: 0; height: 2px; background: var(--color-green); transition: width .2s ease;
}
.main-nav a:hover::after { width: 100%; }

/* ---------- الغصن — العنصر المميز المتكرر من الشعار ---------- */
.olive-divider {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin: 0 auto; padding: 40px 0 20px;
    color: var(--color-green);
}
.olive-divider svg { width: 90px; height: auto; opacity: .85; }

/* ---------- Hero (كاروسيل صور كاملة + هيدر شفاف متراكب) ---------- */

.hero {
     margin-top: -133px;
    position: relative;
    min-height: 730px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    overflow: hidden;
    padding: 0;
}
/* شرائح الكاروسيل — متراكبة فوق بعض، الظاهرة فقط هي is-active */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    /* أعلى الصورة (مش النص) — عشان المساحة الفاضية يلي بيسيبها المصمم بأعلى الصورة
       تضل ظاهرة تحت الهيدر الشفاف (التداخل المقصود)، بدل ما تنقص بالقص التلقائي للنص */
    background-position: center top;
    background-color: var(--color-black);
    opacity: 0;
    transform-origin: center top;
    transition: opacity 1.2s ease;
}
/* الصورة النشطة بتتكبر ببطء (Ken Burns) طول مدة عرضها لحد ما تتغير للصورة يلي بعدها */
.hero-slide.is-active { opacity: 1; z-index: 1; animation: hero-ken-burns 6.5s ease-out forwards; }
@keyframes hero-ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide.is-active { animation: none; }
}
.hero-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(13,13,13,.6) 0%, rgba(13,13,13,.3) 38%, rgba(13,13,13,.65) 100%);
}
.hero .inner {
    position: relative; z-index: 3;
    width: 100%; max-width: 700px; min-width: 0;
    margin: 0 auto;
    text-align: start;
    padding: 198px 24px 70px;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(3px);
    padding: 6px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700;
    color: #fff; margin-bottom: 20px;
}
.hero h1 { font-size: 3rem; margin: 0 0 20px; color: #fff; }
.hero p.lead { font-size: 1.1rem; color: rgba(255,255,255,.85); max-width: 46ch; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
/* أزرار الهيرو بشفافية زجاجية (glassmorphism) بدل الألوان الصلبة */
.hero-actions .btn-primary {
    background: rgba(11,132,65,.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
}
.hero-actions .btn-primary:hover { background: rgba(11,132,65,.75); }
.hero-actions .btn-outline {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.5); color: #fff;
}
.hero-actions .btn-outline:hover { background: rgba(255,255,255,.85); color: var(--color-black); }

/* أزرار التنقل بين صور الكاروسيل */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 4;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
    color: #fff; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .2s ease, transform .2s ease;
}
.hero-arrow:hover { background: rgba(255,255,255,.32); }
.hero-arrow-prev { inset-inline-start: 22px; }
.hero-arrow-next { inset-inline-end: 22px; }
/* بالجوال بنشيل الأزرار (كانت متراكبة فوق النص) والتنقل بيصير بالسحب (سوايب) بدالها */
@media (max-width: 900px) { .hero-arrow { display: none; } }

/* ---------- بطاقات الركائز (تتراكب على أسفل الـ Hero) ---------- */
.hero-pillars-wrap { position: relative; z-index: 3; margin-top: -64px; margin-bottom: 30px; }
.hero-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar-card {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
    min-height: 230px;
    padding: 26px 26px 28px;
    border-radius: var(--radius); color: #fff;
    background-size: cover; background-position: center;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.pillar-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(13,13,13,.22); }
.pillar-card::before {
    content: ''; position: absolute; inset: 0;
    /* شفافية خفيفة تخلي صورة الركيزة تبين من تحت لون الهوية */
    opacity: .82;
}
.pillar-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%);
}
.pillar-card > * { position: relative; z-index: 1; }
.pillar-eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    opacity: .9; text-transform: uppercase;
}
.pillar-card h3 { color: #fff; margin: 0 0 6px; font-size: 1.25rem; line-height: 1.35; }
.pillar-card h3.pillar-title-clamp {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pillar-btn {
    display: inline-flex; align-self: flex-start;
    background: rgba(255,255,255,.95); color: var(--color-black);
    padding: 9px 22px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    transition: background .2s ease;
}
.pillar-card:hover .pillar-btn { background: #fff; }
.pillar-green::before { background: linear-gradient(135deg, rgba(11,132,65,.9), rgba(11,132,65,.55)); }
.pillar-red::before { background: linear-gradient(135deg, rgba(236,35,38,.9), rgba(236,35,38,.55)); }
.pillar-black::before { background: linear-gradient(135deg, rgba(13,13,13,.9), rgba(13,13,13,.55)); }
@media (max-width: 900px) { .hero-pillars { grid-template-columns: 1fr; } }

/* ---------- تعريفي عن الجمعية (صورة دائرية + فيديو) ---------- */
.about-intro { position: relative; overflow: hidden; }
/* نقشة نقاط زخرفية بالزاوية، متحركة لأعلى وأسفل ببطء */
.about-dots {
    position: absolute; top: 36px; inset-inline-end: 6%;
    width: 170px; height: 170px;
    background-image: radial-gradient(var(--color-border) 1.6px, transparent 1.6px);
    background-size: 16px 16px;
    opacity: .9;
    pointer-events: none;
    animation: about-dots-float 5s ease-in-out infinite;
}
@keyframes about-dots-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .about-dots { animation: none; } }
@media (max-width: 900px) { .about-dots { display: none; } }
.about-intro-grid { display: grid; grid-template-columns: .85fr 1fr; gap: 60px; align-items: center; }
.about-intro-media { position: relative; max-width: 380px; }
/* الدائرة الخضراء فوق الصورة، وبتتمايل يمين/يسار ببطء (5px) */
.about-ring {
    position: absolute; inset: 0;
    border: 2px solid var(--color-green);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    animation: about-ring-float 4.5s ease-in-out infinite;
}
@keyframes about-ring-float {
    0%, 100% { transform: translate(20px, -20px); }
    50% { transform: translate(15px, -20px); }
}
@media (prefers-reduced-motion: reduce) {
    .about-ring { animation: none; transform: translate(20px, -20px); }
}
.about-circle {
    position: relative; z-index: 1; overflow: hidden;
    width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
    background-size: cover; background-position: center;
    box-shadow: var(--shadow-soft);
}
/* الفيديو المميّز الشغّال تلقائياً (صامت ومتكرر) فوق صورة الغلاف — بيغطي الدائرة بالكامل */
.about-circle-media {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; border: 0; pointer-events: none;
}
video.about-circle-media { object-fit: cover; }
/* الآيفريم ما بيدعم object-fit لمحتواه، فمنكبّره شوي ونوسّطه تحقيق تأثير تغطية مشابه */
iframe.about-circle-media { transform: scale(1.6); }
/* مين بيفضّل تقليل الحركة، منكتفي بصورة الغلاف الثابتة بدل الفيديو المتحرك */
@media (prefers-reduced-motion: reduce) {
    .about-circle-media { display: none; }
}
.about-play-btn {
    position: absolute; top: 50%; left: 50%; z-index: 3;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--color-red); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; cursor: pointer;
    box-shadow: 0 10px 26px rgba(236,35,38,.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* حلقة نبض متحركة تلفت الانتباه لزر التشغيل */
.about-play-btn::before {
    content: '';
    position: absolute; inset: -14px;
    border-radius: 50%;
    border: 2px solid rgba(236,35,38,.55);
    animation: about-play-pulse 2.2s ease-out infinite;
}
@keyframes about-play-pulse {
    0%   { transform: scale(.78); opacity: .8; }
    100% { transform: scale(1.6); opacity: 0; }
}
.about-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 30px rgba(236,35,38,.55);
}
@media (prefers-reduced-motion: reduce) {
    .about-play-btn::before { animation: none; }
}
.about-intro-content .section-eyebrow { display: block; margin-bottom: 10px; }
.about-intro-content h2 { font-size: 1.9rem; margin: 0 0 16px; }
.about-intro-content > p { color: var(--color-text-muted); margin: 0 0 20px; }
.about-callout {
    background: var(--color-green-tint);
    border-inline-start: 4px solid var(--color-green);
    padding: 16px 20px; border-radius: 10px;
    margin-bottom: 24px;
    font-weight: 600; color: var(--color-green-dark);
}
.about-points { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 28px; }
.about-point { display: flex; gap: 10px; max-width: 220px; }
.about-point .check { color: var(--color-green); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.about-point strong { display: block; margin-bottom: 4px; font-family: var(--font-display); }
.about-point strong a:hover { color: var(--color-green-dark); }
.about-point p { margin: 0; font-size: .85rem; color: var(--color-text-muted); }
@media (max-width: 900px) {
    .about-intro-grid { grid-template-columns: 1fr; }
    .about-intro-media { width: 300px; max-width: 100%; margin: 0 auto; }
    .about-intro-content .btn-primary { display: flex; width: fit-content; margin: 0 auto; }
}

/* ---------- نافذة الفيديو التعريفي ---------- */
.video-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
}
.video-modal.is-open { visibility: visible; opacity: 1; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(13,13,13,.8); backdrop-filter: blur(3px); }
.video-modal-box {
    position: relative; z-index: 1;
    width: 100%; max-width: 860px;
    max-height: calc(100vh - 48px); overflow-x: hidden; overflow-y: auto;
    background: #000; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: scale(.94); transition: transform .25s ease;
}
.video-modal.is-open .video-modal-box { transform: scale(1); }
.video-modal-body { position: relative; aspect-ratio: 16 / 9; }
.video-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-body video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.video-modal-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: rgba(255,255,255,.75);
    background: linear-gradient(135deg, #1a1a1a, #000);
}
.video-modal-placeholder i { font-size: 2.4rem; color: var(--color-green); }
.video-modal-close {
    position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.video-modal-close:hover { background: rgba(255,255,255,.25); }
.video-modal-footer {
    padding: 14px 20px;
    background: #111;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: center;
}
.video-modal-more {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; font-weight: 600; font-size: .92rem;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}
.video-modal-more i { transition: transform .2s ease; }
.video-modal-more:hover { color: var(--color-green); }
.video-modal-more:hover i { transform: translateX(-4px); }

/* ---------- شريط "فيديوهات ذات صلة" أسفل الفيديو التعريفي (متل يوتيوب) ---------- */
.video-modal-strip { background: #111; border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0; }
.video-modal-strip-track {
    display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.video-modal-strip-track::-webkit-scrollbar { height: 5px; }
.video-modal-strip-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.video-strip-item {
    flex: 0 0 auto; width: 150px;
    background: none; border: none; padding: 0; cursor: pointer; text-align: start;
}
.video-strip-thumb {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 8px; overflow: hidden; background: #000;
    outline: 2px solid transparent; outline-offset: 2px;
    transition: outline-color .2s ease;
}
.video-strip-item.is-active .video-strip-thumb { outline-color: var(--color-green); }
.video-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; transition: opacity .2s ease; }
.video-strip-item:hover .video-strip-thumb img { opacity: 1; }
.video-strip-thumb i {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font-size: 1.5rem; text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.video-strip-title {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 6px; font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.85);
}

@media (max-width: 700px) {
    /* بالجوال، الحشوة الجانبية الثابتة (24px) كانت تاكل نسبة كبيرة من عرض الشاشة الضيقة وتصغّر
       الفيديو الرئيسي، بينما بطاقات "ذات صلة" تحته إلها عرض ثابت (150px) ما بينصغر معها — فكانت
       تحس إنها أبرز وأكبر نسبياً من الفيديو الرئيسي نفسه. نقلل الحشوة (فيكبر الفيديو الرئيسي)
       ونصغّر بطاقات "ذات صلة" حتى تضل بمكانها الثانوي/الأقل بروزاً */
    .video-modal { padding: 10px; }
    .video-strip-item { width: 108px; }
    .video-strip-title { font-size: .7rem; }
    .video-strip-thumb i { font-size: 1.15rem; }
}

/* ---------- الإحصائيات الحية ---------- */
.stats-strip {
    position: relative;
    background-size: cover; background-position: center;
    background-attachment: fixed;
    padding: 80px 0;
    overflow: hidden;
}
/* أبيض معتم بالأعلى وبيخف تدريجياً للأسفل حتى تبين الصورة أكتر */
.stats-strip-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.82) 40%, rgba(255,255,255,.4) 100%);
}
.stats-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 30px;
}
.stat-item { text-align: center; }
.stat-badge {
    position: relative;
    width: 96px; height: 96px; margin: 0 auto 22px;
    border-radius: 50%; color: #fff; font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 28px rgba(13,13,13,.18);
    transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
.stat-item:hover .stat-badge { transform: translateY(-6px) scale(1.06); }
.stat-badge-heart {
    position: absolute; top: -6px; inset-inline-start: -10px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: #fff;
    border: 3px solid #fff;
}
.stat-badge-green { background: var(--color-green); }
.stat-badge-red { background: var(--color-red); }
.stat-badge-black { background: var(--color-black); }
.stat-badge-green-dark { background: var(--color-green-dark); }
.stat-badge-green .stat-badge-heart { background: var(--color-green); }
.stat-badge-red .stat-badge-heart { background: var(--color-red); }
.stat-badge-black .stat-badge-heart { background: var(--color-black); }
.stat-badge-green-dark .stat-badge-heart { background: var(--color-green-dark); }
.stat-item .value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--color-black); }
.stat-item .value .unit { font-size: 1rem; color: var(--color-text-muted); margin-inline-start: 6px; }
.stat-item .label { font-size: .95rem; color: var(--color-black); font-weight: 500; margin-top: 4px; }

/* ---------- أقسام عامة ---------- */
.section { padding: 70px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-eyebrow { color: var(--color-green); font-weight: 700; font-size: .85rem; letter-spacing: .03em; }
.section-head h2 { font-size: 2rem; margin: 10px 0 12px; }
.section-head p { color: var(--color-text-muted); }

/* خط فاصل أنيق بين أقسام الصفحة — تدرّج بدل خط عادي مسطّح، وبنقطة صغيرة بالنص تكسر
   الرتابة. عام لكل الموقع (أول استخدام كان بصفحة فريق العمل، هلقيت موحّد بكل مكان
   بيحتاج فاصل بين أقسام) */
.section-divider { display: flex; align-items: center; justify-content: center; margin: 20px 0 50px; }
.section-divider span {
    position: relative; width: 100%; max-width: 640px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-green) 50%, transparent);
}
.section-divider span::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-green);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- كتل محتوى الصفحات الثابتة (قصتنا/الحوكمة/السياسات/أين نعمل...) ---------- */
/* عامة عشان أكثر من صفحة بتستخدمها (about/story، about/governance، about/map، pages/static) */
.story-block .section-eyebrow { display: block; margin-bottom: 10px; }
.story-block h2 { font-size: 1.5rem; margin: 0 0 20px; }
.story-content { color: var(--color-text); font-size: 1rem; line-height: 1.95; }
.story-content p { margin-bottom: 20px; }

/* قوائم نصية بسيطة (مبادئنا، عضوياتنا وشبكاتنا) */
.story-content .story-list { margin: 0 0 20px; padding: 0; list-style: none; }
.story-content .story-list li {
    position: relative; padding-inline-start: 26px; margin-bottom: 12px; line-height: 1.8;
}
.story-content .story-list li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 9px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--color-green);
}

/* بطاقات عنوان + وصف (أهداف الجمعية) */
.story-content .story-goal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.story-content .story-goal-list li {
    background: var(--color-green-tint); border-radius: var(--radius); padding: 18px 20px;
}
.story-content .story-goal-list li strong { display: block; margin-bottom: 6px; color: var(--color-green-dark); }
.story-content .story-goal-list li span { color: var(--color-text-muted); font-size: .95rem; line-height: 1.8; }

/* بطاقات عنوان + قيمة قصيرة (الترخيص، السياسات، مركز هولست) */
.story-content .story-license-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.story-content .story-license-list li {
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px 20px;
}
.story-content .story-license-list li strong { display: block; margin-bottom: 4px; }
.story-content .story-license-list li span { color: var(--color-text-muted); font-size: .95rem; line-height: 1.8; }

/* ---------- بطاقات البرامج ---------- */
.programs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.program-card {
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-card); transition: transform .2s ease;
}
.program-card:hover { transform: translateY(-4px); }
.program-card .thumb { height: 190px; background-size: cover; background-position: center; position: relative; }
.program-card .thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%);
}
.program-card .badge {
    position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2;
    background: var(--color-green); color: #fff; font-size: .75rem; font-weight: 700;
    padding: 5px 12px; border-radius: 999px;
}
.program-card .body { padding: 20px; }
.program-card h3 { font-size: 1.15rem; margin: 0 0 8px; }
.program-card p { color: var(--color-text-muted); font-size: .92rem; margin: 0 0 14px; }
.program-card .more { color: var(--color-green-dark); font-weight: 700; font-size: .9rem; }

/* ---------- الأخبار ---------- */
/* auto-fill (مش auto-fit) عشان لو ضل خبر واحد لحاله بالصفحة (آخر صفحة تصفّح مثلاً)، يضل بحجم الكرت
   الاعتيادي بدل ما يتمدد وياخد عرض الصف كامل */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
/* الصورة أعرض من الكرت الأبيض، وبينهم تداخل بسيط (10px)، والشارة الحمراء عم تركب على خط الالتقاء */
.news-card {
    display: block;
    background: transparent;
    box-shadow: none;
    transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
.news-card-media { position: relative; height: 220px; border-radius: var(--radius); overflow: visible; }
.news-card-img-wrap { position: relative; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; }
.news-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
.news-card:hover .news-card-media img { transform: scale(1.08); }
/* ظل أسود خفيف تفاعلي على الصورة بس، مش على الكرت كامل */
.news-card-img-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    transition: background .35s ease;
    pointer-events: none;
}
.news-card:hover .news-card-img-wrap::after { background: rgba(0,0,0,.22); }
.news-card .body {
    position: relative; z-index: 2;
    background: #fff;
    margin: -10px 16px 0;
    padding: 26px 22px 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.news-date-badge {
    position: absolute; bottom: -18px; inset-inline-end: 20px; z-index: 3;
    background: var(--color-red); color: #fff;
    width: 58px; padding: 10px 0; border-radius: 10px;
    text-align: center; line-height: 1.25;
    box-shadow: 0 8px 18px rgba(236,35,38,.4);
}
.news-date-badge strong { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.news-date-badge span { display: block; font-size: .68rem; }
.news-card .meta {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; color: var(--color-green); font-weight: 700; margin-bottom: 12px;
}
.news-summary {
    font-size: .92rem; line-height: 1.6; color: var(--color-text);
    margin: 0 0 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--color-border);
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 3.2em; /* حماية إضافية لسطرين بالضبط حتى لو المتصفح ما دعم line-clamp */
}
.news-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 700; color: var(--color-red);
}
.news-more i { transition: transform .2s ease; }
.news-card:hover .news-more i { transform: translateX(-4px); }
/* لما نستخدم ستايل بطاقة الأخبار بصفحات تانية (متل صفحة عن الجمعية) وبدنا عنوان واضح فوق الوصف */
.news-card .body h3 { font-size: 1.1rem; margin: 0 0 8px; }
.news-card:hover .body h3 { color: var(--color-green-dark); }
/* بطاقات صفحة "عن الجمعية" — كل بطاقتين جنب بعض بدل ما تكون كل وحدة لحالها */
.about-hub-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
    .about-hub-grid { grid-template-columns: 1fr; }
}

/* ---------- شهادات المستفيدين (أثرنا) ---------- */
.testimonials-section { position: relative; overflow: hidden; padding: 90px 0; background: var(--color-bg); }
.testimonials-media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-attachment: fixed;
    filter: grayscale(1);
    opacity: .15;
}
.testimonials-media::after {
    content: ''; position: absolute; inset: 0;
    /* الصورة تبين بس خلف عمود النص (يمين بتصميمنا RTL)، وتختفي خلف الكروت (يسار) */
    background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 28%, transparent 68%);
}
/* كونتينر أضيق خاص بهاد القسم بس، حتى البطاقة الوحدة تاخد التركيز وتبين الجنب منها بس بجزء بسيط */
.testimonials-section .container { max-width: 960px; }
.testimonials-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, .82fr) 2.18fr; gap: 40px; align-items: center; }
.testimonials-intro h2 { font-size: 2rem; margin: 12px 0 16px; }
.testimonials-intro > p { color: var(--color-text-muted); margin: 0 0 26px; max-width: 34ch; }
.testimonials-dots { display: flex; gap: 10px; }
.t-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--color-border); border: none; padding: 0; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.t-dot.is-active { background: var(--color-red); transform: scale(1.2); }

.testimonials-carousel-wrap { position: relative; min-width: 0; }
/* نقشة خريطة العالم الحقيقية، بتتحرك يمين/يسار ببطء بمقدار 5px (نفس حركة قسم "تعرفوا علينا") */
.testimonials-dot-pattern {
    position: absolute;
    top: -40px;
    inset-inline-end: -750px;
    z-index: 0;
    width: 1080px;
    height: 450px;
    background-image: url('/assets/img/decor/world-map-dots.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: .3;
    animation: testimonials-map-float 2s ease-in-out infinite;
    -webkit-animation: testimonials-map-float 2s ease-in-out infinite;
}
@keyframes testimonials-map-float {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}
@media (prefers-reduced-motion: reduce) { .testimonials-dot-pattern { animation: none; } }
/* padding-top كافي حتى ما يقص الـoverflow:hidden (المستخدم للتمرير الأفقي) نص الدائرة
   العلوي يلي طالع فوق حدود البطاقة (avatar-ring بموضع سلبي -42px) */
.testimonials-viewport {
    position: relative; z-index: 1; overflow: hidden; padding-top: 50px; margin-top: -50px;
    /* بدل ما تنقطع الشريحة الجنبية (الجزء البسيط الظاهر من البطاقة التالية) بقصّة حادة،
       بتتلاشى تدريجياً (فيدر) عند طرفي الشريط */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.testimonials-track { display: flex; gap: 28px; transition: transform .5s cubic-bezier(.16,.84,.44,1); }
/* شريحة وحدة تاخد التركيز بشكل كامل، وبس جزء بسيط من يلي بعدها بين حتى يبين إنه في شريط بيمشي */
.testimonial-slide-card {
    flex: 0 0 calc(55%);
    min-width: 400px;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
    padding: 50px 28px 28px; position: relative;
}
.t-avatar-ring {
    position: absolute; top: -42px; inset-inline-start: 30px;
    width: 88px; height: 88px; border-radius: 50%; padding: 4px;
    background: conic-gradient(from 180deg, var(--color-green), var(--color-red), var(--color-green));
    box-shadow: 0 10px 22px rgba(13,13,13,.18);
}
.t-avatar-ring img, .t-avatar-fallback {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; display: block;
    border: 4px solid #fff;
}
.t-avatar-fallback {
    background: var(--color-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.6rem;
}
/* شارة الاقتباس الحمراء — وحدة لكل بطاقة، جوّاها */
.t-quote-badge {
    position: absolute; top: 26px; inset-inline-end: 26px; z-index: 2;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--color-red); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(236,35,38,.35);
}
.testimonial-slide-card h4 { margin: 10px 0 2px; font-size: 1.1rem; }
.t-loc { display: block; font-size: .8rem; color: var(--color-text-muted); margin-bottom: 14px; }
.t-quote { font-size: .95rem; line-height: 1.7; color: var(--color-text); margin: 0; }
/* رابط "للمزيد" لما تكون الرسالة/الشهادة مقصوصة — بيوصل لصفحتها الكاملة */
.testimonial-more-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    font-size: .82rem; font-weight: 700; color: var(--color-red);
    text-decoration: none;
}
.testimonial-more-link i { transition: transform .2s ease; }
.testimonial-more-link:hover i { transform: translateX(-4px); }
@media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: 1fr; }
    .testimonial-slide-card { flex-basis: 100%; min-width: 0; }
    .testimonials-intro { text-align: center; }
    .testimonials-intro > p { margin-inline: auto; }
    .testimonials-dots { justify-content: center; }
}

/* ---------- شريط التبرع / CTA ---------- */
.cta-band {
    background: linear-gradient(120deg, var(--color-green-dark), var(--color-green)); color: #fff;
    border-radius: var(--radius); padding: 50px; text-align: center; margin: 0 24px;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 50ch; margin: 0 auto 26px; }

/* ---------- قسم الأثر (خلفية داكنة بصورة حقيقية) ---------- */
.impact-band {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* الصورة تضل ثابتة والمحتوى يعدي فوقها بالسكرول */
    padding: 90px 0;
}
.impact-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.85) 100%);
}
.impact-inner { position: relative; z-index: 2; text-align: center; max-width: 1120px; margin: 0 auto; }
.impact-inner h2 { color: #fff; font-size: 2rem; margin: 0 0 40px; }
.impact-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.impact-icon {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius); padding: 26px 18px; color: #fff; text-align: start;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.impact-icon:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.14);
    border-color: var(--color-green);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.impact-icon i { font-size: 1.6rem; color: var(--color-green); display: block; margin-bottom: 14px; }
.impact-icon h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; color: #fff; }
.impact-icon p { font-size: .85rem; line-height: 1.75; color: rgba(255,255,255,.8); margin: 0; }
@media (max-width: 900px) { .impact-icons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .impact-icons { grid-template-columns: 1fr; } }

/* ---------- الشركاء (مسودة — شريط متحرك) ---------- */
.partners-note {
    text-align: center; font-size: .75rem; color: var(--color-text-muted);
    padding-top: 40px; letter-spacing: .02em;
}
.partners-marquee-section {
    position: relative; overflow: hidden;
    padding: 90px 0;
    background: #fff;
}
/* خلفية زخرفية مصمّمة خصيصاً بمقاس السيكشن الفعلي (1920×280) — خطوط وأوراق رمادية فاتحة
   جاهزة للعرض المباشر (بعكس tree1.png القديمة اللي كانت خطوط بيضا محتاجة invert)،
   فما في داعي لأي فلتر أو تعتيم إضافي. بدون تكرار — مُمدَّدة لتملأ السيكشن بالكامل */
.partners-marquee-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('/assets/img/decor/02589.jpeg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    pointer-events: none;
}
.partners-marquee-viewport {
    position: relative; z-index: 1; overflow: hidden; margin: 0 auto;
    /* فيدر تدريجي عند طرفي الشريط حتى ما تنقطع الشعارات بقصّة حادة (نفس فكرة شريط أثر باق) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* حركة خطوة بخطوة (نفس آلية كاروسيل الشهادات بالظبط) — جافاسكريبت بيحرك الـ transform
   ويعتمد على انتقال CSS المعرّف هون؛ عند اللف لأول القائمة بيلغي الانتقال لحظياً بدون أي قطع */
.partners-marquee-track {
    display: flex;
    align-items: center;
    gap: 70px;
    width: max-content;
    transition: transform .6s cubic-bezier(.16,.84,.44,1);
    will-change: transform;
}
.partner-logo-item {
    display: flex; align-items: center; justify-content: center;
    width: 180px; height: 100px;
    flex-shrink: 0;
}
.partner-logo-item img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
/* بالشاشات الصغيرة، شعار واحد بس يبين بكل مرة بدل ما يبينوا كم شعار جنب بعض */
@media (max-width: 700px) {
    .partners-marquee-track { width: 100%; gap: 0; }
    .partner-logo-item { flex: 0 0 100%; justify-content: center; }
}

/* ---------- الأسئلة الشائعة (مسودة) ---------- */
.faq-section {
    background-color: #e9f5ee;
}
.faq-list {
    display: flex; flex-direction: column; gap: 12px;
    overflow: hidden;
    max-height: 0; opacity: 0;
    transition: max-height .6s ease, opacity .45s ease, margin-top .45s ease;
}
.faq-list.is-open { max-height: 4000px; opacity: 1; margin-top: 28px; }
.faq-item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 20px; }
.faq-item summary {
    cursor: pointer; font-weight: 700; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--color-green); flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 12px 0 0; color: var(--color-text-muted); font-size: .92rem; }

/* أيقونة "عرض كل الأسئلة" جنب العنوان — القائمة كلها متطوية افتراضيًا، وبالضغط
   عليها بتتوسع كلها بحركة سلسة، بدل ما تطلع دفعة واحدة من أول تحميل الصفحة */
.faq-head-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.faq-head-row h2 { margin: 0; }
.faq-reveal-btn {
    flex-shrink: 0; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-green-tint); border: none; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(11,132,65,.15);
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.faq-reveal-btn i { color: var(--color-green-dark); font-size: 1.05rem; transition: transform .35s cubic-bezier(.4,0,.2,1), color .2s ease; }
.faq-reveal-btn:hover {
    background: var(--color-green);
    box-shadow: 0 4px 14px rgba(11,132,65,.3);
    transform: translateY(-2px);
}
.faq-reveal-btn:hover i { color: #fff; }
.faq-reveal-btn[aria-expanded="true"] { background: var(--color-green); box-shadow: 0 4px 14px rgba(11,132,65,.3); }
.faq-reveal-btn[aria-expanded="true"] i { color: #fff; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .faq-reveal-btn { transition: background .2s ease; }
    .faq-reveal-btn:hover { transform: none; }
}

/* ---------- معرض الصور (شريط متحرك خطوة بخطوة، متراكب فوق الفوتر) ---------- */
.gallery-strip-section {
    position: relative; z-index: 2;
    margin-bottom: -120px; /* يخليه يتراكب فوق أول الفوتر متل المرجع */
    padding-bottom: 20px;
}
/* عرض محدّد بالضبط بحيث يبين 4 صور كاملة بس، وما تظهر ولا صورة خامسة مقصوصة على الجنب */
.gallery-strip-viewport { overflow: hidden; margin: 0 auto; }
.gallery-strip-track {
    display: flex; gap: 22px; width: max-content;
    transition: transform .6s cubic-bezier(.16,.84,.44,1);
    will-change: transform;
}
.gallery-strip-item {
    position: relative; display: block;
    width: 230px; height: 230px; flex-shrink: 0;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.gallery-strip-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s cubic-bezier(.16,.84,.44,1), filter .4s ease;
}
/* بدل الهافر الأخضر: تكبير خفيف + بلور بسيط عند المرور بالماوس */
.gallery-strip-item:hover img { transform: scale(1.06); filter: blur(1.5px); }
@media (max-width: 700px) {
    .gallery-strip-item { width: 170px; height: 170px; }
}

/* ---------- الفوتر ---------- */
.site-footer { background: var(--color-black); color: #cfd1d6; padding: 60px 0 24px; margin-top: 60px; position: relative; overflow: hidden; }
/* نقشة شجرة زخرفية بجانب الفوتر (وحدة بس — كانت وحدة تانية مطابقة باليمين وانحذفت) */
.site-footer::after {
    content: '';
    position: absolute; bottom: -20px;
    width: 460px; height: 460px;
    background-image: url('/assets/img/decor/tree.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    opacity: .16;
    filter: grayscale(1);
    pointer-events: none;
    /* زخرفة بحتة بدون علاقة باتجاه القراءة — ثابتة بنفس الجهة الفيزيائية بغض النظر عن اللغة (RTL/LTR) */
    left: -30px;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-grid h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; font-size: .9rem; }
.footer-grid a:hover { color: var(--color-green); }
.footer-logo {
    margin-top: 20px;
    margin-bottom: 4px;
 }
.footer-logo-img {
    height: 64px; width: auto; display: block;
    filter: brightness(0) invert(1); /* نفس معاملة اللوقو بالهيدر الشفاف — أبيض بالكامل */
    margin-bottom: 10px;
}
.footer-tagline {
    color: #fff; font-weight: 600; font-size: 1rem;
    max-width: 30ch; margin: 0; opacity: .92;
}
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem;
    transition: background .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 20px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    font-size: .82rem; color: #8a8d94;
}
.newsletter-form { display: flex; gap: 8px; margin-top: 10px; }
.newsletter-form input {
    flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-body);
}
.newsletter-form input::placeholder { color: #9a9da4; }
.newsletter-form button {
    background: var(--color-green); color: #fff; border: none; border-radius: 999px;
    padding: 10px 22px; font-weight: 700; font-family: var(--font-body); font-size: .9rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.newsletter-form button:hover {
    background: var(--color-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11,132,65,.35);
}
.newsletter-form button:active { transform: translateY(0); }

/* ---------- زر "تقديم شكوى" بالفوتر (يفتح مربع نص + إرسال، بدون تحويل لصفحة تانية) ---------- */
.footer-complaint-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08); color: #fff;
    border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
    padding: 10px 20px; margin-top: 10px;
    font-weight: 700; font-size: .88rem; font-family: var(--font-body);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.footer-complaint-toggle:hover { background: var(--color-green); border-color: var(--color-green); }

/* ---------- نافذة الشكوى بمنتصف الشاشة — نفس هيكلية/آلية نافذة البحث بالهيدر بالضبط ---------- */
.complaint-overlay {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
}
.complaint-overlay.is-open { visibility: visible; opacity: 1; }
.complaint-overlay-backdrop { position: absolute; inset: 0; background: rgba(13,13,13,.9); backdrop-filter: blur(4px); }
.complaint-overlay-close {
    position: absolute; top: 28px; inset-inline-end: 28px; z-index: 1;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.complaint-overlay-close:hover { background: rgba(255,255,255,.25); }

.complaint-overlay-box {
    position: relative; z-index: 1;
    width: 100%; max-width: 560px;
    background: #fff; color: var(--color-text);
    border-radius: var(--radius);
    padding: 40px;
    transform: translateY(-10px); transition: transform .25s ease;
}
.complaint-overlay.is-open .complaint-overlay-box { transform: translateY(0); }
.complaint-overlay-box h3 { font-size: 1.3rem; margin: 0 0 8px; }
.complaint-overlay-box > p { color: var(--color-text-muted); font-size: .9rem; margin: 0 0 20px; }
.complaint-overlay-box textarea {
    width: 100%; min-height: 130px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text); font-family: var(--font-body); font-size: .95rem;
    resize: vertical; margin-bottom: 14px;
}
.complaint-overlay-box textarea:focus { outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px var(--color-green-tint); }
.complaint-overlay-submit {
    background: var(--color-green); color: #fff; border: none; border-radius: 999px;
    padding: 12px 26px; font-weight: 700; font-family: var(--font-body); font-size: .92rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.complaint-overlay-submit:hover { background: var(--color-green-dark); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11,132,65,.35); }
.complaint-overlay-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.footer-complaint-msg { font-size: .88rem; margin: 14px 0 0; }
.footer-complaint-msg.is-success { color: var(--color-green-dark); }
.footer-complaint-msg.is-error { color: var(--color-red-dark); }

@media (max-width: 600px) {
    .complaint-overlay-box { padding: 28px 22px; }
}

/* ---------- استجابة الجوال ---------- */
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .main-nav { display: none; }
    .hero h1 { font-size: 2rem; }
    .site-logo img { height: 68px; }
    .site-header .inner { min-height: 88px; }
}
/* بعمود واحد بس بالجوال، لأن أعمدة الفوتر متفاوتة الطول (اللوقو قصير والروابط طويلة)
   وبعمودين كانوا يطلعوا مش متناسقين بمسافات فاضية غريبة بين الصفوف */
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- التركيز بلوحة المفاتيح ---------- */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--color-green);
    outline-offset: 2px;
}

/* ============================================================
   المرحلة 2 — الحركة والتفاعل
   ============================================================ */

/* ---------- Reveal on Scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.reveal-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- حركة دخول الـ Hero عند تحميل الصفحة ---------- */
.hero-eyebrow, .hero h1, .hero p.lead, .hero-actions {
    opacity: 0;
    animation: hero-in .8s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .15s; }
.hero p.lead { animation-delay: .28s; }
.hero-actions { animation-delay: .4s; }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow, .hero h1, .hero p.lead, .hero-actions {
        opacity: 1; animation: none;
    }
}

/* ---------- تحسين hover للبطاقات (micro-interaction أوضح) ---------- */
.program-card {
    transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease;
}
.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(13,13,13,.12);
}
.program-card:hover h3 { color: var(--color-green-dark); transition: color .2s ease; }

/* ---------- زر الرجوع لأعلى ---------- */
.scroll-top-btn {
    position: fixed;
    bottom: 26px;
    inset-inline-end: 26px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(11,132,65,.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,128,37,.35);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
    z-index: 60;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: rgba(8,102,51,.75); }

/* ============================================================
   شارك معنا (Get Involved) — بطاقات الخيارين + فورمز التطوع والوظائف
   ============================================================ */
.gi-intro { text-align: center; margin-bottom: 46px; }
.gi-intro .section-eyebrow { display: block; margin-bottom: 12px; }
.gi-intro p { max-width: 680px; margin: 0 auto; color: var(--color-text-muted); font-size: 1.02rem; line-height: 1.9; }

.gi-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gi-option-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 40px 32px;
    text-align: center;
    transition: box-shadow .25s ease, transform .25s ease;
}
.gi-option-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.gi-option-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    margin-bottom: 18px; font-size: 1.6rem; color: #fff;
}
.gi-option-green .gi-option-icon { background: var(--color-green); }
.gi-option-black .gi-option-icon { background: var(--color-black); }
.gi-option-card h2 { font-size: 1.25rem; margin: 0 0 10px; }
.gi-option-card p { color: var(--color-text-muted); font-size: .92rem; line-height: 1.8; margin: 0 0 24px; }
@media (max-width: 700px) { .gi-card-grid { grid-template-columns: 1fr; } }

/* ---------- توسّع الكرت داخلياً وفتح الفورم (بدون تحويل لصفحة تانية) ----------
   بسلوك أكورديون: كرت مفتوح واحد بحده — لما يوسّع، ياخد عرض الصف كامل والكرت التاني
   بيختفي مؤقتاً حتى يضل التركيز على الفورم المفتوح فقط */
.gi-option-card.is-open { grid-column: 1 / -1; text-align: start; cursor: default; transform: none; }
.gi-option-card.is-open:hover { transform: none; }
.gi-option-card.is-hidden-sibling { display: none; }
.gi-option-card.is-open .gi-option-icon,
.gi-option-card.is-open h2,
.gi-option-card.is-open > p,
.gi-option-card.is-open > .btn { display: none; }

.gi-option-close {
    display: none;
    align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    font-size: .85rem; font-weight: 700; color: var(--color-text-muted);
    padding: 0; margin-bottom: 18px;
}
.gi-option-close:hover { color: var(--color-red); }
.gi-option-card.is-open .gi-option-close { display: inline-flex; }

.gi-option-panel {
    max-height: 0; overflow: hidden;
    transition: max-height .6s cubic-bezier(.22,.9,.32,1);
}
.gi-option-panel-inner { padding-top: 2px; }

/* ---------- الفورمز ---------- */
.gi-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 40px;
    display: flex; flex-direction: column; gap: 22px;
}
.gi-field { display: flex; flex-direction: column; gap: 8px; }
.gi-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gi-field label { font-weight: 700; font-size: .92rem; }
.gi-field .req { color: var(--color-red); }
.gi-field .gi-hint { font-weight: 400; color: var(--color-text-muted); font-size: .82rem; }

.gi-field input[type="text"],
.gi-field input[type="tel"],
.gi-field input[type="email"],
.gi-field input[type="date"],
.gi-field input[type="number"],
.gi-field input[type="url"],
.gi-field input[type="file"],
.gi-field select,
.gi-field textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.gi-field input:focus,
.gi-field select:focus,
.gi-field textarea:focus {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px var(--color-green-tint);
}
.gi-field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.gi-word-count { align-self: flex-start; font-size: .78rem; color: var(--color-text-muted); }

.gi-section-title {
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
    color: var(--color-green-dark);
    padding-top: 8px; margin-top: 6px;
    border-top: 1px dashed var(--color-border);
}
.gi-field:first-child, .gi-section-title:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.gi-radio-group, .gi-checkbox-group {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.gi-radio, .gi-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 400; font-size: .92rem; cursor: pointer;
}
.gi-radio input, .gi-checkbox input { accent-color: var(--color-green); width: 17px; height: 17px; cursor: pointer; }
.gi-days-grid { margin-top: 12px; }

.gi-submit { align-self: flex-start; margin-top: 6px; }

.gi-success {
    background: var(--color-green-tint);
    border: 1px solid rgba(11,132,65,.2);
    border-radius: var(--radius);
    padding: 46px 36px;
    text-align: center;
}
.gi-success-icon { display: inline-flex; font-size: 2.6rem; color: var(--color-green); margin-bottom: 16px; }
.gi-success p { max-width: 560px; margin: 0 auto 26px; color: var(--color-text); font-size: 1rem; line-height: 1.9; }

.gi-error {
    display: flex; align-items: center; gap: 8px;
    background: rgba(211,47,47,.08); border: 1px solid rgba(211,47,47,.25);
    color: var(--color-red-dark, #b71c1c); border-radius: 10px;
    padding: 12px 16px; font-size: .9rem; margin-top: 4px;
}

@media (max-width: 640px) {
    .gi-form { padding: 26px 22px; }
    .gi-field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   بطاقة محتوى عامة (مقال/شهادة) — مستخدمة بصفحة الخبر وصفحة الشهادة الكاملة معاً
   ============================================================ */
.news-article-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 46px 50px;
}
.news-article-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--color-green-tint); color: var(--color-green-dark);
    font-weight: 700; font-size: .8rem;
    padding: 7px 16px; border-radius: 999px;
    margin-bottom: 20px;
}
.news-article-title { font-size: 1.9rem; line-height: 1.4; margin: 0 0 18px; }

.article-body { font-size: 1.05rem; line-height: 2; color: var(--color-text); }
.article-body p { margin-bottom: 20px; }
.article-body p:first-of-type {
    font-size: 1.22rem; font-weight: 600; color: var(--color-black); line-height: 1.85;
}
.article-body img { max-width: 100%; border-radius: 10px; }

@media (max-width: 600px) {
    .news-article-card { padding: 30px 22px; }
    .news-article-title { font-size: 1.5rem; }
}