/* ملاحظات م. زيدان (31-10): أدوات الهيدر (اللغة + الوضع الليلي)، الوضع الليلي، صور المشاريع كاملة بدون حواف سوداء */

/* ===== أدوات الهيدر ===== */
.top-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.tool { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); color: var(--navy); font: 700 15px/1 "Tajawal", sans-serif; cursor: pointer; transition: .2s; text-decoration: none; }
.tool:hover { border-color: var(--navy); }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tool .i-moon { fill: currentColor; stroke: none; }
.tool .i-sun { display: none; }
[data-theme="dark"] .tool .i-moon { display: none; }
[data-theme="dark"] .tool .i-sun { display: block; }
@media (max-width: 920px) { .top-tools { margin-inline-start: auto; } .burger { margin-inline-start: 8px; } }

/* ===== صور المشروع: الصورة كاملة بدون إطار أسود ===== */
.gallery-main { aspect-ratio: auto; background: transparent; display: flex; justify-content: center; align-items: center; }
.gallery-main img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: 18px; }

/* ===== الوضع الليلي (نسخة 2026-11-02): كحلي عميق + أسطح متدرجة + لمسات ذهبية ===== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #142333;          /* الخلفية العامة (أفتح قليلًا بطلب قاسم) */
  --paper: #1C2E40;       /* البطاقات */
  --sand: #182A3B;        /* الأقسام البديلة */
  --line: rgba(255, 255, 255, .12);
  --gold: #C9963A;        /* الأزرار والروابط (ذهبي بدل الكحلي في الليل) */
  --gold-d: #E4B866;
  --gold-l: rgba(201, 150, 58, .14);
  --navy: #0D2338;
  --ink: #E8EEF4;
  --muted: #A3B1BF;
  --red: #F07A8C;
  --red-l: rgba(240, 122, 140, .12);
  --teal: #4FD1C5;
  --teal-l: rgba(79, 209, 197, .12);
  --amber: #E4B866;
  --amber-l: rgba(228, 184, 102, .12);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .75);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #fff; }
[data-theme="dark"] p, [data-theme="dark"] .split p, [data-theme="dark"] .faq details p, [data-theme="dark"] .toc a { color: #C3CFDA; }
[data-theme="dark"] .eyebrow, [data-theme="dark"] .post-cat, [data-theme="dark"] .num { color: var(--gold-d); }

/* الهيدر والقائمة */
[data-theme="dark"] .top { background: rgba(20, 35, 51, .9); border-bottom: 1px solid var(--line); }
[data-theme="dark"] .top.scrolled { box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .8); }
[data-theme="dark"] .nav > a, [data-theme="dark"] .nav .dd > button { color: #D5DEE7; }
[data-theme="dark"] .nav a.on, [data-theme="dark"] .nav .dd > button.on { background: var(--gold-l); color: var(--gold-d); }
[data-theme="dark"] .dd-menu { background: #1C2E40; border: 1px solid var(--line); box-shadow: var(--shadow); }
[data-theme="dark"] .dd-menu a { color: var(--ink); }
[data-theme="dark"] .dd-menu a:hover { background: var(--gold-l); color: var(--gold-d); }
[data-theme="dark"] .brand b { color: #fff; }
[data-theme="dark"] .brand small { color: var(--muted); }
[data-theme="dark"] .brand img, [data-theme="dark"] .foot-brand img { background: #fff; border-radius: 10px; padding: 3px 5px; }
[data-theme="dark"] .tool { background: #1C2E40; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .tool:hover { border-color: var(--gold); color: var(--gold-d); }
[data-theme="dark"] .burger { border-color: var(--line); }
[data-theme="dark"] .burger span { background: var(--ink); }
@media (max-width: 920px) { [data-theme="dark"] .top.open .nav { background: #0F1C29; border-color: var(--line); } }

/* الأقسام والبطاقات */
[data-theme="dark"] .sec-sand { background: var(--sand); border-block: 1px solid var(--line); }
[data-theme="dark"] .svc, [data-theme="dark"] .card, [data-theme="dark"] .feat, [data-theme="dark"] .step,
[data-theme="dark"] .post, [data-theme="dark"] .side-card:not(.dark), [data-theme="dark"] .faq details,
[data-theme="dark"] .stat, [data-theme="dark"] .info, [data-theme="dark"] .why-badge, [data-theme="dark"] .contact-card {
  background: var(--paper); border-color: var(--line); box-shadow: none; }
[data-theme="dark"] .svc:hover, [data-theme="dark"] .post:hover { border-color: rgba(201, 150, 58, .45); }
[data-theme="dark"] .stats-grid, [data-theme="dark"] .stats { background: var(--paper); border: 1px solid var(--line); }
[data-theme="dark"] .stat b, [data-theme="dark"] .why-badge b { color: var(--gold-d); }
[data-theme="dark"] .stat:nth-child(2) b { color: var(--red); }
[data-theme="dark"] .chip, [data-theme="dark"] .tag { background: #13222F; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .chip.on { background: var(--gold); color: #0A1520; border-color: var(--gold); }

/* الأزرار */
[data-theme="dark"] .btn-gold { background: var(--gold); color: #0A1520; }
[data-theme="dark"] .btn-gold:hover { background: var(--gold-d); color: #0A1520; }
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-line { border-color: rgba(255, 255, 255, .22); color: #fff; }
[data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .btn-line:hover { border-color: var(--gold); color: var(--gold-d); }
[data-theme="dark"] .cta .btn-gold { background: #fff; color: #0A1520; }
[data-theme="dark"] .link-arrow { color: var(--gold-d); }

/* بطاقات المشاريع: تبقى الصور كما هي مع إطار داكن */
[data-theme="dark"] .prj { background: #13222F; }
[data-theme="dark"] .prj-meta span { background: rgba(0, 0, 0, .35); }

/* النماذج */
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea { background: #0F1C29; border-color: rgba(255, 255, 255, .14); color: var(--ink); }
[data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .field textarea:focus { background: #13222F; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-l); }
[data-theme="dark"] ::placeholder { color: #7E8E9E; }

/* الخريطة */
[data-theme="dark"] .realmap { background: #0F1C29; border-color: var(--line); }
[data-theme="dark"] .realmap .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
[data-theme="dark"] .realmap-reset { background: #13222F; color: var(--ink); border-color: var(--line); }

/* المقالات */
[data-theme="dark"] .article blockquote, [data-theme="dark"] .callout { background: var(--paper); border-color: var(--gold); color: var(--ink); }
[data-theme="dark"] .toc { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .toc a:hover, [data-theme="dark"] .toc a.on { background: var(--gold-l); color: var(--gold-d); }

/* التذييل */
[data-theme="dark"] .foot { background: #0E1A27; border-top: 1px solid var(--line); }
[data-theme="dark"] .credit { background: #0B1520; }
[data-theme="dark"] .to-top { background: #13222F; color: var(--gold-d); border: 1px solid var(--line); }

/* ===== الاتجاه الإنجليزي ===== */
html[dir="ltr"] body { font-family: "Tajawal", system-ui, sans-serif; }

/* ===== من منشوراتنا (معرض تصاميم السوشيال) ===== */
.posts-sec .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.posts-sec .sec-head p { margin: 8px 0 0; color: var(--muted); }
.posts-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.post-shot { padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); cursor: zoom-in; aspect-ratio: 1; display: block; transition: transform .35s, box-shadow .35s, border-color .35s; }
.post-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--amber); }
.post-lb { position: fixed; inset: 0; z-index: 200; background: rgba(5, 12, 20, .92); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.post-lb[hidden] { display: none; }
.post-lb figure { margin: 0; max-width: min(88vw, 820px); text-align: center; }
.post-lb img { max-width: 100%; max-height: 80vh; border-radius: 14px; display: block; margin: auto; }
.post-lb figcaption { color: #E8EEF4; margin-top: 12px; font-weight: 700; }
.post-lb-x, .post-lb-nav { background: rgba(255, 255, 255, .1); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 24px; cursor: pointer; flex: none; }
.post-lb-x { position: absolute; top: 18px; inset-inline-end: 18px; font-size: 18px; }
.post-lb-x:hover, .post-lb-nav:hover { background: var(--amber); }
@media (max-width: 1000px) { .posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .post-lb-nav { position: absolute; bottom: 24px; } .post-lb-nav.prev { inset-inline-start: 24px; } .post-lb-nav.next { inset-inline-end: 24px; } }
.post-play { position: absolute; top: 10px; inset-inline-start: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; font-size: 13px; }
.post-lb-open { margin-top: 14px; }