/* =====================================================================
   الطبقة البصرية المتقدمة — هوية أسود/بيج/ذهبي موحّدة
   يُضاف بعد ملف تنسيقات الصفحة الأساسي؛ لا يستبدله
   ===================================================================== */

:root{
  --p-ink:#15120E;
  --p-beige:#F1E7D0;
  --p-beige-deep:#E7D9B8;
  --p-gold:#B8863B;
  --p-gold-light:#D9B876;
  --p-maroon:#6E1F1F;
}

/* ===== تحسين وضوح النص العربي عبر كل الموقع ===== */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:16px;
  line-height:1.9;
}
p, li, td{ color:#2c261e; }
h1, h2, h3, h4, h5{ font-weight:700; letter-spacing:0; }

/* ===== انتقال دخول الصفحة ===== */
body{ animation: pageFadeIn .5s ease both; }
@keyframes pageFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== تأثيرات التحويم العامة ===== */
.hover-lift, .btn, .p-card, .article-card, .nav a{
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.hover-lift:hover, .p-card:hover, .article-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(21,18,14,.16);
}
.btn:hover{ transform:translateY(-2px); }

/* ===== خلفية DNA زخرفية (SVG مُولَّد بالكامل بـ CSS، بدون صور خارجية) ===== */
.dna-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--p-ink) 0%, #24201A 100%);
  color:var(--p-beige);
  padding:90px 28px 80px;
}
.dna-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(184,134,59,.14) 38px 40px),
    repeating-linear-gradient(80deg, transparent 0 60px, rgba(217,184,118,.08) 60px 62px);
  opacity:.9;
}
.dna-hero .dna-strand{
  position:absolute; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--p-gold), transparent);
  animation:dnaFloat 7s ease-in-out infinite;
}
.dna-hero .dna-strand:nth-child(1){ right:8%; animation-delay:0s; }
.dna-hero .dna-strand:nth-child(2){ right:18%; animation-delay:1.4s; }
.dna-hero .dna-strand:nth-child(3){ right:30%; animation-delay:2.8s; }
@keyframes dnaFloat{
  0%,100%{ transform:translateY(0) scaleY(1); opacity:.5; }
  50%{ transform:translateY(-16px) scaleY(1.06); opacity:.9; }
}
.dna-hero-content{ position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; }
.dna-hero-content .eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:.8rem; font-weight:700;
  color:var(--p-gold-light); border:1px solid var(--p-gold); border-radius:30px; padding:6px 18px; margin-bottom:20px;
}
.dna-hero-content h1{ font-family:'Amiri', serif; font-size:2.4rem; margin-bottom:14px; }
.dna-hero-content p{ color:#cfc4ab; font-size:1.05rem; max-width:64ch; margin:0 auto; }

/* ===== شريط الإحصائيات ===== */
.p-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; margin:34px auto 0; max-width:900px; position:relative; z-index:2; }
.p-stat{ background:rgba(241,231,208,.06); border:1px solid rgba(217,184,118,.28); border-radius:10px; padding:18px; text-align:center; }
.p-stat .num{ font-family:'Amiri', serif; font-size:1.6rem; color:var(--p-gold-light); font-weight:700; }
.p-stat .lab{ font-size:.78rem; color:#cfc4ab; margin-top:4px; }

/* ===== مؤشر تحميل مستوحى من تسلسل DNA ===== */
.dna-loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:60px 20px; }
.dna-loader svg{ width:64px; height:64px; }
.dna-loader .bar{ width:6px; height:22px; background:var(--p-gold); border-radius:3px; display:inline-block; margin:0 2px; animation:dnaBar 1s ease-in-out infinite; }
.dna-loader .bars{ display:flex; align-items:center; }
.dna-loader .bar:nth-child(2){ animation-delay:.1s; }
.dna-loader .bar:nth-child(3){ animation-delay:.2s; }
.dna-loader .bar:nth-child(4){ animation-delay:.3s; }
.dna-loader .bar:nth-child(5){ animation-delay:.4s; }
@keyframes dnaBar{ 0%,100%{ transform:scaleY(.4); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }
.dna-loader .lbl{ font-size:.85rem; color:#7a6f5c; }

/* ===== بطاقات عامة ===== */
.p-card{ background:var(--p-beige); border:1px solid rgba(21,18,14,.14); border-radius:12px; }

/* ===== لوحة الإعدادات (تفعيل/تعطيل الأصوات) ===== */
.settings-fab{
  position:fixed; bottom:20px; inset-inline-start:20px; z-index:200;
  width:48px; height:48px; border-radius:50%; background:var(--p-ink); color:var(--p-gold-light);
  border:2px solid var(--p-gold); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; cursor:pointer; box-shadow:0 8px 20px rgba(21,18,14,.25);
}
.settings-panel{
  position:fixed; bottom:78px; inset-inline-start:20px; z-index:200;
  background:var(--p-beige); border:1px solid var(--p-gold); border-radius:12px;
  padding:18px 20px; width:220px; box-shadow:0 16px 34px rgba(21,18,14,.2);
  display:none;
}
.settings-panel.open{ display:block; }
.settings-panel h4{ font-family:'Amiri', serif; font-size:1rem; margin-bottom:12px; color:var(--p-maroon); }
.settings-row{ display:flex; justify-content:space-between; align-items:center; font-size:.85rem; }
.switch{ position:relative; width:40px; height:22px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:#c9bd9f; border-radius:22px; cursor:pointer; transition:.2s; }
.switch .slider::before{ content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--p-gold); }
.switch input:checked + .slider::before{ transform:translateX(-18px); }

/* ===== شريط تنقل تراكمي (Breadcrumbs) ===== */
.p-breadcrumbs{ font-size:.85rem; color:#7a6f5c; margin-bottom:16px; display:flex; gap:8px; flex-wrap:wrap; }
.p-breadcrumbs a:hover{ color:var(--p-maroon); }

@media(max-width:700px){
  .dna-hero-content h1{ font-size:1.7rem; }
}

/* ===== شبكة المقالات وبطاقاتها ===== */
.articles-section{ max-width:1180px; margin:0 auto; padding:50px 28px 100px; }
.listing-toolbar{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; align-items:center; }
.listing-toolbar input[type=text]{ flex:1; min-width:220px; padding:11px 16px; border-radius:20px; border:1px solid rgba(21,18,14,.16); background:var(--p-beige); font-family:inherit; }
.listing-toolbar select{ padding:11px 16px; border-radius:20px; border:1px solid rgba(21,18,14,.16); background:var(--p-beige); font-family:inherit; }

.articles-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px; }
.article-card{ display:block; overflow:hidden; text-decoration:none; color:inherit; }
.article-cover{
  height:150px; background-color:var(--p-beige-deep);
  background-image:repeating-linear-gradient(135deg, rgba(184,134,59,.18) 0 10px, transparent 10px 20px);
  background-size:cover; background-position:center;
}
.article-card-body{ padding:20px; }
.article-cat{ display:inline-block; font-size:.72rem; font-weight:700; color:var(--p-maroon); background:var(--p-beige-deep); border-radius:12px; padding:2px 10px; margin-bottom:10px; }
.article-card h3{ font-family:'Amiri', serif; font-size:1.15rem; margin-bottom:8px; }
.article-card p{ font-size:.88rem; color:#4a4136; margin-bottom:12px; line-height:1.7; }
.article-date{ font-size:.75rem; color:#7a6f5c; }

.empty-state{ padding:50px; text-align:center; color:#7a6f5c; background:var(--p-beige-deep); border-radius:10px; }

/* ===== صفحة المقال المفرد ===== */
.article-wrap{ max-width:820px; margin:0 auto; padding:50px 28px 100px; }
.article-header h1{ font-family:'Amiri', serif; font-size:2rem; margin:14px 0; }
.article-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:.85rem; color:#7a6f5c; margin-bottom:24px; }
.article-cover-full{ width:100%; height:320px; object-fit:cover; border-radius:12px; margin-bottom:30px; background:var(--p-beige-deep); }
.article-body{ font-size:1.02rem; line-height:2; color:#2c261e; }
.article-body h2, .article-body h3{ font-family:'Amiri', serif; color:var(--p-maroon); margin:28px 0 12px; }
.article-body p{ margin-bottom:16px; }
.article-body img{ max-width:100%; border-radius:8px; margin:16px 0; }
.article-body blockquote{ border-inline-start:3px solid var(--p-gold); background:var(--p-beige-deep); padding:12px 18px; border-radius:0 8px 8px 0; margin:16px 0; }
.article-body pre{ background:var(--p-ink); color:var(--p-gold-light); padding:16px; border-radius:8px; overflow-x:auto; margin:16px 0; }
.article-body table{ width:100%; border-collapse:collapse; margin:16px 0; }
.article-body table td, .article-body table th{ border:1px solid rgba(21,18,14,.16); padding:8px 12px; }
.article-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; }
.article-tags span{ font-size:.75rem; background:var(--p-beige-deep); border-radius:14px; padding:4px 12px; color:var(--p-maroon); }
.lang-toggle{ display:inline-flex; border:1px solid var(--p-gold); border-radius:20px; overflow:hidden; margin-bottom:20px; }
.lang-toggle button{ padding:6px 16px; font-size:.8rem; border:none; background:transparent; cursor:pointer; }
.lang-toggle button.active{ background:var(--p-gold); color:var(--p-ink); font-weight:700; }

/* ===== ترقيم الصفحات (مشترك لقوائم المقالات) ===== */
.pagination{ display:flex; gap:6px; margin-top:30px; justify-content:center; }
.pagination a, .pagination span{ padding:7px 13px; border-radius:6px; border:1px solid rgba(21,18,14,.16); font-size:.85rem; text-decoration:none; color:inherit; }
.pagination a:hover{ background:var(--p-beige-deep); }
.pagination .current{ background:var(--p-maroon); color:var(--p-beige); border-color:var(--p-maroon); }

/* ===== صورة القسم داخل الـ Hero ===== */
.dna-hero{ display:flex; align-items:center; justify-content:center; gap:50px; flex-wrap:wrap; }
.dna-hero-content{ flex:1; min-width:280px; text-align:start; }
.dna-hero-image{ width:170px; height:170px; flex-shrink:0; filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
@media(max-width:800px){
  .dna-hero{ text-align:center; flex-direction:column-reverse; }
  .dna-hero-content{ text-align:center; }
}