/* =========================================================
   base.css — المتغيرات، إعادة الضبط، التيبوغرافيا، الشبكة
   شركة المروج الخضراء العريقة لصناعة الدقيق ومطاحن الأعلاف
   ========================================================= */

/* ---------- 1. المتغيرات (Design Tokens) ---------- */
:root {
  /* ---------------------------------------------------------
     الألوان — مأخوذة مباشرة من شعار الشركة:
     البنّي الداكن للإطار والخط، الأخضر المريمي للسنابل الجانبية،
     القمحي للسنابل الوسطى، والبيج الرمادي للترس.
     --------------------------------------------------------- */
  --c-brown: #2f0f06; /* لون الإطار في الشعار — اللون الأساسي */
  --c-brown-deep: #200a03; /* أغمق درجة — التذييل */
  --c-brown-soft: #57342a; /* درجة أفتح للتحويم */

  --c-sage: #5c857b; /* أخضر السنابل الجانبية */
  --c-sage-bright: #6e9b90;
  --c-sage-tint: #e6eeeb;
  --c-sage-wash: #f2f7f5;

  --c-gold: #a8873f; /* درجة أغمق من قمحي الشعار لتباين النص */
  --c-gold-bright: #cdb376; /* القمحي كما هو في الشعار */
  --c-gold-tint: #f7f0df;

  --c-taupe: #9c918a; /* بيج الترس */

  --c-ink: #2b1c15;
  --c-ink-soft: #6b5a51;
  --c-ink-faint: #9a8b82;

  --c-sand: #fbf8f3;
  --c-sand-deep: #f4efe5;
  --c-paper: #ffffff;
  --c-line: #e7dfd2;
  --c-line-soft: #f0eae0;

  /* أدوار الألوان */
  --bg: var(--c-sand);
  --surface: var(--c-paper);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-soft);
  --brand: var(--c-brown);
  --accent: var(--c-gold);

  /* التيبوغرافيا */
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'IBM Plex Sans Arabic', ui-monospace, monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1: clamp(1.19rem, 1.13rem + 0.31vw, 1.37rem);
  --step-2: clamp(1.42rem, 1.31rem + 0.53vw, 1.72rem);
  --step-3: clamp(1.69rem, 1.51rem + 0.87vw, 2.16rem);
  --step-4: clamp(2.01rem, 1.74rem + 1.36vw, 2.72rem);
  --step-5: clamp(2.4rem, 1.96rem + 2.2vw, 3.6rem);

  /* المسافات — سلّم متناسق */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* القياسات */
  --container: 74rem;
  --container-narrow: 52rem;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* الظلال — خفيفة جداً، تعتمد على الحدود لا على الضبابية */
  --shadow-sm: 0 1px 2px rgba(47, 15, 6, 0.05);
  --shadow: 0 4px 16px -6px rgba(47, 15, 6, 0.16);
  --shadow-lg: 0 18px 40px -22px rgba(47, 15, 6, 0.34);

  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --dur: 0.28s;

  --header-h: 4.75rem;
}

/* ---------- 2. إعادة الضبط ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-ar);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.85;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

img,
svg,
picture,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
svg {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 3. التيبوغرافيا ---------- */
h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-brown);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1.22;
}

h2 {
  font-size: var(--step-4);
  line-height: 1.28;
}

/* إلغاء تباعد الحروف (letter-spacing) في النصوص العربية على متصفحات أبل (Safari / WebKit) لمنع تفكك الحروف */
html[lang="ar"],
[dir="rtl"],
:lang(ar) {
  letter-spacing: normal;
}

[dir="rtl"] *,
:lang(ar) * {
  letter-spacing: normal !important;
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
  color: var(--c-brown);
}

/* الأرقام دائماً بالاتجاه اللاتيني حتى داخل نص عربي */
.num,
time,
[dir='ltr'] {
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--text-muted);
}

::selection {
  background: var(--c-brown);
  color: var(--c-sand);
}

/* ---------- 4. الحاويات والشبكة ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(var(--sp-8), 7vw, var(--sp-10));
}

.section--tight {
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-8));
}

.section--sand {
  background-color: var(--c-sand-deep);
}

.section--paper {
  background-color: var(--c-paper);
}

.section--dark {
  background-color: var(--c-brown);
  color: var(--c-sand);
}

/* قسم بالأخضر المريمي — يُستعمل للتنويع بين الأقسام الداكنة */
.section--sage {
  background-color: var(--c-sage);
  color: rgba(255, 255, 255, 0.9);
}

.section--dark h2,
.section--dark h3,
.section--sage h2,
.section--sage h3 {
  color: var(--c-paper);
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

/* ---------- 5. أدوات مساعدة ---------- */
.text-center {
  text-align: center;
}

.muted {
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-4);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  color: var(--c-paper);
  background: var(--c-brown);
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus-visible {
  inset-block-start: 0;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--c-sage-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- 6. الحركة ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 7. الطباعة على الورق ---------- */
@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}