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

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

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

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

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

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

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

/* خطوات ------------------------------------------------------------------- */
.sa-steps { counter-reset: step; display: grid; gap: 20px; }
.sa-step { position: relative; padding-inline-start: 64px; }
.sa-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(--sa-teal-700); color: #fff; font-weight: 800; font-size: 18px;
}
.sa-step h3 { margin-block-end: 6px; }
.sa-step p { color: var(--sa-ink-700); }

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

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

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

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

/* ⚠️ الهيرو على الجوال: التكديس يجمع عمود النص + البطاقة في عمود واحد، فيتضاعف الارتفاع
   (قِيس 1476px على شاشة 812px = شاشتان قبل أول قسم). نضغط الإيقاع ونُخفي شريط الثقة
   لأن وعوده نفسها ترد حرفيًا في بطاقة الهيرو وفي قسم «لماذا نحن» التالي مباشرةً.
   لا تحذف هذه الكتلة — بدونها يعود الهيرو إلى ضعف ارتفاع الشاشة. */
@media (max-width: 640px) {
  .sa-hero__inner { padding-block: 26px; gap: 18px; }
  .sa-hero h1 { line-height: 1.25; }
  .sa-hero__lead { font-size: 1.05rem; margin-block-end: 20px; }
  .sa-hero__actions { gap: 10px; margin-block-end: 18px; }
  .sa-hero__trust { display: none; }
  .sa-hero__card { padding: 20px; }
  .sa-hero__card h2 { margin-block-end: 12px; }
  .sa-hero__card .sa-check-list { gap: 10px; }
}

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

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

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

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

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

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

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

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

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

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

/* قائمة مزايا ------------------------------------------------------------- */
.sa-check-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.sa-check-list li { display: flex; gap: 12px; align-items: flex-start; }
.sa-check-list li::before {
  content: '✓'; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sa-teal-50); color: var(--sa-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; }
}

/* أهداف اللمس على الجوال ---------------------------------------------------
   روابط القوائم (التذييل، قوائم المزايا، مسار التنقّل) تخرج بارتفاع 25–29px،
   وهو أصغر من هدف اللمس المريح (44px) فيصعب إصابتها بالإبهام على الجوال.
   نرفع ارتفاعها على الشاشات الضيّقة فقط، فلا يتغيّر شكل سطح المكتب.
   ⚠️ عند مزامنة القالب لاحقًا: أعِد هذه الكتلة إن اختفت. */
@media (max-width: 640px) {
  .sa-site-footer__col a,
  .sa-check-list li > a,
  .sa-breadcrumbs a,
  .sa-breadcrumbs [aria-current='page'] {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
  .sa-site-footer__col ul { gap: 2px; }
  .sa-check-list li { align-items: center; }
}