/* ==========================================================================
   تنشيف — الأنماط العامة (غير الحاجبة للعرض)
   المكوّنات، المقالات، الأقسام، النماذج، والأدوات المساعدة
   ========================================================================== */

/* أدوات مساعدة عامة ------------------------------------------------------- */
.tn-section { padding-block: var(--tn-section-pad, clamp(48px, 7vw, 88px)); }
.tn-section--tint { background: var(--tn-ink-50); }
.tn-section--teal { background: linear-gradient(160deg, var(--tn-teal-800), var(--tn-teal-900)); color: #fff; }
.tn-section--teal h2, .tn-section--teal h3 { color: #fff; }

.tn-section__head { max-width: 760px; margin-inline: auto; text-align: center; margin-block-end: 48px; }
.tn-section__eyebrow {
  display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .5px;
  color: var(--tn-teal-600); background: var(--tn-teal-50); padding: 6px 16px; border-radius: 50px;
  margin-block-end: 16px;
}
.tn-section--teal .tn-section__eyebrow { color: #fff; background: rgba(255,255,255,.15); }
.tn-section__lead { font-size: 1.15rem; color: var(--tn-ink-500); margin-block-start: 14px; }
.tn-section--teal .tn-section__lead { color: rgba(255,255,255,.85); }

.tn-text-center { text-align: center; }
.tn-mt-lg { margin-block-start: 40px; }
.tn-grid { display: grid; gap: var(--tn-grid-gap, 24px); }
.tn-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tn-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tn-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* البطاقات ---------------------------------------------------------------- */
.tn-card {
  background: #fff; border: 1px solid var(--tn-ink-100); border-radius: var(--tn-radius);
  padding: 28px; box-shadow: var(--tn-shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
  height: 100%;
}
.tn-card:hover { transform: translateY(-4px); box-shadow: var(--tn-shadow-lg); border-color: var(--tn-teal-500); }
/* أسلوب البطاقة البديل: حدّ واضح بلا ظل (يضبطه DESIGN.cardStyle عبر سمة الجذر) */
[data-cards='outline'] .tn-card { box-shadow: none; border-color: var(--tn-ink-300); }
[data-cards='outline'] .tn-card:hover { box-shadow: none; border-color: var(--tn-teal-600); }
.tn-card__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px;
  background: var(--tn-teal-50); color: var(--tn-teal-700); margin-block-end: 18px; font-size: 26px;
}
.tn-card h3 { margin-block-end: 10px; }
.tn-card p { color: var(--tn-ink-700); }
/* هدف لمس ≥44px: كان 31px وهو دعوة العمل الوحيدة داخل البطاقة (البطاقة نفسها ليست رابطًا
   في كل الصفحات)، فالهامش عُوِّض بحشوة رأسية حتى لا يتغيّر إيقاع البطاقة. */
.tn-card__link { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 9px; padding-block: 10px; min-height: 44px; font-weight: 700; }
.tn-card__link::after { content: '←'; }

/* بطاقة مقال -------------------------------------------------------------- */
.tn-article-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tn-ink-100);
  border-radius: var(--tn-radius); overflow: hidden; box-shadow: var(--tn-shadow);
  transition: transform .2s, box-shadow .2s;
}
.tn-article-card:hover { transform: translateY(-4px); box-shadow: var(--tn-shadow-lg); }
.tn-article-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tn-article-card__cat {
  align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--tn-teal-700);
  background: var(--tn-teal-50); padding: 4px 12px; border-radius: 50px;
}
.tn-article-card__title { font-size: 1.2rem; }
.tn-article-card__title a { color: var(--tn-ink-900); }
.tn-article-card__title a:hover { color: var(--tn-teal-700); text-decoration: none; }
.tn-article-card__excerpt { color: var(--tn-ink-500); font-size: .96rem; flex: 1; }
.tn-article-card__meta { display: flex; gap: 14px; font-size: 13px; color: var(--tn-ink-500); margin-block-start: 6px; }

/* أرقام/إحصاءات ----------------------------------------------------------- */
.tn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.tn-stat { text-align: center; }
.tn-stat__num { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--tn-teal-600); line-height: 1; }
.tn-section--teal .tn-stat__num { color: #fff; }
.tn-stat__label { color: var(--tn-ink-500); margin-block-start: 8px; font-weight: 600; }
.tn-section--teal .tn-stat__label { color: rgba(255,255,255,.8); }

/* خطوات ------------------------------------------------------------------- */
.tn-steps { counter-reset: step; display: grid; gap: 20px; }
.tn-step { position: relative; padding-inline-start: 64px; }
.tn-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tn-teal-700); color: #fff; font-weight: 800; font-size: 18px;
}
.tn-step h3 { margin-block-end: 6px; }
.tn-step p { color: var(--tn-ink-700); }

/* الأسئلة الشائعة (accordion) --------------------------------------------- */
.tn-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.tn-faq__item { border: 1px solid var(--tn-ink-100); border-radius: var(--tn-radius-sm); background: #fff; overflow: hidden; }
.tn-faq__item summary {
  cursor: pointer; padding: 20px 24px; font-weight: 700; font-size: 1.08rem; color: var(--tn-ink-900);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.tn-faq__item summary::-webkit-details-marker { display: none; }
.tn-faq__item summary::after { content: '+'; font-size: 1.6rem; color: var(--tn-teal-600); font-weight: 400; transition: transform .2s; }
.tn-faq__item[open] summary::after { transform: rotate(45deg); }
.tn-faq__item summary:hover { color: var(--tn-teal-700); }
.tn-faq__answer { padding: 0 24px 22px; color: var(--tn-ink-700); }

/* تذييل الموقع ------------------------------------------------------------ */
.tn-site-footer { background: var(--tn-ink-900); color: #cbd5e1; padding-block: 56px 28px; margin-block-start: 40px; }
.tn-site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; }
.tn-site-footer__brand .tn-brand__name { color: #fff; font-size: 22px; display: inline-block; margin-block-end: 12px; }
.tn-site-footer__brand p { color: #94a3b8; margin-block-end: 18px; font-size: .95rem; }
.tn-site-footer__title { color: #fff; font-size: 1rem; margin-block-end: 16px; }
.tn-site-footer__col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.tn-site-footer__col a { color: #94a3b8; font-size: .95rem; }
.tn-site-footer__col a:hover { color: #fff; text-decoration: none; }
.tn-site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-block-start: 1px solid #1e293b; margin-block-start: 40px; padding-block-start: 24px;
  font-size: .9rem; color: #64748b;
}
.tn-site-footer__contact { display: flex; gap: 10px; align-items: center; }
.tn-site-footer__contact a { color: #94a3b8; }
@media (max-width: 780px) { .tn-site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tn-site-footer__grid { grid-template-columns: 1fr; } }

/* مسار التنقّل ------------------------------------------------------------ */
.tn-breadcrumbs { background: var(--tn-ink-50); border-block-end: 1px solid var(--tn-ink-100); font-size: 14px; }
.tn-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding-block: 12px; }
.tn-breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--tn-ink-500); }
.tn-breadcrumbs a { color: var(--tn-ink-700); }
.tn-breadcrumbs [aria-current='page'] { color: var(--tn-teal-700); font-weight: 600; }
.tn-breadcrumbs__sep { color: var(--tn-ink-300); }

/* الهيرو ------------------------------------------------------------------ */
.tn-hero { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--tn-teal-50), #fff 60%); }
.tn-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-block: clamp(48px, 8vw, 96px); }
.tn-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
  color: var(--tn-teal-700); background: #fff; padding: 8px 16px; border-radius: 50px; box-shadow: var(--tn-shadow); margin-block-end: 20px;
}
.tn-hero h1 { margin-block-end: 18px; }
.tn-hero__lead { font-size: 1.2rem; color: var(--tn-ink-700); margin-block-end: 28px; max-width: 60ch; }
.tn-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-end: 28px; }
.tn-hero__trust { display: flex; flex-wrap: wrap; gap: 20px; font-size: .92rem; color: var(--tn-ink-500); }
.tn-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.tn-hero__trust span::before { content: '✓'; color: var(--tn-teal-600); font-weight: 800; }
.tn-hero__card {
  background: #fff; border-radius: var(--tn-radius); box-shadow: var(--tn-shadow-lg); padding: 28px;
  border: 1px solid var(--tn-ink-100);
}
.tn-hero__card h2 { font-size: 1.2rem; margin-block-end: 16px; }
@media (max-width: 860px) { .tn-hero__inner { grid-template-columns: 1fr; gap: 32px; } .tn-hero__card { order: 2; } }

/* إيقاع الهيرو على الجوال ---------------------------------------------------
   قياس فعلي على iPhone SE (375×667): كانت أزرار الدعوة تبدأ عند 600px فلا يظهر
   منها فوق الطيّة سوى 67px والزرّ الثاني مخفيّ كليًا. الحشوة والهوامش هنا مضبوطة
   على الشاشات القصيرة ليصعد الزرّان فوق الطيّة دون المساس بتخطيط سطح المكتب. */
@media (max-width: 560px) {
  .tn-hero__inner { padding-block: 28px 36px; gap: 24px; }
  .tn-hero__eyebrow { margin-block-end: 14px; font-size: 13px; padding: 7px 13px; }
  .tn-hero h1 { margin-block-end: 14px; }
  .tn-hero__lead { font-size: 1.06rem; margin-block-end: 20px; }
  /* لا تجعل الأزرار بعرض كامل: زرّ واتساب العائم مثبّت أسفل يسار الشاشة، فالعرض
     الكامل يمدّ الزرّ تحته فيلتقط الضغطة بدل الزرّ المقصود. الإبقاء على العرض
     التلقائي (محاذاة يمين في RTL) يترك منطقة الزرّ العائم خالية. */
  .tn-hero__actions { gap: 10px; margin-block-end: 20px; }
  /* الشارات تحت الطيّة وزرّ واتساب العائم يمرّ فوقها — امنحها متنفّسًا أسفلها */
  .tn-hero__trust { gap: 12px; font-size: .88rem; padding-block-end: 8px; }
}

/* شريط CTA ---------------------------------------------------------------- */
.tn-cta-band { text-align: center; }
.tn-cta-band h2 { margin-block-end: 14px; }
.tn-cta-band p { max-width: 640px; margin: 0 auto 26px; font-size: 1.1rem; }
.tn-cta-band .tn-btn { font-size: 17px; padding: 15px 34px; }

/* محتوى المقال (prose) ---------------------------------------------------- */
.tn-prose { max-width: 760px; margin-inline: auto; }
.tn-prose > * + * { margin-block-start: 1.25em; }
/* ⚠️ scroll-margin يجب أن يشتقّ من --tn-header-h (الهيدر لاصق). رقم صلب = العنوان يختفي تحت الهيدر
   عند القفز من جدول المحتويات في المواقع التي يختلف فيها ارتفاع الهيدر عن 72px. */
.tn-prose h2 { margin-block-start: 1.8em; padding-block-end: .3em; border-block-end: 2px solid var(--tn-teal-50); scroll-margin-top: calc(var(--tn-header-h, 72px) + 16px); }
.tn-prose h3 { margin-block-start: 1.5em; color: var(--tn-teal-800); scroll-margin-top: calc(var(--tn-header-h, 72px) + 16px); }
.tn-prose p, .tn-prose li { color: var(--tn-ink-700); }
.tn-prose ul, .tn-prose ol { padding-inline-start: 1.4em; display: grid; gap: .5em; }
.tn-prose li { padding-inline-start: 4px; }
.tn-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tn-prose strong { color: var(--tn-ink-900); }
.tn-prose blockquote {
  border-inline-start: 4px solid var(--tn-teal-600); background: var(--tn-teal-50);
  padding: 16px 22px; border-radius: 0 var(--tn-radius-sm) var(--tn-radius-sm) 0; color: var(--tn-ink-700); font-style: normal;
}
.tn-prose blockquote p { margin: 0; }
.tn-prose img { border-radius: var(--tn-radius-sm); margin-block: 1.5em; box-shadow: var(--tn-shadow); }
.tn-prose code {
  background: var(--tn-ink-100); padding: 2px 7px; border-radius: 6px; font-size: .9em;
  font-family: 'Consolas', 'Courier New', monospace; direction: ltr; display: inline-block;
}

/* جداول متجاوبة ----------------------------------------------------------- */
.tn-table-wrap { overflow-x: auto; margin-block: 1.5em; border-radius: var(--tn-radius-sm); border: 1px solid var(--tn-ink-100); }
.tn-prose table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 460px; }
.tn-prose thead { background: var(--tn-teal-700); color: #fff; }
.tn-prose th, .tn-prose td { padding: 13px 16px; text-align: start; border-block-end: 1px solid var(--tn-ink-100); }
.tn-prose tbody tr:nth-child(even) { background: var(--tn-ink-50); }
.tn-prose tbody tr:hover { background: var(--tn-teal-50); }

/* ⚠️ حرج للجوال: min-width:460px يجعل كل جدول أعرض من عمود المقال (~335px على شاشة 375px)
   فيحتاج القارئ سحبًا أفقيًا داخل كل جدول. على الشاشات الضيّقة نُلغي الحدّ الأدنى ونضغط الحشوة
   ليدخل الجدول كاملًا. لا تحذف هذه الكتلة. */
@media (max-width: 560px) {
  .tn-prose table { min-width: 0; font-size: .86rem; }
  .tn-prose th, .tn-prose td { padding: 9px 10px; }
}

/* صندوق ملاحظة/إجابة سريعة (للمقتطفات المميّزة) --------------------------- */
.tn-answer-box {
  background: var(--tn-teal-50); border: 1px solid var(--tn-teal-500); border-inline-start-width: 5px;
  border-radius: var(--tn-radius-sm); padding: 20px 24px; margin-block: 1.5em;
}
.tn-answer-box strong { color: var(--tn-teal-800); }

/* جدول المحتويات ---------------------------------------------------------- */
.tn-toc { background: var(--tn-ink-50); border: 1px solid var(--tn-ink-100); border-radius: var(--tn-radius); padding: 22px 26px; margin-block: 2em; }
.tn-toc h2 { font-size: 1.1rem; margin: 0 0 14px; border: 0; padding: 0; }
.tn-toc ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; }
.tn-toc a { color: var(--tn-ink-700); text-decoration: none; }
.tn-toc a:hover { color: var(--tn-teal-700); text-decoration: underline; }

/* رأس المقال -------------------------------------------------------------- */
.tn-article-header { max-width: 760px; margin-inline: auto; text-align: center; padding-block: 40px 8px; }
.tn-article-header__cat { color: var(--tn-teal-700); font-weight: 700; }
.tn-article-header h1 { margin-block: 14px 18px; }
.tn-article-header__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; align-items: center;
  color: var(--tn-ink-500); font-size: .92rem;
}
.tn-article-header__meta time, .tn-article-header__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* صندوق الكاتب (E-E-A-T) -------------------------------------------------- */
.tn-author-box {
  display: flex; gap: 18px; align-items: center; max-width: 760px; margin: 48px auto 0;
  padding: 24px; background: var(--tn-ink-50); border: 1px solid var(--tn-ink-100); border-radius: var(--tn-radius);
}
.tn-author-box__avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tn-teal-600), var(--tn-teal-800)); color: #fff; font-size: 26px; font-weight: 800;
}
.tn-author-box__name { font-weight: 800; color: var(--tn-ink-900); }
.tn-author-box__title { color: var(--tn-ink-500); font-size: .92rem; }

/* مقالات ذات صلة ---------------------------------------------------------- */
.tn-related { border-block-start: 1px solid var(--tn-ink-100); margin-block-start: 48px; padding-block-start: 40px; }

/* نماذج ------------------------------------------------------------------- */
.tn-form-field { display: grid; gap: 6px; margin-block-end: 18px; }
.tn-form-field label { font-weight: 700; font-size: .95rem; }
.tn-form-field input, .tn-form-field textarea, .tn-form-field select {
  font-family: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--tn-ink-300);
  border-radius: var(--tn-radius-sm); background: #fff; color: var(--tn-ink-900); width: 100%;
}
.tn-form-field input:focus, .tn-form-field textarea:focus, .tn-form-field select:focus {
  outline: none; border-color: var(--tn-teal-600); box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}

/* قائمة مزايا ------------------------------------------------------------- */
.tn-check-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.tn-check-list li { display: flex; gap: 12px; align-items: flex-start; }
.tn-check-list li::before {
  content: '✓'; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tn-teal-50); color: var(--tn-teal-700); display: grid; place-items: center; font-weight: 800; font-size: 14px;
}

/* الوصولية: تقليل الحركة --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* زر الطباعة/حفظ PDF داخل المقال ------------------------------------------ */
.tn-article-header__print { margin-block-start: 18px; }
.tn-article-header__print .tn-btn { font-size: .92rem; padding: 10px 18px; }

/* صندوق دعوة العمل داخل المقال -------------------------------------------- */
.tn-article-cta {
  max-width: 760px; margin: 48px auto 0; padding: 28px 30px;
  background: var(--tn-teal-50); border: 1px solid var(--tn-teal-500);
  border-inline-start-width: 5px; border-radius: var(--tn-radius);
}
.tn-article-cta h2 { margin: 0 0 10px; font-size: 1.3rem; border: 0; padding: 0; }
.tn-article-cta p { color: var(--tn-ink-700); margin-block-end: 18px; }

/* الطباعة / الحفظ كـ PDF --------------------------------------------------- */
@media print {
  .tn-site-header, .tn-site-footer, .tn-breadcrumbs, .tn-wa-float, .tn-article-cta,
  .tn-article-header__print, .tn-related, .tn-toc { display: none !important; }
  body { font-size: 12pt; background: #fff; color: #000; }
  .tn-container { max-width: 100%; padding: 0; }
  .tn-prose a { color: #000; text-decoration: underline; }
  .tn-prose a[href^="/"]::after { content: " (tnsheef.com" attr(href) ")"; font-size: .8em; color: #555; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════
   بانر بروتوكول التحول الحديدي — يظهر فور خروج نتيجة أي حاسبة.
   مقصود أن يكون أضخم عنصر على الشاشة في تلك اللحظة: الزائر وصل
   للتوّ إلى أرقامه، وهذه أعلى نقطة استعداد لديه.
   ═══════════════════════════════════════════════════════════ */
.tn-upsell {
  display: block;
  margin-block: 28px 8px;
  padding: 34px 30px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--tn-teal-900) 0%, var(--tn-teal-700) 58%, var(--tn-teal-600) 100%);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  text-align: center;
}
.tn-upsell__eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 6px 16px;
  margin-block-end: 16px;
}
.tn-upsell__h {
  color: #fff;
  font-size: clamp(1.35rem, 3.6vw, 1.95rem);
  line-height: 1.4;
  margin: 0 0 14px;
}
.tn-upsell__p {
  color: rgba(255, 255, 255, .93);
  font-size: 1.04rem;
  line-height: 1.85;
  max-width: 620px;
  margin-inline: auto;
  margin-block-end: 18px;
}
.tn-upsell__nums {
  background: rgba(0, 0, 0, .22);
  border-radius: 12px;
  padding: 13px 20px;
  margin-block-end: 22px;
  font-size: 1.02rem;
  display: inline-block;
}
.tn-upsell__nums strong { color: #fff; }
.tn-upsell__list {
  list-style: none;
  padding: 0;
  margin: 0 auto 26px;
  max-width: 640px;
  display: grid;
  gap: 9px 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  text-align: start;
}
.tn-upsell__list li {
  font-weight: 600;
  font-size: .97rem;
  padding-inline-start: 26px;
  position: relative;
}
.tn-upsell__list li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  font-weight: 800;
}
.tn-upsell__cta {
  display: inline-block;
  background: #fff;
  color: var(--tn-teal-800);
  font-weight: 800;
  font-size: clamp(1rem, 2.6vw, 1.14rem);
  padding: 17px 38px;
  border-radius: 12px;
  text-decoration: none;
  min-height: 44px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tn-upsell__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.tn-upsell__fine {
  margin-block: 16px 0;
  font-size: .87rem;
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 560px) {
  .tn-upsell { padding: 26px 20px; border-radius: 14px; }
  .tn-upsell__list { grid-template-columns: 1fr; }
  .tn-upsell__cta { width: 100%; padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-upsell__cta { transition: none; }
  .tn-upsell__cta:hover { transform: none; }
}

/* البانر عرض بيع لا محتوى — لا مكان له في نسخة الطباعة */
@media print { .tn-upsell { display: none !important; } }