/* ============================================
   جمعية التنمية الأهلية — الهيدر والفوتر العامّان
   منقولة حرفيًا (بنية + ألوان + خطوط) من التصميم الحي الفعلي على tbm.sa
   ============================================ */
:root{
  --tn-teal:#5E8A91;
  --tn-teal-dark:#3F5C62;
  --tn-primary:#0F766E;
  --tn-primary-dark:#1D2A32;
  --tn-ink-2:#0F172A;
  --tn-gold:#C79A3C;
  --tn-gold-light:#F4EEE2;
  --tn-gold-l:#E8C877;
  --tn-gold-soft:#C6A15A;
  --tn-cream:#FBF8F2;
  --tn-text-dark:#1D2A32;
  --tn-text-muted:#6E6455;
  --tn-line:#EAE2D2;
}
*{ box-sizing:border-box; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--tn-gold) !important; outline-offset:3px !important; border-radius:4px;
}
html{ height:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  color:var(--tn-text-dark);
  background:var(--tn-cream);
}
/* يثبّت الفوتر أسفل الشاشة دائمًا حتى لو كان محتوى الصفحة قصيرًا (بدل أن يظهر في منتصف الصفحة) */
.tn-zig{ margin-top:auto; }
h1,h2,h3,h4,h5,h6{ font-family:'Reem Kufi',sans-serif; font-weight:500; margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.tn-wrap{ max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }

/* ===== شاشة التحميل الانتقالية (تظهر في كل الصفحات، مطابقة للموقع الحي) ===== */
#tnGlobalPreloader{ position:fixed; inset:0; background:#fff; z-index:99999; display:flex; justify-content:center; align-items:center; transition:opacity .5s ease, visibility .5s ease; }
#tnGlobalPreloader img{ width:90px; animation:tnPreloaderPulse 1.2s infinite alternate ease-in-out; }
@keyframes tnPreloaderPulse{ 0%{ transform:scale(.9); filter:drop-shadow(0 0 10px rgba(15,123,108,.2)); } 100%{ transform:scale(1.1); filter:drop-shadow(0 0 30px rgba(15,123,108,.6)); } }
#tnGlobalPreloader.tn-hide-preloader{ opacity:0 !important; visibility:hidden !important; pointer-events:none; }

/* ===== الهيدر (شريط ثابت + قائمة كبسولة عائمة) ===== */
.tn-header{ position:fixed; inset:0 0 auto 0; z-index:100; transition:.45s; background:transparent; }
.tn-header.tn-solid{ background:rgba(251,248,242,.92); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--tn-line), 0 8px 30px rgba(29,42,50,.05); }
.tn-bar-in{ width:100%; margin:0; padding:16px clamp(16px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:20px; transition:.4s; }
.tn-header.tn-solid .tn-bar-in{ padding:10px clamp(16px,4vw,40px); }
.tn-logo-link{ display:flex; align-items:center; flex:none; }
.tn-logo-img{ height:58px; width:auto; transition:.4s ease; filter:brightness(0) invert(1); opacity:.97; }
.tn-header.tn-solid .tn-logo-img{ height:48px; filter:none; opacity:1; }

/* ===== الشريط العائم (Pill Nav) ===== */
.tn-pill-nav{ display:flex; align-items:center; gap:2px; background:rgba(15,23,33,.5); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.09); border-radius:999px; padding:6px 8px; transition:.4s; }
.tn-header.tn-solid .tn-pill-nav{ background:rgba(255,255,255,.75); border-color:var(--tn-line); box-shadow:0 6px 20px rgba(29,42,50,.06); }
.tn-pill-search{ width:36px; height:36px; flex:none; border-radius:50%; border:none; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s; }
.tn-pill-search svg{ width:17px; height:17px; }
.tn-pill-search:hover{ background:rgba(255,255,255,.12); color:var(--tn-gold-l); }
.tn-header.tn-solid .tn-pill-search{ color:var(--tn-text-dark); }
.tn-header.tn-solid .tn-pill-search:hover{ background:var(--tn-cream); color:var(--tn-gold); }
.tn-pill-search-box{ display:flex; align-items:center; max-width:0; overflow:hidden; transition:max-width .4s cubic-bezier(.2,.7,.3,1); border-radius:999px; background:rgba(255,255,255,.08); }
.tn-pill-search-box.tn-open{ max-width:230px; }
.tn-pill-search-box form{ display:flex; flex:1; min-width:0; }
.tn-pill-search-box input{ background:none; border:none; outline:none; color:#fff; font-size:13px; padding:8px 6px 8px 14px; width:170px; font-family:inherit; }
.tn-header.tn-solid .tn-pill-search-box input{ color:var(--tn-text-dark); }
.tn-pill-search-box input::placeholder{ color:rgba(255,255,255,.5); }
.tn-header.tn-solid .tn-pill-search-box input::placeholder{ color:var(--tn-text-muted); }
.tn-pill-search-close{ background:none; border:none; color:#fff; cursor:pointer; padding:0 10px; flex:none; display:flex; }
.tn-pill-search-close svg{ width:14px; height:14px; }
.tn-header.tn-solid .tn-pill-search-close{ color:var(--tn-text-dark); }

.tn-nav{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.tn-nav-item{ position:relative; }
.tn-nav-item>a{ position:relative; display:flex; align-items:center; gap:5px; padding:10px 14px; font-size:13.5px; font-weight:600; color:#fff; border-radius:10px; transition:.25s; cursor:pointer; }
.tn-header.tn-solid .tn-nav-item>a{ color:var(--tn-text-dark); }
.tn-nav-item>a:hover{ color:var(--tn-gold); }
.tn-nav-caret{ width:10px; font-size:10px; transition:.3s; opacity:.7; }
.tn-nav-item:hover>a .tn-nav-caret{ transform:rotate(180deg); }
.tn-submenu{ position:absolute; top:calc(100% + 14px); right:0; min-width:280px; background:#fff; border:1px solid var(--tn-line); border-radius:20px; box-shadow:0 30px 70px rgba(29,42,50,.16); padding:16px; opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s; display:grid; grid-template-columns:1fr; gap:4px; z-index:50; list-style:none; margin:0; }
/* overflow:hidden أُزيلت أعلاه عمدًا: أي قائمة فرعية ثالثة (حفيد) تنفتح جانبيًا خارج حدود
   هذا الصندوق (.tn-submenu .tn-submenu أدناه)، وoverflow:hidden كانت تقصّها بصمت رغم
   وضعها الصحيح — فتبدو "القوائم المتداخلة لا تظهر" رغم أن البيانات والـCSS الخاص
   بموضعها سليم تمامًا. */
.tn-submenu::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--tn-primary),var(--tn-gold)); }
.tn-nav-item.tn-has-children:hover>.tn-submenu{ opacity:1; visibility:visible; transform:none; }
.tn-submenu .tn-nav-item>a{ padding:10px 12px; font-weight:500; white-space:nowrap; color:var(--tn-text-dark); font-size:13px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tn-submenu .tn-nav-item>a:hover{ background:var(--tn-cream); color:var(--tn-primary); }

/* المستوى الثالث (تعشيش داخل تعشيش، مثل "للتواصل" ← "مقياس الرضا" ← استبانة) — ينفتح جانبيًا بدل أسفل */
.tn-submenu .tn-nav-item{ position:relative; }
.tn-submenu .tn-submenu{ top:-16px; right:calc(100% + 6px); left:auto; }
.tn-submenu .tn-nav-item.tn-has-children:hover>.tn-submenu{ opacity:1; visibility:visible; transform:none; }
.tn-submenu .tn-nav-caret{ width:14px; height:14px; transform:rotate(90deg); }

/* ===== لغة + حساب + زر الجوال ===== */
.tn-bar-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.tn-lang-toggle{ display:flex; background:rgba(255,255,255,.08); border-radius:999px; padding:3px; gap:2px; }
.tn-header.tn-solid .tn-lang-toggle{ background:var(--tn-cream); }
.tn-lang-toggle button{ border:none; background:none; padding:7px 13px; border-radius:999px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.65); cursor:pointer; transition:.25s; font-family:'IBM Plex Sans Arabic',sans-serif; }
.tn-header.tn-solid .tn-lang-toggle button{ color:var(--tn-text-muted); }
.tn-lang-toggle button.tn-active{ background:var(--tn-gold); color:#2b2007; }
.tn-account-btn{ width:42px; height:38px; display:flex; align-items:center; justify-content:center; border:1.3px solid rgba(255,255,255,.4); border-radius:10px; color:#fff; transition:.3s; }
.tn-header.tn-solid .tn-account-btn{ border-color:var(--tn-line); color:var(--tn-text-dark); }
.tn-account-btn:hover{ background:var(--tn-gold); border-color:var(--tn-gold); color:#2b2007; }
.tn-nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.tn-nav-toggle span{ width:24px; height:2px; background:#fff; transition:.3s; }
.tn-header.tn-solid .tn-nav-toggle span{ background:var(--tn-text-dark); }

@media (max-width:980px){
  .tn-pill-nav{ display:none; }
  .tn-nav-toggle{ display:flex; }
}

/* ===== قائمة الجوال المنسدلة ===== */
.tn-mobile-nav{ position:fixed; inset:0; z-index:200; visibility:hidden; opacity:0; transition:opacity .35s ease,visibility .35s ease; }
.tn-mobile-nav.tn-open{ visibility:visible; opacity:1; }
.tn-mobile-nav-overlay{ position:absolute; inset:0; background:rgba(15,23,33,.6); backdrop-filter:blur(2px); }
.tn-mobile-nav-panel{ position:absolute; top:0; bottom:0; right:0; width:min(340px,88vw); background:var(--tn-cream); padding:22px 22px 32px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.3,1); box-shadow:-20px 0 50px rgba(15,23,33,.2); }
.tn-mobile-nav.tn-open .tn-mobile-nav-panel{ transform:none; }
.tn-mobile-nav-close{ align-self:flex-start; background:#fff; border:1px solid var(--tn-line); border-radius:10px; color:var(--tn-text-dark); cursor:pointer; padding:9px; margin-bottom:14px; }
.tn-mobile-nav-panel .tn-nav-item{ border-bottom:1px solid var(--tn-line); }
.tn-mobile-nav-panel .tn-nav-item>a{ display:flex; padding:14px 6px; color:var(--tn-text-dark); font-weight:600; font-size:15px; }
.tn-mobile-nav-panel .tn-submenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 10px 14px; display:none; }
.tn-mobile-nav-panel .tn-nav-item.tn-open>.tn-submenu{ display:grid; }
.tn-mobile-nav-panel .tn-submenu .tn-nav-item{ border:0; }
.tn-mobile-nav-panel .tn-submenu a{ padding:8px 6px; color:var(--tn-text-muted); font-weight:600; font-size:13.5px; }
@media (min-width:981px){ .tn-mobile-nav{ display:none; } }

/* ===== الفوتر (زخرفة مسننة ذهبية + حواف داكنة) ===== */
.tn-zig{ height:14px; background-image:linear-gradient(135deg,var(--tn-gold) 25%,transparent 25.5%,transparent 74.5%,var(--tn-gold) 75%),linear-gradient(45deg,var(--tn-gold) 25%,transparent 25.5%,transparent 74.5%,var(--tn-gold) 75%); background-size:20px 14px; background-repeat:repeat-x; }
.tn-footer{ background:var(--tn-primary-dark); color:#8B9A98; padding:58px 0 24px; }
/* الفوتر يستخدم كامل عرض الشاشة بدل التقيّد بعرض المحتوى العادي (1280px) المستخدم في
   بقية الموقع — حتى لا تبقى مساحات فارغة كبيرة على الشاشات العريضة. */
.tn-footer .tn-wrap{ max-width:none; }
.tn-footer-top{ display:flex; align-items:flex-start; gap:clamp(30px,4vw,70px); margin-bottom:36px; }
.tn-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,60px); flex:1; min-width:0; }
/* كتلة الخريطة أقصى يسار الفوتر (آخر عنصر بترتيب DOM يظهر أقصى اليسار في تخطيط RTL) —
   بعرض نسبي سخي مستقل عن أعمدة الشبكة، يكبر مع اتساع الشاشة بدل عرض ثابت ضيق. */
.tn-footer-map-block{ flex:0 1 420px; min-width:280px; }
@media (max-width:900px){ .tn-footer-top{ flex-direction:column; } .tn-footer-map-block{ flex-basis:auto; width:100%; } }
.tn-footer-logo{ height:70px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:16px; }
.tn-footer-about p{ font-size:12.5px; line-height:1.95; color:#7C8B89; max-width:280px; }
.tn-footer-col h4{ color:#fff; font-size:13.5px; margin-bottom:15px; font-family:'Reem Kufi',sans-serif; font-weight:700; }
.tn-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tn-footer-col a{ font-size:12.8px; color:#7C8B89; display:flex; align-items:center; gap:8px; transition:.25s; }
.tn-footer-col a:hover{ color:var(--tn-gold-l); padding-inline-start:5px; }
.tn-footer-social{ display:flex; gap:9px; margin-top:14px; }
.tn-footer-social a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; transition:.3s; color:#fff; }
.tn-footer-social a:hover{ background:var(--tn-gold); color:#2b2007; transform:translateY(-4px); }
.tn-footer-map{ width:100%; height:150px; border:0; border-radius:14px; display:block; filter:grayscale(.15) contrast(1.05); }
.tn-footer-bottom{ text-align:center; font-size:11.5px; color:#546260; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
.tn-footer-dev{ text-align:center; font-size:11px; margin-top:8px; }
.tn-footer-dev a{ color:#82A1A8; font-weight:700; text-decoration:none; }
.tn-footer-dev a:hover{ text-decoration:underline; }
@media (max-width:1024px){ .tn-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tn-footer-grid{ grid-template-columns:1fr; } }

/* زر التبرع العائم */
.tn-float-donate{ position:fixed; bottom:24px; left:24px; z-index:90; display:flex; align-items:center; gap:9px; background:var(--tn-gold); color:#2b2007; padding:14px 22px; border-radius:40px; font-weight:700; font-size:14px; box-shadow:0 14px 34px rgba(199,154,60,.45); opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .4s, visibility .4s, transform .4s; }
.tn-float-donate.tn-show{ opacity:1; visibility:visible; transform:none; }
.tn-float-donate svg{ width:18px; height:18px; stroke:#2b2007; fill:none; stroke-width:1.7; }