/* ============================================================
   Base — reset + layout + header/footer (RTL أصيل)
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-base);
  direction: rtl;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-primary); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* تخطيط المحتوى + الشريط الجانبي */
.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-6);
  align-items: start;
  margin-block: var(--sp-6);
}
.layout__main { min-width: 0; }
.layout__side { position: sticky; top: var(--sp-4); }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .layout__side { position: static; }
}

/* شبكات البطاقات */
.grid { display: grid; gap: var(--gap); }
.grid--6 { grid-template-columns: repeat(3, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .grid--6, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--6, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* ===== Header ===== */
.site-header {
  background: var(--c-bg-2);
  border-bottom: 3px solid var(--c-primary);
  position: sticky; top: 0; z-index: 50;
}
.site-header__bar {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 130px;
  padding-block: var(--sp-2);
}
.site-logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-2xl); color: var(--c-text);
  line-height: 1;
}
.site-logo span { color: var(--c-primary); }
.site-logo img { max-height: 110px !important; width: auto; display: block; }
.site-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-inline-start: auto; }
.site-nav a {
  font-weight: 700; font-size: var(--fs-sm); color: var(--c-text-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--c-on-primary);
  background: var(--c-primary);
  border-color: var(--c-primary);
  transform: translateY(-1px);
}

.theme-toggle {
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 50%;
  width: 38px; height: 38px; cursor: pointer; font-size: 1rem;
  display: grid; place-items: center;
}
.nav-toggle { display: none; background: none; border: 0; color: var(--c-text); font-size: 1.5rem; cursor: pointer; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    background: var(--c-bg-2); flex-direction: column; padding: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
  }
  .site-nav.is-open { display: flex; }
}

/* ===== Footer ===== */
.site-footer {
  background: var(--c-bg-2);
  border-top: 3px solid var(--c-primary);
  margin-top: var(--sp-8);
  padding-block: var(--sp-6);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.site-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* أدوات */
.skip-link { position: absolute; right: -999px; }
.skip-link:focus { right: var(--sp-4); top: var(--sp-2); z-index: 100; background: var(--c-primary); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }