/* =========================================================
   ناب الصحراء | Desert Fang — نظام تصميم الموقع (عربي / עברית / English)
   نسخة فاتحة: صحراء + طبيعة الشمال (جبل الشيخ، أشجار وحشائش)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=Tajawal:wght@300;400;500;700&family=Heebo:wght@400;500;700;800&family=Rubik:wght@500;600;700;800&family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* الألوان — لوحة فاتحة: رمال صحراوية + غابات الشمال */
  --paper:      #F5EBD6;   /* خلفية الصفحة — رمل فاتح دافئ */
  --paper-soft: #ECDDBB;   /* خلفية ثانوية — فوتر، قوائم الجوال، تظليل */
  --card:       #FFFCF4;   /* خلفية البطاقات — ورق أبيض دافئ */
  --card-alt:   #EFE2C4;   /* درجة بديلة للبطاقات/الأماكن المؤقتة */
  --sand:       #C9A66B;   /* ذهبي صحراوي زخرفي */
  --sand-deep:  #9C7B45;   /* ذهبي أغمق للعناوين الصغيرة */
  --sand-light: #E8DCC3;   /* رمل فاتح — تعبئة العناصر النشطة/المميزة */
  --ink:        #2B2015;   /* نص داكن أساسي (حبر) */
  --ink-soft:   #6B5A42;   /* نص ثانوي باهت */
  --ember:      #B8390F;   /* أحمر نحاسي — اللون الأساسي (سام/دعوة لفعل) */
  --ember-deep: #8F2C0E;   /* أحمر أعمق — شارات وتنبيهات */
  --forest:     #2F6B45;   /* أخضر غابات جبل الشيخ — اللون الثانوي (غير سام) */
  --forest-deep:#1E4A30;   /* أخضر أعمق */
  --grass:      #93A472;   /* أخضر حشائش زخرفي */
  --grass-light:#B9C79A;   /* أخضر حشائش فاتح */
  --cream:      #FBF3E4;   /* نص فاتح فوق الألوان الداكنة/الأزرار */
  --line:       rgba(43,32,21,0.14);

  --font-mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --shadow: 0 18px 40px -18px rgba(43,32,21,0.3);
}

/* خطوط مختلفة لكل لغة، مضبوطة عبر السمة lang على وسم html */
html[lang="ar"]{ --font-display:'Cairo', sans-serif;  --font-body:'Tajawal', sans-serif; }
html[lang="he"]{ --font-display:'Rubik', sans-serif;  --font-body:'Heebo', sans-serif; }
html[lang="en"]{ --font-display:'Poppins', sans-serif; --font-body:'Inter', sans-serif; }

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.75;
  overflow-x: hidden;
}

/* الاتجاه: عربي وعبري من اليمين لليسار، الإنجليزية من اليسار لليمين */
html[lang="ar"] body, html[lang="he"] body{ direction: rtl; text-align: right; }
html[lang="en"] body{ direction: ltr; text-align: left; }

body::before{
  /* نسيج خفيف يذكّر بحبات الرمل وبقع الحشائش */
  content:"";
  position: fixed; inset:0;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 40px, var(--sand) 41px, transparent 42px 80px),
    repeating-radial-gradient(circle at 80% 70%, transparent 0 60px, var(--grass-light) 61px, transparent 62px 120px);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width: 1180px; margin:0 auto; padding: 0 24px; position:relative; z-index:1; }

h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--ink); }

.eyebrow{
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--ember);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:"";
  width: 26px; height:1px; background: var(--ember);
  display:inline-block;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .96rem;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary{ background: var(--ember); color: var(--cream); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(184,57,15,.4); }
.btn-outline{ border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover{ border-color: var(--sand); background: rgba(43,32,21,.04); transform: translateY(-2px); }
.yt-channel-btn{ margin-top: 22px; }

/* ===== مكتبتان مستطيلتان (800×500) بارزتان في الصفحة الرئيسية ===== */
.feature-libs{ padding: 72px 0; }
.feature-libs .wrap{ max-width: 1680px; }
.big-lib-grid{ display:flex; gap:30px; justify-content:center; align-items:stretch; flex-wrap:wrap; }
.big-lib-card{
  position:relative; width:800px; max-width:100%; aspect-ratio:8/5;
  border-radius: var(--radius); overflow:hidden;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  text-decoration:none; box-shadow: var(--shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}
.big-lib-card:hover{ transform: translateY(-6px); box-shadow: 0 34px 66px -22px rgba(43,32,21,.55); }
.big-lib-overlay{ position:absolute; inset:0;
  background: linear-gradient(to top, rgba(20,14,8,.82) 0%, rgba(20,14,8,.18) 44%, rgba(20,14,8,0) 70%); }
.big-lib-youtube .big-lib-overlay{
  background: linear-gradient(to top, rgba(20,14,8,.82) 0%, rgba(20,14,8,.15) 44%, rgba(20,14,8,0) 70%); }
.big-lib-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:92px; height:92px; border-radius:50%; z-index:1;
  background: rgba(255,252,244,.95); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
  transition: transform .35s ease;
}
.big-lib-badge svg{ width:40px; height:40px; margin-inline-start:5px; }
.big-lib-badge-yt{ width:auto; height:auto; padding:0; border-radius:0; background:transparent; box-shadow:none; }
.big-lib-badge-yt svg{ width:120px; height:auto; margin:0; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.big-lib-card:hover .big-lib-badge{ transform:translate(-50%,-50%) scale(1.08); }
.big-lib-body{
  position:relative; z-index:1; width:100%;
  padding:34px 36px; display:flex; flex-direction:column; gap:8px; color:#fff;
}
.big-lib-title{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; line-height:1.2; }
.big-lib-handle{ font-family:var(--font-mono); font-size:.92rem; opacity:.92; }
.big-lib-go{ font-family:var(--font-mono); font-size:.85rem; opacity:.95; margin-top:2px; }
@media (max-width:560px){
  .feature-libs{ padding: 48px 0; }
  .big-lib-body{ padding:26px 26px; }
  .big-lib-title{ font-size:1.5rem; }
  .big-lib-badge{ width:74px; height:74px; }
  .big-lib-badge svg{ width:32px; height:32px; }
  .big-lib-badge-yt svg{ width:92px; height:auto; }
}

/* ============== الهيدر ============== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(245,235,214,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 82px; gap: 16px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{ height:56px; width:auto; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-family: var(--font-display); font-size:1.15rem; color: var(--ink); }
.brand-text span{ font-family: var(--font-mono); font-size:.66rem; color: var(--ink-soft); letter-spacing:.05em; }

.header-right{ display:flex; align-items:center; gap:8px; }

.main-nav ul{ display:flex; gap:4px; flex-wrap:wrap; }
.main-nav a{
  font-family: var(--font-display); font-weight:600; font-size:.9rem;
  padding: 10px 13px; border-radius:10px;
  color: var(--ink-soft);
  transition: color .2s, background .2s;
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a.active{ color: var(--ink); background: rgba(43,32,21,.05); }

/* مبدّل اللغة */
.lang-switch{ display:flex; gap:3px; background: rgba(43,32,21,.05); border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang-btn{
  font-family: var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.03em;
  padding: 7px 11px; border-radius:999px; border:none; background:transparent; color: var(--ink-soft); cursor:pointer;
  transition: background .2s, color .2s;
}
.lang-btn.active{ background: var(--ember); color: var(--cream); }
.lang-btn:hover:not(.active){ color: var(--ink); }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:10px; flex-shrink:0;
  border:1px solid var(--line); background:transparent;
  color: var(--ink); font-size:1.3rem; cursor:pointer;
}

@media (max-width: 980px){
  .main-nav{
    position:fixed; inset: 82px 0 0 0; z-index:49;
    background: var(--paper-soft);
    transform: translateY(-8px);
    opacity:0; pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
    padding: 30px 24px;
    overflow-y:auto;
  }
  .main-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .main-nav ul{ flex-direction:column; gap:4px; }
  .main-nav a{ display:block; padding:14px 16px; font-size:1.05rem; }
  .nav-toggle{ display:block; }
}

/* ============== الهيرو ============== */
.hero{
  position:relative;
  padding: 90px 0 70px;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(184,57,15,.14), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(47,107,69,.16), transparent 55%),
    linear-gradient(180deg, rgba(245,235,214,.1) 0%, rgba(245,235,214,.5) 68%, rgba(245,235,214,.97) 100%),
    url('../images/banner-hero.jpg');
  background-size: auto, auto, auto, cover;
  background-position: center, center, 20% 35%, center;
  background-repeat: no-repeat;
}
/* لاستخدام صورة بانر خاصة بك بدل الرسمة الافتراضية:
   ضع صورتك في مجلد images (مثلاً images/banner-hero.jpg)
   ثم استبدل اسم الملف في السطر الأخير أعلاه فقط. */
.hero .wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:stretch; }
/* العمود الجانبي: أيقونات إخبارية أعلى + بطاقة الطوارئ مثبّتة للأسفل بمحاذاة قاعدة بطاقة العنوان */
.hero-side{ display:flex; flex-direction:column; height:100%; }
.hero-side .emergency-card{ margin-top:auto; }
/* فراغ صغير فوق البطاقة + أخبار على شكل 3 مستطيلات أفقية */
.hero-news{ display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:6px 0 22px; width:100%; }
.news-cards{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* عمودان معنونان: محلية (يمين) / عالمية (يسار) */
.news-columns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.news-col{ display:flex; flex-direction:column; gap:7px; }
.news-col-head{
  text-align:center; font-family: var(--font-display); font-size:.82rem; font-weight:700;
  padding:7px 10px; border-radius:10px; margin-bottom:1px;
}
.news-col-local .news-col-head{ background: rgba(47,107,69,.14); color: var(--forest-deep); border:1px solid rgba(47,107,69,.28); }
.news-col-global .news-col-head{ background: rgba(184,57,15,.12); color: var(--ember-deep); border:1px solid rgba(184,57,15,.28); }
.news-empty{ text-align:center; color: var(--ink-soft); font-size:.95rem; padding:30px 0; }
.news-card{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  background: var(--card); border:1px solid var(--line); border-radius:11px;
  padding:9px 11px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.news-card:hover{ border-color: var(--sand); box-shadow: 0 12px 24px -16px rgba(43,32,21,.4); }
.news-card-icon{
  flex-shrink:0; width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(184,57,15,.09); color: var(--ember);
}
.news-card.news-local .news-card-icon{ background: rgba(47,107,69,.1); color: var(--forest); }
.news-card.news-global .news-card-icon{ background: rgba(184,57,15,.09); color: var(--ember); }
.news-card-icon svg{ width:20px; height:20px; }
.news-card-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.news-card-meta{ display:flex; align-items:center; gap:8px; }
.news-card-date{ font-family: var(--font-mono); font-size:.66rem; color: var(--sand-deep); }
.news-card-title{
  font-size:.85rem; color: var(--ink); font-weight:500; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* شارة النوع: محلي / عالمي */
.news-scope{
  font-family: var(--font-mono); font-size:.58rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  padding:2px 8px; border-radius:999px; white-space:nowrap;
}
.news-local .news-scope{ background: rgba(47,107,69,.14); color: var(--forest-deep); }
.news-global .news-scope{ background: rgba(184,57,15,.12); color: var(--ember-deep); }
.news-archive-link{
  align-self:center; margin-top:2px;
  font-family: var(--font-mono); font-size:.74rem; color: var(--ember-deep); text-decoration:none;
}
.news-archive-link:hover{ text-decoration:underline; }
@media (max-width: 940px){ .hero-side .emergency-card{ margin-top:24px; } .hero-news{ padding-top:18px; } }
@media (max-width: 940px){ .hero .wrap{ grid-template-columns:1fr; } }

/* ============== صفحة أرشيف الأخبار ============== */
.news-archive{ display:flex; flex-direction:column; gap:16px; max-width:820px; margin:0 auto; }
.news-item{
  display:flex; gap:18px; align-items:flex-start;
  background: var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; box-shadow: 0 14px 30px -24px rgba(43,32,21,.3);
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-item:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(43,32,21,.35); }
.news-item-icon{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(184,57,15,.08); border:1px solid rgba(184,57,15,.2); color: var(--ember);
}
.news-item-icon svg{ width:24px; height:24px; }
.news-item-meta{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.news-item-date{ font-family: var(--font-mono); font-size:.74rem; color: var(--sand-deep); }
.news-item-body h3{ font-size:1.1rem; color: var(--ink); margin:0 0 6px; }
.news-item-body p{ color: var(--ink-soft); font-size:.95rem; line-height:1.8; margin:0; }
.news-item-link{
  display:inline-block; margin-top:10px; font-family: var(--font-mono);
  font-size:.8rem; color: var(--ember); text-decoration:none; font-weight:600;
}
.news-item-link:hover{ text-decoration:underline; }

/* بطاقة الهيرو — خلفية بصورة المشهد (سماء ورمل أعلى + شريط صور أسفل)
   مع طبقة توضيح كريمية متدرّجة تُبقي النص واضحًا فوق المنطقة الفاتحة */
.hero-content{
  position:relative; z-index:2;
  background:
    linear-gradient(180deg,
      rgba(250,244,232,.80) 0%,
      rgba(250,244,232,.60) 38%,
      rgba(250,244,232,.16) 60%,
      rgba(250,244,232,0) 74%),
    url('../images/hero-note.jpg') center bottom / cover no-repeat,
    var(--card-alt);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 22px;
  padding: 34px 38px 250px;
  box-shadow: 0 26px 50px -22px rgba(43,32,21,.22);
}
@media (max-width: 560px){ .hero-content{ padding:26px 24px 190px; } }
/* الحفاظ على أسطر نص التعريف في الصفحة الرئيسية */
[data-page="home"] .hero-content .lead{ white-space: pre-line; }

.hero-eyebrow{ margin-bottom: 18px; }
.hero h1{
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  font-weight: 900;
  line-height:1.18;
}
.hero h1 em{ font-style: normal; color: var(--ember); }
.hero p.lead{
  margin-top:20px; font-size:1.06rem; color: var(--ink-soft);
  max-width: 54ch;
}
.hero-actions{ display:flex; gap:14px; margin-top: 32px; flex-wrap:wrap; }

/* بطاقة العلامة الميدانية (Signature element) */
.field-tag{
  position:relative;
  background: linear-gradient(180deg, var(--card), var(--paper-soft));
  color: var(--ink);
  border-radius: 10px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
  transform: rotate(-2.2deg);
  border: 1px solid rgba(43,32,21,.08);
}
.field-tag::before{
  content:"";
  position:absolute; top:-14px; inset-inline-end:34px;
  width:26px; height:26px;
  border-radius:50%;
  background: var(--ink);
  border: 4px solid var(--sand);
}
.field-tag::after{
  content:"";
  position:absolute; top:-2px; inset-inline-end:44px;
  width: 2px; height: 26px;
  background: repeating-linear-gradient(var(--ink), var(--ink) 4px, transparent 4px, transparent 8px);
  transform: rotate(18deg);
}
.field-tag .tag-label{
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ember); font-weight:600;
}
/* رمز البطاقة (خطر/آمن) — علامة ناعمة بجانب الرقم، شفافية 30٪ */
.num-with-icon{ display:inline-flex; align-items:center; gap:14px; }
.card-icon{
  width:44px; height:auto; opacity:.30;
  pointer-events:none; flex-shrink:0;
  transition: opacity .3s ease, transform .3s ease;
}
.venom-card .card-icon{ width:50px; }   /* الجمجمة أكبر قليلاً لتساوي الوجه بصريًا */
.field-tag:hover .card-icon{ opacity:.44; transform: scale(1.06); }
.field-tag h3{ color: var(--ink); font-size:1.22rem; margin-top:6px; }
.field-tag .stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top:18px; }
.field-tag .stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color: var(--ember); }
.field-tag .stat span{ font-size:.72rem; color: var(--ink-soft); }

/* ============== شرائح الأقسام ============== */
section{ padding: 78px 0; position:relative; z-index:1; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(1.7rem,3vw,2.3rem); margin-top:10px; }
.section-head p{ color: var(--ink-soft); margin-top: 12px; font-size:1.02rem; }

/* ============== أربع بطاقات المكتبات ============== */
.library-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width: 980px){ .library-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .library-grid{ grid-template-columns: 1fr; } }

.library-card{
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
  display:block;
}
/* شريط سفلي يتفعّل عند المرور — بديل حيوي عن التظليل الثابت */
.library-card::before{
  content:"";
  position:absolute; inset-inline-start:0; bottom:0; height:3px; width:100%;
  background: var(--ember);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform .35s ease;
  z-index:3;
}
.library-card:hover{
  transform: translateY(-8px);
  border-color: var(--sand);
  box-shadow: 0 22px 44px -18px rgba(184,57,15,.2);
}
.library-card:hover::before{ transform: scaleX(1); }
/* الصورة المستطيلة أعلى البطاقة (تصل حتى فوق النص فقط) */
.library-media{
  width:100%; height:158px; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.library-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.library-card:hover .library-media img{ transform: scale(1.06); }
/* منطقة النص أسفل الصورة */
.library-body{ padding: 20px 24px 24px; position:relative; z-index:1; }
.library-card h3{ font-size:1.15rem; color: var(--ink); }
.library-card p{ color: var(--ink-soft); font-size:.92rem; margin-top:10px; }

.library-card .go{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.8rem; color: var(--ember);
  transition: gap .25s ease;
}
.library-card:hover .go{ gap:13px; }

/* ============== دليل الأفاعي: بطاقات الأنواع ============== */
.guide-toolbar{ display:flex; gap:12px; margin-bottom: 30px; flex-wrap:wrap; }
.filter-btn{
  font-family: var(--font-display); font-weight:700; font-size:.88rem;
  padding: 10px 20px; border-radius:999px; border:1.5px solid var(--line);
  background:transparent; color: var(--ink-soft); cursor:pointer;
  transition: all .2s ease;
}
.filter-btn.active, .filter-btn:hover{ color: var(--ink); background: var(--sand-light); border-color: var(--sand-light); }
.filter-btn[data-filter="venom"].active{ color:var(--cream); background: var(--ember-deep); border-color: var(--ember-deep); }
.filter-btn[data-filter="safe"].active{ color:var(--cream); background: var(--forest); border-color: var(--forest); }

.species-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 980px){ .species-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .species-grid{ grid-template-columns: 1fr; } }

.species-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
  position:relative;
}
.species-card:hover{
  transform: translateY(-6px);
  border-color: var(--sand);
  box-shadow: 0 20px 40px -18px rgba(43,32,21,.22);
}
.species-photo{
  aspect-ratio: 4 / 3;      /* نفس نسبة صورك — الثعبان يظهر كاملًا */
  background: var(--paper-soft);
  display:flex; align-items:center; justify-content:center;
  color: rgba(43,32,21,.75); font-family: var(--font-mono); font-size:.75rem; text-align:center; padding:10px;
  overflow:hidden;
  position:relative;
}
.species-photo img{ width:100%; height:100%; object-fit:contain; transition: transform .5s ease; }
.species-card:hover .species-photo img{ transform: scale(1.04); }
/* تدرّج خفيف أسفل الصورة لانتقال أنعم نحو جسم البطاقة */
.species-photo::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:40px;
  background: linear-gradient(180deg, transparent, var(--card));
  pointer-events:none;
}
.species-body{ padding: 26px 22px 22px; position:relative; }
.species-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
/* الشارة على هيئة ختم ميداني مائل، متداخلة مع أعلى الصورة */
.species-badge{
  position:absolute; bottom:10px; inset-inline-start:12px; z-index:2;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  padding: 6px 12px; border-radius:6px; font-weight:700; white-space:nowrap;
  transform: rotate(-3deg);
  box-shadow: 0 6px 14px -6px rgba(43,32,21,.45);
}
.badge-venom{ background: var(--ember-deep); color: var(--cream); border:1px solid rgba(255,255,255,.15); }
.badge-safe{ background: var(--forest); color: var(--cream); border:1px solid rgba(255,255,255,.2); }
.species-card h3{ font-size:1.05rem; color: var(--ink); }
.species-latin{ font-family: var(--font-mono); font-size:.78rem; color: var(--ember); font-style:italic; margin-top:2px; display:block; }
.species-card p{ color: var(--ink-soft); font-size:.9rem; margin-top:12px; }
.species-meta{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.species-meta span{
  background: rgba(43,32,21,.04); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; font-size:.74rem; color: var(--ink-soft);
}
.species-meta strong{ color: var(--ink); font-family: var(--font-mono); font-weight:500; }

/* ============== صفحات المكتبات الفرعية ============== */
.page-hero{
  position:relative;
  padding: 60px 0 40px; border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  background-size: cover;
  background-position: center;
  overflow:hidden;
}
.page-hero::before{
  /* توهّج خفيف فقط في الحالة الافتراضية (بدون صورة) */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 0%, rgba(184,57,15,.08), transparent 60%);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-size: clamp(2rem,4vw,2.8rem); }
.page-hero p{ color: var(--ink-soft); margin-top:14px; max-width:60ch; }

/* لإضافة صورة خلفية لأعلى صفحة مكتبة معيّنة: ضع الصورة في مجلد images
   ثم أزل التعليق عن السطر المناسب أدناه واكتب اسم ملفك.
   تنويه: إذا كانت الصورة داكنة، أضف أيضًا لهذه الفئة: color:var(--cream) على h1/p لضمان الوضوح. */
/* .page-hero.hero-guide{      background-image:linear-gradient(rgba(43,32,21,.2),rgba(43,32,21,.55)), url('../images/hero-guide.jpg'); } */
/* .page-hero.hero-adventures{ background-image:linear-gradient(rgba(43,32,21,.2),rgba(43,32,21,.55)), url('../images/hero-adventures.jpg'); } */
/* .page-hero.hero-photos{     background-image:linear-gradient(rgba(43,32,21,.2),rgba(43,32,21,.55)), url('../images/hero-photos.jpg'); } */
/* .page-hero.hero-videos{     background-image:linear-gradient(rgba(43,32,21,.2),rgba(43,32,21,.55)), url('../images/hero-videos.jpg'); } */
/* .page-hero.hero-articles{   background-image:linear-gradient(rgba(43,32,21,.2),rgba(43,32,21,.55)), url('../images/hero-articles.jpg'); } */
.breadcrumb{ font-family: var(--font-mono); font-size:.78rem; color: var(--ink-soft); margin-bottom:16px; }
.breadcrumb a{ color: var(--ember); }

/* مغامراتي: خط زمني */
.timeline{ position:relative; padding-inline-start: 30px; }
.timeline::before{
  content:""; position:absolute; top:0; bottom:0; inset-inline-start: 8px;
  width:2px; background: var(--line);
}
.timeline-item{ position:relative; padding-bottom: 42px; }
.timeline-item::before{
  content:""; position:absolute; inset-inline-start:-30px; top:4px;
  width:18px; height:18px; border-radius:50%;
  background: var(--ink); border: 3px solid var(--ember);
}
.timeline-item .date{ font-family: var(--font-mono); color: var(--ember); font-size:.8rem; }
.timeline-item h3{ margin-top:8px; font-size:1.25rem; }
.timeline-item p{ color: var(--ink-soft); margin-top:10px; max-width:70ch; }
.timeline-item .loc{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.8rem; color: var(--sand-deep); font-family: var(--font-mono); }

/* الصور والفيديوهات */
.media-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 980px){ .media-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px){ .media-grid{ grid-template-columns: repeat(2,1fr); } }
.media-tile{
  aspect-ratio: 4/3;
  border-radius: 10px;
  background: var(--paper-soft);
  border: 1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--ink-soft); font-size:.78rem; padding: 14px;
  font-family: var(--font-mono);
  overflow:hidden; position:relative;
}
.media-tile img{ width:100%; height:100%; object-fit:contain; border-radius:9px; transition: transform .35s ease; }
.media-tile.has-photo{ cursor:pointer; border-style:solid; }
.media-tile.has-photo:hover img{ transform: scale(1.05); }
.media-tile.has-photo::after{
  content:"⤢"; position:absolute; top:10px; inset-inline-end:10px;
  width:30px; height:30px; border-radius:50%;
  background: rgba(43,32,21,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  opacity:0; transition: opacity .25s ease;
  pointer-events:none;
}
.media-tile.has-photo:hover::after{ opacity:1; }

/* نافذة عرض الصورة المكبّرة */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background: rgba(20,15,10,.92);
  display:none; align-items:center; justify-content:center;
  padding: 40px 24px; flex-direction:column; gap:16px;
}
.lightbox.open{ display:flex; }
.lightbox figure{ margin:0; max-width:92vw; max-height:82vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox img{ max-width:92vw; max-height:74vh; border-radius:12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.lightbox figcaption{ color: var(--cream, #FBF3E4); font-family: var(--font-mono); font-size:.85rem; text-align:center; }
.lightbox .lightbox-latin{ color: var(--sand, #C9A66B); font-style:italic; font-size:.78rem; margin-top:-8px; }
.lightbox-close{
  position:absolute; top:22px; inset-inline-end:26px;
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color:#fff; font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.lightbox-close:hover{ background: rgba(255,255,255,.18); transform: rotate(90deg); }

/* نافذة تشغيل الفيديو */
.video-lightbox-frame{
  width: min(92vw, 960px);
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.video-lightbox-frame iframe{ width:100%; height:100%; border:0; }

.video-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 900px){ .video-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .video-grid{ grid-template-columns: 1fr; } }
.video-card{
  background: var(--card); border:1px solid var(--line); border-radius: 16px; overflow:hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.video-card:hover{ transform: translateY(-6px); border-color: var(--sand); box-shadow: 0 20px 40px -18px rgba(43,32,21,.22); }
.video-thumb{
  aspect-ratio: 16/9; position:relative; overflow:hidden;
  background: repeating-linear-gradient(135deg, var(--grass) 0 16px, var(--grass-light) 16px 32px);
  display:flex; align-items:center; justify-content:center;
}
.video-thumb.has-video{ cursor:pointer; }
.video-thumb.has-thumb{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.video-thumb::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(43,32,21,.4));
}
.video-thumb iframe{ width:100%; height:100%; border:0; position:relative; z-index:1; }
.play-btn{
  position:relative; z-index:1;
  width:58px; height:58px; border-radius:50%; background: rgba(255,252,244,.95);
  display:flex; align-items:center; justify-content:center; color: var(--ink);
  box-shadow: 0 0 0 0 rgba(184,57,15,.4);
  transition: transform .3s ease, box-shadow .3s ease;
}
.video-card:hover .play-btn{ transform: scale(1.1); box-shadow: 0 0 0 10px rgba(184,57,15,.1); }
.video-card .video-info{ padding: 18px 20px; }
.video-card h3{ font-size:1rem; }
.video-card span{ font-family: var(--font-mono); font-size:.75rem; color: var(--ink-soft); }

/* المقالات */
.article-list{ display:flex; flex-direction:column; gap:10px; }
.article-row{
  background: var(--card); border:1px solid var(--line); border-radius:14px;
  padding: 24px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  position:relative; overflow:hidden;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, padding-inline-start .25s ease;
}
/* شريط جانبي يتفعّل عند المرور */
.article-row::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background: var(--ember); transform: scaleY(0); transition: transform .25s ease;
}
.article-row:hover{ background: var(--paper-soft); border-color: var(--sand); transform: translateX(-4px); padding-inline-start:30px; }
html[dir="ltr"] .article-row:hover{ transform: translateX(4px); }
.article-row:hover::before{ transform: scaleY(1); }
.article-row .tag{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ember); background: rgba(184,57,15,.1); border:1px solid rgba(184,57,15,.28);
  padding:4px 10px; border-radius:999px; display:inline-block;
}
.article-row h3{ font-size:1.12rem; margin-top:10px; }
.article-row p{ color: var(--ink-soft); font-size:.9rem; margin-top:8px; max-width:60ch; }
.article-row .arrow{ flex-shrink:0; color: var(--sand-deep); font-size:1.3rem; transition: transform .25s ease; }
.article-row:hover .arrow{ transform: translateX(-5px); }
html[dir="ltr"] .article-row:hover .arrow{ transform: translateX(5px); }

/* صندوق تنويه/تحذير */
.notice{
  border: 1px solid rgba(143,44,14,.3); background: rgba(143,44,14,.06);
  border-radius: var(--radius); padding: 20px 24px; display:flex; gap:16px; align-items:flex-start;
  margin-top: 40px;
}
.notice svg{ flex-shrink:0; color: var(--ember-deep); margin-top:2px; }
.notice p{ color: var(--ink-soft); font-size:.92rem; }
.notice strong{ color: var(--ember-deep); }
.notice code{ background: rgba(43,32,21,.06); padding:2px 6px; border-radius:5px; font-family: var(--font-mono); font-size:.85em; }

/* صندوق "قريبًا" — يظهر في المكتبات التي لم يُضف لها محتوى حقيقي بعد */
.lib-empty{
  border: 1px dashed var(--sand-deep);
  background: var(--card-alt);
  border-radius: var(--radius);
  padding: 54px 30px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink-soft);
}
.lib-empty svg{ color: var(--sand-deep); opacity: .85; }
.lib-empty h3{ color: var(--ink); font-size: 1.25rem; }
.lib-empty p{ color: var(--ink-soft); font-size: .95rem; max-width: 46ch; margin-inline: auto; line-height: 1.7; }

/* لوحة "قيد الإنشاء" المصمّمة — مكتبة المغامرات قبل نشر المحتوى */
.under-construction{
  position: relative; overflow: hidden; text-align: center;
  max-width: 760px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 62px 34px 52px;
}
.under-construction::before{           /* شريط تحذير علوي على شكل شريط ورشة */
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 9px;
  background: repeating-linear-gradient(45deg, var(--ember) 0 15px, var(--paper-soft) 15px 30px);
  opacity: .92;
}
.uc-badge{
  display: inline-block; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-deep); background: rgba(184,57,15,.10);
  border: 1px solid rgba(184,57,15,.28); padding: 6px 15px; border-radius: 999px;
}
.uc-icon{ color: var(--sand-deep); margin-bottom: 14px; line-height: 0; }
.uc-icon svg{ width: 74px; height: 74px; }
.under-construction h2{
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); margin-bottom: 14px;
}
.under-construction > p{
  color: var(--ink-soft); font-size: 1.02rem; line-height: 1.9;
  max-width: 52ch; margin: 0 auto 32px;
}
.uc-cta-label{
  display: block; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .05em; color: var(--sand-deep);
}
.uc-links{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.uc-links .btn{ padding: 11px 20px; }
@media (max-width: 560px){
  .under-construction{ padding: 50px 22px 40px; }
  .uc-links{ flex-direction: column; }
  .uc-links .btn{ width: 100%; }
}

/* ============== الفوتر ============== */
.site-footer{ border-top: 1px solid var(--line); padding: 50px 0 26px; background: var(--paper-soft); }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom: 34px; border-bottom:1px solid var(--line); }
.footer-brand b{ font-family: var(--font-display); font-size:1.25rem; color: var(--ink); }
.footer-brand p{ color: var(--ink-soft); max-width: 40ch; margin-top:14px; font-size:.92rem; }
.footer-links{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4{ font-size:.85rem; color: var(--sand-deep); margin-bottom:14px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.footer-col a{ display:block; color: var(--ink-soft); font-size:.9rem; margin-bottom:10px; transition: color .2s; }
.footer-col a:hover{ color: var(--ink); }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-btn{
  width:42px; height:42px; border-radius:10px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--ink);
  transition: all .2s ease;
}
.social-btn:hover{ background: var(--paper-soft); border-color: var(--sand); transform: translateY(-3px); box-shadow: 0 8px 18px -10px rgba(43,32,21,.4); }
/* إطار/هالة ملوّنة حول كل علامة (مع إبقاء ألوان الأيقونات نفسها) */
.social-btn[aria-label="Facebook"]{
  border-color:#E4322B;
  background: rgba(228,50,43,.10);
  box-shadow: 0 0 0 3px rgba(228,50,43,.16);
}
.social-btn[aria-label="Facebook"]:hover{
  border-color:#E4322B; background: rgba(228,50,43,.16);
  box-shadow: 0 0 0 4px rgba(228,50,43,.24); transform: translateY(-3px);
}
.social-btn[aria-label="Instagram"]{
  border:2px solid transparent;
  background:
    linear-gradient(var(--paper-soft), var(--paper-soft)) padding-box,
    linear-gradient(135deg, #4F5BD5, #E1306C) border-box;
  box-shadow: 0 0 0 3px rgba(79,91,213,.14);
}
.social-btn[aria-label="Instagram"]:hover{
  background:
    linear-gradient(var(--paper-soft), var(--paper-soft)) padding-box,
    linear-gradient(135deg, #4F5BD5, #E1306C) border-box;
  box-shadow: 0 0 0 4px rgba(225,48,108,.22); transform: translateY(-3px);
}
.social-btn[aria-label="YouTube"]{
  border-color:#FF0000;
  background: rgba(255,0,0,.08);
  box-shadow: 0 0 0 3px rgba(255,0,0,.14);
}
.social-btn[aria-label="YouTube"]:hover{
  border-color:#FF0000; background: rgba(255,0,0,.14);
  box-shadow: 0 0 0 4px rgba(255,0,0,.22); transform: translateY(-3px);
}
.social-btn[aria-label="WhatsApp"]{
  border-color:#25D366;
  background: rgba(37,211,102,.10);
  box-shadow: 0 0 0 3px rgba(37,211,102,.16);
}
.social-btn[aria-label="WhatsApp"]:hover{
  border-color:#25D366; background: rgba(37,211,102,.16);
  box-shadow: 0 0 0 4px rgba(37,211,102,.24); transform: translateY(-3px);
}
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 22px; flex-wrap:wrap; gap:10px; }
.footer-bottom p{ color: var(--ink-soft); font-size:.82rem; font-family: var(--font-mono); }

.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============== صفحة المقال المفصّل ============== */
.article-body{ max-width: 900px; }
.article-intro{
  font-size:1.12rem; color: var(--ink); line-height:1.9;
  border-inline-start: 4px solid var(--ember); padding-inline-start: 20px;
  margin-bottom: 50px;
}
.article-species{
  display:grid; grid-template-columns: 320px 1fr; gap: 30px;
  background: var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; margin-bottom: 26px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.article-species:hover{ border-color: var(--sand); box-shadow: 0 18px 36px -20px rgba(43,32,21,.25); }
@media (max-width: 760px){ .article-species{ grid-template-columns:1fr; gap:0; } }
.article-species-media{ overflow:hidden; background: var(--paper-soft); }
.article-species-media img{
  width:100%; height:100%; min-height:260px;
  object-fit: cover;         /* يملأ العمود بالكامل — يتطلب صورًا عمودية */
  object-position: center;
  transition: transform .5s ease;
}
.article-species:hover .article-species-media img{ transform: scale(1.03); }
.article-species-body{ padding: 28px 28px 28px 0; position:relative; }
html[dir="ltr"] .article-species-body{ padding: 28px 0 28px 28px; }
@media (max-width: 760px){
  .article-species-body{ padding: 24px !important; }
  .article-species-media img{ min-height:240px; max-height:340px; }
}
.article-species-num{
  font-family: var(--font-mono); font-size:.72rem; color: var(--ember);
  letter-spacing:.1em; font-weight:600;
}
.article-species h2{ font-size:1.35rem; margin-top:6px; }
.article-species .species-latin{ margin-bottom:12px; }
.article-species p{ color: var(--ink-soft); font-size:.95rem; }
.article-facts{ display:flex; flex-direction:column; gap:8px; margin:18px 0; }
.article-facts li{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  font-size:.88rem; color: var(--ink-soft);
  padding-bottom:8px; border-bottom:1px dashed var(--line);
}
.article-facts li b{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase;
  color: var(--sand-deep); letter-spacing:.05em; min-width:64px;
}
.article-facts li span{ color: var(--ink); flex:1; }
.article-danger{
  background: rgba(143,44,14,.07); border:1px solid rgba(143,44,14,.25);
  border-radius:10px; padding:12px 16px; font-size:.88rem !important; margin-top:16px;
}
.article-danger b{ color: var(--ember-deep); }
.article-closing{
  background: var(--paper-soft); border-radius:14px; padding: 26px 28px;
  font-size:1.02rem; color: var(--ink); line-height:1.9; margin-top: 36px;
  border:1px solid var(--line);
}
.article-danger.article-safe{
  background: rgba(47,107,69,.07); border-color: rgba(47,107,69,.28);
}
.article-danger.article-safe b{ color: var(--forest-deep); }

/* ============== صفحة إجراء السلامة ============== */
.emergency-banner{
  display:flex; align-items:center; gap:18px;
  background: var(--ember-deep); color: var(--cream);
  border-radius: 14px; padding: 22px 26px; margin-bottom: 44px;
  box-shadow: 0 16px 34px -18px rgba(143,44,14,.55);
}
.emergency-banner svg{ flex-shrink:0; }
.emergency-banner p{ margin:0; font-family: var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.6; }

.protocol-section{ margin-bottom: 42px; }
.protocol-section h2{
  display:flex; align-items:center; gap:14px;
  font-size:1.4rem; margin-bottom:14px;
}
.protocol-num{
  width:38px; height:38px; flex-shrink:0; border-radius:50%;
  background: var(--ember); color: var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:1rem; font-weight:600;
}
.protocol-section > p{ color: var(--ink-soft); font-size:1rem; line-height:1.9; }

.protocol-step{
  display:flex; gap:18px; align-items:flex-start;
  background: var(--card); border:1px solid var(--line); border-radius:14px;
  padding: 22px 24px; margin-top:16px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.protocol-step:hover{ border-color: var(--sand); box-shadow: 0 14px 30px -18px rgba(43,32,21,.25); }
.step-badge{
  flex-shrink:0; font-family: var(--font-mono); font-size:.8rem; font-weight:600;
  background: rgba(184,57,15,.1); color: var(--ember);
  border:1px solid rgba(184,57,15,.3); border-radius:8px;
  padding: 6px 10px;
}
.protocol-step h3{ font-size:1.08rem; margin-bottom:8px; }
.protocol-step p{ color: var(--ink-soft); font-size:.95rem; margin:0; line-height:1.85; }
.step-forbidden{
  margin-top:14px !important;
  background: rgba(143,44,14,.07); border:1px solid rgba(143,44,14,.28);
  border-radius:10px; padding:12px 16px;
  color: var(--ember-deep) !important; font-weight:500;
}

.protocol-notes{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.protocol-notes li{
  position:relative; padding-inline-start: 34px;
  color: var(--ink-soft); font-size:.96rem; line-height:1.8;
}
.protocol-notes li::before{
  content:"!"; position:absolute; inset-inline-start:0; top:2px;
  width:22px; height:22px; border-radius:50%;
  background: rgba(184,57,15,.12); color: var(--ember);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:.8rem; font-weight:700;
}

/* ============== مقال الأدوات: بطاقات المعدات ============== */
.article-intro{
  font-family: var(--font-display); font-weight:600;
  font-size:1.12rem; line-height:1.9; color: var(--ink);
  margin-bottom: 40px; padding-inline-start:18px;
  border-inline-start: 3px solid var(--sand);
}
.gear-item{
  display:grid; grid-template-columns: 300px 1fr; gap: 30px;
  align-items:center; margin-bottom: 30px;
  background: var(--card); border:1px solid var(--line);
  border-radius: var(--radius); padding:20px;
  box-shadow: 0 14px 30px -22px rgba(43,32,21,.3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.gear-item:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(43,32,21,.35); }
.gear-item.gear-reverse{ grid-template-columns: 1fr 300px; }
.gear-item.gear-reverse .gear-media{ order:2; }
.gear-item.gear-reverse .gear-body{ order:1; }
.gear-media{
  border-radius: 12px; overflow:hidden; background: var(--card-alt);
  aspect-ratio: 4/3;
}
.gear-media img{ width:100%; height:100%; object-fit: cover; display:block; }
.gear-num{
  display:inline-block; font-family: var(--font-mono);
  font-size:.82rem; font-weight:700; color: var(--sand-deep);
  letter-spacing:.08em; margin-bottom:8px;
}
.gear-body h2{ font-size:1.32rem; margin:0 0 12px; color: var(--ink); }
.gear-body p{ color: var(--ink-soft); font-size:.98rem; line-height:1.9; margin:0; }
.gear-warning{
  display:flex; gap:16px; align-items:flex-start;
  background: rgba(184,57,15,.07); border:1px solid rgba(184,57,15,.28);
  border-radius: var(--radius); padding:22px 24px; margin:34px 0 26px;
  color: var(--ember-deep);
}
.gear-warning svg{ flex-shrink:0; margin-top:2px; }
.gear-warning h3{ margin:0 0 8px; font-size:1.12rem; color: var(--ember-deep); }
.gear-warning p{ margin:0; color: var(--ink-soft); font-size:.96rem; line-height:1.9; }

/* صورة داخل المقال (إنفوغرافيك) */
.article-figure{
  margin:30px 0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow: 0 18px 38px -24px rgba(43,32,21,.35);
}
.article-figure img{ width:100%; height:auto; display:block; }
.article-figure figcaption{
  padding:12px 16px; font-size:.85rem; color: var(--ink-soft);
  background: var(--card-alt); border-top:1px solid var(--line); text-align:center;
}
/* قائمة الأسباب المرقّمة */
.reason-list{
  list-style:none; counter-reset:r; padding:0; margin:16px 0 6px;
  display:flex; flex-direction:column; gap:12px;
}
.reason-list li{
  counter-increment:r; position:relative;
  background: var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; padding-inline-start:58px;
  color: var(--ink-soft); font-size:.98rem; line-height:1.85;
}
.reason-list li::before{
  content:counter(r); position:absolute; top:15px; inset-inline-start:16px;
  width:30px; height:30px; border-radius:50%;
  background: var(--ember); color: var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:.95rem;
}
/* عنوان داخل عنصر العلامة (مقال التمييز) */
.signs-list li strong{
  display:block; color: var(--ink); font-family: var(--font-display);
  font-size:1.03rem; margin-bottom:5px;
}
/* بطاقات أصناف الأفاعي (سام / شبه سام / غير سام) */
.cat-card{
  border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:14px 0;
  background: var(--card); border-inline-start:5px solid var(--sand);
}
.cat-card.cat-venom{ border-inline-start-color:#E4574C; background:rgba(228,87,76,.055); }
.cat-card.cat-semi{ border-inline-start-color:#E3A93C; background:rgba(227,169,60,.07); }
.cat-card.cat-non{ border-inline-start-color:#6FA85A; background:rgba(111,168,90,.07); }
.cat-card h3{ margin:0 0 8px; font-size:1.15rem; color: var(--ink); }
.cat-card p{ margin:0; color: var(--ink-soft); line-height:1.85; font-size:.97rem; }
/* قائمة القواعد الخاطئة */
.myth-list{ list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px; }
.myth-list li{
  position:relative; background: var(--card-alt); border:1px dashed rgba(184,57,15,.4);
  border-radius:10px; padding:12px 46px 12px 16px; color: var(--ink-soft); font-size:.96rem;
}
.myth-list li::before{
  content:"✕"; position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%);
  color:#E4574C; font-weight:700; font-size:1.05rem;
}
@media (max-width: 720px){
  .gear-item, .gear-item.gear-reverse{ grid-template-columns: 1fr; gap:18px; }
  .gear-item.gear-reverse .gear-media{ order:0; }
  .gear-item.gear-reverse .gear-body{ order:0; }
  .gear-media{ aspect-ratio: 16/10; }
}

/* ============== بطاقة الطوارئ في الصفحة الرئيسية (تصميم بصورة) ============== */
.emergency-card{
  display:block; text-decoration:none; overflow:hidden;
  background: var(--card);
  border-radius: 18px;
  border: 1px solid rgba(184,57,15,.22);
  box-shadow: 0 22px 46px -22px rgba(143,44,14,.42);
  transform: rotate(-1.2deg);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease;
}
.emergency-card:hover{
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 34px 64px -24px rgba(143,44,14,.55);
}
/* رأس البطاقة: صورة الأفعى + تدرّج + شارة + عنوان */
.emergency-media{ position:relative; aspect-ratio: 16/8.5; overflow:hidden; }
.emergency-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02); transition: transform .6s ease;
}
.emergency-card:hover .emergency-media img{ transform: scale(1.08); }
.emergency-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(24,10,4,0) 32%, rgba(24,10,4,.82) 100%),
    linear-gradient(90deg, rgba(143,44,14,.30), transparent 55%);
}
.emergency-caption{
  position:absolute; z-index:2; inset-inline:16px; bottom:14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.emergency-badge{
  display:inline-flex; align-items:center;
  background: var(--ember); color: var(--cream);
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600;
  padding:7px 13px; border-radius:999px;
  box-shadow: 0 8px 18px -6px rgba(143,44,14,.75);
}
.emergency-media h3{
  margin:0; color:#fff; font-size:1.16rem; line-height:1.4;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
/* جسم البطاقة */
.emergency-body{ padding: 16px 20px 20px; }
.emergency-desc{ color: var(--ink-soft); font-size:.9rem; line-height:1.7; margin:0 0 16px; }
.emergency-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.emergency-steps .stat{
  background: rgba(184,57,15,.06);
  border: 1px solid rgba(184,57,15,.15);
  border-radius: 12px; padding: 14px 8px 12px; text-align:center;
  transition: background .25s ease, border-color .25s ease;
}
.emergency-card:hover .emergency-steps .stat{ background: rgba(184,57,15,.1); border-color: rgba(184,57,15,.28); }
.emergency-steps .stat b{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background: var(--ember); color: var(--cream);
  font-family: var(--font-display); font-size:1rem; margin-bottom:9px;
}
.emergency-steps .stat span{ display:block; font-size:.74rem; line-height:1.5; color: var(--ink-soft); }
.emergency-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family: var(--font-mono); font-size:.82rem; font-weight:600; color: var(--ember-deep);
  transition: gap .25s ease;
}
.emergency-card:hover .emergency-cta{ gap:13px; }

/* ============== قسم الفيديو في الصفحة الرئيسية ============== */
.video-reel{ padding: 68px 0; border-bottom: 1px solid var(--line); }
.reel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.reel-head h2{ margin-top:8px; }
.reel-cta{ font-family: var(--font-mono); font-size:.82rem; color: var(--ember); text-decoration:none; white-space:nowrap; }
.reel-cta:hover{ text-decoration:underline; }
/* الشبكة: 3 صغيرة (يمين في RTL) + كبيرة 500×500 (يسار) */
.reel-grid{ display:grid; grid-template-columns: 1fr minmax(0, 500px); gap:16px; align-items:stretch; }
.reel-side{ display:grid; grid-template-rows: repeat(3, 1fr); gap:16px; min-height:0; }
.reel-item{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  background-size:cover; background-position:center; border:1px solid var(--line);
  box-shadow: 0 16px 34px -22px rgba(43,32,21,.4);
  transition: transform .3s ease, box-shadow .3s ease;
}
.reel-item::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(24,10,4,.05), rgba(24,10,4,.5)); }
.reel-item:hover{ transform: translateY(-4px); box-shadow: 0 26px 50px -24px rgba(43,32,21,.5); }
.reel-big{ aspect-ratio: 1 / 1; }
.reel-play{
  position:absolute; z-index:2; top:50%; left:50%; transform: translate(-50%, -50%);
  width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); transition: transform .25s ease, background .25s ease;
}
.reel-play svg{ width:22px; height:22px; color: var(--ember); margin-left:3px; }
.reel-play-lg{ width:74px; height:74px; }
.reel-play-lg svg{ width:32px; height:32px; }
.reel-item:hover .reel-play{ background:#fff; transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 760px){
  .reel-grid{ grid-template-columns: 1fr; }
  .reel-side{ grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}


/* عناوين أقسام أرشيف الأخبار (محلي / عالمي) */
.news-arch-head{
  font-size:1.15rem; margin:26px 0 14px; padding-inline-start:12px;
  border-inline-start:4px solid var(--sand);
}
.news-arch-head:first-child{ margin-top:0; }
.news-arch-head.arch-local{ border-inline-start-color: var(--forest); color: var(--forest-deep); }
.news-arch-head.arch-global{ border-inline-start-color: var(--ember); color: var(--ember-deep); }

/* رابط العودة لكل الأخبار (عرض خبر مفرد) */
.news-back{
  display:inline-block; margin-bottom:18px;
  font-family: var(--font-mono); font-size:.82rem; color: var(--ember-deep); text-decoration:none;
}
.news-back:hover{ text-decoration:underline; }
.news-single .news-item{ cursor:default; }

/* مقال الخبر المفرد — تخطيط صفحة كاملة على غرار صفحات المقالات */
.news-article{ max-width: 820px; margin-inline: auto; }
.news-article-inner h2{
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  margin: 42px 0 14px; color: var(--ink);
}
.news-article-inner p:not(.article-intro){
  color: var(--ink-soft); font-size: 1.02rem; line-height: 1.95; margin: 0 0 18px;
}
.news-article-inner .gear-warning{ margin-top: 40px; }
.news-article-inner .news-back{ margin: 34px 0 0; }

/* ===== صفحتا "من نحن" و"اتصل بنا" ===== */
.prose h2{
  font-family: var(--font-display); color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 40px 0 14px;
}
.prose p{ color: var(--ink-soft); font-size: 1.02rem; line-height: 1.9; margin: 0 0 18px; }
.prose .article-intro{ color: var(--ink); }
.about-list{ margin: 4px 0 26px; padding-inline-start: 4px; list-style: none; }
.about-list li{
  position: relative; color: var(--ink-soft); line-height: 1.85;
  margin-bottom: 12px; padding-inline-start: 26px;
}
.about-list li::before{
  content: ""; position: absolute; inset-inline-start: 4px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember);
}

/* بطاقات التواصل */
.contact-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 6px 0 20px; }
.contact-card{
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sand); }
.contact-card .cc-icon{
  width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--card-alt);
}
.contact-card .cc-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-card .cc-label{ font-family: var(--font-mono); font-size: .74rem; color: var(--sand-deep); letter-spacing: .04em; }
.contact-card .cc-value{ color: var(--ink); font-weight: 600; word-break: break-word; }
.contact-social{ margin-top: 26px; }
.contact-social h2{ font-family: var(--font-display); color: var(--ink); font-size: 1.3rem; margin-bottom: 14px; }

/* إخفاء ملاحظات المطوّر التقنية (تعليمات إضافة المحتوى) عن الزوّار في الموقع العام */
.notice:has([data-i18n="videos.noticeText"]),
.notice:has([data-i18n="photos.noticeText"]),
.notice:has([data-i18n="articles.noticeText"]),
.notice:has([data-i18n="adventures.noticeText"]){ display: none; }