/*
 * الأساس: متغيّرات الصفحة، الخطوط والعناوين، الحاوية، الأزرار
 *
 * بيتحمّل في كل صفحة بعد tailwind.css.
 * فيه الحاجات المشتركة اللي مش بتخصّ صفحة معيّنة:
 * المتغيّرات، تنسيق النصّ الأساسي، .konte-container، .btn، ومساعدات صغيرة.
 *
 * كل القواعد جوّه @layer components عشان ترتيب الأولويات يفضل
 * زي ما كان: كلاسات Tailwind (layer utilities) تقدر تتغلّب عليها،
 * وده نفس ترتيب نسخة Next بالحرف. ماتشيلش السطر ده.
 *
 * الترتيب نفسه معلَن في tailwind.css، فلازم يتحمّل قبل الملفّ ده —
 * وده مظبوط في كل صفحات HTML.
 */

:root {
  --topbar-h: 40px;
  --header-h: 80px;
  --header-mobile-h: 60px;
  --gutter: 25px;
}

@layer base {
  /* الاتجاه بييجي من سمة dir على <html> حسب اللغة */

  body {
    /* الموقع المرجعي: body { max-width:1920px; margin:auto } */
    max-width: 1920px;
    margin-inline: auto;
    background-color: var(--color-page);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55556;
    -webkit-font-smoothing: antialiased;
  }

  /* أحجام العناوين الفعلية من الثيمة */
  h1 { font-size: 44px; font-weight: 600; line-height: 1.2; color: var(--color-ink); }
  h2 { font-size: 40px; font-weight: 500; line-height: 1.55556; color: var(--color-ink); }
  h3 { font-size: 30px; font-weight: 500; line-height: 1.55556; color: var(--color-ink); }
  h4 { font-size: 24px; font-weight: 500; line-height: 1.55556; color: var(--color-ink); }
  h5 { font-size: 18px; font-weight: 500; line-height: 1.55556; color: var(--color-ink); }
  h6 { font-size: 16px; font-weight: 500; line-height: 1.55556; color: var(--color-ink); }
  h1, h2, h3, h4 { text-wrap: balance; }

  @media (max-width: 767px) {
    h1 { font-size: 30px; }
    h2 { font-size: 26px; }
    h3 { font-size: 22px; }
    h4 { font-size: 19px; }
  }

  ::selection { background: var(--color-brand-dark); color: #fff; }
  ::-webkit-scrollbar { width: 0.5rem; }
  ::-webkit-scrollbar-track { background-color: #d9d9d9; border-radius: 0.125rem; }
  ::-webkit-scrollbar-thumb { background-color: var(--color-brand-dark); border-radius: 0.125rem; }

  :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

  /* المتصفّحات مابتحطّش مؤشّر اليد على <button> افتراضيًّا، وTailwind
     مابيضيفهوش كمان — فكل الأزرار كانت بسهم عادي. */
  button:not(:disabled),
  [role='button']:not([aria-disabled='true']),
  label[for],
  summary {
    cursor: pointer;
  }
  button:disabled,
  [aria-disabled='true'] {
    cursor: not-allowed;
  }

  /* الأرقام واللاتيني جوّه النص العربي */
  [dir="ltr"], .ltr { direction: ltr; unicode-bidi: embed; }

  /* اللفّ مستثنى من قاعدة تقليل الحركة العامّة لأنه مؤشّر حالة مش زينة */
  @media (prefers-reduced-motion: reduce) {
    .load-more.is-loading .load-more__ring { animation-duration: 1.6s !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
}

@layer components {
  /* الحاوية: الموقع المرجعي بيستخدم عرض كامل بهوامش 25px */
  .konte-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  @media (max-width: 767px) {
    :root { --gutter: 16px; }
  }


  /* ===== الأزرار — من ‎.button و‎.button.alt في الثيمة ===== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 32px;
    background: var(--color-ink);
    color: #fff;
    transition: 0.3s;
    border: 1px solid var(--color-ink);
  }
  .btn:hover { background: var(--color-brand); border-color: var(--color-brand); }
  .btn--alt {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
  }
  .btn--alt:hover { background: var(--color-ink); color: #fff; }
  .btn--light {
    background: #fff;
    color: var(--color-brand);
    border-color: #fff;
  }
  .btn--light:hover { background: transparent; color: #fff; border-color: #fff; }
  .btn--block { width: 100%; }

}

@layer utilities {
  .tnum { font-variant-numeric: tabular-nums; }
  .tracking-label { letter-spacing: 0.18em; }
}