/* ── مدونة ربط بلغة الموقع الجديد (٤ تشرين الأول ٢٠٢٦) ─────────────────
   تُحمَّل بعد /site.css: الترويسة والتذييل والألوان والخط منه، وهنا ما يخصّ
   القراءة وحدها — فهرسٌ بخطوطٍ رفيعة لا بطاقات، ومقالٌ بعمود قراءة ٧٠ حرفاً
   وفهرسٍ لاصق جانبه على الشاشة العريضة. blog.css القديم باقٍ لصفحات التسجيل
   والدخول والوثائق؛ المدونة لا تحمّله. */

/* ── رأس الفهرس ───────────────────────────────────────── */
.blog-hero { padding-block: clamp(56px, 9vw, 128px) clamp(40px, 5vw, 72px); }
.blog-hero .eyebrow { display: none; }            /* «المدونة» في الترويسة مضاءة أصلاً */
.blog-hero h1 { font-weight: 300; font-size: clamp(40px, 6.4vw, 96px); line-height: 1.12;
  letter-spacing: -.01em; text-wrap: balance; max-width: 16ch; }
.blog-hero p { margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--ink);
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.9; color: var(--ink-2); max-width: 64ch; }
main.wrap:has(.blog-hero) { padding-bottom: clamp(72px, 10vw, 140px); }

/* ── قائمة المقالات: صفوف بخطوط رفيعة ───────────────────── */
.posts { border-top: 1px solid var(--ink); }
.post { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 28px;
  grid-template-areas: "tag title go" "meta text go"; gap: 6px var(--gut);
  padding-block: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--line); align-items: start; }
.post .tag { grid-area: tag; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px; }
.post .tag::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--leaf); flex: none; }
.post .tag.b::before { background: #8FB0EA; }
.post h2 { grid-area: title; font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3;
  transition: color .3s; text-wrap: balance; }
.post p { grid-area: text; color: var(--ink-soft); font-size: 15.5px; line-height: 1.85; max-width: 70ch; }
.post .meta { grid-area: meta; display: flex; flex-direction: column; gap: 2px; font-family: var(--mono);
  font-size: 12.5px; color: var(--ink-soft); font-feature-settings: "tnum"; }
a.post::after { content: ""; grid-area: go; width: 18px; height: 18px; margin-top: 10px; justify-self: end;
  background: currentColor; transition: transform .45s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4'/%3E%3C/svg%3E") center/contain no-repeat; }
[dir="ltr"] a.post::after { transform: scaleX(-1); }
a.post:hover h2 { color: var(--seal); }
a.post:hover::after { transform: translateX(-6px); }
[dir="ltr"] a.post:hover::after { transform: scaleX(-1) translateX(-6px); }
/* أحدث مقال أكبر: هو ما جاء الزائر من أجله غالباً */
.posts:first-of-type > .post:first-child h2 { font-size: clamp(28px, 3.4vw, 52px); }
.posts:first-of-type > .post:first-child p { font-size: 17px; }

.sec-title { margin-top: clamp(64px, 8vw, 112px); margin-bottom: 16px; font-weight: 300;
  font-size: clamp(26px, 2.6vw, 38px); }
.post.soon { grid-template-areas: "tag title ." ". text ."; }
.post.soon h2 { font-size: clamp(19px, 1.7vw, 24px); color: var(--ink-2); }
.post.soon .tag::before { background: var(--ink-faint); }

@media (max-width: 760px) {
  .post { grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-areas: "tag go" "title go" "text text" "meta meta"; }
  .post .meta { flex-direction: row; gap: 14px; margin-top: 4px; }
  .post.soon { grid-template-areas: "tag ." "title ." "text text"; }
}

/* ── رأس المقال ───────────────────────────────────────── */
main.article { padding-bottom: clamp(72px, 10vw, 140px); }
.article > .eyebrow { display: none; }            /* القسم في مسار التنقّل فوق العنوان */
.crumbs { padding-top: clamp(40px, 6vw, 88px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13.5px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease); }
.crumbs a:hover { background-size: 100% 1px; }
.crumbs span { color: var(--ink-faint); }
.article h1 { margin-top: 22px; font-weight: 300; font-size: clamp(34px, 4.8vw, 72px); line-height: 1.16;
  letter-spacing: -.01em; text-wrap: balance; max-width: 22ch; }
.article .standfirst { margin-top: clamp(24px, 3vw, 36px); padding-top: 20px; border-top: 1px solid var(--ink);
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.9; color: var(--ink-2); max-width: 66ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px;
  font-size: 13.5px; color: var(--ink-soft); }
.byline > span:not(.who) { font-family: var(--mono); font-size: 12.5px; font-feature-settings: "tnum"; }
.byline .who { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.byline .who i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-style: normal; font-size: 13px; font-weight: 600; color: #fff; background: var(--leaf); }

/* ── جسم المقال: عمود قراءة + فهرسٌ لاصق جانبه ─────────────── */
.prose { margin-top: clamp(48px, 6vw, 88px); display: grid;
  grid-template-columns: minmax(0, 70ch) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 112px); }
.prose > * { grid-column: 1; min-width: 0; }
.prose > .toc { grid-column: 2; grid-row: 1 / span 400; align-self: start; position: sticky; top: 96px;
  max-width: 300px; }
.prose p, .prose li { font-size: 17px; line-height: 1.95; color: var(--ink-2); }
.prose p { margin-bottom: 18px; }
.prose h2 { margin: clamp(48px, 5vw, 72px) 0 18px; padding-top: 22px; border-top: 1px solid var(--ink);
  font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; scroll-margin-top: 96px; }
.prose > h2:first-of-type { margin-top: 0; }
.prose h3 { margin: 32px 0 10px; font-weight: 600; font-size: 18.5px; line-height: 1.5; scroll-margin-top: 96px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-inline-start: 22px; }
.prose li { margin-bottom: 8px; padding-inline-start: 4px; }
.prose li::marker { color: var(--leaf); }
.prose ol > li::marker { font-family: var(--mono); font-size: 14px; color: var(--ink-soft); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a:not(.btn) { color: var(--seal); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; }
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

.toc { border-top: 1px solid var(--ink); padding-top: 16px; }
.toc b { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 9px 0; font-size: 14px;
  line-height: 1.6; color: var(--ink-2); text-decoration: none !important; transition: color .2s; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-faint); padding-top: 3px; }
/* `.prose a` يلوّن روابط المقال بالختم؛ روابط الفهرس رمادية إلا القسم الحالي */
.prose .toc a { color: var(--ink-2); }
.prose .toc a:hover, .prose .toc a.on { color: var(--seal); }
.prose .toc a.on::before { color: var(--seal); }

/* ── صناديق: غسلات مسطّحة بلونٍ لكل نوع ───────────────────── */
.box { margin: 26px 0; padding: 20px 22px; background: var(--tile); }
.box b.h { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.box p { font-size: 15.5px; line-height: 1.9; margin-bottom: 10px; }
.box p:last-child { margin-bottom: 0; }
.box.law  { background: var(--sky); }
.box.note { background: var(--leaf-mist); }
.box.warn { background: var(--sand); }

.formula { margin: 26px 0; padding: clamp(20px, 2.4vw, 32px); background: var(--leaf-mist);
  font-weight: 300; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.6; color: var(--ink); }
.formula em { font-style: normal; font-weight: 500; color: var(--seal); }

/* ── جداول: مثل كشف الرواتب، خطوطٌ لا صناديق ─────────────── */
.tbl { margin: 26px 0; overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.tbl th { padding: 0 0 10px; text-align: start; font-weight: 400; font-size: 12.5px; color: var(--ink-soft);
  border-bottom: 1px solid var(--ink); }
.tbl td { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.tbl th + th, .tbl td + td { padding-inline-start: 18px; }
.tbl td:first-child { color: var(--ink); font-weight: 500; }
.tbl .y { color: var(--seal); font-weight: 500; }
.tbl .n { color: #A93A26; }
.tbl tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; color: var(--ink); }

/* ── أسئلة: نفس سطر الأسئلة الشائعة بالموقع ───────────────── */
/* site.css يسمّي شبكة صفحة الأسئلة `.faq` (١٢ عموداً) — داخل المقال كتلةٌ عادية،
   وإلا اصطفّت الأسئلة جنباً إلى جنب وفاض المقال عن عرض الهاتف. */
.prose .faq { display: block; margin: 20px 0 32px; border-top: 1px solid var(--ink); }
.prose details { border-bottom: 1px solid var(--line); }
.prose summary { padding-block: 20px; font-size: 16.5px; }
.prose summary::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  transition: transform .45s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) center/100% 1.5px no-repeat, linear-gradient(#000 0 0) center/1.5px 100% no-repeat;
          mask: linear-gradient(#000 0 0) center/100% 1.5px no-repeat, linear-gradient(#000 0 0) center/1.5px 100% no-repeat; }
.prose details[open] summary::after { transform: rotate(45deg); }
.prose details p { font-size: 15.5px; }

.disc { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }

/* ── دعوة التجربة: شريط الختم الأخضر نفسه في آخر الموقع ─────── */
.cta-box { margin: clamp(48px, 6vw, 80px) 0 0; padding: clamp(28px, 4vw, 52px); background: var(--seal); color: #fff; }
.cta-box h2 { margin: 0 0 10px; padding: 0; border: 0; font-weight: 300; font-size: clamp(26px, 3vw, 42px);
  line-height: 1.25; color: #fff; }
.cta-box p { color: rgba(255, 255, 255, .86); font-size: 16px; max-width: 60ch; margin-bottom: 22px; }
.cta-box .btn { display: inline-flex; align-items: center; height: 48px; padding-inline: 24px; border-radius: 999px;
  background: #fff; color: var(--seal-deep); font-weight: 500; font-size: 15.5px; text-decoration: none !important;
  transition: background .25s; }
.cta-box .btn:hover { background: var(--leaf-wash); }
main.wrap > .cta-box { max-width: none; margin-top: clamp(64px, 8vw, 112px); }

/* ── اقرأ أيضاً ────────────────────────────────────────── */
.more { margin-top: clamp(48px, 6vw, 72px); }
.more b { display: block; font-weight: 300; font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; }
.more .row { border-top: 1px solid var(--ink); }
.more a { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 500; color: var(--ink) !important; text-decoration: none !important;
  transition: color .25s; }
.more a small { font-size: 14px; font-weight: 400; color: var(--ink-soft); line-height: 1.7; }
.more a:hover { color: var(--seal) !important; }

@media (max-width: 1080px) {
  .prose { display: block; }
  .prose > .toc { position: static; max-width: none; margin-bottom: 40px; }
}