/* ══════════════════════════════════════════════════════════════════════
   TELC B2 · طبقة الهوية البصرية الموحّدة
   ──────────────────────────────────────────────────────────────────────
   تُحمَّل في كل صفحات الموقع (بعد أي ملف CSS آخر) وتوحّد:
   الألوان · الخطوط · الحواف · الظلال · الانتقالات · التركيز · التجاوب.
   لا تحتوي على أي تنسيق خاص بصفحة واحدة — كل ما هنا عام.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── لوحة الألوان (مصدر واحد للحقيقة) ───────────────────────── */
  --tc-brand-600: #2563EB;
  --tc-brand-700: #1D4ED8;
  --tc-violet-600: #7C3AED;
  --tc-violet-500: #A855F7;
  --tc-grad: linear-gradient(135deg, var(--tc-brand-600), var(--tc-violet-600));
  --tc-grad-soft: linear-gradient(135deg, var(--tc-violet-600), var(--tc-violet-500));
  --tc-grad-dark: linear-gradient(115deg, rgb(0 13 44), rgb(11 17 32) 55%, rgb(35 30 83));

  --tc-ink: #111827;
  --tc-body: #374151;
  --tc-muted: #6B7280;
  --tc-line: #E5E7EB;
  --tc-surface: #FFFFFF;
  --tc-surface-2: #F8FAFC;

  --tc-ok: #16A34A;
  --tc-warn: #D97706;
  --tc-danger: #B91C1C;

  /* ── الحواف ───────────────────────────────────────────────── */
  --tc-r-sm: 12px;
  --tc-r-md: 16px;
  --tc-r-lg: 24px;
  --tc-r-pill: 999px;

  /* ── الظلال ───────────────────────────────────────────────── */
  --tc-sh-sm: 0 4px 14px rgba(15, 23, 42, .07);
  --tc-sh-md: 0 10px 34px rgba(15, 23, 42, .09);
  --tc-sh-lg: 0 24px 64px rgba(15, 23, 42, .14);
  --tc-sh-brand: 0 12px 30px rgba(37, 99, 235, .32);

  /* ── المسافات ─────────────────────────────────────────────── */
  --tc-gap-xs: 8px;
  --tc-gap-sm: 14px;
  --tc-gap-md: 22px;
  --tc-gap-lg: 36px;
  --tc-gap-xl: 64px;

  /* ── الحركة ───────────────────────────────────────────────── */
  --tc-ease: cubic-bezier(.4, 0, .2, 1);
  --tc-fast: .18s;
  --tc-base: .28s;

  /* ── الخط الموحّد: عربي Thmanyah + لاتيني Outfit ──────────── */
  --tc-font: 'Thmanyah Sans', 'Outfit', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: var(--tc-font);
}

/* توحيد الخط على كامل الموقع بما فيه صفحات التمارين.
   نستخدم !important لأن نظام التصميم في صفحات التمارين يُحمَّل بعد هذا الملف. */
html {
  --font-sans: var(--tc-font) !important;
}

html body,
html button,
html input,
html select,
html textarea,
html h1, html h2, html h3, html h4 {
  font-family: var(--tc-font) !important;
}

/* ── حلقة تركيز واحدة لكل العناصر التفاعلية (وصول أفضل) ────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tc-brand-600);
  outline-offset: 3px;
  border-radius: var(--tc-r-sm);
}

/* ── انتقالات موحّدة عند المرور والضغط ─────────────────────────── */
a,
button,
[role="button"] {
  transition:
    background-color var(--tc-base) var(--tc-ease),
    border-color var(--tc-base) var(--tc-ease),
    color var(--tc-base) var(--tc-ease),
    box-shadow var(--tc-base) var(--tc-ease),
    transform var(--tc-fast) var(--tc-ease);
}

button:active,
a.btn:active,
[role="button"]:active {
  transform: translateY(1px) scale(.985);
}

/* ── صور ووسائط لا تكسر التخطيط ────────────────────────────────── */
img,
svg,
video {
  max-width: 100%;
}

/* ── منع التمرير الأفقي غير المقصود على الجوال ─────────────────── */
html,
body {
  overflow-x: clip;
}

/* ── تجاوب: تصغير متدرّج للعناوين والمسافات ────────────────────── */
@media (max-width: 900px) {
  :root {
    --tc-gap-lg: 26px;
    --tc-gap-xl: 44px;
  }
}

@media (max-width: 640px) {
  :root {
    --tc-r-lg: 20px;
    --tc-gap-xl: 34px;
  }
}

/* ── احترام تفضيل تقليل الحركة ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   شريط أقسام الموقع داخل هيدر الصفحات (Lesen · Hören · Sprachbausteine · Schreiben)
   يعمل في الوضعين الفاتح والداكن لأنه يرث لون النص من الصفحة.
   ══════════════════════════════════════════════════════════════════════ */
.telcSiteNav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--tc-r-pill);
  background: rgba(125, 140, 170, .14);
  border: 1px solid rgba(125, 140, 170, .20);
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
  justify-content: center;
}
.telcSiteNav a {
  padding: 9px 16px;
  border-radius: var(--tc-r-pill);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  opacity: .82;
}
.telcSiteNav a:hover { opacity: 1; background: rgba(125, 140, 170, .18); color: inherit; }
.telcSiteNav a.on {
  background: var(--tc-grad);
  color: #fff;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .4);
}
@media (max-width: 760px) {
  .telcSiteNav a { padding: 8px 12px; font-size: 12.5px; }
}