/* =========================================================
   دليل المهندس النقابي — نظام التصميم
   الفكرة: ورقة رسم هندسي (Blueprint) — شبكة مخططات، خطوط قياس،
   أرقام "لوحات" (Sheets) بدل عناوين عادية، لأن الدليل فعليًا
   سلسلة أقسام مرقّمة يقرأها المهندس بالترتيب.
   ========================================================= */

:root{
  --ink:        #0F2B46;   /* أزرق مخطط عميق */
  --ink-soft:   #3D5A73;   /* أزرق رمادي */
  --paper:      #F2F4F1;   /* ورق تقني بارد */
  --paper-line: #DCE3E0;   /* خطوط الشبكة */
  --amber:      #E9A23B;   /* قلم التحديد الهندسي */
  --amber-deep: #C97F1F;
  --green-ok:   #3F7A5C;   /* أخضر تأكيد */
  --white:      #FFFFFF;
  --radius:     10px;
  --font-display: 'Tajawal', sans-serif;
  --font-body:    'Cairo', sans-serif;
  --font-data:    'IBM Plex Sans Arabic', sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top: 90px;}

body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 28px 28px;
}

h1,h2,h3,h4,.display-font{ font-family: var(--font-display); font-weight: 800; }
.data-font{ font-family: var(--font-data); font-variant-numeric: tabular-nums; }

a{ color: var(--ink); }
a:hover{ color: var(--amber-deep); }

::selection{ background: var(--amber); color: var(--ink); }

/* ---------- شريط علوي ---------- */
.top-nav{
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.top-nav .brand-mark{
  width: 42px; height: 42px;
  background: var(--ink);
  color: var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:1.1rem;
  border-radius: 6px;
}
.top-nav .brand-text small{
  display:block; color: var(--ink-soft); font-size:.72rem; letter-spacing:.5px;
}
.edition-tag{
  border: 1px dashed var(--ink-soft);
  color: var(--ink-soft);
  font-family: var(--font-data);
  font-size: .78rem;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ---------- بطاقة "ورقة رسم" أساسية ---------- */
.sheet{
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  position: relative;
}
.sheet::before{
  content: attr(data-sheet);
  position: absolute;
  top: -13px; right: 18px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ---------- الهيرو ---------- */
.hero{
  padding: 70px 0 60px;
  position: relative;
  border-bottom: 2px solid var(--ink);
  overflow:hidden;
}
.hero .corner-mark{
  position:absolute; width: 70px; height:70px; border: 3px solid var(--amber);
  opacity:.85;
}
.hero .corner-mark.tl{ top:20px; right:20px; border-left:none; border-bottom:none; }
.hero .corner-mark.br{ bottom:20px; left:20px; border-right:none; border-top:none; }
.hero .eyebrow{
  font-family: var(--font-data);
  color: var(--amber-deep);
  letter-spacing: 2px;
  font-size: .85rem;
}
.hero h1{ font-size: clamp(2rem, 5vw, 3.4rem); line-height:1.15; }
.hero .lead{ color: var(--ink-soft); font-size:1.15rem; max-width: 640px; }
.hero .quick-fact{
  border-inline-start: 4px solid var(--amber);
  padding-inline-start: 14px;
}

/* ---------- التنقل الجانبي / فهرس اللوحات ---------- */
.sheet-index{
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px;
}
.sheet-index .idx-title{
  font-family: var(--font-data);
  font-size:.75rem; letter-spacing:1.5px; color:var(--ink-soft);
  border-bottom:1px dashed var(--paper-line); padding-bottom:8px; margin-bottom:8px;
}
.sheet-index a{
  display:flex; gap:10px; align-items:baseline;
  text-decoration:none; color:var(--ink);
  padding:6px 4px; border-radius:6px; font-size:.92rem;
}
.sheet-index a:hover, .sheet-index a.active{ background: var(--paper); color: var(--amber-deep); }
.sheet-index a .num{ font-family: var(--font-data); color: var(--ink-soft); font-size:.78rem; min-width:22px; }

/* ---------- عنوان قسم كبير ---------- */
.section-heading{
  display:flex; align-items:center; gap: 16px;
  margin-bottom: 28px;
}
.section-heading .big-num{
  font-family: var(--font-data);
  font-size: 2.6rem; font-weight: 700;
  color: var(--amber);
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
  line-height:1;
}
.section-heading h2{ margin:0; font-size:1.7rem; }
.section-heading .subtitle{ color: var(--ink-soft); font-size:.95rem; margin:0;}
section.part{ padding: 70px 0; border-bottom: 1.5px dashed var(--paper-line); }

/* ---------- بطاقات الفوائد ---------- */
.benefit-card{
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px;
  height:100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.benefit-card:hover{ transform: translateY(-4px); box-shadow: 6px 6px 0 var(--ink); }
.benefit-card .icon-wrap{
  width:48px; height:48px; border-radius:50%;
  background: var(--paper); border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  color: var(--amber-deep); font-size:1.3rem; margin-bottom:14px;
}

/* ---------- اللجان ---------- */
.committee-card{
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 20px;
  height: 100%;
  display:flex; flex-direction:column;
}
.committee-card h5{ margin-bottom:4px; }
.committee-card .benefit-line{
  background: var(--paper);
  border-inline-start: 3px solid var(--amber);
  padding: 8px 12px;
  border-radius: 6px;
  font-size:.9rem;
  margin: 12px 0;
  flex-grow:1;
}
.committee-card .whatsapp-link{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--green-ok); color:#fff; text-decoration:none;
  padding: 8px 14px; border-radius: 8px; font-size:.88rem; font-weight:700;
  width:fit-content;
}
.committee-card .whatsapp-link:hover{ background:#2f5f47; color:#fff; }

/* ---------- خط زمني للانتساب ---------- */
.step-track{ position:relative; padding-inline-start: 40px; }
.step-track::before{
  content:''; position:absolute; inset-inline-start: 14px; top:6px; bottom:6px;
  width: 3px; background: repeating-linear-gradient(var(--ink-soft) 0 8px, transparent 8px 14px);
}
.step-item{ position:relative; padding-bottom: 34px; }
.step-item:last-child{ padding-bottom:0; }
.step-item .dot{
  position:absolute; inset-inline-start: -40px; top:0;
  width: 30px; height:30px; border-radius:50%;
  background: var(--ink); color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-data); font-weight:700; font-size:.85rem;
  border: 2px solid var(--amber);
}

/* ---------- صندوق معلومة مهمة ---------- */
.info-box{
  border: 1.5px dashed var(--amber-deep);
  background: #FFF8EA;
  border-radius: var(--radius);
  padding: 16px 20px;
  display:flex; gap:14px; align-items:flex-start;
}
.info-box .info-icon{ color:var(--amber-deep); font-size:1.4rem; margin-top:2px;}

/* ---------- جدول الخدمات ---------- */
.services-table{
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  overflow:hidden;
}
.services-table table{ margin:0; }
.services-table thead{ background: var(--ink); color:#fff; font-family: var(--font-data); font-size:.85rem;}
.services-table td, .services-table th{ padding: 14px 16px; vertical-align:middle; }
.services-table tbody tr:not(:last-child) td{ border-bottom: 1px dashed var(--paper-line); }
.badge-where{
  background: var(--paper); border:1px solid var(--ink-soft);
  color: var(--ink-soft); font-size:.78rem; padding: 4px 10px; border-radius:20px;
}

/* ---------- النماذج / QR ---------- */
.form-card{
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--white); padding: 20px; text-align:center;
  height:100%;
}
.qr-box{
  width: 110px; height:110px; margin: 12px auto;
  border: 2px solid var(--ink); border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, #fff 0 6px, var(--paper) 6px 12px);
  color: var(--ink-soft); font-size:.7rem; font-family: var(--font-data);
}

/* ---------- الأسئلة الشائعة ---------- */
.accordion-item{ border: 1.5px solid var(--ink) !important; border-radius: var(--radius) !important; margin-bottom: 10px; overflow:hidden;}
.accordion-button{ font-family: var(--font-display); font-weight:700; background:var(--white); }
.accordion-button:not(.collapsed){ background: var(--ink); color: var(--amber); box-shadow:none; }
.accordion-button::after{ margin-inline-start:0; margin-inline-end:auto; }

/* ---------- التواصل ---------- */
.contact-card{
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--white); padding: 22px; height:100%;
}
.map-frame{
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  height: 260px; background: var(--paper);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-family: var(--font-data); font-size:.85rem;
}

/* ---------- بانر الرسالة الأهم ---------- */
.pledge-banner{
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 26px 28px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.pledge-banner .whatsapp-cta{
  background: var(--amber); color: var(--ink); font-weight:800;
  padding: 10px 20px; border-radius: 8px; text-decoration:none;
  white-space:nowrap;
}
.pledge-banner .whatsapp-cta:hover{ background:#fff; color:var(--ink); }

/* ---------- فوتر ---------- */
footer{
  background: var(--white); border-top: 2px solid var(--ink);
  padding: 24px 0; font-size:.85rem; color: var(--ink-soft);
}

/* زر العودة للأعلى */
#backTop{
  position: fixed; left: 20px; bottom: 20px;
  width:44px; height:44px; border-radius:50%;
  background: var(--ink); color: var(--amber);
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--amber); z-index:1000; opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
#backTop.show{ opacity:1; pointer-events:auto; }

@media (max-width: 991px){
  .sheet-index{ margin-bottom: 24px; }
}